Learn React
Describing the UI

JSX के साथ मार्कअप लिखना

JSX जावास्क्रिप्ट के लिए एक सिंटैक्स एक्सटेंशन है जो आपको जावास्क्रिप्ट फ़ाइल के अंदर HTML जैसा मार्कअप लिखने देता है। यद्यपि कौम्पोनॅन्ट्स को लिखने के अन्य तरीके हैं, अधिकांश React डेवलपर्स JSX की संक्षिप्तता को पसंद करते हैं, और अधिकांश कोडबेस इसका उपयोग करते हैं।

You will learn

  • React मार्कअप को रेंडरिंग लॉजिक के साथ क्यों मिलाता है
  • JSX HTML से कैसे अलग है
  • JSX के साथ जानकारी कैसे डिस्प्ले करें

JSX: जावास्क्रिप्ट में मार्कअप डालना

वेब को HTML, CSS और जावास्क्रिप्ट पर बनाया गया है। कई वर्षों तक, वेब डेवलपर्स ने HTML में कंटेंट, CSS में डिज़ाइन और जावास्क्रिप्ट में लॉजिक अक्सर अलग-अलग फाइलों में रखा! कंटेंट को HTML के अंदर चिह्नित किया गया था जबकि पेज का लॉजिक जावास्क्रिप्ट में अलग से रहता था:

HTML markup with purple background and a div with two child tags: p and form.
HTML markup with purple background and a div with two child tags: p and form.

HTML

Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick.
Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick.

JavaScript

लेकिन जैसे-जैसे वेब अधिक इंटरैक्टिव होता गया, लॉजिक कंटेंट को अधिकाधिक निर्धारित करता गया। जावास्क्रिप्ट HTML का इन्चार्ज था! यही कारण है कि React में, रेंडरिंग लॉजिक और मार्कअप एक ही स्थान पर एक साथ रहते हैं—कौम्पोनॅन्टस!

React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram.
React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram.

Sidebar.js React component

React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop.
React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop.

Form.js React component

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

प्रत्येक React कौम्पोनॅन्ट एक जावास्क्रिप्ट फ़ंक्शन है जिसमें कुछ मार्कअप हो सकते हैं जो React ब्राउज़र में रेंडर करता है। React कौम्पोनॅन्ट मार्कअप को रिप्रेजेंट करने के लिए JSX नामक एक सिंटैक्स एक्सटेंशन का उपयोग करते हैं। JSX HTML की तरह दिखता है, लेकिन यह थोड़ा सख्त है और डायनामिक जानकारी डिस्प्ले कर सकता है। इसे समझने का सबसे अच्छा तरीका कुछ HTML मार्कअप को JSX मार्कअप में बदलना है।

Note

JSX और React दो अलग चीजें हैं आप एक दूसरे से स्वतंत्र रूप से उपयोग कर सकते हैं।

HTML को JSX में बदलना

मान लीजिए कि आपके पास कुछ (पूरी तरह से वैलिड) HTML है:

<h1>Hedy Lamarr's Todos</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
 >
<ul>
  <li>नई ट्रैफिक लाइट का आविष्कार करें
  <li>एक फिल्म के दृश्य का पूर्वाभ्यास करें
  <li>स्पेक्ट्रम तकनीक में सुधार
</ul>

और आप इसे अपने कौम्पोनॅन्ट में रखना चाहते हैं:

export default function TodoList() {
  return (
    // ???
  )
}

यदि आप इसे वैसे ही कॉपी और पेस्ट करते हैं, तो यह काम नहीं करेगा:

export default function TodoList() { return ( // यह काम नहीं करता! <h1>Hedy Lamarr's Todos</h1> <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" > <ul> <li>नई ट्रैफिक लाइट का आविष्कार करें <li>एक फिल्म के दृश्य का पूर्वाभ्यास करें <li>स्पेक्ट्रम तकनीक में सुधार </ul> ); }

ऐसा इसलिए है क्योंकि JSX सख्त है और इसमें HTML की तुलना में कुछ और नियम हैं! यदि आप ऊपर दिए गए एरर मैसेजेस को पढ़ते हैं, तो वे मार्कअप को ठीक करने के लिए आपका मार्गदर्शन करेंगे, या आप नीचे दी गई गाइड का फॉलो कर सकते हैं।

Note

अधिकांश समय, React के ऑन-स्क्रीन एरर मैसेजेस आपको यह पता लगाने में मदद करेंगे कि समस्या कहाँ है। अगर आप फंस गए हैं तो उन्हें पढ़ लें!

JSX के नियम

1. एक सिंगल रुट एलिमेंट रिटर्न करें

एक कौम्पोनॅन्ट से कई एलिमेंट्स को रिटर्न करने के लिए, उन्हें सिंगल पैरेंट टैग मैं ऐड करें।

उदाहरण के लिए, आप एक <div> का उपयोग कर सकते हैं:

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img
    src="https://i.imgur.com/yXOvdOSs.jpg"
    alt="Hedy Lamarr"
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

यदि आप अपने मार्कअप में एक्स्ट्रा <div> ऐड नहीं करना चाहते हैं, तो आप इसके बजाय <> और </> लिख सकते हैं:

<>
  <h1>Hedy Lamarr's Todos</h1>
  <img
    src="https://i.imgur.com/yXOvdOSs.jpg"
    alt="Hedy Lamarr"
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

इस खाली टैग को React fragment कहा जाता है। React fragments आपको ब्राउज़र HTML ट्री में कोई निशान छोड़े बिना चीजों को ग्रुप करने देते हैं।

Deep Dive

मल्टीप्ल JSX टैग को रैप की आवश्यकता क्यों है?

JSX HTML की तरह दिखता है, लेकिन असल में प्लेन जावास्क्रिप्ट ऑब्जेक्ट्स में बदल दिया जाता है। आप किसी फ़ंक्शन से दो ऑब्जेक्ट्स को एक ऐरे में रैप किये बिना रिटर्न नहीं कर सकते। यह बताता है कि आप दो JSX टैग को दूसरे टैग या fragment में रैप किये बिना रिटर्न क्यों नहीं कर सकते।

2. सभी टैग बंद करें

JSX को टैग को स्पष्ट रूप से बंद करने की आवश्यकता है: <img> जैसे सेल्फ-क्लोजिंग टैग <img /> बनने चाहिए, और <li>संतरा जैसे रैपिंग टैग को <li>संतरा</li> के रूप में लिखा जाना चाहिए।

इस प्रकार Hedy Lamarr की इमेज और लिस्ट आइटम बंद दिखते हैं:

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo" 
   />
  <ul>
    <li>नई ट्रैफिक लाइट का आविष्कार करें</li>
    <li>एक फिल्म के दृश्य का पूर्वाभ्यास करें</li>
    <li>स्पेक्ट्रम तकनीक में सुधार</li>
  </ul>
</>

3. camelCase करें सब ज़्यादातर चीज़ें!

JSX जावास्क्रिप्ट में बदल जाता है और JSX में लिखी ऐट्रिब्यूट्स जावास्क्रिप्ट ऑब्जेक्ट्स की keys बन जाती हैं। अपने स्वयं के कौम्पोनॅन्ट्स में, आप अक्सर उन ऐट्रिब्यूट्स को वेरिएबल्स में पढ़ना चाहेंगे। लेकिन जावास्क्रिप्ट में वेरिएबल के नामों की सीमाएँ हैं। उदाहरण के लिए, उनके नामों में डैश नहीं हो सकते हैं या class जैसे रिज़र्व शब्द नहीं हो सकते हैं।

यही कारण है कि, React में, कई HTML और SVG ऐट्रिब्यूट्स camelCase में लिखी जाती हैं। उदाहरण के लिए, stroke-width के बजाय आप strokeWidth का उपयोग करते हैं। चूंकि class एक रिजर्व्ड शब्द है, इसलिए React में आप इसके बजाय className लिखते हैं, जिसका नाम संबंधित DOM प्रॉपर्टी के नाम पर रखा गया है।:

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo" 
/>

आप इन सभी ऐट्रिब्यूट्स को React DOM एलिमेंट्स में पा सकते हैं. यदि आप एक गलत पाते हैं, तो चिंता न करें React संभावित सुधार के साथ एक संदेश ब्राउज़र कंसोल पर प्रिंट करेगी।

Pitfall

ऐतिहासिक कारणों से, aria-* और data-* ऐट्रिब्यूट्स HTML में डैश के साथ लिखी जाती हैं।

प्रो-टिप: JSX कन्वर्टर का उपयोग करें

इन सभी ऐट्रिब्यूट्स को मौजूदा मार्कअप में बदलना थकाऊ हो सकता है! हम रिकमेंड करते हैं कि आप अपने मौजूदा HTML और SVG का JSX में अनुवाद करने के लिए कन्वर्टर का उपयोग करें। कन्वर्टर्स व्यवहार में बहुत उपयोगी होते हैं, लेकिन यह अभी भी समझने योग्य है कि क्या हो रहा है ताकि आप आराम से JSX को स्वयं लिख सकें।

यहाँ आपका अंतिम परिणाम है:

export default function TodoList() { return ( <> <h1>Hedy Lamarr's Todos</h1> <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" className="photo" /> <ul> <li>नई ट्रैफिक लाइट का आविष्कार करें</li> <li>एक फिल्म के दृश्य का पूर्वाभ्यास करें</li> <li>स्पेक्ट्रम तकनीक में सुधार</li> </ul> </> ); }

Recap

अब आप जानते हैं कि JSX क्यों मौजूद है और इसे कौम्पोनॅन्ट्स में कैसे उपयोग किया जाए:

  • React कौम्पोनॅन्ट समूह मार्कअप के साथ लॉजिक रेंडर करता है क्योंकि वे संबंधित हैं।
  • JSX कुछ अंतरों के साथ HTML के समान है। जरूरत पड़ने पर आप कन्वर्टर का उपयोग कर सकते हैं।
  • एरर मैसेजेस अक्सर आपको अपना मार्कअप ठीक करने की सही दिशा में इंगित करेंगे।

Try out some challenges

Challenge 1 of 1:
कुछ HTML को JSX में बदलें

यह HTML एक कौम्पोनॅन्ट में पेस्ट गया था, लेकिन यह JSX वैलिड नहीं है। इसे ठीक करें:

export default function Bio() { return ( <div class="intro"> <h1>मेरी वेबसाइट पर स्वागत है!</h1> </div> <p class="summary"> आप यहां मेरे विचार पा सकते हैं। <br><br> <b>और <i>तस्वीरें</b></i> वैज्ञानिकों की! </p> ); }

इसे हाथ से करना है या कनवर्टर का उपयोग करना आप पर निर्भर है!

PreviousImporting and Exporting ComponentsNextJavaScript in JSX with Curly Braces

How do you like these docs?