JSX (जेएसएक्स)

JSX (जेएसएक्स)

जेएसएक्स (JSX) : जेएसएक्स जाभास्क्रीप्टको बिस्तृत (Extended) रुप हो । यसले टेम्पलेट ल्याङ्गवेजको जस्तो काम गर्छ यद्दपी यो जाभास्क्रीप्टकै एक स्वरुप हो । यसले रियाक्टडोम (React DOM) को लागी ईलेमेन्ट बनाई दिने काम गर्छ ।

जेएसएक्स (फङ्गसनको) कर्ली ब्राकेट भित्र जुन सुकै जाभास्क्रीप्ट एक्सप्रेसन हरु राख्न सकिन्छ ।

function formatName(user) {
  return user.firstName + " " + user.lastName;
}
const user = {
  firstName: "Aabrit Anish",
  lastName: "Bhattarai"
};
const element = <h1>Hello, {formatName(user)}!</h1>;
ReactDOM.render(element, document.getElementById("root"));

माथीको उदारणमा formatName भन्ने एउटा फङ्गसन छ । जसले firstName र lastName भन्ने भेरिएबलको बिचमा स्पेस (white space) ले छुट्याउने काम गर्दछ । त्यसपछी त्यही formatName भन्ने जाभास्क्रीप्ट फङ्गसनलाई h1 ट्याग भित्र रेन्डर गरिएको छ । माथीको उदारणलाई कोडपेनमा हेर्न यहाँ क्लिक गर्नुहोस ।

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}
ReactDOM.render(getGreeting = "Parmananda Jha"), document.getElementById("root"));

जेएसएक्स एक्सप्रेसनलाई रेगुलर जाभास्क्रीप्टमा झै if तथा foor लुप / लजिकल स्टेटमेन्टमा प्रयोग गर्न सकिन्छ । माथिको उदारणमा getGreeting भन्ने फङ्गसनमा सिधै h1 ट्यागलाई रेन्डर गरीएको छ । प्लेन जाभास्क्रीप्टमा यो सम्भव हुदैन । यसलाई कोडपेनमा हेर्न यहाँ क्लिक गर्नुहोस ।

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

जेएसएक्स मा एट्रीब्युट स्पेसीफाई गर्दा डबल कोट को प्रयो गरीन्छ । तर कर्ली ब्राकेटको अगाडी डबल कोटको प्रयो गर्न पाईदैन ।