रिएक्ट ट्यूटोरियल पार्ट 1: कोर्स ओवरव्यू, रिएक्ट, रिएक्टडॉम, और लोकप्रियता के लिए जेएसएक्स कारण

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



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

पाठ 1. पाठ्यक्रम का अवलोकन और इसके विकास के लिए सिफारिशें

→ मूल

रिएक्ट फंडामेंटल कोर्स में आपका स्वागत है। मेरा नाम बॉब ज़िरोल है, मैं आपको दुनिया के सबसे लोकप्रिय वेब फ्रेमवर्क में से एक का उपयोग करके फ्रंट-एंड प्रोजेक्ट बनाने का तरीका बताऊंगा। मैं कंप्यूटर शिक्षा के क्षेत्र में कई वर्षों से काम कर रहा हूं, विशेष रूप से, अब मैं वी स्कूल में शैक्षिक प्रक्रिया के संगठन का प्रभारी हूं।

▍ कोर्स की विकास प्रक्रिया के बारे में

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

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

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

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

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

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

AndStructure और पूर्वापेक्षाएँ

यहाँ पाठ्यक्रम के मुख्य विषयों की एक सूची दी गई है:

• घटकों। प्रतिक्रिया की बात करते हुए, घटकों की अवधारणा की चर्चा से बचा नहीं जा सकता है। पुन: उपयोग के लिए उपयुक्त HTML स्निपेट बनाने के लिए रिएक्ट में घटक मुख्य बिल्डिंग ब्लॉक हैं। और लगभग सब कुछ जो हम बात करेंगे, वह वेब एप्लिकेशन बनाने के लिए इन घटकों का उपयोग करने से संबंधित है।
• JSX। यह एक जावास्क्रिप्ट सिंटैक्स एक्सटेंशन है जो आपको HTML और जावास्क्रिप्ट की क्षमताओं का उपयोग करके घटक बनाने की अनुमति देता है।
• घटकों का स्थिरीकरण। स्टाइलिंग घटकों को एक आकर्षक स्वरूप देता है।
• आवेदन में गुण और डेटा विनिमय। गुणों का उपयोग घटकों के बीच डेटा स्थानांतरित करने के लिए किया जाता है।
• राज्य। किसी अनुप्रयोग में डेटा को संग्रहीत और प्रबंधित करने के लिए घटक राज्य तंत्र का उपयोग किया जाता है।
• इवेंट हैंडलिंग। इवेंट आपको एप्लिकेशन उपयोगकर्ताओं के साथ इंटरैक्टिव संबंध स्थापित करने की अनुमति देते हैं।
• घटक जीवन चक्र विधियाँ। ये विधियां प्रोग्रामर को घटकों के साथ होने वाली विभिन्न घटनाओं को प्रभावित करने की अनुमति देती हैं।
• HTTP प्रोटोकॉल का उपयोग करके बाहरी API से डेटा डाउनलोड करें।
• रूपों के साथ काम करें।

इस पाठ्यक्रम में उत्पादक होने के लिए, आपको HTML, CSS और जावास्क्रिप्ट (ES6) को जानना होगा।

पाठ 2. प्रशिक्षण परियोजनाएँ

→ मूल

इस पाठ्यक्रम को पूरा करने की प्रक्रिया में, आप शैक्षिक परियोजनाओं का विकास करेंगे। उनमें से कुछ पर एक नज़र डालें।

हमारा पहला विकास एक मानक TODO अनुप्रयोग होगा।


टोडो आवेदन

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


TODO आवेदन में चिह्नित मामले

और यहाँ हमारा कोर्स प्रोजेक्ट है - एक मेम जनरेटर।


मेमे जनरेटर

इस एप्लिकेशन के साथ काम करते समय, ग्रंथों को Top Text और Bottom Text फ़ील्ड में दर्ज किया जाता है, जो क्रमशः, छवि के ऊपरी और निचले हिस्सों में गिर जाएगा। Gen बटन पर क्लिक करके, प्रोग्राम बेतरतीब ढंग से संबंधित एपीआई से एक मेम छवि का चयन करता है और इसमें पाठ जोड़ता है। यहाँ एक उदाहरण दिया गया है कि यह अनुप्रयोग कैसे काम करता है:


तैयार मेम

पाठ 3. क्यों प्रतिक्रिया और क्यों यह सीखने लायक है?

→ मूल

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

अभी के लिए, हमारे लिए यह जानना पर्याप्त है कि वर्चुअल DOM वेब अनुप्रयोगों को चलाने में मदद करता है जैसे कि वे नियमित JS का उपयोग कर रहे हैं। एक और वास्तव में महान लाभ जो रिएक्ट हमें देता है वह है वेब उपकरणों को पुन: उपयोग के लिए उपयुक्त बनाने की क्षमता। एक उदाहरण पर विचार करें।

हमारे पास बूटस्ट्रैप लाइब्रेरी से एक मानक navbar तत्व है।


नेविगेशन बार

यदि आपने पहले बूटस्ट्रैप का उपयोग नहीं किया है, तो पता है कि यह सिर्फ एक CSS पुस्तकालय है जो वेब डेवलपर्स को खूबसूरती से डिजाइन किए गए तत्व देता है। कोड की लगभग चार दर्जन पंक्तियाँ हैं, यह सब बोझिल लग रहा है, ऐसे कोड में नेविगेट करना आसान नहीं है। यदि आप एक HTML पृष्ठ में यह सब शामिल करते हैं, जिसमें पहले से ही बहुत सारी चीजें हैं, तो ऐसे पृष्ठ का कोड बस विभिन्न डिजाइनों के साथ अतिभारित होगा।

प्रतिक्रियाशील वेब घटक आपको HTML कोड के स्निपेट लेने की अनुमति देते हैं, उन्हें अलग घटकों के रूप में व्यवस्थित करते हैं, और, इन स्निपेट को पृष्ठ में जोड़ने के बजाय, पृष्ठ संरचना में विशेष HTML टैग जैसी कोई चीज़ शामिल करते हैं। हमारे मामले में, पृष्ठ में HTML मार्कअप की चालीस लाइनें जोड़ने के बजाय, इसकी संरचना में इस मार्कअप वाले घटक को शामिल करना पर्याप्त है। हमने इसे MySweetNavbar कहा है।


वेब बनाने के लिए घटक दृष्टिकोण

आप इस तरह के एक घटक को पसंद कर सकते हैं। जैसा कि आप देख सकते हैं, घटक-आधारित पेज लेआउट पढ़ना बहुत आसान है। डेवलपर तुरंत ऐसे पृष्ठ की समग्र संरचना को देखता है। इस मामले में, जैसा कि आप <body> की सामग्री से देख सकते हैं, पृष्ठ के शीर्ष पर एक नेविगेशन बार ( MySweetNavbar ) है, मध्य में मुख्य सामग्री ( MainContent ), और पृष्ठ के निचले भाग में एक पाद लेख ( MySweetFooter ) है।

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

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

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

पाठ 4: विकास पर्यावरण, ReactDOM, और JSX

→ मूल

यहाँ हम इस बारे में बात करेंगे कि कैसे ReactDOM का उपयोग करके एक सरल रिएक्ट एप्लिकेशन बनाएं और JSX के बारे में कुछ प्रमुख बिंदुओं को स्पर्श करें। लेकिन, इससे पहले कि हम कोड के साथ काम करना शुरू कर दें, आइए इस कोड को कहां चलाएं।

▍ विकास पर्यावरण

रिएक्ट-कोड के साथ प्रयोग करने के लिए, शायद एक पूर्ण स्थानीय विकास पर्यावरण को तैनात करना सबसे अच्छा होगा। ऐसा करने के लिए, आप हाल ही में प्रकाशित React.js सामग्री का उल्लेख कर सकते हैं : शुरुआती लोगों के लिए एक सहज ज्ञान युक्त मार्गदर्शिका , विशेष रूप से, इसके अनुभाग प्रतिक्रिया अनुप्रयोग विकास अभ्यास के लिए। अर्थात्, प्रयोगों को शुरू करने के लिए, आपको create-react-app का उपयोग करके एक नया एप्लिकेशन बनाने की आवश्यकता है, फिर स्थानीय विकास सर्वर शुरू करें और कोड को संपादित करना शुरू करें। अगर हम सबसे सरल उदाहरणों के बारे में बात कर रहे हैं, तो उनके कोड को सीधे मानक index.js फ़ाइल में दर्ज किया जा सकता है, इसमें कोड हटाकर या टिप्पणी करके।

index.html । index.html फ़ाइल की सामग्री create-react-app द्वारा बनाई गई परियोजना में इस पाठ्यक्रम में प्रदान की जाने वाली उदाहरणों में अपनी सामग्री से मेल खाती है। विशेष रूप से, हम पहचानकर्ता root साथ <div> तत्व के पृष्ठ पर उपस्थिति के बारे में बात कर रहे हैं।

एक और विकल्प जो आमतौर पर कुछ बहुत ही सरल प्रयोगों के लिए उपयुक्त होता है, वह है ऑनलाइन प्लेटफ़ॉर्म जैसे कि कोडपेन.आईओ। उदाहरण के लिए, यहां दान अब्रामोव की प्रतिक्रिया एप्लिकेशन की एक डेमो परियोजना है। रिएक्ट के साथ प्रयोगों के लिए एक कोडपेन प्रोजेक्ट तैयार करने का सार यह है कि react और react-dom लाइब्रेरीज़ को इससे जोड़ा जाए (यह पृष्ठ के शीर्ष पर Settings बटन पर क्लिक करके, विंडो में JavaScript सेक्शन में जाकर दिखाई देता है जो प्रोजेक्ट के साथ जुड़ता है और उन्हें खोजने के बाद कनेक्ट होता है। अंतर्निहित खोज प्रणाली का उपयोग करना, आवश्यक पुस्तकालय)।

यह संभव है कि आप, प्रयोग के लिए, स्क्रिम्बा की क्षमताओं का उपयोग करने के लिए सुविधाजनक होंगे। ऐसा करने के लिए, आप संबंधित पाठ के लिए केवल पृष्ठ खोल सकते हैं। इन पृष्ठों के लिंक संख्याओं और व्यवसाय नामों के साथ शीर्षकों के नीचे पाए जा सकते हैं।

▍फर्स्ट प्रोग्राम

यह ध्यान दिया जाना चाहिए कि हमारे उदाहरणों में हम ES6 (ES2015) की क्षमताओं का उपयोग करेंगे, इसलिए आपके लिए उन्हें नेविगेट करने की अत्यधिक सलाह दी जाती है। विशेष रूप से, परियोजना में react पुस्तकालय को आयात करने के लिए, निम्नलिखित निर्माण का उपयोग किया जाता है:

 import React from "react" 

और इसलिए आप react-dom लाइब्रेरी आयात कर सकते हैं:

 import ReactDOM from "react-dom" 

अब हम स्क्रीन पर कुछ प्रदर्शित करने render() ReactDOM की render() ReactDOM उपयोग करेंगे:

 ReactDOM.render() 

यदि आप प्रयोगों के लिए create-react-app द्वारा बनाई गई परियोजना का उपयोग करने का निर्णय लेते हैं, तो अब इसका index.js फ़ाइल (VSCode में खोला गया) निम्न आकृति में दिखाए गए की तरह दिखेगा।


Index.js में कोड दर्ज करना

यदि आपके पास एक डेवलपमेंट सर्वर चल रहा है और ब्राउज़र में http://localhost:3000/ पेज ओपन है, तो आप इस तरह के index.js को सेव करने पर एरर मैसेज को सेव कर लेंगे। यह, काम के इस चरण में, पूरी तरह से सामान्य है, क्योंकि हमने अभी तक सिस्टम को इस बारे में सूचित नहीं किया है कि हम render() कमांड को कहां और कहां प्रदर्शित करना चाहते हैं।

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

render() विधि में दो तर्क होते हैं। पहला वह होगा जो हम बाहर लाना चाहते हैं, और दूसरा वह स्थान होगा जहाँ हम कुछ बाहर लाना चाहते हैं। यदि यह छद्म कोड के रूप में लिखा गया है, तो निम्न प्राप्त किया जाएगा:

 ReactDOM.render( ,  ) 

क्या हम उत्पादन करना चाहते हैं किसी न किसी HTML पृष्ठ से जुड़ा होना चाहिए। जो कोड हम लिखेंगे वह HTML तत्वों में बदल जाएगा जो पेज पर मिलेगा।

यह पृष्ठ इस प्रकार दिख सकता है।

 <html>   <head>       <link rel="stylesheet" href="style.css">   </head>   <body>       <div id="root"></div>       <script src="index.js"></script>   </body> </html> 

HTML पेज के सभी मूल तत्व हैं, जिनमें <link> टैग और <script> ।

यदि आप create-react-app उपयोग करते create-react-app , तो index.html पेज थोड़ा अलग दिखेगा। विशेष रूप से, इसके कोड में कोई आयात index.js । तथ्य यह है कि एक परियोजना का निर्माण करते समय, index.html और index.js बीच का कनेक्शन स्वचालित रूप index.js किया जाता है ।

root पहचानकर्ता के साथ <div> तत्व पर ध्यान दें। इस तत्व के खुलने और बंद होने के टैग के बीच, रिएक्ट वह सब कुछ देगा जो हम बनाते हैं। इस तत्व को हमारे पूरे आवेदन के लिए एक कंटेनर माना जा सकता है।

यदि हम अब index.js फ़ाइल ReactDOM की render() ReactDOM , इसका दूसरा तर्क, वह स्थान जहां डेटा आउटपुट होना चाहिए, पहचानकर्ता root साथ <div> तत्व का संदर्भ होगा। यहां हम साधारण जावास्क्रिप्ट का उपयोग करेंगे, जिसके बाद रेंडर विधि का दूसरा तर्क इस तरह दिखेगा:

 ReactDOM.render( , document.getElementById("root")) 

इस दृष्टिकोण के साथ, render() विधि पहले तर्क को लेती है और यह निर्दिष्ट स्थान पर जो कुछ भी बताती है उसे आउटपुट करती है। अब इस पहले तर्क पर उतरते हैं। आइए सरल <h1> तत्व से शुरू करें। और, जैसा कि आम तौर पर होता है कि पहला प्रोग्राम लिखते समय, Hello world! जोड़ Hello world! :

 ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root")) 

यदि आप अब ब्राउज़र पृष्ठ को रीफ़्रेश करते हैं, तो यह पहले स्तर के शीर्षक के रूप में, निर्दिष्ट पाठ प्रदर्शित करेगा।


पहले कार्यक्रम का परिणाम

यहां आपके पास एक प्रश्न हो सकता है कि हम HTML तत्व का वर्णन उस स्थान पर क्यों करें जहां जावास्क्रिप्ट विधि का तर्क अपेक्षित है। आखिरकार, जावास्क्रिप्ट का सामना <h1>Hello world!</h1> जैसी किसी चीज़ से होगा, शायद यह तय करेगा कि इस अभिव्यक्ति का पहला चरित्र "कम" ऑपरेटर है, फिर, जाहिर है, चर नाम आगे आता है, फिर "अधिक" तुलना ऑपरेटर "। जावास्क्रिप्ट पात्रों के इस क्रम में एक HTML तत्व को नहीं पहचानता है, और यह नहीं होना चाहिए।

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

हमने एक काफी सरल और संक्षिप्त निर्देश पेश किया, लेकिन प्रतिक्रिया के दौरान, जब इसे निष्पादित किया जाता है, तो बहुत सारी दिलचस्प चीजें होती हैं। इसलिए, इस निर्देश को इसके जावास्क्रिप्ट संस्करण में बदल दिया गया है, HTML कोड उत्पन्न किया जा रहा है, हालाँकि हम इस प्रक्रिया के विवरण में नहीं जाते हैं। यही कारण है कि हमें न केवल react-dom को आयात करने की आवश्यकता है, बल्कि परियोजना में भी react , क्योंकि रिएक्ट लाइब्रेरी वास्तव में वही है जो हमें JSX का उपयोग करने और JSX-constructs को अपेक्षित रूप से काम करने की अनुमति देती है। यदि हम अपने उदाहरण import React from "react" लाइन से हटाते हैं, तो स्क्रिप्ट फ़ाइल को सहेजें और पृष्ठ को ताज़ा करें, एक त्रुटि संदेश प्रदर्शित किया जाएगा। विशेष रूप से, create-react-app हमें बताएगा कि आप JSX का उपयोग रिएक्ट तक नहीं कर सकते ( 'React' must be in scope when using JSX react/react-in-jsx-scope )।

तथ्य यह है कि भले ही रिएक्ट का हमारे उदाहरण में सीधे उपयोग नहीं किया गया है, लेकिन लाइब्रेरी का उपयोग JSX के साथ काम करने के लिए किया जाता है।

JSX के साथ काम करने के बारे में एक और बात जो मैं आपका ध्यान आकर्षित करना चाहता हूं वह यह है कि आप JSX तत्वों को प्रस्तुत नहीं कर सकते हैं जो एक के बाद एक का पालन करते हैं। मान लीजिए कि <h1> तत्व के बाद आपको <p> तत्व आउटपुट करने की आवश्यकता है। आइए इस डिज़ाइन का उपयोग करने का प्रयास करें:

 ReactDOM.render(<h1>Hello world!</h1><p>This is a paragraph</p>, document.getElementById("root")) // 

यदि उसके बाद, पृष्ठ को रीफ्रेश करें - एक त्रुटि संदेश प्रदर्शित होगा ( create-react-app यह एक Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag जैसा दिखता है Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag )। इस त्रुटि का सार यह है कि ऐसे तत्वों को किसी अन्य तत्व में लपेटा जाना चाहिए। अंत में क्या निकलेगा, एक तत्व की तरह दिखना चाहिए जिसमें दो तत्व निहित हों।

हमारे उदाहरण के लिए काम करने के लिए, हम <h1>Hello world!</h1><p>This is a paragraph</p> लपेटते <h1>Hello world!</h1><p>This is a paragraph</p> <div> तत्व में <h1>Hello world!</h1><p>This is a paragraph</p> कोड है:

 ReactDOM.render(<div><h1>Hello world!</h1><p>This is a paragraph</p></div>, document.getElementById("root")) 

यदि आप अब पृष्ठ को ताज़ा करते हैं, तो सब कुछ अपेक्षित रूप से दिखेगा।


प्रति पृष्ठ दो HTML तत्व

JSX का उपयोग करने में कुछ समय लगेगा, लेकिन उसके बाद इसका उपयोग HTML जावास्क्रिप्ट टूल का उपयोग करके HTML तत्वों के साथ काम करने की तुलना में बहुत आसान और अधिक सुविधाजनक होगा। उदाहरण के लिए, <p> तत्व का वर्णन करने और मानक उपकरणों का उपयोग करके इसकी सामग्री को कॉन्फ़िगर करने के लिए, आपको निम्न की तरह कुछ की आवश्यकता होगी:

 var myNewP = document.createElement("p") myNewP.innerHTML = "This is a paragraph." 

फिर आपको इसे उस तत्व से कनेक्ट करना होगा जो पहले से ही पृष्ठ पर है। यह अनिवार्य प्रोग्रामिंग का एक उदाहरण है, और उसी, जेएसएक्स के लिए धन्यवाद, एक घोषणात्मक शैली में किया जा सकता है।

पाठ 5. कार्यशाला। ReactDOM और JSX

→ मूल

अंतिम पाठ में, आप ReactDOM और JSX से मिले, और अब इस ज्ञान को व्यवहार में लाने का समय आ गया है।

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

यदि आपको लगता है कि आप नकल नहीं कर रहे हैं, तो पिछले पाठ पर लौटें, उपयुक्त सामग्री दोहराएं और फिर से प्रयास करें।

▍Zadanie

पृष्ठ पर एक बुलेटेड सूची ( <ul> ) प्रदर्शित करने वाला एक रिएक्ट एप्लिकेशन लिखें। इस सूची में किसी भी पाठ के साथ तीन तत्व ( <li> ) होने चाहिए।

▍Podskazki

सबसे पहले, आपको परियोजना में आवश्यक पुस्तकालयों को आयात करने की आवश्यकता है, और फिर पृष्ठ पर कुछ JSX कोड का उपयोग करके उत्पन्न तत्वों को प्रदर्शित करने के लिए उनमें से एक का उपयोग करें।

परिणाम

अब, जब आप प्रतिक्रिया पाठ्यक्रम के पहले पाठों से खुद को परिचित करते हैं, तो हम आपसे सर्वेक्षण में भाग लेने के लिए कहते हैं।

आपका ध्यान के लिए धन्यवाद!



→ भाग 1: पाठ्यक्रम अवलोकन, प्रतिक्रिया की प्रतिक्रिया के कारण, ReactDOM और JSX
→ भाग 2: कार्यात्मक घटक
→ भाग 3: घटक फाइलें, परियोजना संरचना
→ भाग 4: माता-पिता और बच्चे के घटक
→ भाग 5: एक TODO आवेदन, स्टाइलिंग की मूल बातें पर काम शुरू
→ भाग 6: पाठ्यक्रम की कुछ विशेषताओं के बारे में, जेएसएक्स और जावास्क्रिप्ट
→ भाग 7: इनलाइन शैली
→ भाग 8: TODO आवेदन पर काम जारी रखा, घटकों के गुणों से परिचित
→ भाग 9: घटक गुण
→ भाग 10: घटक गुणों और स्टाइल के साथ काम करने पर कार्यशाला
→ भाग 11: डायनेमिक मार्कअप जेनरेशन और मैप एरे विधि
→ भाग 12: कार्यशाला, एक TODO आवेदन पर काम का तीसरा चरण
→ भाग 13: वर्ग-आधारित घटक
→ भाग 14: वर्ग-आधारित घटकों, घटक स्थिति पर कार्यशाला
→ भाग 15: घटक स्वास्थ्य कार्यशालाएँ
→ भाग 16: TODO अनुप्रयोग, ईवेंट हैंडलिंग पर काम का चौथा चरण
→ भाग 17: TODO अनुप्रयोग पर काम का पांचवा चरण, घटकों की स्थिति को संशोधित करता है
→ भाग 18: TODO आवेदन पर काम का छठा चरण
→ भाग 19: घटक जीवन चक्र विधियाँ
भाग 20: सशर्त प्रतिपादन में पहला पाठ
→ भाग 21: सशर्त प्रतिपादन पर दूसरा पाठ और कार्यशाला
→ भाग 22: TODO आवेदन पर काम का सातवां चरण, बाहरी स्रोतों से डेटा डाउनलोड करना
→ भाग 23: रूपों के साथ काम करने पर पहला पाठ
→ भाग 24: दूसरा रूप पाठ
→ भाग 25: रूपों के साथ काम करने पर कार्यशाला
→ भाग 26: अनुप्रयोग वास्तुकला, कंटेनर / घटक पैटर्न
→ भाग 27: पाठ्यक्रम परियोजना