रिएक्ट रेंडर एचटीएमएल
रिएक्ट का लक्ष्य कई तरह से वेब पेज में HTML को रेंडर करना है।
रिएक्ट नामक फंक्शन का उपयोग करके वेब पेज पर HTML को रेंडर करता है
ReactDOM.render()।
रेंडर फंक्शन
फ़ंक्शन दो तर्क लेता है , ReactDOM.render()HTML कोड और एक HTML तत्व।
फ़ंक्शन का उद्देश्य निर्दिष्ट HTML कोड को निर्दिष्ट HTML तत्व के अंदर प्रदर्शित करना है।
लेकिन कहाँ प्रस्तुत करें?
आपके रिएक्ट प्रोजेक्ट की रूट डायरेक्टरी में एक और फोल्डर है, जिसका नाम "पब्लिक" है। इस फोल्डर में एक index.htmlफाइल होती है।
<div>
आप इस फ़ाइल के मुख्य भाग में एक सिंगल देखेंगे । यह वह जगह है जहां हमारे रिएक्ट एप्लिकेशन का प्रतिपादन किया जाएगा।
उदाहरण
"रूट" की आईडी वाले तत्व के अंदर एक पैराग्राफ प्रदर्शित करें:
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));<div id="root">परिणाम तत्व में प्रदर्शित होता है :
<body>
<div id="root"></div>
</body>
ध्यान दें कि तत्व आईडी को "रूट" नहीं कहा जाना चाहिए, लेकिन यह मानक सम्मेलन है।
प्रमाणन हासिल करें!
$95 नामांकन
एचटीएमएल कोड
इस ट्यूटोरियल में HTML कोड JSX का उपयोग करता है जो आपको जावास्क्रिप्ट कोड के अंदर HTML टैग लिखने की अनुमति देता है:
यदि सिंटैक्स अपरिचित है, तो चिंता न करें, आप अगले अध्याय में JSX के बारे में अधिक जानेंगे।
उदाहरण
एक वैरिएबल बनाएं जिसमें HTML कोड हो और इसे "रूट" नोड में प्रदर्शित करें:
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
रूट नोड
रूट नोड HTML तत्व है जहां आप परिणाम प्रदर्शित करना चाहते हैं।
यह रिएक्ट द्वारा प्रबंधित सामग्री के लिए एक कंटेनर की तरह है।
यह एक <div>तत्व होना जरूरी नहीं है और इसके पास यह नहीं है id='root':
उदाहरण
रूट नोड को आप जो चाहें कह सकते हैं:
<body>
<header id="sandy"></header>
</body>
<header id="sandy">तत्व में परिणाम प्रदर्शित करें :
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));