प्रतिक्रिया मूल बातें

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

रिएक्ट फेसबुक द्वारा बनाई गई जावास्क्रिप्ट लाइब्रेरी है। यह UI घटकों के निर्माण के लिए एक उपकरण है। रिएक्ट सीधे ब्राउज़र के डोम में हेरफेर नहीं करता है, इसके बजाय यह डोम की कॉपी बनाता है और इसे मेमोरी में सेव करता है। इस कॉपी किए गए डोम को आम तौर पर 'वर्चुअल डोम' के रूप में जाना जाता है। रिएक्ट तब पता लगाता है कि क्या बदलाव किए गए हैं, और DOM में केवल उस हिस्से को बदलता है।

रिएक्ट सीखने के लिए कौशल:
1. HTML और CSS
2. JSX
3. जावास्क्रिप्ट और ES6 का मूल सिद्धांत
4. पैकेज मैनेजर ( Npm )
5. Git और CLI

रेंडर फ़ंक्शन: रिएक्ट DOM.render() नामक फ़ंक्शन का उपयोग करके वेब पेज पर HTML को रेंडर करता है। यह फ़ंक्शन दो तर्क लेता है, HTML कोड और HTML तत्व। इस फ़ंक्शन का उद्देश्य निर्दिष्ट तत्व के अंदर निर्दिष्ट HTML कोड प्रदर्शित करना है।

परिणाम <div id='root'>तत्व में प्रदर्शित होता है :

यहां HTML कोड JSX का उपयोग करता है जो आपको जावास्क्रिप्ट कोड के अंदर HTML टैग लिखने की अनुमति देता है।

JSX: JSX का मतलब जावास्क्रिप्ट XML है। यह हमें रिएक्ट में HTML लिखने की अनुमति देता है। JSX HTML को प्रतिक्रिया तत्वों में परिवर्तित करता है।

1. जेएसएक्स के साथ:

यह उपरोक्त उदाहरण से स्पष्ट रूप से देखा गया है, JSX लिखना कहीं अधिक आसान है जो अंततः हमारे HTML को रनटाइम पर जावास्क्रिप्ट में ट्रांस-पाइल करता है।

JSX में कर्ली ब्रेसिज़ {} का उपयोग करके एक्सप्रेशन लिखा जा सकता है। और कई HTML लाइन लिखने के लिए आपको HTML के चारों ओर कोष्ठक लगाने होंगे और सब कुछ एक ही टॉप लेवल एलिमेंट में लपेटना होगा। उदाहरण के लिए,

कार्यात्मक घटक: एक घटक एक स्वतंत्र, पुन: प्रयोज्य कोड ब्लॉक है जो UI को छोटे टुकड़ों में विभाजित करता है। एक कार्यात्मक घटक मूल रूप से एक जावास्क्रिप्ट / ES6 फ़ंक्शन है जो एक प्रतिक्रिया तत्व (JSX) देता है। इसे बाद में कहीं और उपयोग करने के लिए निर्यात करने की आवश्यकता है।

और इसका उपयोग करने के लिए हमें इसे आयात करने की आवश्यकता है।

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

तो, स्वागत घटक में हम डेटा 'प्रॉप्स' में प्राप्त करेंगे।
और हम इसे इस तरह इस्तेमाल कर सकते हैं।

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

और इस घटक का उपयोग करें जैसे App.js:

useEffect: एक कार्यात्मक प्रतिक्रिया घटक आउटपुट की गणना करने के लिए प्रॉप्स और/या स्थिति का उपयोग करता है। यदि कार्यात्मक घटक गणना करता है जो आउटपुट मान को लक्षित नहीं करता है, तो इन गणनाओं को साइड-इफेक्ट्स नाम दिया गया है।

useEffect() हुक 2 तर्क स्वीकार करता है:

useEffect(callback[, dependencies]);

कॉलबैक कॉलबैक फ़ंक्शन है जिसमें साइड-इफ़ेक्ट लॉजिक होता है। useEffect()रिएक्ट द्वारा स्क्रीन में परिवर्तन करने के बाद कॉलबैक फ़ंक्शन निष्पादित करता है। निर्भरता निर्भरता की एक वैकल्पिक सरणी है। useEffect()केवल तभी कॉलबैक निष्पादित करता है जब निर्भरताएं रेंडरिंग के बीच बदल गई हों।
कॉलबैक फ़ंक्शन में अपना साइड-इफ़ेक्ट लॉजिक डालें, फिर जब आप साइड-इफ़ेक्ट चलाना चाहते हैं, तो इसे नियंत्रित करने के लिए डिपेंडेंसीज़ तर्क का उपयोग करें। का एकमात्र उद्देश्य है useEffect()।

रिएक्ट इवेंट्स: HTML की तरह ही, रिएक्ट यूजर इवेंट्स के आधार पर एक्शन कर सकता है। रीच में HTML जैसी ही घटनाएं होती हैं: क्लिक करें, बदलें, माउसओवर इत्यादि।
प्रतिक्रिया घटनाएं CamelCase sytax में लिखी जाती हैं: के onClickबजाय onclick।

यदि आप ईवेंट हैंडलर में एक तर्क पारित करना चाहते हैं, तो आपको हैंडलर को एक अनाम तीर फ़ंक्शन में लपेटना होगा।

प्रतिक्रिया सीएसएस: इनलाइन शैली विशेषता वाले तत्व को स्टाइल करने के लिए, मान एक जावास्क्रिप्ट ऑब्जेक्ट होना चाहिए। दो नामों वाले गुण, जैसे background-color, ऊंट केस सिंटैक्स में लिखे जाने चाहिए।

आप स्टाइलिंग जानकारी के साथ एक ऑब्जेक्ट भी बना सकते हैं, और इसे स्टाइल एट्रिब्यूट में संदर्भित कर सकते हैं: