🚴🏾 🙋🏽 🐆 React.js: एक शुरुआती गाइड 👩🏻‍⚕️ 🥉 🌻

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

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

वेब डेवलपर रिएक्ट क्यों चुनते हैं?

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

▍ इंटरफेस के वर्णन के लिए घोषणात्मक दृष्टिकोण

प्रतिक्रियात्मक विकास में यह वर्णन करना होता है कि पृष्ठ पर क्या प्रदर्शित किया जाना चाहिए (और ऐसा करने के लिए ब्राउज़र के निर्देशों का संकलन नहीं है)। यह, अन्य बातों के अलावा, बॉयलरप्लेट कोड की मात्रा में महत्वपूर्ण कमी का मतलब है।

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

प्रतिक्रिया में, विकास करना शुरू करना, वे सिर्फ कोड लिखना शुरू करते हैं। कोई बॉयलरप्लेट घटक कोड नहीं है जिसे किसी तरह उत्पन्न करने की आवश्यकता है। बेशक, विकास से पहले कुछ तैयारी की आवश्यकता होती है, लेकिन जब घटकों की बात आती है, तो उन्हें शुद्ध कार्यों के रूप में वर्णित किया जा सकता है।

▍ स्पष्ट वाक्य रचना

कोणीय कोड ng-model , ngIf और ngFor जैसे निर्देशों का उपयोग करता है। यह कोड बल्कि बोझिल लग रहा है। दूसरी ओर, प्रतिक्रिया, JSX सिंटैक्स का उपयोग करता है, जिसे नियमित HTML के रूप में माना जाता है, अर्थात, रिएक्ट विकास शुरू करने के लिए, आपको मूलभूत रूप से नई चीजों को सीखने की आवश्यकता नहीं है। यहाँ यह कैसा दिखता है:

 const Greetings = ({ firstName }) => (  <div>Hi, {firstName}</div> );

▍ सही सीखने की अवस्था

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

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

डेटा बाइंडिंग तंत्र की विशेषताएं

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

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

विकास के लिए ▍Functional दृष्टिकोण

मेरा मानना है कि रिएक्ट के मजबूत बिंदुओं में से एक यह तथ्य है कि यह पुस्तकालय डेवलपर को कक्षाओं का उपयोग करने के लिए मजबूर नहीं करता है। कोणीय में, सभी घटकों को कक्षाओं के रूप में लागू किया जाना चाहिए। यह बिना किसी फायदे के अत्यधिक कोड जटिलता की ओर ले जाता है।

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

अब जब हमने रिएक्ट की लोकप्रियता के कारणों की जांच की है, जो संभवत: आपको इस विशेष पुस्तकालय की ओर आकर्षित करेगा, जब उपयोगकर्ता इंटरफेस विकसित करने के लिए उपकरण चुनते हैं, तो अभ्यास करने के लिए आगे बढ़ें।

प्रतिक्रिया अनुप्रयोग विकास अभ्यास

▍Node.js

Node.js एक सर्वर प्लेटफ़ॉर्म है जो जावास्क्रिप्ट कोड के निष्पादन का समर्थन करता है, जिनमें से क्षमताएं हमारे लिए रिएक्ट विकास के लिए उपयोगी हैं। यदि आपने पहले से ही इस प्लेटफ़ॉर्म को स्थापित नहीं किया है, तो अब इसे ठीक करने का समय है।

Ation परियोजना का मूल्यांकन

यहां हम रिएक्ट एप्लिकेशन का मूल बनाने के लिए फेसबुक से create-react-app पैकेज का उपयोग करेंगे। कामकाजी माहौल स्थापित करने के लिए यह संभवतः सबसे लोकप्रिय दृष्टिकोण है, जो आपको विकास शुरू करने की अनुमति देता है। create-react-app के लिए धन्यवाद create-react-app प्रोग्रामर को अपने निपटान में बहुत सारे आवश्यक उपकरण मिलते हैं, जो उन्हें स्वयं चुनने की आवश्यकता को समाप्त करता है।

create-react-app स्थापित करने के create-react-app , इस कमांड का उपयोग करें:

 npm i -g create-react-app

फिर, एप्लिकेशन टेम्पलेट बनाने के लिए, निम्न कमांड चलाएँ:

 create-react-app react-intro

यह प्रारंभिक तैयारी पूरी हो गई है। एप्लिकेशन लॉन्च करने के लिए, निम्नलिखित कमांड चलाएं:

 cd react-intro npm start

यहां हम प्रोजेक्ट फ़ोल्डर में जाते हैं और डेवलपमेंट सर्वर लॉन्च करते हैं, जिससे आप http: // localhost: 3000 / पर ब्राउजर पर जाकर एक नया रिएक्ट एप्लिकेशन खोल सकते हैं।

▍ परियोजना की संरचना

आइए यह पता लगाएं कि रिएक्ट एप्लिकेशन कैसे काम करता है। ऐसा करने के लिए, अपने आईडीई (मैं विजुअल स्टूडियो कोड की सिफारिश करता हूं) का उपयोग करके आपके द्वारा बनाई गई परियोजना को खोलें।

Index.html फ़ाइल

प्रोजेक्ट फ़ोल्डर में, public/index.html पर स्थित फ़ाइल खोलें। यहाँ आप ऐसा करके देखेंगे।

Index.html फ़ाइल

यहां हम विशेष रूप से पंक्ति <div id="root"> में रुचि रखते हैं। यह वह जगह है जहां हमारा रिएक्ट एप्लिकेशन स्थित होगा। यह सभी तत्व एप्लिकेशन कोड के साथ बदल दिए जाएंगे, और बाकी सब कुछ अपरिवर्तित रहेगा।

Index.js फ़ाइल

अब src/index.js खोलें। यह फ़ाइल वह है जो प्रतिक्रिया एप्लिकेशन को दर्शाती है। और, वैसे, आवेदन के स्रोत कोड को src निर्देशिका में रखा जाएगा।

Index.js फ़ाइल

यहाँ कोड की वह पंक्ति है जो आउटपुट के लिए ज़िम्मेदार है जिसे हम पृष्ठ पर एक "रिएक्ट एप्लिकेशन" कहते हैं:

 ReactDOM.render(<App />, document.getElementById('root'));

यह पंक्ति रिएक्ट को बताती है कि हमें App कंपोनेंट को लेना है (हम बहुत जल्द इस बारे में बात करेंगे) और इसे root div , जिसे index.html फ़ाइल में परिभाषित किया गया था जिसे हमने अभी जांचा था।

अब हम <App /> निर्माण से निपटेंगे। यह HTML कोड से बहुत मिलता-जुलता है, लेकिन यह JSX कोड का एक नमूना है, जो रिएक्ट द्वारा उपयोग किया जाने वाला एक विशेष जावास्क्रिप्ट सिंटैक्स है। कृपया ध्यान दें कि यह निर्माण एक बड़े अक्षर A शुरू होता है, कि यह बिल्कुल <App /> , न कि <app /> । इसका कारण अभिक्रिया में प्रयुक्त इकाई नामकरण सम्मेलन है। यह दृष्टिकोण सिस्टम को नियमित HTML टैग और रिएक्ट घटकों के बीच अंतर करने की अनुमति देता है। यदि घटक नाम पूंजीकृत नहीं हैं, तो प्रतिक्रिया पृष्ठ पर उन्हें प्रदर्शित नहीं कर पाएगी।

यदि आप एक निश्चित .js फ़ाइल में JSX का उपयोग करने की योजना बनाते हैं, तो आपको निम्नलिखित कमांड का उपयोग करके वहां पर प्रतिक्रिया आयात करने की आवश्यकता है:

 import React from 'react';

App.js फ़ाइल

अब हम अपने पहले घटक के कोड पर एक नज़र डालने के लिए तैयार हैं। ऐसा करने के लिए, src/App.js खोलें।

App.js फ़ाइल

प्रतिक्रिया घटक बनाने के लिए, आपको पहले एक वर्ग बनाना होगा जो कि React.Component वंशज हो। यह वही है जो class App extends Component लाइन सॉल्व करता है। सभी रिएक्ट घटकों में render विधि का कार्यान्वयन होना चाहिए, जिसमें, जैसा कि आप इसके नाम से अनुमान लगा सकते हैं, घटक प्रदान किया गया है और इसके दृश्य प्रतिनिधित्व का विवरण उत्पन्न होता है। इस विधि को पृष्ठ पर आउटपुट के लिए HTML मार्कअप वापस करना चाहिए।

ध्यान दें कि className विशेषता HTML में class विशेषता के बराबर है। यह सीएसएस वर्गों को तत्वों को असाइन करने के लिए उन्हें स्टाइल करने के लिए उपयोग किया जाता है। जावास्क्रिप्ट कीवर्ड class आरक्षित है और इसका उपयोग विशेषता नाम के रूप में नहीं किया जा सकता है।

आइए दोहराएं कि हमें अभी घटकों के बारे में क्या पता चला है:

उनके नाम एक बड़े अक्षर ( App में A ) से शुरू होते हैं।
वे React.Component वर्ग का विस्तार करते हैं।
उन्हें एक render विधि लागू करनी चाहिए जो मार्कअप लौटाती है।

अब बात करते हैं कि रिएक्ट एप्लिकेशन को विकसित करने से क्या बचें।

NotRecommendation No. 1: हर जगह घटक वर्गों का उपयोग करना आवश्यक नहीं है

रिएक्ट में घटक दो दृष्टिकोणों का उपयोग करके बनाया जा सकता है। पहला घटक कक्षाओं (क्लास कंपोनेंट) का उपयोग करना है, दूसरा कार्यात्मक घटकों (कार्यात्मक घटक) का उपयोग करना है। जैसा कि आपने देखा होगा, उपरोक्त उदाहरण कक्षाओं का उपयोग करता है। दुर्भाग्य से, अधिकांश रिएक्ट शुरुआती ट्यूटोरियल उनका उपयोग करने का सुझाव देते हैं।

वर्ग तंत्र का उपयोग करते हुए घटकों का वर्णन करने में क्या गलत है? तथ्य यह है कि ऐसे घटकों का परीक्षण करना कठिन होता है और वे अत्यधिक विकसित होते हैं। ये घटक जिम्मेदारियों के खराब-गुणवत्ता वाले पृथक्करण, तर्क और दृश्य प्रस्तुति को मिलाकर समस्या के अधीन हैं (और यह डिबगिंग और अनुप्रयोगों के परीक्षण को जटिल करता है)। सामान्य तौर पर, घटक वर्गों का उपयोग इस तथ्य की ओर जाता है कि प्रोग्रामर, आलंकारिक रूप से बोलता है, "पैर में खुद को गोली मारता है।" इसलिए, विशेष रूप से जब नौसिखिए प्रोग्रामर की बात आती है, तो मैं सलाह दूंगा कि वे घटक कक्षाओं का उपयोग न करें।

इसलिए, हमने पाया कि घटकों का वर्णन करने के लिए कक्षाओं का उपयोग करना एक अच्छा विचार नहीं है। हमारे पास क्या विकल्प हैं? इस प्रश्न का उत्तर कार्यात्मक घटक है। यदि कक्षा का उपयोग करके बनाए गए घटक में render विधि के अलावा कुछ नहीं है, तो यह एक कार्यात्मक घटक में इसे संसाधित करने के लिए एक उत्कृष्ट उम्मीदवार है। इस विचार के साथ, आइए इस बारे में सोचें कि App create-react-app टूल द्वारा बनाए गए App कंपोनेंट को कैसे बेहतर बनाया जाए:

 function App() { return (   <div className="App">     ...   </div> ); } export default App;

देखें कि हमने यहां क्या किया? अर्थात्, हमने क्लास को हटा दिया और फॉर्म function App() {...} निर्माण के साथ render विधि को बदल दिया। यदि हम यहां ES6 एरो फंक्शन सिंटैक्स का उपयोग करते हैं, तो हमारा कोड और भी बेहतर दिखेगा:

 const App = () => ( <div className="App">   ... </div> ); export default App;

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

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

कार्यात्मक घटकों का कोड पढ़ना बहुत आसान है, उनके साथ काम करना, आपको मानक डिजाइनों से बहुत कम विचलित होना होगा।

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

। गुणों से परिचित होना

गुण (प्रॉप्स) रिएक्ट की केंद्रीय अवधारणाओं में से एक है। "गुण" क्या हैं? इसे समझने के लिए, उन मापदंडों को याद रखें जो कार्यों के लिए पारित किए गए हैं। संक्षेप में, गुण वे पैरामीटर हैं जो घटकों को पास किए जाते हैं। निम्नलिखित कोड पर विचार करें:

 const Greetings = (props) => <div>Hey you! {props.firstName} {props.lastName}!</div>; const App = () => ( <div>   <Greetings firstName="John" lastName="Smith" /> </div> );

यहां हमने Greetings घटक का निर्माण किया और इसका उपयोग App घटक से John Smith नामक एक व्यक्ति को बधाई देने के लिए किया। यह सब कोड निम्नलिखित HTML मार्कअप में परिणाम देगा:

 <div>  <div>Hey you! John Smith!</div> </div>

जावास्क्रिप्ट कोड को हाइलाइट करने के लिए {props.name} जैसी अभिव्यक्तियों में घुंघराले ब्रेसिज़ का उपयोग किया जाता है। Greetings घटक को पारित किया जाता है, मापदंडों के रूप में, पहला firstName और अंतिम firstName गुण। हम उनके साथ काम करते हैं, props ऑब्जेक्ट के गुणों का जिक्र करते हैं।

ध्यान दें कि एक एकल props ऑब्जेक्ट props , पहले firstName और अंतिम firstName गुणों का प्रतिनिधित्व करने वाले दो मान नहीं।

ES6 की वस्तुओं के पुनर्गठन की क्षमता का लाभ उठाकर कोड को सरल बनाया जा सकता है:

 const Greetings = ({ firstName, lastName }) => <div>Hey you! {firstName} {lastName}!</div>;

जैसा कि आप देख सकते हैं, यहां निर्माण (props) ({ firstName, lastName }) से बदल दिया गया है। इस प्रतिस्थापन के साथ, हम सिस्टम को बताते हैं कि हम केवल props ऑब्जेक्ट के दो गुणों में रुचि रखते हैं। और यह बदले में, हमें स्पष्ट रूप से props.firstName जैसे ऑब्जेक्ट गुणों को स्पष्ट किए बिना props.firstName और lastName के मूल्यों तक पहुंचने की अनुमति देता है।

क्या होगा यदि, कार्यात्मक घटकों के बजाय उसी समस्या को हल करने के लिए, हम वर्ग-आधारित घटकों का उपयोग करेंगे? इस मामले में, Greetings घटक कोड इस तरह दिखेगा:

 class Greetings extends React.Component { render() {   return (     <div>Hey you! {this.props.firstName} {this.props.lastName}!</div>   ); } }

मुझे नहीं पता कि यह कोड आपके लिए क्या संवेदनाएं पैदा करता है, लेकिन यह मुझे सहायक तंत्र के साथ अतिभारित लगता है। यहां, विशेष रूप से, संपत्तियों तक पहुंचने के लिए, आपको फॉर्म के निर्माण का उपयोग करना होगा। this.props

▍ एकमात्र जिम्मेदारी सिद्धांत

एकल जिम्मेदारी सिद्धांत (एसआरपी) का पालन करने के लिए सबसे महत्वपूर्ण प्रोग्रामिंग सिद्धांतों में से एक है। वह हमें बताता है कि मॉड्यूल को केवल एक समस्या को हल करना चाहिए और इसे गुणवत्ता तरीके से करना चाहिए। यदि आप अकेले इस सिद्धांत का पालन किए बिना एक परियोजना विकसित करते हैं, तो ऐसी परियोजना के लिए कोड एक बुरे सपने में बदल सकता है जिसे समर्थन नहीं किया जा सकता है।

एकमात्र जिम्मेदारी के सिद्धांत का उल्लंघन कैसे किया जा सकता है? अधिकतर ऐसा तब होता है जब एक-दूसरे से असंबंधित तंत्र एक ही फाइलों में रखे जाते हैं। इस सामग्री में हम अक्सर इस सिद्धांत का उल्लेख करेंगे।

शुरुआती आमतौर पर एक फ़ाइल में कई घटक रखते हैं। उदाहरण के लिए, हमारे पास एक ही फ़ाइल में Greetings और App घटकों के लिए कोड है। व्यवहार में, यह नहीं किया जाना चाहिए, क्योंकि यह एसआरपी का उल्लंघन करता है।

यहां तक कि बहुत छोटे घटकों (जैसे हमारे Greetings घटक) को अलग-अलग फ़ाइलों में रखा जाना चाहिए।

Greetings घटक कोड को एक अलग फाइल में रखें:

 import React from "react"; const Greetings = ({ firstName, lastName }) => (   <div>       Hey you! {firstName} {lastName}!   </div> ); export default Greetings;

फिर इस घटक का App घटक में उपयोग करें:

 import Greetings from "./Greetings"; const App = () => ( ... );

ध्यान दें कि फ़ाइल नाम घटक के नाम से मेल खाना चाहिए। यही है, App घटक के कोड को App.js फ़ाइल में रखा जाना चाहिए, Greetings फ़ाइल में Greetings घटक का कोड, और इसी तरह।

The आवेदन की स्थिति के साथ परिचित

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

आइए एक सरल फ़ॉर्म बनाएं जिसके साथ उपयोगकर्ता अपना नाम दर्ज कर सकता है। कृपया ध्यान दें कि यहां मैं जानबूझकर घटक का वर्णन करने के लिए एक वर्ग का उपयोग करता हूं, क्योंकि इससे प्रश्न में अवधारणा को प्रदर्शित करना आसान हो जाता है। आप एक वर्ग का उपयोग करके बनाए गए घटक को एक कार्यात्मक घटक में परिवर्तित करने के तरीके के बारे में पढ़ सकते हैं।

 import React from "react"; class SimpleForm extends React.Component { render() {   return (     <div>       <input type="text" name="firstName" />       <Greetings firstName="John" />     </div>   ); } } const App = () => ( <div>   <SimpleForm /> </div> );

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

फ़ील्ड में दर्ज मूल्य का उपयोग कैसे करें? प्रतिक्रिया सीधे DOM तत्वों पर निर्भर नहीं करती है। इवेंट हैंडलर और एप्लिकेशन स्टेट हमें इस समस्या को हल करने में मदद करेंगे।

 class SimpleForm extends React.Component { state = {   firstName: "", }; onFirstNameChange = event =>   this.setState({     firstName: event.target.value   }); render() {   return (     <div>       <input type="text" name="firstName" onChange={this.onFirstNameChange} />       <Greetings firstName={this.state.firstName} />     </div>   ); } }

आप एक साधारण जावास्क्रिप्ट ऑब्जेक्ट के रूप में एक राज्य की कल्पना कर सकते हैं, जो एक संपत्ति के रूप में, SimpleForm घटक के वर्ग में संग्रहीत है। इस ऑब्जेक्ट में, हम firstName गुण जोड़ते हैं।

यहाँ हमने एक इवेंट हैंडलर के साथ firstName फ़ील्ड को सुसज्जित किया है। यह हर बार शुरू होता है जब कोई उपयोगकर्ता किसी क्षेत्र में कम से कम एक वर्ण में प्रवेश करता है। क्लास में, onChange करने के लिए onChange प्रॉपर्टी जिम्मेदार होती है, जिसमें निम्न कमांड निष्पादित होती है:

 this.setState(...)

यह वह जगह है जहां घटक की स्थिति अपडेट की जाती है। घटक की स्थिति सीधे अपडेट नहीं की जाती है। यह केवल setState पद्धति का उपयोग करके किया जाता है। firstName प्रॉपर्टी को एक नया मान लिखने के लिए, हम बस इस विधि को पास करते हैं जिसमें एक वस्तु है जिसे राज्य को लिखने की आवश्यकता है:

 { firstName: event.target.value }

इस स्थिति में, event.target.value वह है जो उपयोगकर्ता ने प्रपत्र फ़ील्ड में दर्ज किया है, अर्थात् उसका नाम।

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

▍चर्चा डेटा प्रपत्र पर दर्ज की गई

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

घटक पर onBlur ईवेंट हैंडलर जोड़ें, जिसे तब कहा जाता है जब उपयोगकर्ता इनपुट फ़ील्ड छोड़ देता है। आवेदन स्थिति में एक और संपत्ति जोड़ें - firstNameError । यदि नाम दर्ज करते समय कोई त्रुटि हुई, तो हम इस क्षेत्र के तहत एक संदेश प्रदर्शित करेंगे।

आइए इस कोड का विश्लेषण करें।

 class SimpleForm extends React.Component { state = {   firstName: "",   firstNameError: "", }; validateName = name => {   const regex = /[A-Za-z]{3,}/;   return !regex.test(name)     ? "The name must contain at least three letters. Numbers and special characters are not allowed."     : ""; }; onFirstNameBlur = () => {   const { firstName } = this.state;   const firstNameError = this.validateName( firstName );   return this.setState({ firstNameError }); }; onFirstNameChange = event =>   this.setState({     firstName: event.target.value   }); render() {   const { firstNameError, firstName } = this.state;   return (     <div>       <div>         <label>           First name:           <input             type="text"             name="firstName"             onChange={this.onFirstNameChange}             onBlur={this.onFirstNameBlur}           />           {firstNameError && <div>{firstNameError}</div>}         </label>       </div>       <Greetings         firstName={firstName}       />     </div>   ); } }

आवेदन की स्थिति

इनपुट सत्यापन प्रणाली विकसित करना, हम, शुरुआत के लिए, राज्य में एक नई संपत्ति जोड़ते हैं: firstNameError :

 state = {  ...  firstNameError: "", };

डेटा सत्यापन समारोह

डेटा सत्यापन सत्यापन तीर फ़ंक्शन में किया जाता है। यह एक नियमित अभिव्यक्ति के साथ दर्ज नाम को मान्य करता है:

 validateName = name => { const regex = /[A-Za-z]{3,}/; return !regex.test(name)    ? "The name must contain at least three letters..."    : ""; }

यदि चेक विफल हो जाता है, तो हम फ़ंक्शन से एक त्रुटि संदेश लौटाते हैं। यदि नाम परीक्षण से गुजरता है, तो हम एक खाली स्ट्रिंग लौटाते हैं जो इंगित करता है कि नाम की जाँच के दौरान कोई त्रुटि नहीं मिली। यहाँ, संक्षिप्तता के लिए, हम ternary ऑपरेटर जावास्क्रिप्ट का उपयोग करते हैं।

OnBlur इवेंट हैंडलर

onBlur ईवेंट onBlur पर onBlur नज़र डालें, जिसे तब कहा जाता है जब उपयोगकर्ता इनपुट फ़ील्ड छोड़ता है:

 onFirstNameBlur = () => { const { firstName } = this.state; const firstNameError = this.validateName( firstName ); return this.setState({ firstNameError }); };

यहां हम वस्तुओं से विनाश करने की ES6 की क्षमता का लाभ उठाते हुए, राज्य से firstName संपत्ति निकालते हैं। इस कोड की पहली पंक्ति इसके बराबर है:

 const firstName = this.state.firstName;

फिर हम ऊपर वर्णित डेटा सत्यापन फ़ंक्शन को कॉल करते हैं, इसे पहले firstName , और राज्य की संपत्ति पर लिखें पहले firstName लिखें कि यह फ़ंक्शन क्या देता है। यदि चेक विफल हो जाता है, तो इस संपत्ति में एक त्रुटि संदेश भेजा जाएगा। सफल होने पर, एक खाली लाइन वहां लिखी जाएगी।

रेंडर विधि

घटक render() विधि पर विचार करें:

 render() {  const { firstNameError, firstName} = this.state;  ... }

 <input ... onBlur={this.onFirstNameBlur} />

onFirstNameBlur onBlur .

 {firstNameError && <div>{firstNameError}</div>}

JavaScript. div , , , firstNameError true .

▍

, , , . , :

 render() { const { firstNameError, firstName } = this.state; return (   <div       style={{         margin: 50,         padding: 10,         width: 300,         border: "1px solid black",         backgroundColor: "black",         color: "white"       }}     >     <div style={{marginBottom: 10}}>       <label>         First name:         <input           style={{backgroundColor: '#EFEFFF', marginLeft: 10}}           type="text"           name="firstName"           onChange={this.onFirstNameChange}           onBlur={this.onFirstNameBlur}         />         {firstNameError && <div style={{color: 'red', margin: 5}}>{firstNameError}</div>}       </label>     </div>     <Greetings       firstName={firstName}     />   </div> ); }

React style .

, , , , , . , .

▍ №2:

, , React-. , , — render , , . ? , . , , .

? , . style , . . , style.js :

 // style.js: const style = {   form: {       margin: 50,       padding: 10,       width: 300,       border: "1px solid black",       backgroundColor: "black",       color: "white"   },   inputGroup: {       marginBottom: 10   },   input: {       backgroundColor: "#EFEFFF",       marginLeft: 10   },   error: {       color: "red",       margin: 5   } }; export default style;

, , SimpleComponent :

 import style from './style'; class SimpleForm extends React.Component {   ...       render() {       const { firstNameError, firstName } = this.state;         return (         <div style={style.form}>           <div style={style.inputGroup}>             <label>               First name:               <input                 style={style.input}                 type="text"                 name="firstName"                 onChange={this.onFirstNameChange}                 onBlur={this.onFirstNameBlur}               />               {firstNameError && (                 <div style={style.error}>{firstNameError}</div>               )}             </label>           </div>             <Greetings firstName={firstName} />         </div>       );     } } export default SimpleForm;

, . .

▍

, :

 class SimpleForm extends React.Component { state = {   ...   lastName: "",   lastNameError: "" }; validateName = ...; onFirstNameBlur = ...; onFirstNameChange = ...; onLastNameBlur = () => {   const { lastName } = this.state;   const lastNameError = this.validateName(lastName);   return this.setState({ lastNameError }); }; onLastNameChange = event =>   this.setState({     lastName: event.target.value   }); render() {   const { firstNameError, firstName, lastName, lastNameError } = this.state;   return (     <div style={style.form}>       <div style={style.inputGroup}>         <label>           First name:           <input             style={style.input}             type="text"             name="firstName"             onChange={this.onFirstNameChange}             onBlur={this.onFirstNameBlur}           />           {firstNameError && <div style={style.error}>{firstNameError}</div>}         </label>       </div>       <div style={style.inputGroup}>         <label>           Last name:           <input             style={style.input}             type="text"             name="lastName"             onChange={this.onLastNameChange}             onBlur={this.onLastNameBlur}           />           {lastNameError && <div style={style.error}>{lastNameError}</div>}         </label>       </div>       <Greetings firstName={firstName} lastName={lastName} />     </div>   ); } } export default SimpleForm;

— , firstName .

«»? — , .

▍ №3:

, , , , , . , , render . .

, , , . TextField , .

 import React from 'react' import style from "./style"; const TextField = ({name, onChange, onBlur, error, label}) => ( <div style={style.inputGroup}>   <label>     {label}     <input       style={style.input}       type="text"       name={name}       onChange={onChange}       onBlur={onBlur}     />     {error && <div style={style.error}>{error}</div>}   </label> </div> ); export default TextField;

, , render . , , .

SimpleForm :

 ... import TextField from './TextField'; class SimpleForm extends React.Component { ... render() {   const { firstNameError, firstName, lastName, lastNameError } = this.state;   return (     <div style={style.form}>       <TextField name="firstName"                  label="First name:"                  onChange={this.onFirstNameChange}                  onBlur={this.onFirstNameBlur}                  error={firstNameError} />       <TextField name="lastName"                  label="Last name:"                  onChange={this.onLastNameChange}                  onBlur={this.onLastNameBlur}                  error={lastNameError} />       <Greetings firstName={firstName} lastName={lastName} />     </div>   ); } }

, . , TextField . FirstNameField :

 import React from 'react'; import TextField from './TextField'; const FirstNameField = ({...rest}) => ( <TextField name="firstName"             label="First name:"             {...rest} /> ); export default FirstNameField;

, . ({...rest}) ( rest, ). , , , rest . , , TextField , « », spread (, {...rest} , ). rest , , TextField .

, : , FirstNameField TextField .

LastNameField :
:

 ... import FirstNameField from './FirstNameField'; import LastNameField from './LastNameField'; class SimpleForm extends React.Component { ... render() {   const { firstNameError, firstName, lastName, lastNameError } = this.state;   return (     <div style={style.form}>       <FirstNameField onChange={this.onFirstNameChange}                       onBlur={this.onFirstNameBlur}                       error={firstNameError} />       <LastNameField onChange={this.onLastNameChange}                       onBlur={this.onLastNameBlur}                       error={lastNameError} />       <Greetings firstName={firstName} lastName={lastName} />     </div>   ); } }

▍

, , , :

, , , .
. , , , , 1000 ( ).
, . , , .
, , , . . , , . , , , .
, , , , .
this , .

परिणाम

, React- . , , , , . , , , React, , , , UI-.

→ , ,

प्रिय पाठकों! , , React-, .

React.js: एक शुरुआती गाइड