रेंडरिंग एलिमेंट्स

एलिमेंट्स React ऐप्स के सबसे छोटे बिल्डिंग ब्लॉक हैं।

एक एलिमेंट वर्णन करता है कि आप स्क्रीन पर क्या देखना चाहते हैं:

const element = <h1>Hello, world</h1>;

ब्राउज़र DOM एलिमेंट्स के विपरीत, React एलिमेंट्स प्लेन ऑब्जेक्ट है और इन्हें बनाना आसान है। React DOM React एलिमेंट्स के अनुसार DOM को अपडेट रखता है।

ध्यान दें:

आप एलिमेंट्स को बहुचर्चित “कौम्पोनॅन्टस” समझ कर भ्रमित हो सकते है, हम कौम्पोनॅन्टस के बारे में अगले भाग में बतायेंगे। एलिमेंट्स वो है जिनका उपयोग करके एक कौम्पोनॅन्ट को बनाया जाता है। आगे बढ़ने से पहले हम इस भाग को पड़ने की सलाह देते हैं।

DOM में एक एलिमेंट रेंडर करना

मान लीजिए की आपकी HTML फ़ाइल में कहीं एक <div> है:

<div id="root"></div>

हम इसे “रूट” DOM नोड कहते है क्यूँकि इसके अंदर की सारी चीज़ें React DOM के द्वारा संचालित होगी।

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

To render a React element, first pass the DOM element to ReactDOM.createRoot(), then pass the React element to root.render():

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

Try it on CodePen

ये “Hello world” को पेज पर दर्शाता है।

पहले से बने एलेमेंट को अपडेट करना

React एलिमेंट्स अचल होते है। एक बार एलेमेंट के बनने के बाद, आप उसके चिल्ड्रन या ऐट्रिब्यूट्स में परिवर्तन नहीं कर सकते। एक एलेमेंट एक चलचित्र के एक दृश्य के समान है, ये UI को एक निश्चित समय के लिए दर्शाता है।

With our knowledge so far, the only way to update the UI is to create a new element, and pass it to root.render().

इस टिकिंग घड़ी उदाहरण पर विचार करें:

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);}

setInterval(tick, 1000);

Try it on CodePen

It calls root.render() every second from a setInterval() callback.

ध्यान दें:

In practice, most React apps only call root.render() once. In the next sections we will learn how such code gets encapsulated into stateful components.

हम अनुशंसा करते हैं कि आप विषयों को छोड़ें नहीं क्योंकि वे एक-दूसरे पर निर्माण करते हैं।

React वही अपडेट करता है जो आवश्यक है

React, DOM एलिमेंट्स और उसके चिल्डरेंस की तुलना उसके पहले की अवस्था से करता है और केवल उन्ही चीज़ों में परिवर्तन करता जिससे की DOM अपने चाहे state में आ जाए।

आप ब्राउज़र टूलस की सहायता से अंतिम उदाहरण का निरीक्षण करके सत्यापित कर सकते हैं:

भले ही हम हर टिक पर पूरे UI ट्री का वर्णन करने वाला एक एलेमेंट बनाते हैं, लेकिन केवल टेक्स्ट नोड जिसकी सामग्री बदल गई है वह React DOM द्वारा अपडेट हो जाता है।

हमारे अनुभव से, UI को कैसे अप्डेट करना है के बिपरीत यदि हम ये सोचे की UI को किसी समय कैसे दिखाना है तो हम बहुत सारी बग से बच सकते है।