Get your head around React with these five factors

Jan 30, 2026

कैसे करना है

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

01. घटक

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

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

एचटीएमएल में, आप इस एप्लिकेशन को तत्वों की एक श्रृंखला के रूप में सोच सकते हैं, इस तरह:

[4 9] & lt; div id = "petappointmentments" & gt; & lt; div class = "AddAppointmentments" & gt; & lt; / div & gt; & lt; div class = "searchAppointmentments" & gt; & lt; / div & gt; & lt; div class = "listappointmentments" & gt; & lt; / div & gt; & lt; / div & gt;

और यही वह भी है जो आप प्रतिक्रिया करते हैं। आप एक एकल टैग (& lt; div id = "petappointmentments" & gt;) बनाते हैं जो एक पेटापॉइंटमेंट घटक कहते हैं, जो तब आवश्यकतानुसार अन्य उप-घटकों को कॉल करता है। इस तरह की कॉन्फ़िगरेशन ऑब्जेक्ट के साथ पास करने के लिए, आप प्रतिक्रिया ऑब्जेक्ट के CreateClass विधि का उपयोग करते हैं।

 var maininterface = react.createclass ({
  प्रस्तुत: समारोह () {
    वापसी (
      & lt; div classname = "इंटरफ़ेस" & gt;
        & lt; AddAppointment / & GT;
        & lt; searchAppointments / & gt;
        & lt; लापरवाही / & gt;
      & lt; / div & gt;
    )
  } //प्रस्तुत करना
}); // maininterface

ReactDom.Render (
  & lt; maininterface / & gt ;;
  दस्तावेज़ .getElementByID ('पेटापॉइंटमेंट्स')
); // प्रस्तुत 

दो रेंडर विधियां हैं। मेनिनटरफ़ेस क्लास में, हम उन वस्तुओं को घोषित करते हैं जो ब्राउज़र और reactdom.render विधि को भेजे जाएंगे & lt; div id = "petappointmentments" & gt; & lt; / div & gt; प्रतिक्रिया के कोड के साथ अपने HTML में तत्व। फिर हम उस कोड को लिखेंगे जो हमारे तीन उप-घटकों को संभालता है।

घटक लिखने और बनाए रखने के लिए कोड आसान बनाते हैं। एक बार जब आप अपने ऐप्स को आकर्षक घटकों की एक श्रृंखला के रूप में सोचना और व्यवस्थित करना सीखते हैं, तो जटिल अनुप्रयोगों का निर्माण करना आसान हो जाता है।

02. जेएसएक्स

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

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

 & lt; li classname = "पालतू-आइटम मीडिया" कुंजी = {index} & gt;
  & lt; div classname = "पालतू-जानकारी मीडिया-बॉडी" & gt;
    & lt; div classname = "पालतू-सिर" & gt;
      & lt; अवधि classname = "पालतू-नाम" & gt; {this.state.data [अनुक्रमणिका] .petname} & lt; / अवधि & gt;
      & lt; स्पैन क्लासनाम = "एपीटी-डेट पुल-राइट" & gt; {this.state.data [अनुक्रमणिका] .aptdate} & lt; / अवधि & gt;
    & lt; / div & gt;
    & lt; div classname = "मालिक-नाम" & gt; & lt; span classname = "लेबल-आइटम" & gt; स्वामी: & lt; / अवधि & gt;
    {this.state.data [अनुक्रमणिका] .Ownername} & lt; / div & gt;
    & lt; div classname = "apt-notes" & gt; {this.state.data [अनुक्रमणिका] .APTNOTES} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt; 

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

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

03. राज्य

तीसरा मन शिफ्ट प्रतिक्रिया में राज्य के साथ काम करना सीख रहा है। राज्य आपके आवेदन के सबसे ऊपरी घटक पर संग्रहीत है और आपके ऐप में क्या हो रहा है प्रबंधित करता है। GetInitialState नामक एक विशेष विधि है जहां आप कॉन्फ़िगर कर सकते हैं जब आपका एप्लिकेशन प्रारंभ होता है तो क्या होता है।

मेरे नमूना आवेदन में, प्रारंभिक राज्य इस तरह स्थापित किया गया है:

 var maininterface = react.createclass ({
  GetInitialState: फ़ंक्शन () {
    वापसी {
      aptbodbodyvisible: गलत,
      ऑर्डरबी: 'पेटनाम',
      ऑर्डरडिर: 'एएससी',
      QueryText: ''
    } //वापसी
  }, // getinitialstate 

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

जब आप एक घटक लिखते हैं, तो एप्लिकेशन के राज्य को संशोधित करना आसान होता है। लेखन घटकों को आसान है क्योंकि आप केवल घटक क्या करते हैं पर ध्यान केंद्रित कर रहे हैं। यहां मेरा ऐप का अंतिम सूची घटक है:

 var प्रतिक्रिया = आवश्यकता ('प्रतिक्रिया');
var aptlist = ract.createclass ({

  हैंडलटे: फ़ंक्शन () {
    this.props.ondelete (this.props.whichitem)
  },

  प्रस्तुत: समारोह () {
    वापसी(
      & lt; li classname = "पालतू-आइटम मीडिया" & gt;
        & lt; div classname = "मीडिया-बाएं" & gt;
          & lt; बटन classname = "पालतू-हटाएं बीटीएन बीटीएन-एक्सएस बीटीएन-खतरे" onclick = {{andledlete} & gt;
          & lt; स्पैन क्लासनाम = "ग्लाइफिकॉन ग्लाइफिकॉन-निकालें" & gt; & lt; / span & gt; & lt; / बटन & gt;
        & lt; / div & gt;
        & lt; div classname = "पालतू-जानकारी मीडिया-बॉडी" & gt;
          & lt; div classname = "पालतू-सिर" & gt;
            & lt; अवधि classname = "pet-name" & gt; {this.props.singleitem.petname} & lt; / span & gt;
            & lt; स्पैन क्लासनाम = "एपीटी-डेट पुल-राइट" & gt; {this.props.singleitem.aptdate} & lt; / span & gt;
          & lt; / div & gt;
          & lt; div classname = "मालिक-नाम" & gt; & lt; span classname = "लेबल-आइटम" & gt; स्वामी: & lt; / अवधि & gt;
          {this.props.singleitem.ownername} & lt; / div & gt;
          & lt; div classname = "apt-nots" & gt; {this.props.singleitem.aptnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // वापसी
  } // प्रस्तुत करना
}); // aptlist

module.exports = aptlist; 

घटक केवल दो चीजों से संबंधित है। सबसे पहले, आवेदन की वर्तमान स्थिति के आधार पर नियुक्तियों की सूची दिखा रहा है। दूसरा, लाल 'एक्स में से एक पर क्लिक को संभालना।

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

सूची घटक केवल लिस्टिंग चीजों से संबंधित है। यह चिंता करने की ज़रूरत नहीं है कि कहीं और क्या हो रहा है। यह एप्लिकेशन बनाने का एक शानदार तरीका है और एक बार जब आप इसे लटका लेंगे, तो आप देखेंगे कि यह कोड करने का एक बेहतर तरीका क्यों है।

04. वन-वे डेटा प्रवाह

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

 var प्रतिक्रिया = आवश्यकता ('प्रतिक्रिया');
var aptlist = ract.createclass ({
  हैंडलटे: फ़ंक्शन () {
    this.props.ondelete (this.props.whichitem)
  },
  प्रस्तुत: समारोह () {
    वापसी(
      & lt; li classname = "पालतू-आइटम मीडिया" & gt;
        & lt; div classname = "मीडिया-बाएं" & gt;
          & lt; बटन classname = "पालतू-हटाएं बीटीएन बीटीएन-एक्सएस बीटीएन-खतरे" onclick = {{andledlete} & gt;
          & lt; स्पैन क्लासनाम = "ग्लाइफिकॉन ग्लाइफिकॉन-निकालें" & gt; & lt; / span & gt; & lt; / बटन & gt;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // वापसी
  } // प्रस्तुत करना
}); // aptlist

module.exports = aptlist; 

यह मॉड्यूल का एक सरलीकृत संस्करण है जो नियुक्तियों की एक सूची बनाता है। हमारी सूची में एक डिलीट बटन है, जिसे हम एक ईवेंट हैंडलर के माध्यम से प्रबंधित करते हैं। यह ऑनक्लिक का एक विशेष प्रतिक्रिया संस्करण है। हमारा ईवेंट हैंडलर फ़ंक्शन हैंडललेट को कॉल करता है, जो उप-मॉड्यूल के लिए स्थानीय है। हमारा स्थानीय फ़ंक्शन बस प्रोप नामक किसी ऑब्जेक्ट में किसी अन्य फ़ंक्शन का संदर्भ बनाता है। प्रोप कितने मुख्य मॉड्यूल सब-मॉड्यूल के साथ संवाद करते हैं।

मुख्य मॉड्यूल में आप मॉड्यूल का प्रतिनिधित्व करने के लिए उपयोग किए जा रहे टैग के लिए एक विशेषता तैयार करेंगे। यह एक HTML टैग के लिए एक विशेषता को पारित करने जैसा दिखता है:

 & lt; aptlist ondelete = {this.deletemessage} / & gt; 

और फिर आप एप्लिकेशन के राज्य में परिवर्तन को संभालने के लिए मुख्य घटक में अपनी खुद की विधि बनाते हैं। मुख्य मॉड्यूल में राज्य रखना आपके उप-मॉड्यूल को अधिक कुशल बनाने में मदद करता है। कोड को बनाए रखना भी आसान है क्योंकि अधिकांश क्रिया एक ही स्थान पर होती है।

05. लाइफसाइकल विधियां

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

लेकिन कभी-कभी आपको प्रतिपादन जीवनशैली के जवाब में चीजों को करने में सक्षम होना चाहिए। जीवन चक्र विधियों में प्रवेश करें। ये एप्लिकेशन के निष्पादन में विभिन्न बिंदुओं पर कार्यों को संभालने के लिए प्रतिक्रिया करने के तरीके हैं।

उदाहरण के लिए, लाइफसाइल विधियां जो आपको AJAX अनुरोधों के माध्यम से बाहरी डेटा लोड करने की अनुमति देती हैं:

 componentdidmount: समारोह () {
  this.serverrequest = $ .get ('./ js / data.json', समारोह (परिणाम) {
    var tempapts = परिणाम;
    इस .SetState ({
      MyAppointmentmentmentments: Tempapts
    }); // सेटस्टेट
  } .bind (यह));
}, // componentdidmount 

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

पुनर्विचार प्रतिक्रिया

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

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

अपने प्रतिक्रिया कौशल को और परिष्कृत करना चाहते हैं?

यदि आप प्रतिक्रिया के बारे में अधिक जानने में रुचि रखते हैं, तो सुनिश्चित करें कि आपने अपना टिकट उठाया है 19-21 सितंबर 2018 से लंदन उत्पन्न करें । दुनिया भर में प्रतिक्रिया करने और लॉन्च करने के लिए रिएक्ट अकादमी की स्थापना की sizzy.co तथा OK-GOOGL.IO , Kristijan Ristovski अपनी कार्यशाला प्रदान करेगा - प्रतिक्रिया में कैसे सोचें सीखें - जिसमें वह रीएक्ट सर्वोत्तम प्रथाओं का पता लगाएगा और आपको वास्तविक समस्याओं के समाधान सिखाएगा जो आपको ऐप बनाने की प्रक्रिया में सामना कर सकते हैं।

1 9 -21 सितंबर 2018 से लंदन उत्पन्न होता है। अब अपना टिकट प्राप्त करें ।

संबंधित आलेख:

[22 9]

10 विशेषज्ञ ReactJS युक्तियाँ जिन्हें आपको आज जानने की आवश्यकता है

प्रतिक्रिया के साथ एक डैशबोर्ड ऐप बनाएँ

प्रतिक्रिया के साथ एक साधारण संगीत खिलाड़ी बनाएँ

---

कैसे करना है - सर्वाधिक लोकप्रिय लेख

PureRef: How to use the image reference tool

कैसे करना है Jan 30, 2026

(छवि क्रेडिट: ब्रेंडन मैककफरी (क्लारा मैककैफरी द्व�..

---

Portrait photography: How to take perfect portraits

कैसे करना है Jan 30, 2026

पोर्ट्रेट फोटोग्राफी एक संतुलन अधिनियम है - ध्यान में रखने के लिए बहुत सा..

---

आपकी वेबसाइट के एसईओ को बढ़ावा देने के 5 तरीके

कैसे करना है Jan 30, 2026

एसईओ: यह एक गंदे काम है लेकिन किसी को यह करना है, और ..

---

एक मंडेलबुल कैसे बनाएं

कैसे करना है Jan 30, 2026

एक मंडेलबुल एक त्रि-आयामी फ्रैक्टल है जो तेजी से �..

---

13 tips for making a VR gaming world

कैसे करना है Jan 30, 2026

Tethered एक समीक्षकों द्वारा प्रशंसित तीसरे व्यक्ति र..

---

ब्लेंडर में आश्चर्यजनक टाइलबल बनावट बनाएं

कैसे करना है Jan 30, 2026

2 का पृष्ठ 1: पृष्ठ 1 [2 9] पृष्ठ 1 ..

---

Create simple illustrations for the web

कैसे करना है Jan 30, 2026

मैं बैठ गया, कुछ संगीत खेला, रोशनी मंद हो गया और मे�..

---

Draw accurate bones and muscle

कैसे करना है Jan 30, 2026

एनाटॉमी एक विशाल विषय है और वैज्ञानिक सूचना और कल..

---

श्रेणियाँ

• एआई और मशीन लर्निंग
• AirPods
• वीरांगना
• अमेज़ॅन एलेक्सा और अमेज़ॅन इको
• अमेज़न एलेक्सा और अमेज़न इको
• अमेज़न आग टीवी
• अमेज़न प्रधानमंत्री वीडियो
• एंड्रॉयड
• Android फ़ोन और टेबलेट
• Android फोन और टैबलेट
• Android टीवी
• एप्पल
• Apple App स्टोर
• एप्पल HomeKit और एप्पल HomePod
• एप्पल संगीत
• एप्पल टीवी
• एप्पल घड़ी
• एप्लिकेशन और वेब Apps
• ऐप्स और वेब ऐप्स
• ऑडियो
• Chrome बुक और क्रोम ओएस
• क्रोमबुक और क्रोम ओएस
• Chromecast
• बादल और इंटरनेट
• बादल और इंटरनेट
• क्लाउड और इंटरनेट
• कंप्यूटर हार्डवेयर
• कंप्यूटर इतिहास
• गर्भनाल काटने और स्ट्रीमिंग
• कॉर्ड कटिंग और स्ट्रीमिंग
• कलह
• डिज्नी +
• DIY
• बिजली के वाहन
• EReaders
• अनिवार्य
• व्याख्यार
• फेसबुक
• जुआ
• जनरल
• Gmail
• गूगल
• गूगल सहायक और गूगल नेस्ट
• Google सहायक और Google नेस्ट
• गूगल क्रोम
• गूगल डॉक्स
• को Google डिस्क
• गूगल मैप्स
• गूगल प्ले स्टोर
• Google शीट
• Google स्लाइड
• गूगल टीवी
• हार्डवेयर
• एचबीओ मैक्स
• कैसे करना है
• Hulu
• Instagram
• इंटरनेट स्लैंग और लघुरूप
• IPhone और IPad
• Kindle
• लिनक्स
• मैक
• रखरखाव और अनुकूलन
• माइक्रोसॉफ्ट एज
• माइक्रोसॉफ्ट एक्सेल
• माइक्रोसॉफ्ट ऑफिस
• माइक्रोसॉफ्ट आउटलुक
• Microsoft PowerPoint
• ​​माइक्रोसॉफ्ट टीमें
• माइक्रोसॉफ्ट वर्ड
• मोज़िला फ़ायरफ़ॉक्स
• Netflix
• Nintendo स्विच
• पैरामाउंट +
• पीसी गेमिंग
• मयूर
• फोटोग्राफी
• फ़ोटोशॉप
• प्लेस्टेशन
• गोपनीयता और सुरक्षा
• निजता एवं सुरक्षा
• गोपनीयता और सुरक्षा
• उत्पाद मवेशियों को इकट्ठा
• प्रोग्रामिंग
• रास्पबेरी Pi
• Reddit
• Roku
• सफारी
• सैमसंग फ़ोन और टेबलेट
• सैमसंग फोन और टैबलेट
• स्लैक
• स्मार्ट होम
• Snapchat
• सामाजिक मीडिया
• अंतरिक्ष
• Spotify
• Tinder
• समस्या निवारण
• टीवी
• ट्विटर
• वीडियो गेम
• आभासी वास्तविकता
• के VPN
• वेब ब्राउज़र
• WhatsApp
• वाईफ़ाई और रूटर
• वाईफाई और राउटर
• विंडोज
• Windows 10
• विंडोज 11
• विंडोज 7
• एक्सबॉक्स
• यू ट्यूब के यूट्यूब टीवी
• YouTube और YouTube टीवी
• ज़ूम
• Explainers