React JSX in Hindi: JSX का पूरा नाम JavaScript XML है। JSX हमें रिएक्ट में HTML लिखने की अनुमति देता है। JSX React में HTML लिखना और जोड़ना आसान बनाता है। मूल रूप से, JSX एक जावास्क्रिप्ट एक्सटेंशन सिंटैक्स है जिसका उपयोग React JS में आसानी से एचटीएमएल और जावास्क्रिप्ट को एक साथ लिखने के लिए किया जाता है।
अगर आप रिएक्ट डेवलपर बनना चाहते हैं तो आपके लिए बेसिक JSX concept को समझना जरूरी है। इस JSX मार्गदर्शिका में, आप समझेंगे कि JSX क्या है, हम इसका उपयोग क्यों करते हैं, और कैसे शुरू करें।
नोट: इस लेख को अच्छी तरह से समझने के लिए सबसे पहले आप ReactJS की मूल बातें समझें और अपने सिस्टम (Mac, Ubuntu, Win) में React JS install करें।
Table of Contents
JSX क्या है (Introduction to JSX in Hindi)?
JSX एक जावास्क्रिप्ट का एक्सटेंशन है। यह रिएक्ट में UI घटक (components) बनाने का एक आसान तरीका प्रदान करता है। मूल रूप से, JSX एक XML / HTML जैसा सिंटैक्स है जिसका उपयोग React द्वारा किया जाता है जो ECMAScript का विस्तार करता है ताकि XML / HTML जैसा टेक्स्ट जावास्क्रिप्ट / रिएक्ट कोड के साथ सह-अस्तित्व में हो सके।
JSX का उपयोग करके आप संक्षिप्त HTML/XML-जैसी संरचनाएँ (जैसे, DOM जैसी tree structures) उसी फ़ाइल में लिख सकते हैं जैसे आप JavaScript कोड लिखते हैं, फिर Babel इन expressions को वास्तविक JavaScript कोड में बदल देगा। अतीत के विपरीत, जावास्क्रिप्ट को HTML में डालने के बजाय, JSX हमें HTML को जावास्क्रिप्ट में डालने की अनुमति देता है।
वास्तव में, JSX हमें HTML तत्वों को जावास्क्रिप्ट में लिखने और उन्हें बिना किसी createElement() और/या appendChild() विधियों के DOM में रखने की अनुमति देता है। और JSX HTML टैग्स को रिएक्ट तत्वों में परिवर्तित करता है।
आइए उदाहरण के साथ समझें –
JSX का उदाहरण (Example of JSX in Hindi)
यहाँ दो उदाहरण हैं। पहला JSX का उपयोग करता है और दूसरा नहीं:
इस JSX उदाहरण में, JSX हमें सीधे जावास्क्रिप्ट कोड के भीतर HTML लिखने की अनुमति देता है:
const myElement = <h1>I Love JSX!</h1>; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);Output:
I Love JSX!मूल रूप से, JSX, ES6 पर आधारित जावास्क्रिप्ट भाषा का एक विस्तार है, और इसे रनटाइम पर नियमित जावास्क्रिप्ट में अनुवादित किया जाता है।
JSX के बिना:
const myElement = React.createElement('h1', {}, 'I do not use JSX!');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);Output:
I do not use JSX!JSX कैसे काम करता है (How JSX Works)?
JSX HTML और JavaScript का संयोजन (Combination) है, यह ब्राउज़र द्वारा समर्थित नहीं है। इसलिए, यदि किसी फ़ाइल में JSX फ़ाइल है, तो Babel transpiler JSX को JavaScript ऑब्जेक्ट में बदल देता है जो एक मान्य JavaScript बन जाता है। इस प्रकार, ब्राउज़र कोड को समझता है और निष्पादित करता है।
मूल रूप से, JSX हमें HTML टेम्पलेट के समान सिंटैक्स का उपयोग करके React के ऑब्जेक्ट ट्री का वर्णन करने की अनुमति देता है।
यह सिर्फ एक XML जैसा एक्सटेंशन है जो हमें जावास्क्रिप्ट लिखने की अनुमति देता है जो मार्कअप की तरह दिखता है और यह एक घटक से वापस आ गया है।
JSX की व्याख्या एक ट्रांसपिलर द्वारा की जाती है, जैसे कि babel, और जावास्क्रिप्ट कोड के लिए प्रस्तुत किया जाता है जिसे UI फ्रेमवर्क (इस मामले में React) समझ सकता है।
JSX का उपयोग क्यों करें (Why use JSX)?
वैसे तो JSX का उपयोग करने के कई कारण हैं, यहाँ कुछ अच्छे कारण दिए गए हैं:
- JSX का उपयोग करने के सबसे बड़े कारणों में से एक React में HTML लिखना या जोड़ना आसान बनाता है।
- इसके के साथ, आप अतिरिक्त टेम्प्लेटिंग भाषा सीखने के बिना आसानी से अपने टेम्प्लेट में जावास्क्रिप्ट के कोड को एम्बेड कर सकते हैं।
- HTML, CSS और JavaScript से परिचित किसी भी व्यक्ति को JSX टेम्पलेट्स को पढ़ने और समझने में कोई समस्या नहीं होगी।
- JSX क्रॉस-साइट स्क्रिप्टिंग जैसे हमलों को रोकने के लिए सामान्य आउटपुट सैनिटाइजेशन मुद्दों का ध्यान रखता है।
Expressions in JSX
JSX से आप कर्ली ब्रेसिज़ { } के अंदर एक्सप्रेशन लिख सकते हैं।
Expression एक React चार (variable), या property, या कोई अन्य मान्य जावास्क्रिप्ट अभिव्यक्ति (expression) हो सकती है। JSX एक्सप्रेशन निष्पादित करेगा और परिणाम लौटाएगा:
const myElement = <h1>JSX के साथ React {5 + 5} गुना बेहतर है!</h1>;Output:
React is 10 times better with JSX JSX के साथ React 10 गुना बेहतर है!Attribute class = className
class attribute एचटीएमएल में बहुत अधिक उपयोग की जाने वाली विशेषता है, लेकिन चूंकि जेएसएक्स को जावास्क्रिप्ट के रूप में प्रस्तुत किया गया है, और class कीवर्ड जावास्क्रिप्ट में एक आरक्षित शब्द है, इसलिए आपको जेएसएक्स में इसका उपयोग करने की अनुमति नहीं है।
इसके बजाय attribute className का प्रयोग करें।
Conditions – if statements in JSX
React if statements को supports करता है, लेकिन JSX के अंदर नहीं।
JSX में conditional statements का उपयोग करने में सक्षम होने के लिए, आपको JSX के बाहर if statements देना चाहिए, या आप इसके बजाय एक टर्नरी expression का उपयोग कर सकते हैं:
विकल्प 1: if statements को JSX कोड के बाहर लिखें:
“Hello” लिखें यदि x 10 से कम है, अन्यथा “Goodbye”:
const x = 5;
let text = "Goodbye";
if (x < 10) {
text = "Hello";
}
const myElement = <h1>{text}</h1>;विकल्प 2: ternary expressions का उपयोग करें:
const x = 5;
const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;नोट: JSX के अंदर JavaScript expression एम्बेड करने के लिए, JavaScript को curly braces, {} के साथ लपेटा जाना चाहिए।
निष्कर्ष
JSX एक जावास्क्रिप्ट syntactic extension है। यह user interface कैसा दिखना चाहिए, इसका वर्णन करने के लिए रिएक्ट में उपयोग किया जाने वाला शब्द है। आप JSX का उपयोग करके HTML संरचनाओं को उसी फ़ाइल में जावास्क्रिप्ट कोड के रूप में लिख सकते हैं।
मूल रूप से, JSX HTML टैग्स को React तत्वों में परिवर्तित करता है। वैसे तो आपको JSX का उपयोग करने की आवश्यकता नहीं है, लेकिन JSX रिएक्ट एप्लिकेशन लिखना आसान बनाता है।
मुझे उम्मीद है कि यह लेख (JSX in Hindi – React में JSX क्या है? | React JSX) आपको रिएक्ट JSX की अवधारणाओं को समझने में मदद किया हैं।