मैंने ग्राउंड-अप से रिएक्ट कैसे सीखा या देखभाल के साथ रिएक्ट विकास के साथ कैसे शुरू किया जाए

रिएक्ट आजकल बहुत ध्यान और बहुत लोकप्रिय हो रहा है, और इससे कई डेवलपर्स रिएक्ट पर अपने हाथों को गीला करना चाहते हैं। हालाँकि, मैंने इनसे मिलते-जुलते कई सवाल देखे हैं:

  • रिएक्ट के साथ शुरुआत कैसे करें?
  • मैं रिएक्ट वेबसाइट पर ट्यूटोरियल का पालन करता हूं और मुझे पता नहीं है कि मुझे रिएक्ट के साथ क्या करना है।
  • Googling रिएक्ट ट्यूटोरियल, गाइड, उदाहरणों की एक पागल संख्या देता है ... लेकिन वे बहुत लंबे हैं, वेबपैक, बैबेल, ईएस 6/7, ग्राफकलाइन, रिले, फ्लक्स, रिडक्स जैसे कई सामानों के साथ इतने जटिल लगते हैं ... कैसे लोग आते हैं प्रतिक्रिया सरल और है सीखने में आसान?
  • …आदि

मेरी राय में, सीखने की प्रतिक्रिया के लिए तकनीकी ज्ञान और प्रोग्रामिंग कौशल के कुछ स्तर की आवश्यकता होती है। आप केवल इस धारणा के साथ गोता नहीं लगा सकते हैं कि अन्य लोग प्रतिक्रिया को जल्दी से सीख सकते हैं, आप भी कर सकते हैं। सीखने में "त्वरित" नाम की कोई चीज नहीं है, या शायद मैं गलत हूं।

ठीक है, इसलिए मैं अपनी कहानी सीखने की प्रतिक्रिया साझा करना चाहता हूं।

दो साल पहले, जब मैं कोणीय के साथ काम कर रहा था, तो वेब और मोबाइल के बीच घटक साझा करने के लिए रखरखाव की समस्या थी। वे इस तरह थे:

  • अधिक वर्ण जोड़े जाने पर इनपुट इतना पिछड़ जाता है। (AngularJS 1.x की $ घड़ी समस्या)। यह मोबाइल डिवाइस में और भी ज्यादा खराब है।
  • कंट्रोलर गड़बड़ हैं क्योंकि मुझे एक टेम्प्लेट डायरेक्टिव के लिए कंट्रोलर को परिभाषित करना था, और HTML में इसका उपयोग करते समय, मुझे और अलग-अलग ऐप कंट्रोलर की आवश्यकता होती है। पासिंग डेटा और परिभाषित स्कोप इतने जटिल हैं।
  • द्विदिश डेटा प्रवाह ने कई जादुई बग बनाए। और, जैसा कि आप जानते हैं, कोणीय का सांत्वना लॉग वास्तव में "वर्णनात्मक" है।

कोणीय कोडबेस को बिट-बाय-बिट में सुधार करने के लिए समाधान खोजने के दौरान, मैंने रिएक्ट पाया। कई घंटों तक इन-ब्राउज़र रिएक्ट के साथ खेलने के बाद, मैं पूरी तरह से बेच दिया गया था। इसलिए मैंने तीन दिन सोचने के बाद पूरे कोड आधार को एंगुलर से रिएक्ट तक पोर्ट करने का फैसला किया।

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

मुझे यह पता लगाने के बाद कि मुझे वास्तव में अपने ऐप को फिर से विकसित करने की आवश्यकता है, जानने के लिए मैंने एक रोडमैप तैयार किया। ठीक है, तो यहाँ वे हैं:

मैंने ECMAScript ES6 सीखा

उस समय, मैं ES5 का उपयोग पर्याप्त रूप से कर सकता हूं लेकिन मुझे पता चला कि ES6 भविष्य है और रिएक्ट टीम इसका उपयोग कर रही है इसलिए ES6 (यहां तक ​​कि ES7 में से कुछ भी सीखना) सही विकल्प है। इस भाग को सीखना मेरे लिए आसान था क्योंकि मैं पहले से ही भाषा से परिचित था और नया वाक्य-विन्यास इतना कठिन नहीं था। यदि आप पहले से ही जावास्क्रिप्ट से परिचित हैं, तो आपको ES6 सीखने में कोई समस्या नहीं होगी। लेकिन यदि आप नहीं हैं, तो अधिक समय व्यतीत करें।

कुछ साइटें पहले से ही ES6 सीखने के लिए बनाई गई हैं:

  • https://babeljs.io/docs/learn-es2015/
  • http://es6katas.org/
  • https://github.com/lukehoban/es6features
  • https://github.com/rse/es6-features
  • http://exploringjs.com/es6/

ES6 की कुछ महत्वपूर्ण विशेषताएं जो आमतौर पर आजकल React में उपयोग की जाती हैं, और मैं वास्तव में सुझाव देता हूं कि इंटरनेट स्रोतों से प्रतिक्रिया सीखने में गोता लगाने से पहले आपको सीखना चाहिए:

  • ईएस 6 कक्षाएं।
  • तीर का कार्य।
  • स्थिर
  • स्कोप (चर, कार्य)।
  • नक्शा () फ़ंक्शन।
  • विनाशकारी कार्य।
  • टेम्पलेट स्ट्रिंग। (वैकल्पिक, लेकिन यह स्ट्रिंग प्रारूप के लिए अच्छा है)

मैंने वेबपैक सीखा

रिएक्ट वेबपैक को डिफ़ॉल्ट बिल्ड टूल के रूप में उपयोग करता है। इसलिए ऐप बनाने के लिए वेबपैक का उपयोग करना सीखना आवश्यक है। लेकिन इस समय, वेबपैक ग्रंट या गल्प के रूप में इतना लोकप्रिय नहीं था, और वेबपैक फ़ंक्शन को समझाने के लिए कोई भी अच्छा और स्पष्ट ट्यूटोरियल ढूंढना मुश्किल है।

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

हालांकि, इस पोस्ट के वर्तमान समय में, वेबपैक लोकप्रिय हो गया है और वेबपैक के लिए कई उच्च गुणवत्ता और उदाहरण हैं। यदि आप वेबपैक पर नए हैं और इसे सीखना चाहते हैं तो मैं निम्नलिखित पृष्ठ सुझाता हूं।

  • https://webpack.github.io/docs/tutorials/getting-started/
  • https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.bw960lct3
  • https://github.com/AriaFallah/WebpackTutorial
  • https://dinosaurscode.xyz/tutorials/2016/07/24/beginner-friendly-webpack-tutorial/
  • http://www.edc4it.com/blog/web/webpack-tutorial.html

यदि आवश्यक हो तो आप बाद में लोडर और प्लगइन्स में गहरी खुदाई कर सकते हैं।

मैंने रिएक्ट सीखा

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

यदि आप प्रतिक्रिया के लिए पूरी तरह से नए हैं, तो कुछ अवधारणाओं को सावधानी से सीखा जाना चाहिए:

  • राज्य।
  • रंगमंच की सामग्री।
  • प्रतिक्रिया घटक जीवनचक्र।
  • और "shouldComponentUpdate ()" से अवगत होना चाहिए।

उन्हें सीखने से बाईपास न करें या आप बाद में पछताएंगे!

मैंने ReactRouter सीखा

फ्रंट-एंड पर नेविगेट करना महत्वपूर्ण है, इसलिए ReactRouter की आवश्यकता है। इस सीखने के हिस्से में मुझे काफी समय लगा। मैं ReactRouter सीखने के लिए प्रोजेक्ट बनाता और हटाता रहता हूं। क्योंकि मेरा दिमाग एंगुलर में एनकाउंटर के इतने करीब था, इसलिए कंपोनेंट के जरिए रिएक्ट में रूट करने के बारे में सोचना मुश्किल है।

इस पोस्ट के वर्तमान समय में, ReactRouter के लिए कई ट्यूटोरियल हैं, इसलिए मैं कई लिंक प्रदान नहीं करता, बस यह एक मुझे लगता है कि यह शुरुआत के लिए काफी अच्छा है:

  • https://github.com/reactjs/react-router-tutorial

मैंने फ्लक्स सीखा

फ़्लक्स फेसबुक रिएक्ट टीम द्वारा फ्रंट-एंड आर्किटेक्चर डिज़ाइन है। यह कोणीय की तरह * एमवी * से बेहतर है। मैंने अपनी फ्लक्स सीखने की शुरुआत रिफ्लक्स से की। मैं पहले फ्लक्स कार्यान्वयन पुस्तकालय सीखने पर एक कठिन समय था। अवधारणा ठीक थी, लेकिन बाद में जटिल डेटा प्रवाह ऐप के साथ, मैंने डेटा प्रबंधन पर अपना ट्रैक याद किया। डीबग कठिन था ... क्योंकि यह घटना-आधारित है। वैसे भी, उस कठिनाई के कारण रेफ़्लक्स का उपयोग करना सीखना, मुझे फ्लक्स वास्तुकला का विचार मिला। फिर मुझे कुछ पुस्तकालयों को खोजने की जरूरत पड़ी जो मुझे डेटा को बेहतर तरीके से प्रबंधित करने में मदद कर सकें। सौभाग्य से, Redux 200!

मैंने Redux सीखा

मैंने डॉक्स पढ़े और कुछ ही समय में Redux सीखा। लेखक द्वारा उल्लिखित आसान और त्वरित:

Reducers, मिडलवेयर, स्टोर एन्हांसर्स के बारे में सभी फैंसी चर्चा से मूर्ख मत बनो - Redux अविश्वसनीय रूप से सरल है। यदि आपने कभी फ्लक्स एप्लिकेशन बनाया है, तो आप घर पर ही सही महसूस करेंगे। यदि आप फ्लक्स में नए हैं, तो यह बहुत आसान है! - ReduxJS प्रलेखन।

केवल स्वयं द्वारा कई बार टोडलिस्ट ऐप को फिर से लिखें, आप इसे वास्तविक रूप से सीखेंगे। मैं इस पर आपसे वादा करता हूँ!

Redux का उपयोग करते समय याद रखने वाली दो बातें हैं:

  • डेटा हमेशा अपरिवर्तनीय होना चाहिए। अपने डेटा को अपरिवर्तनीय बनाने के लिए यह एक अच्छा और बहुत अच्छा अभ्यास है यदि आप जादूगरों को अपने ऐप में कहीं छुपाने के लिए समय नहीं देना चाहते हैं।
  • देखभाल के साथ async कार्रवाई संभाल। आप अतुल्यकालिक ऑपरेशन में कहीं डेटा खोना नहीं चाहते हैं, है ना?

मैंने छोटे से लेकर बड़े तक कई ऐप बनाने का अभ्यास करके सीखा

यदि आप इसका उपयोग नहीं कर रहे हैं तो आप वास्तव में कुछ हासिल नहीं करेंगे। प्रतिक्रिया के करीब पहुंचने के लिए दिमाग की प्रक्रिया को ठीक करने का यह सबसे महत्वपूर्ण हिस्सा है। कई छोटे विचारों को सोचने और उन्हें रिएक्ट में लागू करने की कोशिश करें।

मैंने और सीखा ।।

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

  • RxJS।
  • सर्वर रेंडरिंग।
  • ग्राफक्लाइन और रिले।
  • JSON ग्राफ और फाल्कोर।

मुझे रिएक्ट और उसके पड़ोस में खुदाई करने में 3.5 महीने का समय लगा। लेकिन यह मुझे बहुत समय बचाता है, बड़े पुराने कोणीय एप्स को फिर से लिखकर, जो मुझे रिएक्ट का उपयोग करके 5 सप्ताह में विकसित करने के लिए 3 महीने लग गए। यदि आप इसे सही तरीके से सीखते हैं तो चीजें आसान हो जाती हैं, और रिएक्ट महान है। ऐप के लिए, मैंने रिएक्टिव नेटिव का उपयोग नहीं किया क्योंकि यह वहां नहीं था। मैं 2014 में मोबाइल ऐप बनाने के लिए रिएक्ट के साथ अपाचे कॉर्डोवा का उपयोग करता हूं। किसी तरह, यह काम करता है, यह सिर्फ काम करता है!

यदि आप वास्तव में रिएक्ट सीखना चाहते हैं, तो यहाँ मेरे दो सेंट: "जल्दी मत करो, शांत रहो और रिएक्ट स्टेप-बाय-स्टेप सीखो!"।

अपनी प्रतिक्रिया यात्रा पर चीयर्स और शुभकामनाएँ! :)