प्रतिक्रिया-js एक जावास्क्रिप्ट ढांचा है जो हमें डेवलपर्स के रूप में कोड को और अधिक पुन:प्रयोज्य बनाने के लिए इनकैप्सुलेट करने की अनुमति देता है। इन एनकैप्सुलेटेड कोड स्निपेट्स को . कहा जाता है घटक . . में क्या हो रहा है, इसमें हस्तक्षेप किए बिना वे अपना तर्क और स्थिति पकड़ सकते हैं दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) .
डेटा को प्रसारित करने के लिए अपनी वेबसाइट के इन छोटे काटने-आकार के घटकों में सारगर्भित करने से आपका कोड पुन:प्रयोज्य और अधिक DRY बन जाता है ( डी नहीं आर खाएं वाई हमारा)। रिएक्ट में आपको दो मुख्य प्रकार के घटक मिलेंगे:कार्यात्मक और वर्ग घटक।
बहुत उच्च स्तर पर, रिएक्ट घटक मूल रूप से जावास्क्रिप्ट फ़ंक्शन होते हैं जो प्रॉप्स . को स्वीकार करते हैं एक पैरामीटर के रूप में और कुछ प्रतिक्रिया तत्व . लौटाएं जो मूल रूप से वर्णन करता है कि स्क्रीन पर क्या होना चाहिए:
इस मामले में प्रतिक्रिया तत्व यहाँ एक <div> है इसमें कुछ पाठ के साथ। वह पाठ एक प्रॉप्स ऑब्जेक्ट का उपयोग करता है जिसे घटक में पारित किया गया है। वह प्रॉप्स ऑब्जेक्ट अपने माता-पिता से बच्चों के घटकों को डेटा पास करेगा।
इस उदाहरण में, जो प्रस्ताव पारित किया गया है वह नाम है। तत्व जनक का प्रतिनिधित्व करता है।
कोई भी संपत्ति जिसे आप <Greeting . में भेजते हैं /> घटक इसे प्रॉप्स ऑब्जेक्ट में बनाएगा और ग्रीटिंग के अंदर उपयोग करने के लिए उपलब्ध होगा। यह ग्रीटिंग को सुपर पुन:प्रयोज्य बनाता है क्योंकि हम घटक में किसी भी नाम को पारित कर सकते हैं।
कार्यात्मक घटक
कार्यात्मक घटक, जैसा कि हमने पहले उल्लेख किया है, मूल रूप से जावास्क्रिप्ट फ़ंक्शन हैं। रिएक्ट घटक बनाते समय आप एक्मास्क्रिप्ट 5 (ES5) या एक्मास्क्रिप्ट a6 (ES6) सिंटैक्स का उपयोग कर सकते हैं। अंगूठे के एक नियम के रूप में, प्रतिक्रिया घटकों को यह इंगित करने के लिए पूंजीकृत किया जाना चाहिए कि वे वास्तव में घटक हैं।
<शीर्षक>मूल प्रतिक्रिया घटक <स्क्रिप्ट src="https://unpkg.com/react@16/umd/react.Develop.js" क्रॉसोरिजिन>
जब हम JSX का उपयोग नहीं कर रहे हैं, लेकिन सादे वेनिला जावास्क्रिप्ट का उपयोग कर रहे हैं, तो यह एक ES5 कार्यात्मक घटक कैसा दिखता है, इसका एक नकली, काम करने वाला उदाहरण है। HTML में क्या हो रहा है, इसके बारे में ज्यादा चिंता न करें। जावास्क्रिप्ट तर्क पर ध्यान दें:हमारे पास एक तत्व है जो बनाया जा रहा है, एक फ़ंक्शन जो कुछ लौटा रहा है और फिर उस फ़ंक्शन को किसी प्रकार के रिएक्टडॉम में प्रस्तुत किया जा रहा है।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
JSX क्या है - जावास्क्रिप्ट एक्सएमएल एक्सटेंशन के लिए छोटा - मूल रूप से हमें यह करने की अनुमति देता है कि हम अपने जावास्क्रिप्ट में HTML लिखें ताकि इसे HTML में देखने के लिए उपयोग किया जा सके। ऊपर दिए गए कोड उदाहरण में, हम अपने HTML तत्व को बनाने के लिए विशुद्ध रूप से जावास्क्रिप्ट का उपयोग कर रहे हैं और फिर <h4> डालने के लिए React की createElement विधि का उपयोग कर रहे हैं। DOM में <div id=”root />.
यदि हम अपने आवेदन को मापते हैं - हमारे आवेदन को इससे बहुत बड़ा बनाते हैं - तो इस प्रकार का लेखन काफी जल्दी बोझिल हो जाएगा। JSX को मूल रूप से React.createElement विधि के लिए वाक्यात्मक चीनी के रूप में बनाया गया था और हमें अपने ऐप्स को बहुत तेज़ी से स्केल करने की अनुमति देता है।
कार्यात्मक घटकों को ES5 या ES6 लिखा जा सकता है। यह एक उदाहरण है कि ES5 और ES6 कार्यात्मक घटक दोनों JSX का उपयोग करते हुए कैसा दिखता है:
ES5 कार्यात्मक घटक
<पूर्व> 'प्रतिक्रिया' से आयात प्रतिक्रिया; 'प्रतिक्रिया-डोम' से ReactDOM आयात करें; समारोह पशु (प्रॉप्स) { const तत्व =मेरी बिल्ली का नाम {props.name}
है; वापसी तत्व; } फ़ंक्शन ऐप () {वापसी <पशु नाम ="मार्शमैलो" />}; const domContainer =document.querySelector('#root'); ReactDOM.render(ES6 कार्यात्मक घटक
const Animal =(props) => { const element =मेरी बिल्ली का नाम {props.name}
है; वापसी तत्व; } कॉन्स्ट ऐप =() => {वापसी <पशु नाम ="मार्शमैलो" />}; const domContainer =document.querySelector('#root'); ReactDOM.render(
रिएक्ट v.16 से पहले, कार्यात्मक घटकों को स्टेटलेस . के रूप में जाना जाता था अवयव। इसका मतलब है कि घटक का मुख्य उद्देश्य प्रस्तुतिकरण होना था - पृष्ठ पर अच्छा दिखना। अक्सर, इन कार्यात्मक घटकों को डेटा पास किया जाता था ताकि वे उपयोगकर्ता इंटरफ़ेस पर कुछ प्रदर्शित कर सकें।
रिएक्ट v.16 के आने से सब कुछ बदल गया। हम इसमें थोड़ी देर में उतरेंगे। अभी के लिए, बस यह जान लें कि क्लाइंट को कुछ प्रस्तुत करने के लिए माता-पिता या किसी वैश्विक वस्तु से किसी प्रकार का डेटा प्राप्त करने के लिए कार्यात्मक घटक मौजूद हैं।
कक्षा के घटक
जावास्क्रिप्ट फ़ंक्शन "बस" की तुलना में क्लास घटक थोड़ा अधिक जटिल हैं। रिएक्ट में वर्ग घटक ES6 जावास्क्रिप्ट वर्ग की अवधारणा को उधार लेते हैं। जावास्क्रिप्ट में एक वर्ग की संरचना काफी हद तक एक वस्तु है जिसमें इसके साथ जुड़े गुण और विधियां हैं। हम this . का उपयोग करते हैं कीवर्ड उस वस्तु के उदाहरण तक पहुँचने और उसके साथ बातचीत करने के लिए।
रिएक्ट में, अधिकांश भाग के लिए, संरचना समान होती है। प्रतिक्रिया वर्ग के घटक किसी वस्तु का एक उदाहरण हैं और इस वस्तु में वह है जिसे हम राज्य कहते हैं। उच्च स्तर पर, राज्य केवल डेटा है जो घटक रखता है - इसे गुणों को स्थापित करने और इसे कक्षा में बांधने का एक और तरीका है। एक डेवलपर के रूप में आप उस डेटा के साथ जो चाहें कर सकते हैं:इसे स्क्रीन पर प्रस्तुत करें, इसे अन्य घटकों के पास पास करें, अन्य तर्क करने के लिए इसका उपयोग करें, आदि।
एक ES6 वर्ग घटक हमेशा कार्यात्मक घटकों की तरह ही पूंजीकृत होता है - यह एक प्रतिक्रिया नियम है ताकि ट्रांसपिलर को पता चले कि यह एक घटक है। क्योंकि हमें रिएक्ट से ही घटक संरचना विरासत में मिली है, हमें विस्तार . करना होगा रिएक्ट का Component कक्षा। कोड के उस ब्लॉक के अंदर हम अपना राज्य रखेंगे:
राज्य गुणों और मूल्यों से भरी वस्तु है। हमारे यहां के राज्य में प्रजातियों की संपत्ति है और इसका मूल्य जानवरों से भरी एक सरणी है। इस सरणी को संदर्भित करने या इसके साथ बातचीत करने के लिए, हम this.state.species. . का उपयोग करते हैं
उपरोक्त वर्ग घटक का उद्देश्य जानवर के नाम को <Name /> . तक पहुंचाना है अवयव। <Name /> घटक का काम उस डेटा के साथ कुछ करना है जब वह इसे प्राप्त करता है। एक कार्यात्मक या अन्य वर्ग घटक को पारित करने पर पशु की स्थिति एक सहारा वस्तु का हिस्सा बन जाएगी। जब तक यह पास होता रहेगा तब तक इसे चाइल्ड कंपोनेंट्स में एक्सेस किया जा सकेगा।
बस याद रखें कि रिएक्ट में, डेटा पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट में केवल एक स्तर पर प्रवाहित होता है। यदि आपको माता-पिता के पोते के घटक में डेटा की आवश्यकता है, तो आपको इसे दूसरे स्तर पर पास करना होगा।
रिएक्ट में वर्ग घटकों की एक अन्य विशेषता यह है कि हमारे पास अपने राज्य पर नज़र रखने के लिए जीवनचक्र विधियों तक पहुँच और उपयोग है। प्रतिक्रिया जीवनचक्र में आमतौर पर तीन चरण होते हैं:वे बनाए जाते हैं (बढ़ते हैं), वे रहते हैं (अपडेट) और वे मर जाते हैं (अनमाउंटिंग)। जीवनचक्र विधि के प्रत्येक चरण में राज्य तक पहुँचने और/या बदलने की विधियाँ हैं:
- ComponentDidMount() - यह जीवनचक्र विधि है जहां हम राज्य को प्रारंभ करने के लिए AJAX अनुरोध/नेटवर्क अनुरोध करेंगे। अपने पुनर्प्राप्त डेटा को राज्य में लोड करने के लिए this.setState() का उपयोग करें।
- ComponentDidUpdate() - राज्य के लिए कोई भी अपडेट उपयोगकर्ता द्वारा एप्लिकेशन के साथ इंटरैक्ट करने के बाद यहां होता है।
- ComponentDidUnmount() - यह एक क्लीनअप फंक्शन है जो कंपोनेंट के अनमाउंट होने पर होता है। यह टाइमर, AJAX अनुरोधों आदि का ध्यान रखेगा।
इनसे अधिक जीवनचक्र विधियाँ हैं - जो सूचीबद्ध हैं वे केवल मुख्य हैं। कृपया इन विधियों के बारे में अधिक जानकारी के लिए प्रतिक्रिया दस्तावेज़ देखें।
अंत में, फंक्शनल कंपोनेंट के रिटर्न स्टेटमेंट के विपरीत, क्लास कंपोनेंट्स एक render() . का उपयोग करते हैं तरीका। जब ReactDOM.render() एनिमल कंपोनेंट पास करता है और रिएक्ट इसके कंस्ट्रक्टर को कॉल करता है, तो इस विधि को लागू किया जाता है। स्टेट को तब इनिशियलाइज़ किया जाता है और फिर रेंडर मेथड को वास्तव में स्क्रीन पर कंटेंट डालने के लिए कहा जाता है।
वाह! यह बहुत सारी जानकारी है।
बस याद रखें कि कार्यात्मक घटक React v. 16 से पहले मुख्य रूप से प्रस्तुतिकरण थे - उन्होंने राज्य को नहीं संभाला - उन्होंने इसे अभी प्रदर्शित किया। वर्ग घटकों ने हमारे लिए सभी राज्य तर्कों को विस्तृत किया और सूचना को अन्य घटकों को सहारा के रूप में पारित किया।
कार्यात्मक घटक और useState()
2018 में, रिएक्ट ने रिएक्ट हुक्स . का विचार पेश किया . हुक एक कार्यात्मक घटक के अंदर जीवनचक्र विधियों और राज्य का उपयोग करने का एक साफ और संक्षिप्त तरीका है।
अधिकांश सब कुछ बहुत कुछ वैसा ही है जैसा हमने अब तक कवर किया है। हमारे पास कुछ राज्य है, हमें इसके साथ कुछ करने की जरूरत है, और हमें इसे कहीं और पास करने की जरूरत है। मुख्य उद्देश्य समान हैं। वाक्य रचना बहुत साफ-सुथरी है - इसके लिए बस थोड़े से अभ्यस्त होने की आवश्यकता है।
मैं क्या करूँगा इस साइट को बुकमार्क करना, अभ्यास करना, और कक्षा घटकों के लिए कुछ दोहराव प्राप्त करना, वास्तव में समझना रिएक्ट में डेटा प्रवाह कैसे काम करता है, और फिर स्टेटफुल फंक्शनल कंपोनेंट्स के बारे में सीखना समाप्त करने के लिए यहां वापस आएं .
आइए उस कोड से शुरू करें जो हमारे पास पहले था:
मेरी बिल्ली का नाम {props.name}
है; वापसी तत्व; } कॉन्स्ट ऐप =() => {कास्ट [स्टेट, सेटस्टेट] =यूज़स्टेट ('मार्शमैलो'); वापसी <पशु नाम ={राज्य}/>}; const domContainer =document.querySelector('#root'); ReactDOM.render(
हमारे पास दो घटक हैं, एक पशु और एक ऐप। ऐसा लगता है कि ऐप एनिमल को लौटा रहा है और "मार्शमैलो" के मान के साथ नाम के प्रोप में गुजर रहा है।
मानो या न मानो, इसे कुछ स्टेटफुल लॉजिक में बदलने के लिए हमें बहुत कुछ नहीं करना है। आइए एक नज़र डालते हैं
आयात प्रतिक्रिया, {useState} 'react' से; — यह लाइन हमारे हुक को इम्पोर्ट करेगी, यूजस्टेट।
const [स्टेट, सेटस्टेट] =यूज़स्टेट ('मार्शमैलो'); - यह रेखा हमारे राज्य की शुरुआत करती है। राज्य और सेटस्टेट यहाँ मनमाना शब्द हैं। आप इन्हें जो चाहें नाम दे सकते हैं। मूल्य क्या है, इसके बाद उनका नाम रखने की प्रथा है।
- राज्य हमारी वास्तविक स्थिति है। प्रारंभिक स्थिति useState() में कोष्ठक के अंदर है।
- सेटस्टेट इस के समान है। सेटस्टेट ()। यह वह तरीका है जो हमारे राज्य को बदल देगा क्योंकि हम अपने आवेदन के माध्यम से यात्रा करते हैं।
<पूर्व> वापसी <पशु नाम ={राज्य}/>
- "मार्शमैलो" को {राज्य} से बदलें। जब हमें JSX में JavaScript लिखने की आवश्यकता होती है, तो हम घुंघराले ब्रेसिज़ का उपयोग करते हैं। यहां घुंघराले ब्रेसिज़ हमें अपने वेरिएबल में पास करने की अनुमति देते हैं।
वर्ग घटकों को परिभाषित करने वाली सुविधाओं में से एक, रिएक्ट लाइफसाइकल, इसके विभिन्न तरीकों के साथ, एक मूल हुक तक स्किम्ड किया गया है जो सभी विधियों को समाहित करता है! useEffect() हुक रिएक्ट घटक को माउंट, अपडेट और अनमाउंट कर सकता है।
निष्कर्ष
रिएक्ट वी। 16 से पहले, कार्यात्मक घटकों को विशुद्ध रूप से एक प्रस्तुति दृश्य परत के रूप में उपयोग किया जाता था, जिसमें राज्य का कोई उपयोग नहीं होता था, सिवाय उन प्रॉप्स के जो वर्ग घटकों से नीचे पारित किए गए थे। कक्षा के घटकों ने आवेदन की सभी स्थिति को धारण किया और डेटा को चारों ओर से पारित कर दिया। वर्ग घटकों ने जीवन चक्र विधियों का उपयोग किया जो हमारे रिएक्ट घटक को माउंट, अपडेट और अनमाउंट किया। हमने यह भी पाया कि रिएक्ट हुक, संस्करण 16 में रिएक्ट द्वारा जारी एक नया पैटर्न, कार्यात्मक घटकों को स्टेटफुल बनाने की अनुमति देता है और इसका जीवनचक्र विधियों का अपना संस्करण है।
रिएक्ट हुक अधिक लोकप्रिय होने के बावजूद सभी विभिन्न प्रकार के घटकों से परिचित होना महत्वपूर्ण होगा - विरासत कोड शायद कुछ समय के लिए वर्ग घटकों का उपयोग करेगा और फिर भी इसे समझने की आवश्यकता होगी ताकि आप इसके साथ काम कर सकें!