रीडरिंग का अर्थ है 'डेटा प्राप्त करना' या 'लाना'। जावास्क्रिप्ट में, रेंडरिंग उपयोगकर्ता इंटरफ़ेस और उसके तत्वों को स्क्रीन पर प्रदर्शित करने की प्रक्रिया को संदर्भित करता है। इसलिए, जावास्क्रिप्ट रीडरिंग वेब पर सामग्री बनाने और प्रदर्शित करने की प्रक्रिया को संदर्भित करता है जावास्क्रिप्ट का उपयोग करने वाला पृष्ठ। यह गतिशील वेब अनुप्रयोगों के लिए महत्वपूर्ण हो सकता है जिन्हें पूरे पृष्ठ को ताज़ा किए बिना सामग्री को अपडेट करने की आवश्यकता होती है।

दृष्टिकोण:
जावास्क्रिप्ट पुनः डिकोडिंग के लिए कई दृष्टिकोण हैं:

क्लाइंट-साइड रेडरिंग(सीएसआर)
सेवर-साइड रेंडरिंग (एसएसआर)
स्टेटिक साइट जेनरेशन (एसएसजी)

क्लाइंट-साइड रेडरिंग(सीएसआर):

यह वेब विकास के लिए एक दृष्टिकोण है जहां वेब पेजों का प्रतिपादन क्लाइंट साइड पर किया जाता है, मूल रूप से उपयोगकर्ता के वेब ब्राउज़र में। प्रारंभिक पेज लोड समय तेज होता है क्योंकि केवल न्यूनतम HTML सर्वर से भेजा जाता है। इसलिए, जावास्क्रिप्ट प्राप्त होता है सर्वर से डेटा और सामग्री प्रदर्शित करने के लिए DOM को गतिशील रूप से अपडेट करता है।

वाक्य - विन्यास:

फ़ेच('एपीआई/डेटा')
.then(प्रतिक्रिया => प्रतिक्रिया.json())
.तब(डेटा => {
// डेटा के साथ DOM को अपडेट करें
});

`// प्रतिक्रिया आयात करें और स्टेट हुक का उपयोग करें
'प्रतिक्रिया' से रिएक्ट, { यूज़स्टेट, यूज़इफ़ेक्ट } आयात करें;

// विलंब के बाद सामग्री प्रस्तुत करने के लिए कार्यात्मक घटक
स्थिरांक विलंबित सामग्री = () => {
// सामग्री को धारण करने की स्थिति परिभाषित करें
स्थिरांक [सामग्री, सेट सामग्री] = उपयोगस्टेट(शून्य);

// घटक माउंट के बाद डेटा लाने के लिए इफेक्ट हुक का उपयोग करें
उपयोगप्रभाव(() => {
// देरी के बाद एपीआई से डेटा लाने का अनुकरण
स्थिरांक फ़ेचडेटा = async () => {
नए वादे की प्रतीक्षा करें(संकल्प => सेटटाइमआउट(संकल्प, 2000)); // 2 सेकंड की देरी का अनुकरण करें
स्थिरांक डेटा = {संदेश: "हैलो, दुनिया!" };
सेटकंटेंट(डेटा.संदेश); // डेटा प्राप्त होने के बाद सामग्री सेट करें
};

fetchData(); // Call the fetchData function

}, []); // खाली निर्भरता सरणी सुनिश्चित करती है कि घटक माउंट होने के बाद उपयोग प्रभाव केवल एक बार चलता है

// सामग्री प्रस्तुत करने के लिए JSX लौटाएं
वापस करना (

{सामग्री}

// DelayedContent घटक निर्यात करें
डिफ़ॉल्ट विलंबित सामग्री निर्यात करें;

आप इसे आयात कर सकते हैं और इसे अपने प्रतिक्रिया ऐप में प्रस्तुत कर सकते हैं:

'प्रतिक्रिया' से प्रतिक्रिया आयात करें;
'रिएक्ट-डोम' से रिएक्टडोम आयात करें;
'./DelayedContent' से विलंबित सामग्री आयात करें;

// विलंबित सामग्री घटक प्रस्तुत करें
ReactDOM.render(, document.getElementById('root'));`