पहला Component और Render
अपना पहला component function लिखें, createRoot से उसे DOM में render करें और hot reload को कार्य करते देखें।
पहला Component और Render, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 3 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
अवलोकन
लक्ष्य: अपना पहला React घटक लिखें, उसे createRoot की सहायता से माउंट करें और हॉट रीलोड की जाँच करें।
फ़ंक्शन घटक
React घटक ऐसा फ़ंक्शन होता है जो JSX लौटाता है। उदाहरण: function App() { return <h1>Hi</h1> }।
createRoot से माउंट करना
document.getElementById("root") के साथ ReactDOM.createRoot का उपयोग करें, फिर root.render(<App/>) को कॉल करें।
कोड उदाहरण
आपकी पहली प्रस्तुति: App को माउंट करें और स्थिति में होने वाले अद्यतन देखने के लिए क्लिक करें।
<div id="root"></div>
हॉट रीलोड की मूल बातें
हॉट रीलोड: कोई फ़ाइल सहेजें; डेव सर्वर उसे फिर से बनाता है और स्थिति खोए बिना उपयोगकर्ता इंटरफ़ेस को अद्यतन कर देता है।
पहले ऐप्स के लिए सुझाव
सुझाव:
- घटकों को छोटा रखें।
- App जैसे स्पष्ट नामों का उपयोग करें।
- यदि रेंडर विफल हो, तो त्रुटियों के लिए कंसोल देखें।
रूट बनाने की जाँच
पुनरावलोकन
पुनरावलोकन: App() परिभाषित करें, createRoot की सहायता से माउंट करें और तुरंत प्रतिक्रिया पाने के लिए हॉट रीलोड का लाभ उठाएँ।
एआई शिक्षक के साथ React सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 88
- पाठ
- 324
अक्सर पूछे जाने वाले प्रश्न
क्या “पहला Component और Render” पाठ निःशुल्क है?
हाँ—“पहला Component और Render” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“पहला Component और Render” में मैं क्या सीखूँगा?
अपना पहला component function लिखें, createRoot से उसे DOM में render करें और hot reload को कार्य करते देखें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 3वाँ पाठ है।
“पहला Component और Render” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- React Kickoff: अवधारणाएँ और setup
- Project Setup: Vite, Layout और Dev Server
- पहला Component और Render