2018 में रिएक्टर डेवलपर कैसे बनें

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

प्रतिक्रिया और जेएस के एक विशेषज्ञ एडम गोलैब ने एक कदम-दर-चरण पाठ्यक्रम संकलित किया है जो आपको खरोंच से एक डेवलपर बनने में मदद करेगा या पेशे में अपने कौशल को और बेहतर बनाने के लिए एक दिशा का संकेत देगा।

एडम की योजना मुख्य बिंदुओं की एक सूची है जिसे आपको खुद का अध्ययन करने की आवश्यकता है। हमने एक विवरण जोड़ा, और कुछ कठिन क्षणों में हमने अतिरिक्त संदर्भ सामग्रियों के लिंक प्रदान किए, जिनकी मदद से आपको प्रश्न का उत्तर मिलेगा: "मुझे एक रिएक्टर डेवलपर के रूप में क्या सीखना चाहिए?"

यहाँ एक रिएक्टर डेवलपर बनने का मूल चित्र है।

1. मूल बातें
   
   • एचटीएमएल
     
     • HTML की मूल बातें जानें।
     • कुछ HTML पेज बनाएं।
     
     
   • सीएसएस
     
     • CSS की मूल बातें जानें।
     • पिछले चरण से सीएसएस को पृष्ठों में जोड़ें।
     • ग्रिड और फ्लेक्सबॉक्स के साथ एक पेज बनाएँ।
     
     
   • जे एस मूल बातें
     
     • वाक्य रचना की जाँच करें।
     • दस्तावेज़ ऑब्जेक्ट मॉडल के मूल संचालन को जानें।
     • जेएस (उत्थापन, घटना बुब्बलिंग, प्रोटोटाइपिंग) के साथ काम करने के लिए विशिष्ट तंत्र सीखें।
     • कुछ AJAX कॉल (XHR) करें।
     • नई सुविधाएँ सीखें (ECMA Script 6+)।
     • यदि संभव हो, तो jQuery लाइब्रेरी देखें।
     
     
   
   
2. सामान्य डेवलपर कौशल
   
   • Git का अन्वेषण करें, GitHub पर कई रिपॉजिटरी बनाएं, अन्य लोगों के साथ अपना कोड साझा करें।
   • HTTP (S) प्रोटोकॉल, रिक्वेस्ट मेथड्स (GET, POST, PUT, PATCH, DELETE, OPTIONS) का अंदाजा लगाएं।
   • खोज इंजन का उपयोग करने से डरो मत।
   • टर्मिनल देखें, अपने शेल (बैश, ज़श, मछली) को कॉन्फ़िगर करें।
   • एल्गोरिदम और डेटा संरचनाओं पर कुछ किताबें पढ़ें। या टेक्नोस्फीयर से तैयारी पाठ्यक्रम " एल्गोरिदम और डेटा संरचनाएं " को देखें।
   • डिज़ाइन पैटर्न पर कुछ किताबें पढ़ें। उदाहरण के लिए, जावास्क्रिप्ट डिजाइन पैटर्न । प्रकाशन में विशिष्ट कार्यों के लिए कई सिद्ध समाधान शामिल हैं, इसलिए पुस्तक प्रशिक्षण और सहायक के रूप में उपयोगी है। हम लर्निंग जावास्क्रिप्ट डिजाइन पैटर्न (क्रिएटिव कॉमन्स) और लार्ज-स्केल जावास्क्रिप्ट एप्लीकेशन आर्किटेक्चर के लिए पैटर्न की भी सलाह देते हैं, जिसमें उन पैटर्नों पर चर्चा की गई है जो आपको बड़े, स्केलेबल जावास्क्रिप्ट एप्लिकेशन बनाने में मदद कर सकते हैं। लेखों का रूसी में अनुवाद है।
   
   
3. आधिकारिक वेबसाइट पर प्रतिक्रिया दस्तावेज़ देखें या पाठ्यक्रम लें ।
4. आपके द्वारा उपयोग किए जाने वाले टूल के बारे में और जानें।
   
   • पैकेज डिस्पैचर्स वर्तमान में, कई समान प्रतिस्पर्धी पैकेज मैनेजर हैं जो केंद्रीय भंडार से पुस्तकालयों को डाउनलोड करने और अपडेट करने में मदद करते हैं। 2013 में, सबसे लोकप्रिय बोवर था, जो 2015 तक npm हथेली खो चुका था। 2016 के अंत से, npm इंटरफ़ेस के विकल्प के रूप में यार्न का व्यापक रूप से उपयोग किया गया है।
     
     • NPM
     • धागा
     • Pnpm भी सामान्य पृष्ठभूमि पर नहीं खोया है - यह डिस्क स्पेस डिस्पैचर का उपयोग करके एक तेज़, कुशलतापूर्वक है। यार्न और एनपीएम के विपरीत, यह पैकेज के प्रत्येक कभी इंस्टॉल किए गए संस्करण के लिए एक वैश्विक कैश रखता है, जिससे पैकेज के लिंक प्रोजेक्ट के नोड_मॉडल फ़ोल्डर में बनाए जाते हैं।
     
     
   • टास्क प्रबंधन उपकरण।
     
     • एनपीएम स्क्रिप्ट
     • गुल निर्माण प्रणाली विधानसभा प्रक्रिया के विभिन्न कार्यों के लिए सबसे लोकप्रिय स्वचालन उपकरण में से एक। प्लगइन्स का उपयोग करता है जो कमांड लाइन की आवश्यकता वाले अन्य टूल के लिए रैपर के रूप में कार्य करता है।
     • Webpack। फ़ाइल सिस्टम तक पहुंच के साथ एकल पैकेज (बंडल) में मॉड्यूल को इकट्ठा करने का एक उपकरण। परिणामी पैकेज एक ब्राउज़र के साथ संगत हैं, जिसे फ़ाइल सिस्टम तक पहुंच की आवश्यकता नहीं है।
     • रोलअप। एक अन्य बंडल ने जावास्क्रिप्ट फ़ाइलों के संयोजन के लिए अधिक कॉम्पैक्ट और कुशल वेबपैक विकल्प कहा ।
     • पार्सल। छोटी परियोजनाओं के लिए छोटे और तेज बंडल। इसे कॉन्फ़िगरेशन की आवश्यकता नहीं है और स्थापना के तुरंत बाद काम करने के लिए तैयार है। विवरण लेख में पाया जा सकता है।
     
     
5. कोड शैली
   
   • सीएसएस प्रीप्रोसेसर
     
     • सास / सीएसएस। सैस ने सीएसएस को एक सभ्य प्रोग्रामिंग भाषा में बदल दिया, एक प्रीप्रोसेसिंग इंजन के रूप में प्रस्तुत किया जो स्टाइल शीट में घोंसले के शिकार, चर, मिश्रण, विस्तार और तर्क को लागू करता है। इस तरह से आप अपनी CSS फाइलों को बेहतर ढंग से व्यवस्थित कर सकते हैं, आपके पास CSS कोड के बड़े टुकड़ों को छोटी फाइलों में विघटित करने के कई तरीके उपलब्ध होंगे। हमने इस लेख में " सीएसएस के विकास: सीएसएस, एसएएसई, बीईएम और सीएसएस मॉड्यूल से स्टाइल-घटकों तक " के बारे में अधिक विस्तार से बात की।
     • PostCSS। मॉड्यूलर प्रोसेसर की दूसरी पीढ़ी जो जावास्क्रिप्ट का उपयोग करके बुनियादी सीएसएस की क्षमताओं का विस्तार करती है। PostCSS अपने खुद के CSS कन्वर्टर्स को प्लग इन के रूप में लिखने के लिए बहुत अच्छा है।
     • कम। एक अन्य रूपरेखा जो चर, मिश्रण, कार्यों और कई अन्य तकनीकों को जोड़कर शैलियों के साथ काम करना आसान बनाती है जो सीएसएस को अधिक बनाए रखने योग्य और लुप्त हो जाएगी।
     • स्टाइलस। प्रीप्रोसेसर की अगली पीढ़ी। हमने इसका उपयोग 11 सामग्री परियोजनाओं के डिजाइन को एकजुट करने के लिए किया था। स्टाइलस लचीला, बनाए रखने में आसान (बग फिक्सिंग) और अत्यधिक प्रभावी है।
     
     
   • सीएसएस फ्रेमवर्क
     
     • बूटस्ट्रैप। साइट इंटरफेस और वेब एप्लिकेशन बनाने के लिए उपकरणों का एक मुफ्त सेट, गीथहब पर सितारों की संख्या में दूसरे स्थान पर है।
     • मटेरिअल , मटेरियल यूआई , मटेरियल डिज़ाइन लाइट। विज़ुअल लैंग्वेज मटेरियल डिज़ाइन के फ्रेमवर्क, अक्सर मोबाइल एप्लिकेशन में उपयोग किए जाते हैं (उदाहरण के लिए, कई Google मोबाइल एप्लिकेशन में)।
     • Bulma। फ्लेक्सबॉक्स पर निर्मित उत्तरदायी मॉड्यूलर वास्तुकला सीएसएस फ्रेमवर्क।
     • शब्दार्थ यूआई। पोर्टेबल इंटरफेस बनाने के लिए एक रूपरेखा जो आपकी परियोजनाओं में यूआई तत्वों का पुन: उपयोग करने में मदद करेगी। सीधे कोड में प्रोटोटाइप इंटरफेस के लिए बूटस्ट्रैप का एक अच्छा विकल्प।
     
     
   • सीएसएस वास्तुकला
     
     • कार्यलय। BEM (BEM - ब्लॉक, तत्व, संशोधक) - वेब विकास के लिए घटक दृष्टिकोण। यह एक इंटरफ़ेस को स्वतंत्र ब्लॉकों में विभाजित करने के सिद्धांत पर आधारित है। यह आपको आसानी से और जल्दी से किसी भी जटिलता के इंटरफेस को विकसित करने और कॉपी-पेस्ट से बचने के लिए मौजूदा कोड का पुन: उपयोग करने की अनुमति देता है। वर्ग नामों की लंबाई, ब्लॉक के नाम पर तत्वों की निर्भरता, और संशोधक की विरासत के साथ कठिनाइयों के कारण भी समय-समय पर इसकी आलोचना की जाती है।
     • सीएसएस मॉड्यूल। एक सीएसएस मॉड्यूल एक सीएसएस फ़ाइल है जिसमें सभी वर्ग और एनीमेशन नाम डिफ़ॉल्ट रूप से एक स्थानीय गुंजाइश है। मॉड्यूल स्थानीय स्तर पर परिभाषित शैली के लिए गतिशील वर्ग नाम बनाने के विचार पर आधारित हैं। इस पद्धति ने हमें नए सीएसएस गुणों की शुरूआत से उत्पन्न होने वाले दृश्य प्रतिगमन से छुटकारा पाने की अनुमति दी।
     • परमाणु। CSS की संरचना करने का एक तरीका जो छोटे, विशेष वर्गों के पक्ष में "सिमेंटिक क्लासेस" से बचता है। एटॉमिक सीएसएस का उपयोग करते समय, आप सिंटैक्स जैसे फ़ंक्शंस का उपयोग करते हैं जिनका उपयोग उचित स्टाइलशीट उत्पन्न करने के लिए किया जा सकता है।
     • OOCSS। ऑब्जेक्ट ओरिएंटेड सीएसएस (ऑब्जेक्ट ओरिएंटेड सीएसएस) उपरोक्त परमाणु पद्धति के विपरीत है। यह शेल से संरचना और कंटेनर से सामग्री को अलग करने के सिद्धांतों पर आधारित है। OOCSS व्यवहार में काफी जटिल है, क्योंकि यह विशिष्ट नियम नहीं, बल्कि अमूर्त सिफारिशें प्रदान करता है। इसलिए, कुछ डेवलपर्स ने OOCSS के मूल विचारों को लिया और कोड को संरचना करने के लिए और अधिक विशिष्ट तरीके बनाने के लिए उनमें सुधार किया।
     • SMACSS। SMACSS (सीएसएस के लिए स्केलेबल और मॉड्यूलर आर्किटेक्चर, CSS के लिए स्केलेबल और मॉड्यूलर आर्किटेक्चर) ने OOCSS मुख्य अवधारणाओं को लिया, लेकिन कोड की मात्रा कम कर दी और इसके साथ काम करना आसान बना दिया।
     • SUIT CSS इंटरफ़ेस घटकों के लिए स्टाइल टूल। SUIT CSS React, Ember, Angular के साथ अच्छा काम करती है।
     
     
   • जेएस में सीएसएस
     
     • स्टाइल-घटकों। स्टाइल-घटक दृश्य प्राइमेटिव हैं जो एक आवरण के रूप में काम करते हैं। उन्हें विशिष्ट HTML टैग से जोड़ा जा सकता है जो स्टाइल घटकों के साथ बाल घटकों को लपेटते हैं। शैलियों को बनाने के बजाय, जो तब मैन्युअल रूप से घटकों से जुड़े होते हैं, जैसा कि मानक सीएसएस क्षमताओं में, स्टाइलेड-घटक सीधे घटकों से संपर्क करते हैं। सीएसएस विकास लेख में और पढ़ें।
     • रेडियम। इनलाइन शैलियों के प्रबंधन के लिए उपकरणों का एक सेट जो मीडियाक्वायरी और छद्म वर्गों का समर्थन करता है।
     • जज्बात। एक उच्च प्रदर्शन वाली हल्की लाइब्रेरी जो बेबल और पोस्टसीएसएस के साथ स्टाइल विश्लेषण के माध्यम से सीएसएस-इन-जेएस निष्पादन लागत को कम करती है। रनटाइम में लाइब्रेरी का कोर 2.3 Kb है, रिएक्ट सपोर्ट 4 Kb है।
     • जेएसएस। वास्तविक सीएसएस उत्पन्न करने के लिए जल्द से जल्द सीएसएस-इन-जेएस पुस्तकालयों में से एक, इनलाइन शैलियों नहीं।
     • Aphrodite। अन्य पुस्तकालयों की तरह, यह अक्सर एक ही कॉल में महत्वपूर्ण CSS की पीढ़ी को व्यवस्थित करने और सर्वर पर HTML प्रदान करने में मदद करता है, लेकिन Aphrodite के महत्वपूर्ण फायदे हैं - सरल प्रवास और एक कम सीखने की अवस्था। कैसे Aphrodite के साथ उत्पादकता में सुधार, खान अकादमी में इनलाइन सीएसएस पढ़ें : Aphrodite लेख।
     
     
6. आवेदन राज्य प्रबंधन
   
   
   • घटक राज्य / संदर्भ एपीआई। किसी भी राज्य और वास्तुकला में एक राज्य होता है। प्रतिक्रिया में, राज्य का उपयोग उन डेटा को स्थानांतरित करने और पकड़ने के लिए किया जाता है जो समय के साथ बदलते हैं। संदर्भ एपीआई, जो स्थैतिक प्रकार की जाँच और गहन अद्यतन का समर्थन करता है, प्रतिक्रिया 16.3 में जोड़ा गया था।
   • Redux। एक छोटा, लोकप्रिय, कुशल पुस्तकालय जो एक कॉम्पैक्ट एपीआई प्रदान करता है जो एक सरल और अनुमानित राज्य मॉडल को शुरू करने के साथ-साथ कार्यात्मक प्रोग्रामिंग और अपरिवर्तनीय डेटा में पूर्वाग्रह का उपयोग करके कई मुद्दों को हल करता है।
   • अतुल्यकालिक कॉल (दुष्प्रभाव)
     
     
     • Redux-thunk। अतुल्यकालिक प्रबंधन के लिए एक सरल, व्यापक रूप से उपयोग किया जाने वाला दृष्टिकोण। Redux-Thunk एक थंक की अवधारणा का परिचय देता है, जो आवश्यकतानुसार आवर्ती निष्पादन प्रदान करता है।
     • Redux-बेहतर वादा। अतुल्यकालिक संचालन का समर्थन करने वाला एक और सरल और कुशल दृष्टिकोण और भी बहुत कुछ।
     • Redux-सागा। एक उन्नत पुस्तकालय जो सागा के साथ काम करके साइड इफेक्ट को सरल और बेहतर बनाता है। सगा एक डिज़ाइन पैटर्न है जो वितरित लेनदेन की दुनिया से आया है। Redux के संदर्भ में, गाथा को एक मध्यवर्ती परत के रूप में लागू किया जाता है जो अतुल्यकालिक क्रियाओं का समन्वय और प्रोत्साहन करती है। लेख में अधिक विवरण " अंडरस्टैंडिंग रिडक्स-सागा: एक्शन जेनरेटर्स से सागस " लिखा गया है, और यहां तक ​​कि लेख " सागास " में 1987 में वापस प्रकाशित किया गया - यह वितरित प्रणालियों के संबंध में गाथा का पहला विवरण था।
     • Redux-प्रत्यक्ष। Redux-Saga का एक विकल्प, हालांकि कई संकेत देते हैं कि साग = अवलोकनीय है। औपचारिक दृष्टिकोण से, यह एक ही इकाई तक पहुंचने के लिए सिर्फ एक अलग इंटरफ़ेस है; कोड बहुत समान है।
     
     
   • सहायक (सुधार Redux)
     
     
     • पुन: मैच। रीमैच Redux के आसपास एक आवरण के रूप में कार्य करता है, डेवलपर्स को एक सरलीकृत एपीआई प्रदान करता है। एक्शन टाइप, एक्शन जेनरेटर और स्विच (थ्रक्स) स्टेटमेंट को हटाता है।
     • फिर से चुनें। एक पुस्तकालय जिसमें कई विशेषताएं हैं जो Redux को बढ़ाती हैं। उदाहरण के लिए, रेसेलेट अनावश्यक रेंडर घटकों को खत्म करने में मदद करता है और ऑटो-कैशिंग के साथ जटिल चयनकर्ता बनाता है। अन्य विशेषताओं को लेख में पाया जा सकता है।
     
     
   • डेटा ट्रांसफर
     
     
     • Redux-लागू हैं। लोकलस्टोरेज में रिड्यूक्स स्टोरेज को लोड करने और इसे रीस्टोर करने के लिए एक टूल (अन्य स्टोरेज लोकेशन सपोर्टेड हैं)।
     • Redux फीनिक्स फीनिक्स npm का उपयोग करके स्थिर संसाधनों का प्रबंधन करता है और उन्हें सीधे ब्रंच या वेबपैक का उपयोग करके बॉक्स से बाहर इकट्ठा करता है। फीनिक्स फ्रेमवर्क के साथ रिएक्ट और रेडक्स का एकीकरण अमृत-रिएक्शन-रेडक्स-उदाहरण बंडल से प्रेरित है, जिसमें फीनिक्स एलिक्जिर के सुंदर सिंटैक्स और शक्तिशाली टूलसेट के साथ लाखों कनेक्शनों को संभालने के लिए एरलंग वीएम की क्षमता का लाभ उठाता है।
     • Redux-फार्म। Redux-Form पुस्तकालय Redux लाइब्रेरी की योजना का अनुसरण करता है (देखें → क्रिया → मध्यमवर्ग → reducers → राज्य → दृश्य) एक ही सिद्धांत के अनुसार, लेकिन रूपों के लिए (" Redux-form। जब रूपों के साथ काम करना सरल है ")।
     
     
   • MobX। सरल स्टैंडअलोन MobX पुस्तकालय, जो रिएक्ट के साथ संयोजन में भी उपयोग किया जाता है। आपको केवल उन घटकों को अपडेट करने की अनुमति देता है जो परिवर्तित डेटा पर निर्भर करते हैं।
   
   
7. प्रकार की जाँच
   
   
   • PropTypes। रनटाइम मोड में रिएक्ट गुण और इसी तरह की वस्तुओं की जांच के लिए एक मॉड्यूल। PropTypes वांछित प्रकार के खिलाफ घटक को दी गई संपत्ति की जांच करता है। यह सत्यापन तंत्र वर्तमान में डिफ़ॉल्ट रूप से प्रतिक्रिया में शामिल नहीं है; इसका उपयोग करने के लिए, आपको निर्भरता के रूप में इस सुविधा को परियोजना में जोड़ना होगा।
   • टाइपप्रति। टाइपस्क्रिप्ट Microsoft द्वारा 2012 में शुरू की गई एक स्क्रिप्टिंग प्रोग्रामिंग भाषा है। यह अगली पीढ़ी के जावास्क्रिप्ट के समान है, लेकिन वैकल्पिक स्थिर टाइपिंग के अतिरिक्त है। आपको ऑब्जेक्ट और कक्षाओं के गुणों और विधियों का पूरी तरह से वर्णन करने की अनुमति देता है, एक विधि या फ़ंक्शन में शामिल सभी तर्कों को सत्यापित करने की आवश्यकता को समाप्त करता है।
   • प्रवाह। स्थिर प्रकार की जाँच के लिए एक खुला स्रोत पुस्तकालय जो आपको धीरे-धीरे अपने जावास्क्रिप्ट कोड में प्रकार जोड़ने की अनुमति देता है। एक लेख में वाक्य रचना और प्रवाह की भाषा का परिचय।
   
   
8. प्रपत्र सहायक
   
   
   • Redux-फार्म
   • Formik। एक सरल और सुविधाजनक समाधान जो डेटा को फॉर्म से प्राप्त करने को सरल बनाता है, डेटा को मान्य करता है, त्रुटि संदेश प्रदर्शित करता है, और बहुत कुछ।
   • Formsy। एक लचीला प्रपत्र सत्यापनकर्ता जिसमें मूल सत्यापन नियमों का एक सेट होता है जैसे कि इस्माइल। उपयोग करने के लिए बहुत आसान है।
   • अंतिम रूप पुस्तकालय ऑब्जर्वर पैटर्न पर आधारित है, जहां पर्यवेक्षक फॉर्म या फ़ील्ड अपडेट प्राप्त करने के लिए सदस्यता ले सकते हैं। इसकी कोई निर्भरता नहीं है और यह स्वयं रूपरेखाओं से स्वतंत्र है। रिएक्ट फाइनल फॉर्म - फाइनल फॉर्म के चारों ओर एक आवरण जो आपको रिएक्ट के साथ इसका उपयोग करने की अनुमति देता है। लेख में अधिक जानकारी " अंतिम रूप: चेकर ध्वज के लिए सड़क "।
   
   
9. रूटिंग (पृष्ठों के बीच स्विच करते समय URL परिवर्तन)
   
   
   • प्रतिक्रिया-रूटर। जीथब पर हजारों सितारों के साथ एक लोकप्रिय पुस्तकालय, शक्तिशाली मार्ग घोंसले की क्षमता, अच्छे उच्च-स्तरीय अमूर्तता और बहुत लचीले समाधानों का निर्माण करने की क्षमता के साथ। परियोजना दर्शन "डायनेमिक रूटिंग" पर आधारित है, क्योंकि रेल, एक्सप्रेस, एम्बर, कोणीय और अन्य परियोजनाओं में "स्टैटिक रूटिंग" के विपरीत है।
   • Router5। एक काफी सरल विकल्प, क्लाइंट की ओर और सर्वर की तरफ काम कर रहा है, जो संक्रमणों पर पूर्ण नियंत्रण प्रदान करता है।
   • Redux- पहला राउटर। Redux का उपयोग करते समय हमेशा रूट करने का एक आसान तरीका है। Redux-First Router काम करने का एक तेज़ और अधिक सहज तरीका खोजने का प्रयास है। यह स्वचालित रूप से दोनों दिशाओं में एप्लिकेशन के राज्य और URL को सिंक्रनाइज़ करता है, "सेट और भूल" स्तर पर बॉक्स से बाहर काम करता है, Redux में सभी एप्लिकेशन डेटा को राउटिंग डेटा सहित रखता है।
   • राउटर तक पहुंचें विभिन्न एपीआई, सुविधाओं और लक्ष्यों के साथ रिएक्ट और रेडक्स के लिए कई रूटिंग समाधान तैयार किए गए हैं। और सूची केवल विस्तार कर रही है। रीच राउटर इंटरफ़ेस उपलब्धता पर ध्यान देने वाला एक राउटर है: फ़ोकस कंट्रोल, रिश्तेदार लिंक, नेस्टेड कॉन्फिग।
   
   
10. एपीआई ग्राहक
    
    
    • REST (REpretational State Transfer) एपीआई इस आर्किटेक्चर को समझने के बिना बैकएंड आर्किटेक्चर के साथ बातचीत करने का एक आसान तरीका है। REST API आपको वेब पर संसाधनों के साथ बातचीत करने की अनुमति देता है, जो दृश्य विकास पर ध्यान केंद्रित करता है और वास्तुकला की चिंता नहीं करता है।
      
      • लायें। एक अतुल्यकालिक कॉल समर्थन एपीआई जिसका उपयोग समानांतर में कई वेब संसाधनों को पुनः प्राप्त करने के लिए किया जा सकता है। Fetch आपको XMLHttpRequest (XHR) के समान प्रश्न करने देता है। मुख्य अंतर यह है कि Fetch API वादों का उपयोग करता है, जिसके लिए आप एक सरल और क्लीनर API का उपयोग कर सकते हैं, कॉलबैक की विनाशकारी संख्या और XMLHttpRequest के लिए API को याद रखने की आवश्यकता से बचें।
      • SuperAgent। लचीलापन, पठनीयता और अध्ययन में आसानी के साथ बनाया गया एक छोटा प्रगतिशील एपीआई, जिसमें एक उच्च-स्तरीय HTTP क्लाइंट की कई विशेषताएं हैं।
      • कुल्हाड़ी । किसी ब्राउज़र में Node.js या XMLHttpRequests में HTTP अनुरोध करने के लिए एक पुस्तकालय। यह वादों का समर्थन करता है, JSON डेटा का स्वचालित रूपांतरण, सर्वर और क्लाइंट पर समान काम करता है।
      
      
    • GraphQL। एक एपीआई क्वेरी भाषा जो क्लाइंट को यह निर्धारित करने की अनुमति देती है कि सर्वर को किस डेटा को भेजना चाहिए (डेटा की संरचना और मात्रा क्लाइंट द्वारा निर्धारित की जाती है)। इसे विशिष्ट REST वास्तुकला के विकल्प के रूप में विकसित किया गया था। GraphQL का उपयोग करना, आप सर्वर के लिए एक अनुरोध में एक घटक प्रदान करने के लिए सभी आवश्यक डेटा प्राप्त कर सकते हैं। ग्राफकॉइल में, डेवलपर्स एक घोषणात्मक भाषा का उपयोग करके इंटरफ़ेस के लिए आवश्यक डेटा का वर्णन करते हैं। लाइब्रेरी भाषा के ऊपर बनाई गई हैं, जिस पर बाद में चर्चा की जाएगी।
      
      
      • अपोलो। अपोलो, जो आपको एक ब्राउज़र में ग्राफ़िकल प्रश्नों को चलाने की अनुमति देता है, रिएक्ट एप्लिकेशन में डेटा के साथ काम करने का एक सुविधाजनक तरीका प्रदान करता है। सबसे अधिक बार, अपोलो क्लाइंट में डेटा के साथ काम करना Redux का उपयोग करने की तुलना में आसान है, हालांकि कई टूल और पुस्तकालयों के साथ संपूर्ण Redux पारिस्थितिकी तंत्र अपोलो अनुप्रयोगों में उपलब्ध है। रिएक्ट, अपोलो-क्लाइंट और ग्राफकलाइन का संयोजन रिएक्ट-एप्लिकेशन के विकास को बहुत सरल करता है।
      • रिले। फेसबुक का अपना उपकरण, उनकी जरूरतों के अनुरूप। ऐसा माना जाता है कि कुछ उपयोगकर्ताओं के लिए इस कारण से यह थोड़ा बेमानी हो सकता है। खरोंच से, रिले आधुनिक संस्करण बनाया गया था - उपयोग करने में आसान, अधिक एक्स्टेंसिबल और, सबसे महत्वपूर्ण बात, मोबाइल उपकरणों पर उत्पादकता बढ़ाने में सक्षम।
      • Urql। यूनिवर्सल रिएक्ट क्वेरी लाइब्रेरी क्लाइंट, जो ReactJS घटकों के एक सेट के रूप में प्रकट होता है, क्लाइंट साइड पर ग्राफ़िकल को यथासंभव सरल बनाने के लिए डिज़ाइन किया गया है।
11. पुस्तकालयों
    
    
    • Lodash। एक पुस्तकालय जो जेएस वस्तुओं के लिए भारी संख्या में सहायक कार्य करता है। लॉडश ने सरणियों, संख्याओं, वस्तुओं, तारों, आदि के साथ काम करने की आवश्यकता को समाप्त करके जावास्क्रिप्ट को सरल बनाया। कार्यात्मक प्रोग्रामिंग प्रतिमान का उपयोग कर सामान्य कार्यों के लिए उपयोगिता कार्य प्रदान करता है।
    • पल। जावास्क्रिप्ट में दिनांक और समय के साथ काम करने के लिए एक आसान पुस्तकालय, जिस पर नाम धीरे से संकेत करता है। इस लेख में काम की अवधारणा का पता लगाया जा सकता है: " मोमेंट्स के साथ कार्य दिवसों की गणना "।
    • Classnames। कक्षा के नाम के साधारण सशर्त संघ के लिए एक पुस्तकालय।
    • अंक। सुविधाजनक संख्या स्वरूपण के लिए पुस्तकालय। न्यूमेरल आपको दशमलव स्थानों की संख्या, संज्ञाओं की संख्या, शब्दों के आधार पर संख्याओं, भिन्नात्मक भाग के लिए विभाजक वर्ण और अंकों के समूह, मुद्रा प्रस्तुति प्रारूप इत्यादि को निर्दिष्ट करने की अनुमति देता है।
    • RxJS। एक मॉड्यूलर लाइब्रेरी जो आपको डेटा स्ट्रीम बनाने और बनाने की अनुमति देती है। RxJS का उपयोग करके, आप क्रियाओं के जटिल अनुक्रमों को संक्षिप्त कोड में बदल सकते हैं, जिनके साथ काम करना आसान है, लेकिन इस उपकरण को मास्टर करने के लिए समय और एक निश्चित स्तर की तैयारी में समय लगता है।
    • Ramda। जैसा कि स्कॉट सायट ने रामदा में क्यों बताया? ", रामदा कार्यात्मक प्रोग्रामिंग भाषाओं से उधार एक कोडिंग शैली प्रदान करता है। यहाँ, रचना का उपयोग करके जटिल कार्यात्मक तर्क बनाने के लिए तंत्र लागू किया गया है। दूसरी ओर, रैमडा की अधिकांश मुख्य विशेषताएं पहले से ही अंडरस्कोर और लोदाश द्वारा कवर की गई हैं।
    
    
12. परीक्षण
    
    
    • इकाई परीक्षण
      
      • जेस्ट। एक फ्रेमवर्क जो स्वचालित इकाई परीक्षण के लिए एक मंच प्रदान करता है, साथ ही एक कोर लाइब्रेरी भी है जो आपको स्टेटमेंट्स बनाने की अनुमति देती है (Expect)। जेस्ट जैस्मीन पर आधारित है, लेकिन एपीआई आपको एक अलग इंजन का उपयोग करने की अनुमति देता है। फ्रेमवर्क को कॉन्फ़िगर करना आसान है और आसानी से परियोजनाओं में एकीकृत हो जाता है, इसमें बड़ी कार्यक्षमता है। परीक्षण के दौरान, यह इनपुट मापदंडों के साथ कोड निष्पादित करता है और परिणाम की अपेक्षा के साथ तुलना करता है।
      • एनजाइम। एंजाइम को तीन अन्य पुस्तकालयों पर एक ऐड-ऑन कहा जा सकता है: रिएक्ट टेस्ट यूटिल्स, जेएसडीओएम (डोम का एक जेएस कार्यान्वयन जो आपको एक ब्राउज़र का अनुकरण करने की अनुमति देता है), चीयरियो (डोम तत्वों के साथ काम करने के लिए जेकरी का एक एनालॉग)। इस प्रकार, एंजाइम इन पुस्तकालयों की क्षमताओं को जोड़ता है और नई कार्यक्षमता जोड़ता है, जिसे प्रलेखन में अधिक विस्तार से वर्णित किया गया है।
      • सिनोन। सिनोन आपको तथाकथित जासूसों (जासूस), स्टब्स (स्टब) और नकल (नकली) का उपयोग करके परीक्षण करने की अनुमति देता है। . Sinon (fakeserver), AJAX-.
      • Mocha. , -. . , .
      • Chai. Assertion library — . Chai, Mocha, assertions. Chai assertions: should, expect, assert. Chai Chai HTTP, HTTP-. , Mocha Chai — API, .
      • AVA. , node.js-, . , , , .
      • Tape. , API. Tape beforeEach, . , JS.
      
      JavaScript- .
    • (end-to-end)
      
      
      • Selenium , Webdriver. , , , , , , .
        Selenium , , , , . Selenium .
        
        Selenium Webdriver — : UI, , .. Webdriver , .
      • Cypress. , , . Cypress , . 2018- - .
      • Puppeteer. Node.js, Chrome . Puppeteer , , . Puppeteer -, . .
      • Cucumber.js. , , «» , (Behaviour Driven Development). -, . Cucumber , , JS.
      • Nightwatch.js. Selenium (Nightwatch Webdriver), Chromedriver . Nightwatch Chromedriver, Chromedriver ChromeBrowser . Nightwatch .
      
      
    • ( )
      
      • Karma. Test-runner JavaScript . Karma -, . .
      
      
    
    
13. 
    
    • React Intl. . React Intl FormatJS. React API , , ( ).
    • React i18next. i18next , . , .
    
    
14. 
    
    
    • Next.js. , « » . React, Webpack Babel. , .
    • After.js. Next.js React- . React Router 4.
    • Rogue. «» . , /pages ( Next.js) routes.js (, , Afterjs). , , App.js. Rogue State Management (Redux) CSS-in-JS (Emotion / Styled-Components).
    
    
15. 
    
    
    • Gatsby. , React, , . Gatsby , . , Gatsby GraphQL API React-. : « Gatsby Strapi ».
    
    
16. backend-
    
    • React on Rails. React on Rails Ruby on Rails React Webpacker ( React), Rails.
    
    
17. 
    
    
    • React Native. iOS Android JavaScript. , , , Objective-C Java. React Native , iOS Android.
    • Cordova / Phonegap. Cordova — , Apache. Apache Cordova HTML, CSS JavaScript, API . Phonegap JavaScript ( HTML5/CSS) . , , . , Cordova — open source, Phonegap Adobe. , Phonegap HTML5 Adobe.
    
    
18. 
    
    
    • Proton Native. React , React Native. , React, Redux. Node.js. Proton Native , React Native . , , Electron.
    • Electron. , Node.js, , HTML, CSS JavaScript. , Electron, -, .
    • React Native Windows. React Native . Windows 10, Windows 10 Mobile XboxOne (UWP).
    
    
19. 
    
    
    • React 360. JavaScript React . React 360 VR-. Chrome, Firefox Edge.
    
    

निष्कर्ष

, React. , . , , , , . , , , .