प्रतिक्रिया JSX

JSX क्या है?

JSX का मतलब जावास्क्रिप्ट XML है।

JSX हमें रिएक्ट में HTML लिखने की अनुमति देता है।

JSX रिएक्ट में HTML लिखना और जोड़ना आसान बनाता है।

कोडिंग JSX

JSX हमें HTML तत्वों को जावास्क्रिप्ट में लिखने और उन्हें बिना किसी createElement()  और/या appendChild()विधियों के DOM में रखने की अनुमति देता है।

JSX HTML टैग्स को प्रतिक्रिया तत्वों में परिवर्तित करता है।

यहाँ दो उदाहरण हैं। पहला JSX का उपयोग करता है और दूसरा नहीं:

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

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

JSX ES6 पर आधारित जावास्क्रिप्ट भाषा का एक विस्तार है, और इसे रनटाइम पर नियमित जावास्क्रिप्ट में अनुवादित किया जाता है।

JSX में भाव

JSX के साथ आप घुंघराले ब्रेसिज़ के अंदर भाव लिख सकते हैं { }।

अभिव्यक्ति एक प्रतिक्रिया चर, या संपत्ति, या कोई अन्य मान्य जावास्क्रिप्ट अभिव्यक्ति हो सकती है। JSX एक्सप्रेशन निष्पादित करेगा और परिणाम लौटाएगा:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

HTML का एक बड़ा ब्लॉक सम्मिलित करना

HTML को कई पंक्तियों में लिखने के लिए, HTML को कोष्ठक के अंदर रखें:

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

एक शीर्ष स्तर तत्व

HTML कोड को एक शीर्ष स्तरीय तत्व में लपेटा जाना चाहिए ।

इसलिए यदि आप दो पैराग्राफ लिखना पसंद करते हैं , तो आपको उन्हें एक मूल तत्व के अंदर रखना होगा, जैसे कि एक divतत्व।

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

वैकल्पिक रूप से, आप एकाधिक पंक्तियों को लपेटने के लिए "टुकड़ा" का उपयोग कर सकते हैं। यह अनावश्यक रूप से DOM में अतिरिक्त नोड्स जोड़ने से रोकेगा।

एक टुकड़ा एक खाली HTML टैग की तरह दिखता है: <></>.

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

तत्व बंद होना चाहिए

JSX XML नियमों का पालन करता है, और इसलिए HTML तत्वों को ठीक से बंद किया जाना चाहिए।

const myelement = <input type="text" />;

गुण वर्ग = वर्गनाम

classविशेषता HTML में बहुत अधिक उपयोग की जाने वाली विशेषता है, लेकिन चूंकि JSX को जावास्क्रिप्ट के रूप में प्रस्तुत किया गया है, और कीवर्ड classजावास्क्रिप्ट में एक आरक्षित शब्द है, इसलिए आपको JSX में इसका उपयोग करने की अनुमति नहीं है।

JSX ने classNameइसके बजाय इसका उपयोग करके हल किया। जब JSX प्रदान किया जाता है, तो यह className विशेषताओं को विशेषताओं में बदल classदेता है।

const myelement = <h1 className="myclass">Hello World</h1>;

शर्तें - अगर बयान

रिएक्ट ifबयानों का समर्थन करता है, लेकिन JSX के अंदर नहीं ।

जेएसएक्स में सशर्त बयानों का उपयोग करने में सक्षम होने के लिए, आपको जेएसएक्स के if बाहर बयान देना चाहिए, या आप इसके बजाय एक टर्नरी अभिव्यक्ति का उपयोग कर सकते हैं:

विकल्प 1:

ifJSX कोड के बाहर स्टेटमेंट लिखें :

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

विकल्प 2:

इसके बजाय टर्नरी एक्सप्रेशन का प्रयोग करें:

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));