JSX: जावास्क्रिप्ट एक्सटेंशन और उपयोग के उदाहरण

JSX क्या है?

JSX (JavaScript XML) JavaScript के लिए एक सिंटैक्स एक्सटेंशन है, जिसे पहली बार 2013 में React में पेश किया गया था। यह डेवलपर्स को एक डिक्लेरेटिव शैली में यूज़र इंटरफ़ेस की संरचना का वर्णन करने की अनुमति देता है, मार्कअप और लॉजिक को एक फ़ाइल में संयोजित करता है।

JSX से पहले, डेवलपर्स स्ट्रिंग टेम्पलेट (Mustache, Handlebars) का उपयोग करते थे या document.createElement के माध्यम से मैन्युअल रूप से DOM एलिमेंट बनाते थे। दोनों दृष्टिकोणों में कमियां थीं: स्ट्रिंग टेम्पलेट टाइप-चेक नहीं होते थे, और मैन्युअल DOM निर्माण बोझिल और त्रुटि-प्रवण था।

React ने एक अलग रास्ता चुना — कोड में सीधे मार्कअप एम्बेड करना। इस निर्णय ने समुदाय में बहस छेड़ दी, लेकिन समय के साथ यह मानक बन गया। आज JSX न केवल React में, बल्कि SolidJS, Preact, Qwik और यहां तक कि Vue में प्लगइन्स के माध्यम से भी उपयोग किया जाता है।

JSX का मूल सिंटैक्स

JSX एलिमेंट HTML टैग जैसा दिखता है लेकिन सीधे JavaScript में एम्बेड होता है। प्रत्येक एलिमेंट तीन आर्गुमेंट के साथ React.createElement कॉल में ट्रांसपाइल होता है: एलिमेंट प्रकार, प्रॉप्स ऑब्जेक्ट और चिल्ड्रन। एक रूट एलिमेंट अनिवार्य नियम है: JSX एक्सप्रेशन को एक पैरेंट एलिमेंट या फ्रैगमेंट लौटाना चाहिए।

import React from 'react';

// JSX मूल भाषा: एक रूट एलिमेंट
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

समूहीकरण के लिए फ्रैगमेंट

जब अतिरिक्त DOM नोड की आवश्यकता नहीं है, तो React.Fragment या शॉर्टहैंड सिंटैक्स <></> का उपयोग करें। फ्रैगमेंट वास्तविक DOM एलिमेंट नहीं बनाते, वे केवल चाइल्ड नोड्स को समूहित करते हैं। यह विशेष रूप से टेबल और लिस्ट में उपयोगी है जहां एक अतिरिक्त रैपर HTML संरचना को तोड़ देगा।

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

JSX में एक्सप्रेशन और वेरिएबल

कोई भी JavaScript एक्सप्रेशन कर्ली ब्रेसेस { } के माध्यम से JSX में एम्बेड होता है। अंदर, आप वेरिएबल, फ़ंक्शन कॉल, टर्नरी ऑपरेटर और ऐरे मेथड का उपयोग कर सकते हैं। कंडीशनल रेंडरिंग टर्नरी ऑपरेटर या लॉजिकल AND के माध्यम से की जाती है।

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

एक मुख्य सीमा — कर्ली ब्रेसेस के अंदर केवल एक्सप्रेशन का उपयोग किया जा सकता है, स्टेटमेंट का नहीं। आप if/else, for, switch का उपयोग नहीं कर सकते — केवल टर्नरी ऑपरेटर, लॉजिकल ऑपरेटर और ऐरे मेथड। फ़ंक्शन कॉल की अनुमति है, जिसमें एरो फ़ंक्शन शामिल हैं।

JSX और HTML के बीच अंतर

JSX देखने में HTML जैसा लगता है लेकिन इसमें मूलभूत अंतर हैं। एट्रीब्यूट camelCase में लिखे जाते हैं — class के बजाय className, onclick के बजाय onClick, tabindex के बजाय tabIndex। ऐसा इसलिए है क्योंकि JSX JavaScript में ट्रांसपाइल होता है, जहां प्रॉपर्टी नामों में हाइफ़न की अनुमति नहीं है।

एक और महत्वपूर्ण अंतर — सेल्फ-क्लोज़िंग टैग। HTML में, कुछ टैग (br, hr, input) बिना बंद किए छोड़े जा सकते हैं। JSX में, सभी सेल्फ-क्लोज़िंग टैग में क्लोज़िंग स्लैश होना चाहिए: <br />, <input />। SVG एट्रीब्यूट नाम भी camelCase में बदल जाते हैं: strokeWidth, fillOpacity।

JSX को JavaScript में कैसे ट्रांसपाइल किया जाता है

ब्राउज़र सीधे JSX नहीं समझते। निष्पादन से पहले, JSX कोड ट्रांसपाइलर — Babel, TypeScript या esbuild से गुज़रता है। प्रत्येक JSX एलिमेंट createElement या jsx/runtime कॉल में बदल जाता है।

Babel के माध्यम से रूपांतरण

// JSX मूल
const element = <h1 className="title">Hello</h1>;

// ट्रांसपाइलेशन के बाद
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

React 17 के साथ, एक नया JSX रूपांतरण आया जिसमें React को आयात करने की आवश्यकता नहीं है। jsx-runtime का स्वचालित आयात import React from ‘react’ के बिना कंपोनेंट लिखने की अनुमति देता है। Babel और TypeScript {"runtime": "automatic"} कॉन्फ़िगरेशन के माध्यम से इस रूपांतरण का समर्थन करते हैं।

React के बाहर JSX: Solid, Preact, Vue

हालांकि JSX React से जुड़ा है, अन्य फ्रेमवर्क भी इसका उपयोग करते हैं। SolidJS बिना Virtual DOM के वास्तविक DOM नोड्स में संकलन के साथ JSX का उपयोग करता है। Preact पूर्ण JSX समर्थन के साथ React का एक हल्का विकल्प है। Vue @vue/babel-plugin-jsx के माध्यम से JSX का समर्थन करता है, हालांकि इसका मुख्य टेम्पलेट template है।

एक मुख्य अंतर एक्सप्रेशन सिमैंटिक्स है। React में, JSX एक्सप्रेशन हर रेंडर पर निष्पादित होते हैं। SolidJS में, JSX एक बार कंपाइल होता है और अपडेट सिग्नल के माध्यम से ट्रैक किए जाते हैं। यह प्रदर्शन को प्रभावित करता है: SolidJS को Virtual DOM और रीकंसिलिएशन की आवश्यकता नहीं है, जिससे JSX रेंडरिंग तेज़ होती है।

TypeScript में, JSX भाषा स्तर पर समर्थित है। .tsx एक्सटेंशन वाली फ़ाइलें स्वचालित रूप से JSX सिंटैक्स को संभालती हैं। प्रॉप्स टाइपिंग TypeScript + JSX के मुख्य लाभों में से एक है: IDE अपेक्षित एट्रीब्यूट, कॉलबैक प्रकार और प्रॉप्स की अनिवार्यता सुझाता है।

JSX के साथ सर्वोत्तम अभ्यास

JSX कोड लिखें जो पढ़ने और बनाए रखने में आसान हो। जटिल एक्सप्रेशन को अलग-अलग वेरिएबल या फ़ंक्शन में निकालें — यह पठनीयता में सुधार करता है और मार्कअप से अलग लॉजिक का परीक्षण करने की अनुमति देता है। अनावश्यक div रैपर के बजाय फ्रैगमेंट का उपयोग करें।

इंडेंटेशन नियम — नेस्टेड एलिमेंट के लिए इंडेंटेशन बनाए रखें। प्रत्येक नेस्टिंग स्तर एक इंडेंटेशन स्तर है। क्लोज़िंग टैग ओपनिंग टैग के समान स्तर पर होना चाहिए। लंबे एट्रीब्यूट के लिए, लाइन ब्रेक का उपयोग करें।

प्रॉप्स में इनलाइन एरो फ़ंक्शन से बचें यदि वे हर रेंडर पर बनाए जाते हैं। ऐसे मामलों में, कॉलबैक को useCallback में लपेटें या फ़ंक्शन को कंपोनेंट के बाहर ले जाएं। जटिल कंपोनेंट को छोटे में विभाजित करें — प्रत्येक कंपोनेंट को इंटरफ़ेस की एक लॉजिकल इकाई को संभालना चाहिए।