👨🏼‍💼 🤟🏿 🥂 ReactJS: त्वरित शुरुआत 🌵 👏🏾 🔆

React.js डेवलपर कोर्स शुरू होने वाला है , इसलिए OTUS की दीवारों के भीतर एक और खुला पाठ आयोजित किया गया था। निम्नलिखित मुद्दों पर विचार किया गया था:

मानक React.js सुविधा सेट में क्या शामिल है;
क्या इसके साथ एक जटिल एप्लिकेशन बनाना संभव है;
विरासत के खिलाफ रचना;
कार्यात्मक प्रोग्रामिंग - क्या यह आसान या कठिन है?
Redux क्या है और इसकी आवश्यकता क्यों है।

पाठ के अंत में, हमने एक छोटा सा ReactJS वेब एप्लिकेशन विकसित किया। वेबिनार को 8 साल के व्यावसायिक विकास के अनुभव के साथ एक सॉफ्टवेयर इंजीनियर निकिता ओविचनिकोव द्वारा होस्ट किया गया था ।

प्रतिक्रिया क्या है?

आप आधिकारिक वेबसाइट खोलकर इस सवाल का जवाब देखेंगे, जहां लिखा गया है कि रिएक्ट यूजर इंटरफेस बनाने के लिए जावास्क्रिप्ट लाइब्रेरी है।

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

रिएक्ट इतना लोकप्रिय क्यों है?

उदाहरण के लिए, पिछले 6 महीनों के आंकड़े , सर्दियों की छुट्टियों के दौरान विशेषता उपखंड की गणना नहीं करना , रिएक्ट की लोकप्रियता की गवाही देते हैं : निम्नलिखित आंकड़े

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

यह बहुत अच्छी तरह से प्रलेखित है :
- यहाँ एक ट्यूटोरियल है ;
- यहाँ शुरुआती के लिए एक गाइड है ।
हालांकि, आज ढांचा लोकप्रिय नहीं होगा अगर यह खराब दस्तावेज है;
React . , . ;
, — . JSX, , ;
. - , , , , , , , ;
. . , , , . React Angular;
(react-developer-tools, redux-dev-tools);
React , , .

React?

तो, परिचित हो जाओ - कमजोरी # 1: प्रतिक्रिया सीखना आसान नहीं है । और यहाँ क्यों है:

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

"फ़ेसबुक पर, हम हजारों घटकों में रिएक्ट का उपयोग करते हैं, और हमें कोई उपयोग के मामले नहीं मिले हैं जहाँ हम घटक विरासत पदानुक्रम बनाने की सिफारिश करेंगे । "

वास्तव में, यह कथन निराधार नहीं है, क्योंकि OOP में, निश्चित रूप से, कई प्रसिद्ध समस्याएं हैं, उदाहरण के लिए, अत्यधिक संख्या में सार। इसके अलावा, सभी डेवलपर्स विरासत की अविश्वसनीय श्रृंखला के निर्माण के समर्थक नहीं हैं और यह सब है, हालांकि, निश्चित रूप से, कहीं न कहीं विरासत आवश्यक और उपयोगी है।

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

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

पसंद की समस्या

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

दरअसल, प्रश्न " रिएक्ट हुक या रिएक्ट क्लास " का सही उत्तर मौजूद नहीं है। या, अधिक सटीक होने के लिए, सही उत्तर उन स्थितियों पर निर्भर करता है जिनमें आप यह प्रश्न पूछते हैं।

एक और सवाल उठता है: "प्रकार की जांच कैसे करें"? देखें हमारे पास:

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

फिर से, Create React App , Webpack.js और Babel है , इसलिए जैसे ही आप शुरू करेंगे, आपके सामने एक प्रश्न होगा कि यहां क्या उपयोग करना है?

पसंद की निम्नलिखित पीड़ा राज्य से जुड़ी हुई है । नहीं है Redux और वहाँ है MobX , और Redux अंदर वहाँ भी कर रहे हैं redux-गाथा और redux-thunk । और यह कठिन है, बिना कोशिश किए, यह महसूस करने के लिए कि किसी विशिष्ट स्थिति में उपयोग करने के लिए बेहतर क्या है।

के अतिरिक्त:

1. राउटर । लगभग पाँच हैं, यहाँ सबसे लोकप्रिय हैं:

2. सीएसएस-इन-जेएस । इस बहुत अच्छे दृष्टिकोण के ढांचे में, एक विकल्प भी है:

संक्षेप में, आप निम्नलिखित प्रतिक्रिया को सूचीबद्ध कर सकते हैं :

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

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

क्या ताकत है भाई?

उपरोक्त सभी के बावजूद, रिएक्ट एक बहुत शक्तिशाली तकनीक है। सबसे पहले, यदि आप एक पेशेवर हैं, तो काम करना बहुत आसान होगा। बल्कि, इसे मना करना मुश्किल होगा, क्योंकि बाजार पर बहुत सारे ऑफ़र हैं:

अगला प्लस बहुत सारे तैयार किए गए पुस्तकालय और समाधान हैं। यह GitHub से एक ही स्क्रीनशॉट द्वारा इंगित किया गया है (एक मिलियन से अधिक रिपॉजिटरी हैं):

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

के अतिरिक्त:

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

टाइपस्क्रिप्ट समर्थन

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

सामान्य तौर पर, टाइपस्क्रिप्ट के साथ काम करना सुनिश्चित करें, क्योंकि यह एक बहुत ही आवश्यक तकनीक है:

- https://www.typescriptlang.org/docs/handbook/react-&&& webpack.html।

सुझावों की एक जोड़ी

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

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

कार्यात्मक प्रोग्रामिंग सीखना क्यों मुश्किल है? क्योंकि बहुत बार किताबें गणित, अकादमिक जटिलता, आदि के साथ अतिभारित होती हैं, उसी पुस्तक के बाद, आप सफल होंगे, क्योंकि यह सिर्फ अद्भुत है।

कार्यात्मक प्रोग्रामिंग क्यों महत्वपूर्ण है? क्योंकि, Redux जैसी चीज़ कार्यात्मक प्रोग्रामिंग की बुनियादी नींव पर बनाई गई है। और कम से कम बुनियादी कार्यात्मक प्रोग्रामिंग में महारत हासिल करने के बाद, आप वास्तव में कोड को बहुत बेहतर लिखना शुरू कर देंगे। मुख्य बात यह है कि सब कुछ सही ढंग से समझना है।

दूसरा बिंदु जिसके बारे में मैं बात करना चाहूंगा वह है वास्तुकला। हमारी वास्तुकला सब कुछ है ! एक बहुत अच्छा वास्तुशिल्प प्रतिमान है जिसे बतख कहा जाता है। यह प्रतिक्रिया और Redux अनुप्रयोगों के निर्माण के बारे में है। यह वास्तुकला व्यावहारिक उपयोग के लिए अनुशंसित है।

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

संपूर्ण

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

बस इतना ही। यदि आप पाठ के व्यावहारिक भाग में रुचि रखते हैं, तो अभी से वेबिनार देखें । ReactJS पर एक छोटा परीक्षण वेब एप्लिकेशन विकसित किया जाएगा, जिसका कोड GitHub पर उपलब्ध है ।

ReactJS: त्वरित शुरुआत