जेएसएक्स

JSX का परिचय

यदि आपने कभी "React.js" ढांचे के साथ एक वेब ऐप लागू किया है, तो आपने देखा होगा कि React.js घटकों को लिखने का सिंटैक्स आपके अन्य जावास्क्रिप्ट कोड से थोड़ा अलग दिखता है। हालांकि ज्यादातर समान, रिएक्ट घटकों को विशेष कोष्ठक, बाएँ और दाएँ कोण कोष्ठक के माध्यम से वर्णित किया गया है। वे एक्सएमएल के लिए सिंटैक्स की तरह दिखते हैं, "एक्स्टेंसिबल मार्कअप लैंग्वेज"। React.js में, इस सिंटैक्स को समान रूप से "JSX" कहा जाता है, जिसका अर्थ है "जावास्क्रिप्ट XML"।

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

रिएक्ट कोड जो आपने शायद कभी नहीं लिखा

इसका प्रभावी रूप से मतलब है कि यह बहुत संभावना है कि आपने कभी भी ऐसे "सच्चे" React.js घटक नहीं लिखे हैं जो आपके JSX कोड से उत्पन्न होते हैं। लेकिन चिंता न करें, यह बिना किसी परेशानी के आसानी से किया जा सकता है। वास्तव में, आप कभी भी JSX का उपयोग किए बिना एक संपूर्ण रिएक्ट वेब एप्लिकेशन लिख सकते हैं। निम्नलिखित कोड स्निपेट दिखाता है कि वास्तव में केवल जावास्क्रिप्ट के साथ React.js घटक कैसा दिखता है।

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

आप इसे अपने ब्राउज़र में बिना कोई सॉफ़्टवेयर इंस्टॉल किए भी आज़मा सकते हैं! परिशिष्ट में लिंक का उपयोग करने के लिए बस इस पृष्ठ के अंत तक स्क्रॉल करें।

अपने कोड को सरल बनाने के लिए JSX का उपयोग करना

जैसा कि आप देख सकते हैं, JSX-सिंटैक्स का मुख्य लाभ आपके UI-संबंधित कोड को लिखने में आसान और आपके एप्लिकेशन के अन्य भागों से अलग करना आसान बनाना है, क्योंकि XML जैसा सिंटैक्स कोड के डोमेन का स्पष्ट संकेत प्रदान करता है।

JSX की एक और बड़ी विशेषता यह है कि यह संकलन चरण के बाद बस एक अभिव्यक्ति बन जाती है। इसलिए आप इसे if-else-statement में उपयोग कर सकते हैं या इसके परिणाम को एक वेरिएबल में भी स्टोर कर सकते हैं। और क्योंकि React.js घटकों में स्वयं बच्चों के रूप में भाव हो सकते हैं, आप अत्यधिक कंपोज़ेबल UI कोड लिखने में सक्षम हैं!

प्रत्येक JSX-फ़ाइल के लिए एक डिफ़ॉल्ट आयात

आपने देखा होगा कि विभिन्न ट्यूटोरियल, गाइड में प्रत्येक JSX-फ़ाइल और सबसे अधिक संभावना है कि यहां तक कि आपके स्वयं के कोड में शामिल रिएक्ट-लाइब्रेरी से डिफ़ॉल्ट आयात होता है, भले ही आप इस आयातित चर को सीधे कॉल नहीं कर सकते। इसके पीछे कारण यह है कि संकलन चरण के बाद, प्रत्येक JSX-अभिव्यक्ति एक "React.createElement" -कॉल बन जाती है, जैसा कि आपने पहले कोड उदाहरण में देखा है। इसलिए प्रत्येक फ़ाइल के दायरे में शामिल डिफ़ॉल्ट आयात से "प्रतिक्रिया" -परिवर्तनीय होना आवश्यक है।

HTML जैसा दिखता है, लेकिन नहीं है

JSX-सिंटैक्स में कोडिंग करते समय एक प्रमुख बाधा आपके घटक के नाम का अंकन है। बंडलर आपके घटकों को सही ढंग से पहचानने के लिए, उन्हें मानक HTML-टैग से अद्वितीय होना चाहिए, क्योंकि सिंटैक्स समान दिखता है।

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

इसलिए JSX तत्वों को हमेशा वाक्य आवरण में कोड करने की आवश्यकता होती है, जिसका अर्थ है कि पहला अक्षर अपरकेस होना चाहिए।

टाइपप्रति संस्करण

आपने देखा होगा कि कई प्रोजेक्ट अपने React.js घटक फ़ाइलों के लिए फ़ाइल प्रत्यय के रूप में TSX का भी उपयोग करते हैं। यह टाइपस्क्रिप्ट के साथ संगत होने के लिए मूल JSX का सिर्फ एक विस्तार है। TSX-फाइलें आपको JSX-नोटेशन घटकों के साथ टाइपप्रति कोड लिखने की अनुमति देती हैं।

बस शुरुआत

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