रिएक्टिव नेटिव के साथ शुरुआत करना

अपने ऐप को स्क्रैच से सेट करने के लिए एक छोटा गाइड

Aphinya Dechalert द्वारा छवि

प्रतिक्रियाशील मूल निवासी क्रॉस-प्लेटफॉर्म मूल अनुप्रयोग विकास की दुनिया में लहरें बना रहा है। विभिन्न स्थानों पर इसका उत्पादन स्तर पर उपयोग किया जा रहा है - डिस्कार्ड (अपने आईओएस ऐप के लिए), उबेर ईट्स, ब्लूमबर्ग और इंस्टाग्राम व्यावसायिक कार्यान्वयन के लिए मुख्य उदाहरण हैं।

2015 में वापस लौटे, रिएक्ट नेटिव रिएक्ट से कोडिंग सिद्धांतों को उधार लेता है। रिएक्ट के विपरीत, जो ब्राउज़र में वर्चुअल डोम के माध्यम से डोम में हेरफेर करने के लिए चलता है, रिएक्ट नेटिव डिवाइस की पृष्ठभूमि में चलता है और जावास्क्रिप्ट की व्याख्या करने के लिए देशी प्लेटफॉर्म के साथ काम करता है।

React Native के कोड में HTML जैसा सिंटैक्स हो सकता है, लेकिन यह वास्तव में HTML का उपयोग नहीं करता है। बल्कि, यह उपकरण की मूल आवश्यकताओं के आधार पर विचारों को बनाने और हेरफेर करने के लिए दुभाषिया का उपयोग करता है।

इस गाइड में, मैं एंड्रॉइड मशीन के लिए स्क्रैच से एक नंगे हड्डियों रिएक्ट नेटिव ऐप को स्थापित करने का तरीका बताऊंगा। मेरे पास व्यक्तिगत रूप से iPhone या iPad नहीं है, लेकिन मैंने जो देखा है, वह कार्यप्रणाली लगभग समान है।

लेकिन पहले, क्या वास्तव में प्रतिक्रियाशील मूल है?

यह वह हिस्सा है जो कई डेवलपर्स रिएक्ट में आते हैं, सामान्य तौर पर, भ्रमित होते हैं। हम जानते हैं कि React Native React.js का उपयोग करता है - लेकिन किस हद तक?

React.js के बारे में बात यह एकल स्टैंड-अलोन जावास्क्रिप्ट लाइब्रेरी है जिसका उपयोग उपयोगकर्ता इंटरफेस के निर्माण के लिए किया जाता है। सामान्य परिस्थितियों में, कई डेवलपर्स वेब-विकास के संदर्भ में React.js के बारे में सीखते हैं।

कई लोगों को एहसास नहीं होता है कि एक और अलग लाइब्रेरी है, जिसे ReactDOM कहा जाता है, जो React.js में वेब सपोर्ट जोड़ता है। इसका कारण यह है कि React.js स्वयं प्लेटफ़ॉर्म-अज्ञेयवादी है। यह वास्तव में एक पुस्तकालय है जो घटक पेड़ों का निर्माण करता है जो वेब या मोबाइल जैसे किसी विशेष प्लेटफॉर्म के लिए ब्रिजिंग लाइब्रेरी द्वारा उपयोग किए जाते हैं।

React Native के संदर्भ में, आपके पास React.js हिस्सा है और क्रॉस-प्लेटफॉर्म मूल-एप्लिकेशन को संभव बनाने के लिए Native हिस्सा है।

तो आप एक रिएक्टिव नेटिव ऐप कैसे सेट करते हैं?

जब रिएक्ट नेटिव की स्थापना की बात आती है, तो आपके पास दो विकल्प होते हैं: एक्सपो सीएलआई क्विकस्टार्ट या रिएक्ट नेटिव सीएलआई क्विकस्टार्ट।

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

एक्सपो एक नि: शुल्क तृतीय-पक्ष सेवा है और प्रतिक्रिया मूल निवासी एप्लिकेशन विकास की जटिलता को दूर करता है। हालाँकि, जब आप एक्सपो का उपयोग कर रहे हैं, तो आप एक्सपो पारिस्थितिकी तंत्र के समर्थन तक सीमित हैं। ऐसा इसलिए है क्योंकि एक्सपो आपके रिएक्टिव नेटिव ऐप के आसपास एक रैपर की तरह है।

सामान्य प्रतिक्रिया मूल निवासी सीएलआई प्रवाह के तहत, आपके पास नंगे हड्डियां हैं। इसका मतलब है कि आपको सिमुलेटर चलाने के लिए एंड्रॉइड स्टूडियो और XCode (जो कि आपके पास मैक नहीं है, तो असंभव है) को मैन्युअल रूप से इंस्टॉल करना होगा।

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

यह नोट करने के लिए अच्छा है कि आपके पास हमेशा भविष्य में एक्सपो से बाहर स्विच करने का विकल्प हो, यदि आवश्यक हो। यदि आप इसे शुरू करने के लिए चुनते हैं तो आप एक्सपो में पूरी तरह से बंद नहीं हैं।

मुझ से अलग - यहाँ कैसे खरोंच से प्रतिक्रिया मूल स्थापित करने के लिए कदम हैं।

1. NodeJS डाउनलोड करें

यदि आपके पास पहले से ही NodeJS नहीं है, तो आपको इसकी आवश्यकता होगी।

NodeJS एक रन-टाइम वातावरण है जो आपको किसी विशेष सिस्टम पर जावास्क्रिप्ट निष्पादित करने देता है। React.js और React Native जावास्क्रिप्ट पर चलते हैं, साथ ही React Native वह चीज है जो मोबाइल ऐप्स के लिए आवश्यक देशी कोड उत्पन्न करता है।

NodeJS प्राप्त करना बहुत सरल है। बस वेबसाइट पर जाएं, डाउनलोड बटन दबाएं, और इंस्टॉलर चलाएं।

2. सीएलआई प्राप्त करें

एक्सपो तक पहुंचने के लिए, आपको एक्सपो पर एनपीएम इंस्टॉल करने की आवश्यकता होगी।

यह हिस्सा बहुत सीधा है। आदेश बस है:

npm एक्सपो-क्ली --global स्थापित करें

इसमें बहुत कुछ नहीं है, और आपको इस चरण के दौरान कोई त्रुटि नहीं मिलनी चाहिए।

3. परियोजना को बूट करें

इस चरण में, एक्सपो सेट करने के लिए निम्न कमांड का उपयोग करें।

एक्सपो इन-प्रोजेक्ट-नेम-नेम

यह आपसे पूछेगा कि किस टेम्पलेट का उपयोग करना है। आप खाली टेम्पलेट के साथ शुरू कर सकते हैं। यदि आप नंगे-न्यूनतम विकल्प चुनते हैं, तो यह बिना एक्सपो के आपके रिएक्टिव नेटिव ऐप को स्थापित करेगा।

जब आप एंट्री मारते हैं, तो यह आपसे एक नाम पूछ सकता है और ऐप के लिए स्लग कर सकता है, जिसे आप लाइन में अभी या बाद में डिफॉल्ट में बदल सकते हैं।

हिट फिर से दर्ज करें, और यह आपसे पूछ सकता है कि क्या आप निर्भरता स्थापित करने के लिए यार्न का उपयोग करना चाहते हैं। लेकिन यह केवल तभी होगा जब आप यार्न को अपनी मशीन पर स्थापित करेंगे। यदि आप नहीं चुनते हैं, तो यह निर्भरता स्थापित करने के लिए npm का उपयोग करेगा।

एक बार पूरा हो जाने के बाद, उत्पन्न फ़ोल्डर में सीडी और इसे चलाने के लिए कमांड एक्सपो का उपयोग करें।

सीडी नई परियोजना-नाम-यहाँ एक्सपो शुरू

सिद्धांत रूप में, यह आपके एक्सपो ऐप को बिना किसी समस्या के शुरू करना चाहिए। हालाँकि, यदि आप किसी समस्या में भाग लेते हैं, तो नीचे कुछ सामान्य चीजें हैं जो हो सकती हैं और उन्हें कैसे ठीक किया जाए।

आम एक्सपो मुद्दों को डीबग करना:

इंटूप की आवश्यकता है, लेकिन एक्सपो सीएलआई गैर-संवादात्मक मोड में है

जब यह संदेश दिखाई देता है, तो इसका मतलब है कि शायद आप Git Bash का उपयोग कर रहे हैं, जो इसे पसंद नहीं करता है जब आप इस पर एक्सपो कमांड चलाने की कोशिश करते हैं। इसके बजाय cmd का उपयोग करने का प्रयास करें।

ऐसा इसलिए होता है क्योंकि Git Bash एक TTY नहीं है, जो कि एक टेक्स्ट-टाइप केवल कमांड-लाइन इंटरफ़ेस है, और एक्सपो को काम करने के लिए TTY cmd की आवश्यकता होती है।

एक्सपो-क्ली का एक नया संस्करण उपलब्ध है

जब यह संदेश दिखाई देता है, तो इसका मतलब है कि आपको अपने एक्सपो-क्ली को अपग्रेड करने की आवश्यकता है। यह तब हो सकता है यदि आपने एक्सपो पहले स्थापित किया है और थोड़ी देर में इसके साथ नहीं खेला है। अपने एक्सपो सीएलआई को अपडेट करने के लिए, नवीनतम संस्करण प्राप्त करने के लिए npm इंस्टॉल -g एक्सपो-क्ली का उपयोग करें।

4. चलाने के लिए चीजें प्राप्त करना

सीधे अपने मोबाइल पर अपने प्रोजेक्ट का पूर्वावलोकन करने के लिए, एक्सपो स्टार्ट चलाएं।

यह आपको आईओएस या एंड्रॉइड ऐप (ऐप्पल / प्ले स्टोर से डाउनलोड करने योग्य) का उपयोग करके अपने मोबाइल फोन के साथ स्कैन करने के लिए स्क्रीन पर एक क्यूआर कोड देगा।

यह QR कोड एक सुरंग के रूप में कार्य करता है, जो आपके द्वारा अपने कोड में किए गए किसी भी परिवर्तन को स्वचालित रूप से संकलित करता है, जिससे आपको तुरंत और स्वचालित फीडबैक मिलता है।

आम एक्सपो मुद्दों को डीबग करना:

एक्सपो शुरू होता है लेकिन तुरंत क्रैश हो जाता है

यह वह समस्या है जिसका मैंने व्यक्तिगत रूप से सामना किया था जब मैंने पहली बार एक्सपो का उपयोग शुरू किया था। यह डिबग करने के लिए काफी निराशाजनक हो सकता है। यदि ऐसा होता है, तो अपने NodeJS को अपग्रेड करने का प्रयास करें। वर्तमान में, मैं N11JS और 3.11.7 पर एक्सपो-क्ली के लिए v6.12.1 चला रहा हूं।

Windows मशीन पर NodeJS को डाउनग्रेड करने के लिए, आपको इसे अनइंस्टॉल करने की आवश्यकता होगी, https://nodejs.org/dist/ पर जाएं, जिस संस्करण की आपको आवश्यकता है, उसे डाउनलोड करें और इसे फिर से इंस्टॉल करें।

क्यूआर कोड स्कैनिंग नहीं

आपने अपने फ़ोन के कैमरे को अपनी स्क्रीन के ठीक सामने रखा है, और कुछ भी नहीं हो रहा है। कभी-कभी, कैमरा थोड़ा फंकी होता है और इसे काम करने के लिए थोड़ी सी मूवमेंट की जरूरत होती है।

अंतिम विचार

और यह मूल रूप से खरोंच से प्रतिक्रियाशील मूल स्थापित करने के लिए है।

शुरू करने के लिए बहुत कुछ नहीं है।

अगला कदम यह पता लगा रहा है कि वास्तव में रिएक्ट मूल में कोड कैसे है। यदि आपको प्रतिक्रिया में कोई पृष्ठभूमि मिली है, तो आप पहले से ही आधे रास्ते में हैं - लेकिन React.js का ज्ञान होना एक बड़ी शर्त नहीं है।

यदि आप जावास्क्रिप्ट में एक मजबूत पृष्ठभूमि रखते हैं तो आप बेहतर हैं - क्योंकि यही प्रतिक्रिया और प्रतिक्रिया मूल रूप से अनिवार्य है, बस सामान्य से थोड़ा अलग कपड़े पहने हुए हैं।