रेन्डरीङ्ग ईलेमेन्टस (Rendering Elements)

हामीले बनाएको रियाक्ट एप को सानो भाग चाँही ईलेमेन्ट हो ।

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

माथी उदारणमा दिएको < div> लाई हामी root DOM भन्छौ । यसभित्र जे जती कुरा रेन्डर गर्नु पर्ने हो त्यसलाई रियाक्ट डोमले मेनेज गर्ने गर्दछ । रियाक्टमा बनाएको वेब एपहरुमा साधरणतय एउटा मात्र सिङ्गर रुट डोम नोड हुने गर्दछ तर एक भन्दा बढी नोड हुन नसक्ने भन्ने चाँही हैन । एक भन्दा बढी आईसोलेटेड नोड भएमा त्यसलाई रियाक्ट डोम मा रेन्डर गर्नु पर्दछ ।

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

रियाक्ट डोमहरु अपरिवर्तनिय (Immutable) हुन्छन । कुनै ईलेमेन्टहरुनि निर्माण गरिए पछी त्यसको कुनै चाईल्ड ईलेमेन्ट वा एट्रीब्युटहरु परिवर्तन गर्न सकिदैन । यदी त्यसलाई परिवर्तन गर्न परे नयाँ ईलेमेन्टको निर्माण गरी त्यसलाई रियाक्टडोम मा फेरी रेन्डर गर्नु पर्दछ ।

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

माथीको उदारणमा प्रत्येक १ सेकेन्डमा टिक भन्ने फङ्गसन एक्जीक्युटर हुन्छ । यो कोडलाई कोडपेनमा हेर्नुहोस ।