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

जेएसएक्स कैसे काम करता है

रिएक्ट में, JSX (जावास्क्रिप्ट XML) एक सिंटैक्स है जो HTML के समान दिखता है लेकिन जावास्क्रिप्ट के भीतर काम करता है। यह स्वयं मान्य जावास्क्रिप्ट नहीं है, इसलिए JSX को मानक जावास्क्रिप्ट में परिवर्तित करने के लिए रिएक्ट एक ट्रांसपिलर (आमतौर पर बेबेल) का उपयोग करता है। यह जावास्क्रिप्ट कोड वही है जो ब्राउज़र अंततः व्याख्या करता है।

जब आप JSX लिखते हैं, तो यह React.createElement() फ़ंक्शन कॉल में बदल जाता है। ये फ़ंक्शन कॉल रिएक्ट तत्व उत्पन्न करते हैं, जो रिएक्ट एप्लिकेशन के बिल्डिंग ब्लॉक हैं। प्रत्येक तत्व यूआई के एक टुकड़े का प्रतिनिधित्व करता है।

यह कैसा दिखता है इसका एक उदाहरण यहां दिया गया है:

एक प्रतिक्रिया घटक में JSX

const element = (
  

    
Hello, React!
    
This is a paragraph.
  
);

जेएसएक्स को जावास्क्रिप्ट में परिवर्तित किया गया:

const element = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Hello, React!'),
  React.createElement('p', null, 'This is a paragraph.')
);

रिएक्ट इन नेस्टेड React.createElement() कॉल को लेता है और उन्हें ब्राउज़र के DOM में संबंधित HTML तत्वों में परिवर्तित करता है।

निष्कर्ष

JSX आपको HTML के समान सिंटैक्स लिखने की अनुमति देकर रिएक्ट घटकों को लिखना आसान बनाता है, लेकिन यह React.createElement() कॉल के लिए सिंटैक्टिक शुगर है जो जावास्क्रिप्ट का उपयोग करके आपके ऐप की संरचना बनाता है। यही वह चीज़ है जो रिएक्ट को अपने वर्चुअल DOM तंत्र के माध्यम से यूआई को कुशलतापूर्वक प्रबंधित करने की अनुमति देती है।

यदि आपने इस लेख का आनंद लिया है, तो आप मेरे निःशुल्क न्यूज़लेटर का भी आनंद ले सकते हैं जो मैं हर सप्ताह आपके जैसे डेवलपर्स को भेजता हूं। आप यहां साइनइन कर सकते हो।