react-native ट्यूटोरियल
प्रतिक्रिया-मूल के साथ शुरुआत करना

टिप्पणियों

मैक के लिए सेटअप

पैकेज प्रबंधक Homebrew brew स्थापित करना

एक टर्मिनल प्रॉम्प्ट पर चिपकाएँ।

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Xcode IDE इंस्टॉल करना

नीचे दिए गए लिंक का उपयोग करके इसे डाउनलोड करें या मैक ऐप स्टोर पर ढूंढें

https://developer.apple.com/download/

नोट: यदि आप Xcode-beta.app Xcode.app का उत्पादन संस्करण के साथ स्थापित है, तो सुनिश्चित करें कि आप का उत्पादन संस्करण उपयोग कर रहे हैं xcodebuild उपकरण। आप इसे इसके साथ सेट कर सकते हैं:

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/

Android वातावरण स्थापित करना

• गित git

  * यदि आपने XCode स्थापित किया है, तो Git पहले से स्थापित है, अन्यथा निम्नलिखित चलाएँ

  brew install git 
  

• नवीनतम JDK

• Android स्टूडियो

  एक कस्टम स्थापना चुनें

  

  प्रदर्शन और Android वर्चुअल डिवाइस दोनों चुनें

  

  स्थापना के बाद, एंड्रॉइड स्टूडियो स्वागत विंडो से कॉन्फ़िगर -> एसडीके प्रबंधक चुनें।

  

  SDK प्लेटफ़ॉर्म विंडो में, Show Package Details और Android 6.0 (Marshmallow) के तहत चुनें, सुनिश्चित करें कि Google API, Intel x86 Atom System Image, Intel x86 Atom_64 System Image और Google API Intel x86 Atom_64 System Image की जाँच की गई है।

  

  एसडीके टूल विंडो में, शो पैकेज विवरण चुनें और एंड्रॉइड एसडीके बिल्ड टूल्स के तहत, सुनिश्चित करें कि एंड्रॉइड एसडीके बिल्ड-टूल्स 23.0.1 चुना गया है।

  

• पर्यावरण परिवर्तनीय ANDROID_HOME

  अपने मौजूदा Android SDK पर ANDROID_HOME पर्यावरण चर बिंदुओं को सुनिश्चित करें। ऐसा करने के लिए, इसे अपने ~ / .bashrc, ~ / .bash_profile (या जो भी आपका शेल उपयोग करता है) में जोड़ें और अपने टर्मिनल को फिर से खोलें:

  यदि आपने एंड्रॉइड स्टूडियो के बिना एसडीके स्थापित किया है, तो यह कुछ इस तरह हो सकता है: / usr / स्थानीय / ऑप्ट / एंड्रॉइड-एसडीके

  export ANDROID_HOME=~/Library/Android/sdk
  

मैक के लिए निर्भरताएँ

आपको एंड्रॉइड, नोड.जेएस, रिएक्ट नेटिव कमांड लाइन टूल और वॉचमैन के लिए आईओएस और एंड्रॉइड स्टूडियो के लिए एक्सकोड की आवश्यकता होगी।

हम Homebrew के माध्यम से नोड और चौकीदार स्थापित करने की सलाह देते हैं।

brew install node
brew install watchman

वॉचमैन फेसबुक द्वारा फाइल सिस्टम में बदलाव देखने का एक उपकरण है। यह अत्यधिक अनुशंसित है कि आप इसे बेहतर प्रदर्शन के लिए स्थापित करें। यह वैकल्पिक है।

नोड एनपीएम के साथ आता है, जो आपको रिएक्ट नेटिव कमांड लाइन इंटरफेस स्थापित करने देता है।

npm install -g react-native-cli

यदि आपको अनुमति त्रुटि मिलती है, तो sudo के साथ प्रयास करें:

sudo npm install -g react-native-cli.

IOS के लिए Xcode इंस्टॉल करने का सबसे आसान तरीका मैक ऐप स्टोर है। और एंड्रॉइड स्टूडियो के लिए एंड्रॉइड डाउनलोड और इंस्टॉल करें।

यदि आप जावा कोड में बदलाव करने की योजना बना रहे हैं, तो हम ग्रैडल डेमन को सलाह देते हैं जो बिल्ड को गति देता है।

अपने प्रतिक्रियाशील मूल संस्थापन का परीक्षण करना

एक नया रिएक्ट नेटिव प्रोजेक्ट बनाने के लिए रिएक्ट नेटिव कमांड लाइन टूल्स का उपयोग करें, जिसे "AwesomeProject" कहा जाता है, फिर नए बनाए गए फ़ोल्डर के अंदर प्रतिक्रिया-मूल रन-आईओएस चलाएं।

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

आपको जल्द ही अपने नए ऐप को आईओएस सिम्युलेटर में देखना चाहिए। प्रतिक्रिया-देशी रन-आईओएस आपके ऐप को चलाने का सिर्फ एक तरीका है - आप इसे सीधे Xcode या Nuclide से भी चला सकते हैं।

अपने एप्लिकेशन को संशोधित करना

अब जब आप सफलतापूर्वक ऐप चला चुके हैं, तो इसे संशोधित करें।

• अपनी पसंद के टेक्स्ट एडिटर में index.ios.js या index.android.js खोलें और कुछ पंक्तियों को संपादित करें।
• एप्लिकेशन को फिर से लोड करने और अपना परिवर्तन देखने के लिए अपने iOS सिम्युलेटर में कमांडो + आर मारो! बस!

बधाई हो! आपने अपना पहला रिएक्टिव नेटिव ऐप सफलतापूर्वक चलाया और संशोधित किया है।

_{स्रोत: आरंभ करना - प्रतिक्रिया-मूल}

विंडोज के लिए सेटअप

नोट: आप विंडोज़ पर iOS के लिए प्रतिक्रिया-मूल ऐप्स विकसित नहीं कर सकते हैं, केवल प्रतिक्रिया-मूल Android ऐप्स ही हैं।

विंडोज़ पर प्रतिक्रिया-मूल के लिए आधिकारिक सेटअप डॉक्स यहां देखे जा सकते हैं । यदि आपको अधिक जानकारी की आवश्यकता है, तो यहां एक दानेदार गाइड है ।

उपकरण / पर्यावरण

• विंडोज 10
• कमांड लाइन टूल (जैसे Powershell या windows कमांड लाइन)
• Chocolatey ( PowerShell के माध्यम से सेटअप करने के लिए कदम )
• JDK (संस्करण 8)
• Android स्टूडियो
• वर्चुअलाइजेशन तकनीक वाली एक इंटेल मशीन HAXM के लिए सक्षम (वैकल्पिक, केवल तभी आवश्यक है जब आप एमुलेटर का उपयोग करना चाहते हैं)

1) देशी विकास प्रतिक्रिया के लिए अपनी मशीन सेटअप करें

कमांड लाइन को प्रशासक के रूप में शुरू करें निम्नलिखित कमांड चलाएं:

choco install nodejs.install
choco install python2

एक व्यवस्थापक के रूप में कमांड लाइन को पुनरारंभ करें ताकि आप npm चला सकें

npm install -g react-native-cli

अंतिम कमांड को चलाने के बाद उस डायरेक्टरी को कॉपी करें जिसमें प्रतिक्रिया-मूल स्थापित किया गया था। आपको इसके लिए चरण 4 की आवश्यकता होगी। मैंने एक मामले में दो कंप्यूटरों पर यह कोशिश की थी: C:\Program Files (x86)\Nodist\v-x64\6.2.2 । अन्य में यह था: C:\Users\admin\AppData\Roaming\npm

2) अपने पर्यावरण चर सेट करें

इस सेक्शन के लिए स्टेप बाई स्टेप गाइड विथ इमेजेज यहाँ देखे जा सकते हैं।

निम्न पर नेविगेट करके पर्यावरण चर विंडो खोलें:

[राइट क्लिक] "प्रारंभ" मेनू -> सिस्टम -> उन्नत सिस्टम सेटिंग्स -> पर्यावरण चर

नीचे अनुभाग में "पथ" सिस्टम वेरिएबल को ढूंढें और उस स्थान को जोड़ें जो प्रतिक्रिया-मूल को चरण 1 में स्थापित किया गया था।

यदि आपने ANDROID_HOME पर्यावरण वैरिएबल नहीं जोड़ा है तो आपको यहां भी ऐसा करना होगा। "एन्वायरमेंट वेरिएबल्स" विंडो में रहते हुए भी, "ANDROID_HOME" नाम के साथ एक नया सिस्टम वैरिएबल जोड़ें और अपने एंड्रॉइड sdk के पथ के रूप में मान लें।

फिर कमांड लाइन को एक व्यवस्थापक के रूप में पुनरारंभ करें ताकि आप इसमें प्रतिक्रिया-मूल कमांड चला सकें।

3) अपना प्रोजेक्ट बनाएं कमांड लाइन में, उस फ़ोल्डर पर नेविगेट करें जिसे आप अपनी परियोजना को रखना चाहते हैं और निम्नलिखित कमांड को चलाएं:

react-native init ProjectName

4) अपनी परियोजना को चलाएं एंड्रॉइड स्टूडियो से एक एमुलेटर शुरू करें कमांड लाइन में अपनी परियोजना की मूल निर्देशिका पर नेविगेट करें और इसे चलाएं:

cd ProjectName
react-native run-android

आप निर्भरता के मुद्दों में भाग सकते हैं। उदाहरण के लिए, एक त्रुटि हो सकती है कि आपके पास सही बिल्ड टूल संस्करण नहीं है। इसे ठीक करने के लिए आपको एंड्रॉइड स्टूडियो में एसडीके प्रबंधक खोलना होगा और वहां से बिल्ड टूल डाउनलोड करना होगा।

बधाई!

Ui ताज़ा करने के लिए आप भी दबा सकते हैं r एमुलेटर में और एप्लिकेशन चल रहा है, जबकि दो बार कुंजी। डेवलपर विकल्प देखने के लिए आप ctrl + m दबा सकते हैं।

लिनक्स (उबंटू) के लिए सेटअप

1) सेटअप नोड.जेएस

टर्मिनल शुरू करें और नोडज स्थापित करने के लिए निम्न कमांड चलाएं:

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

यदि नोड कमांड अनुपलब्ध है

sudo ln -s /usr/bin/nodejs /usr/bin/node

अल्टरनेटिव्स नोडजेएस इंस्टेंसेस:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

या

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

जाँच करें कि क्या आपके पास वर्तमान संस्करण है

node -v 

प्रतिक्रिया-मूल स्थापित करने के लिए npm चलाएँ

sudo npm install -g react-native-cli

2) सेटअप जावा

sudo apt-get install lib32stdc++6 lib32z1 openjdk-7-jdk

3) सेटअप एंड्रॉइड स्टूडियो:

एंड्रॉइड एसडीके या एंड्रॉइड स्टूडियो

http://developer.android.com/sdk/index.html

Android SDK e ENV

export ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDK
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

4) सेटअप एमुलेटर:

टर्मिनल पर कमांड चलाते हैं

android

एसडीके प्रबंधक के भीतर से "एसडीके प्लेटफॉर्म" चुनें और आपको "एंड्रॉइड 7.0 (नौगाट)" के बगल में एक नीला चेकमार्क देखना चाहिए। यदि ऐसा नहीं है, तो चेकबॉक्स पर क्लिक करें और फिर "लागू करें"।

5) एक परियोजना शुरू करें

उदाहरण ऐप इनिट

react-native init ReactNativeDemo && cd ReactNativeDemo

अवलोकन: हमेशा जांचें कि android/app/build.gradle पर संस्करण आपके Android SDK पर डाउनलोड किए गए बिल्ड टूल के समान है या नहीं

android {
    compileSdkVersion XX
    buildToolsVersion "XX.X.X"
...

6) प्रोजेक्ट को चलाएं

वर्चुअल एंड्रॉइड सेट करने के लिए Android AVD खोलें। कमांड लाइन निष्पादित करें:

android avd

वर्चुअल डिवाइस बनाने और इसे शुरू करने के लिए निर्देशों का पालन करें

एक और टर्मिनल खोलें और कमांड लाइन चलाएं:

react-native run-android
react-native start