प्रतिक्रिया मूल पर आवेदन पत्र बनाने के लिए सिफारिशें। भाग 1

शुभ दोपहर, खाबरोवस्क निवासी। आज हम आपके साथ एक लेख का अनुवाद साझा कर रहे हैं, जिसका अनुवाद विशेष रूप से ReactJS / रिएक्ट नेटिव-डेवलपर पाठ्यक्रम के पहले रन के लिए तैयार किया गया था। अच्छी पढाई हो।

---

यदि आप रिएक्टिव नेटिव दुनिया में नए हैं, तो आप जानते हैं कि इसमें कुछ नुकसान हैं जिनसे आप बचना चाहेंगे। कुछ मामलों में, आपको थोड़ा सा विचार किए बिना अग्रिम में एक विकल्प बनाना होगा कि यह कैसे या क्या प्रभावित करेगा।

नीचे मैंने अपने व्यक्तिगत अनुभव से सर्वश्रेष्ठ व्यावहारिक युक्तियों की एक सूची तैयार की है जो मुझे आशा है कि आपके लिए उपयोगी होंगे :)

एक्सपो-किट का उपयोग केवल तभी करें जब आप वास्तव में जानते हैं कि आप क्या कर रहे हैं।

एक्सपो रिएक्टिव नेटिव के लिए एक फ्री ओपन सोर्स टूल है। यह संभव है कि यह रिएक्ट नेटिव पर एप्लिकेशन बनाने के लिए उपकरणों का सबसे अच्छा सेट है, हालांकि, इसकी सीमाएं भी हैं।

एक्सपो का उपयोग करें:

• यदि आप केवल एक सैंडबॉक्स बनाना चाहते हैं, तो अपने आवेदन के लिए एक रिपॉजिटरी न बनाएं। बस एक नया एप्लिकेशन बनाइए, जो रिएक्ट-रीजन-ऐप-ऐप पैकेज का उपयोग कर रहा है।
• यदि आपने एक एप्लिकेशन बनाने से पहले शोध किया है और महसूस किया है कि इसकी सभी जरूरतों को उन समाधानों द्वारा कवर किया जा सकता है जो एक्सपो प्रदान करता है।
• यदि आपके पास मैक ओएस कंप्यूटर नहीं है, लेकिन आप अभी भी iPhone एप्लिकेशन बनाना चाहते हैं। यह IPA निष्पादक बनाने के लिए एकमात्र विकल्प है।

एक्सपो का उपयोग न करें:

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

सामान्य तौर पर, मुझे लगता है कि एक्सपो एक महान उपकरण है, और मैं रिएक्ट नेटिव कोड साझा करने के लिए एक्सपो स्नैक का उपयोग करता हूं। हालांकि, फिलहाल यह केवल कुछ प्रकार के एप्लिकेशन बनाने के लिए उपयोगी हो सकता है।

अपने एप्लिकेशन की फ़ोल्डर और फ़ाइलों को कैसे संरचना करें

React Native पर एप्लिकेशन का आयोजन करना React पर एप्लिकेशन को व्यवस्थित करने से अलग नहीं है। इसलिए, यदि आप इससे परिचित हैं, तो बस उसी तर्क का पालन करें। हालाँकि, यदि यह मामला नहीं है, तो नीचे उल्लिखित तर्क काम आएगा:

• फ़ोल्डर को रूट में जोड़ें और इसे "ऐप" नाम दें;
• "एप्लिकेशन" के अंदर फ़ोल्डर बनाएं:

assets - इसके अंदर मेरे पास फोंट, आइकन और छवियों के साथ तीन फ़ोल्डर हैं।

components - यहां आप सभी साझा किए गए रिएक्ट घटकों को जगह देंगे। आमतौर पर ये ऐसे घटक होते हैं जिन्हें हम "डमी" कहते हैं, क्योंकि उनके पास राज्य तर्क नहीं है और आसानी से आवेदन के अंदर पुन: उपयोग किया जा सकता है।

views - ये हमारी एप्लिकेशन स्क्रीन हैं, जिनके साथ हम एक से दूसरे में जाते हैं। रिएक्ट घटक भी यहां संग्रहीत किए जाते हैं, जिन्हें हम कंटेनर कहते हैं, क्योंकि वे अपने स्वयं के राज्य को संग्रहीत करते हैं।

modules - ऐसे हिस्से जिनके पास एक समान दृश्य नहीं है (JCX) वहां संग्रहीत हैं। विशिष्ट उदाहरण रंग मॉड्यूल हैं (सभी एप्लिकेशन रंग शामिल हैं) और बर्तन मॉड्यूल (इसमें उपयोगिता कार्य शामिल हैं जिनका पुन: उपयोग किया जा सकता है)।

services - यहाँ वो कार्य हैं जो एपीआई कॉल को लपेटते हैं।

i18n - अनुवाद विभिन्न भाषाओं और स्थानों वाले उपयोगकर्ताओं के लिए यहां संग्रहीत है।

सभी अनुप्रयोगों को एक निश्चित प्रकार के कॉन्फ़िगरेशन की आवश्यकता होती है, इसलिए मैं आमतौर पर config.js नामक एक फ़ाइल बनाता हूं और इसे वहां संग्रहीत करता हूं। यदि कॉन्फ़िगरेशन फ़ाइल में बहुत अधिक लाइनें हैं, तो आप एक अलग config फ़ोल्डर बना सकते हैं और इसे कई फ़ाइलों में विभाजित कर सकते हैं।

यदि आपके पास राज्य प्रबंधन पुस्तकालय है, तो आपको इसके घटकों के लिए फ़ोल्डर्स की भी आवश्यकता होगी। Redux के मामले में, 2 या अधिक फ़ोल्डरों का उपयोग किया जाता है, एक actions और एक reducers । यदि आप बाहरी पैकेज का उपयोग नहीं करते हैं और प्रतिक्रिया संदर्भ एपीआई का उपयोग करना पसंद करते हैं, तो आप अपने स्वयं के प्रदाता बना सकते हैं, जिसे मॉड्यूल फ़ोल्डर में या नए providers फ़ोल्डर में रखा जा सकता है।

हम आपकी आवश्यकताओं के अनुसार नेविगेशन लाइब्रेरी का चयन करते हैं

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

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

स्पेंसर कार्ली ने रिएक्ट नेटिव दुनिया में एक बढ़िया काम किया है और वर्तमान नेविगेशन विकल्पों को विकसित किया है, आप इस विषय पर उनका लेख पढ़ सकते हैं। सबसे लोकप्रिय समाधान अब एक जावास्क्रिप्ट समाधान के रूप में रिएक्ट नेविगेशन , और एक मूल समाधान के रूप में रिएक्टिव नेटिव नेविगेशन हैं।

सुविधा के लिए, CSS-in-JS आवरण लाइब्रेरी का उपयोग करें

React Native में, CSS जावास्क्रिप्ट में लिखा गया है। यहां हमारे पास कोई विकल्प नहीं है। व्यक्तिगत रूप से, शुद्ध जावास्क्रिप्ट में स्टाइलशीट.क्रिट विधि और सीएसएस कोड का उपयोग करने के बजाय, मैं स्टाइल घटक घटकों का उपयोग करता हूं। स्टाइल वाले घटक सीएसएस को फिर से स्पष्ट करते हैं और JSX को अधिक अर्थपूर्ण बनाते हैं।

मैंने हाल ही में एक लेख लिखा था कि मैं क्यों प्रतिक्रियाशील मूल अनुप्रयोगों में स्टाइल घटकों का उपयोग करना पसंद करता हूं, आप इस विषय को बेहतर ढंग से समझने के लिए पढ़ सकते हैं।

अग्रिम में तय करें कि आप अपने आवेदन को विभिन्न स्क्रीन आकारों के साथ विभिन्न उपकरणों पर कैसे स्केल करना चाहते हैं।

सबसे अधिक संभावना है, आप एक से अधिक डिवाइस और स्क्रीन आकार के लिए एक एप्लिकेशन विकसित कर रहे हैं। अब डिजाइन और अनुप्रयोग विकास के दो दृष्टिकोण हैं।

आप स्क्रीन के आकार के आधार पर एक अलग UX / UI का विकल्प चुन सकते हैं। अधिकांश प्रकार के अनुप्रयोगों के लिए, यह संभवतः सबसे अच्छा विकल्प है, लेकिन इसके लिए बहुत अधिक प्रयास की आवश्यकता होती है, क्योंकि आपको अन्य स्क्रीन विकल्पों के साथ आने और लागू करने की आवश्यकता होती है। आयाम एपीआई का उपयोग करके स्क्रीन आकार निर्धारित किया जा सकता है । दूसरी ओर, आप एक तृतीय-पक्ष पैकेज का उपयोग कर सकते हैं जो बॉक्स से बाहर कुछ उपकरण प्रदान करता है, जैसे कि रिएक्टिव नेटिव रिस्पॉन्सिबल यूआई ।

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

अस्वीकरण: मैं प्रतिक्रियाशील मूल उत्तरदायी स्क्रीन पैकेज का निर्माता हूं।

एनीमेशन से सावधान रहें

मोबाइल एप्लिकेशन के लिए एनिमेशन महत्वपूर्ण है, लेकिन रिएक्ट नेटिव का प्रदर्शन खराब है।

त्रुटियों से बचाने के लिए, आपको डिवाइस पर एनीमेशन का परीक्षण करने की आवश्यकता है, क्योंकि एमुलेटर सही प्रतिक्रिया प्रदान नहीं करता है। आपको जहाँ कहीं भी संभव हो, का उपयोग करने की जरूरत useNativeDriver (सच के साथ), क्योंकि इससे बेहतर प्रदर्शन प्राप्त करने में मदद मिलेगी।

यदि आप बेहतर प्रदर्शन प्राप्त करने के बारे में अधिक सुझाव चाहते हैं, तो मेरे पिछले लेख पर एक नज़र डालें।

यह भी याद रखें

1. प्रतिक्रियाशील मूल में कोई DOM तत्व नहीं है। इसके बजाय, हम मूल तत्वों के साथ काम करते हैं।
2. CSS के बारे में:
   
   
   • सभी सुविधाएँ समर्थित नहीं हैं, कम से कम अभी तक नहीं। अधिक जानने के लिए, दस्तावेज़ीकरण देखें : शैली गुण, छवि शैली गुण, पाठ शैली गुण देखें।
   • शॉर्टहैंड गुण हमेशा अच्छी तरह से काम नहीं करते हैं, इसलिए विशिष्ट लोगों का उपयोग करना बेहतर होता है (जैसे मार्जिन-बॉटम, मार्जिन-टॉप, मार्जिन-लेफ्ट, मार्जिन-राइट के बजाय मार्जिन)।
   • सभी गुण प्रतिशत का समर्थन नहीं करते हैं। उदाहरण के लिए, निम्नलिखित: मार्जिन, सीमा-चौड़ाई और सीमा-त्रिज्या। यदि कोई प्रतिशत मूल्यों का उपयोग करने की कोशिश करता है, तो या तो आरएन उन्हें अनदेखा करेगा, या एप्लिकेशन सिद्धांत रूप में क्रैश हो जाएगा।
   • RN बॉक्स से फ्लेक्स का समर्थन करता है। इसका परीक्षण करें और उचित होने पर उपयोग करें। यह सबसे अच्छा CSS सहयोगी है!

वह सब है। यहाँ पाठ्यक्रम के बारे में अधिक जानें।