रिएक्ट यूजर इंटरफेस बनाने के लिए एक जावास्क्रिप्ट लाइब्रेरी है।

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

फ्रंटएंड डेवलपर्स के लिए, जावास्क्रिप्ट लाइब्रेरी जिसे React.JS के नाम से जाना जाता है, बहुत लोकप्रिय है। यह आसानी से वेब यूआई बनाने में मदद करता है। आइए जानते हैं React.JS के मूल मूलभूत विषय के बारे में।

क्यों के लिए प्रतिक्रिया

प्रतियोगिता के साथ, Angular और Vue.JS सौभाग्य से एक अच्छा विकल्प हैं, रिएक्ट को अधिकांश डेवलपर्स के लिए सबसे अच्छा स्थान मिला है। क्योंकि यह सीखना आसान है और काम करना आसान है। प्रतिक्रिया ने विकास को तेज और सुचारू बना दिया। यदि आप जावास्क्रिप्ट और ES6 के साथ सहज हैं तो आप आसानी से प्रतिक्रिया करना सीखेंगे।

अवयव

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

सहायक बात यह है कि घटक कोड को पठनीय और इसके साथ काम करने में आसान बनाते हैं।

आभासी डोम

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

वर्चुअल डोम बहुत तेज और कुशल है। जब वर्चुअल डोम आता है और उसकी परफॉर्मेंस असली डोम से बेहतर होती है।

प्रतिक्रिया हुक

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

React.js में यूजस्टेट

राज्य में विशिष्ट डेटा होता है जो समय के साथ एक घटक में बदल सकता है। यूज़स्टेट के उपयोग से आप अपने कोड में दिए गए डेटा को बदल सकते हैं। हमेशा जब आप useState का उपयोग करते हैं तो आपको इसे आयात करना होगा।

उदाहरण ( )

import React, { useState } from ‘react’; 2:
function Example() {
 const [count, setCount] = useState(0); 5:
 
 return (
 <div>
 <p>You clicked {count} times</p>
 <button onClick={() => setCount(count + 1)}>10: 
 Click me
 </button>
 </div>
 );
}

UseEffect का उपयोग ब्राउज़र API का उपयोग करके दस्तावेज़ को अपडेट करने के लिए किया जाता है। यदि आप एपीआई से प्राप्त डेटा दिखाना चाहते हैं तो आपको यूज़स्टेट हुक का उपयोग करना होगा। यूजस्टेट घोषित करके आप अपने यूआई पर दिखा सकेंगे।

उदाहरण ( )

जेएसएक्स

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