Project Setup: Vite, Layout और Dev Server
Vite (या समान tool) से React app बनाएँ, basic folder layout समझें, dev server चलाएँ और छोटे component से rendering सत्यापित करें।
Project Setup: Vite, Layout और Dev Server, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 3 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
सेटअप का अवलोकन
लक्ष्य: तेज़ी से प्रोजेक्ट बनाएँ, फ़ोल्डर संरचना समझें और हॉट रीलोड वाले डेव सर्वर को चलाएँ।
- Vite या इसी तरह के टूल से प्रोजेक्ट का शुरुआती ढाँचा
- फ़ाइलें कहाँ रहती हैं
- ऐप शुरू करना और उसकी जाँच करना
पूर्वापेक्षाएँ
पूर्वापेक्षाएँ:
- Node.js LTS और npm इंस्टॉल होना चाहिए
- टर्मिनल तक पहुँच
- CLI का बुनियादी उपयोग (cd, ls)
Vite के साथ ढाँचा तैयार करना
बनाएँ प्रोजेक्ट एक तेज़ टूल की सहायता से:
- ढाँचा तैयार करें (उदाहरण के लिए, npm create vite@latest)
- React (JavaScript) चुनें
- निर्भरताएँ इंस्टॉल करें (npm install)
फ़ोल्डर की आवश्यक बातें
संरचना (सामान्य):
- index.html: इसमें
div#rootहोता है - src/main.jsx: रूट बनाता है और App को रेंडर करता है
- src/App.jsx: आपका घटक
डेव सर्वर चलाना
डेव सर्वर:
- npm run dev से शुरू करें
- स्थानीय URL खोलें
- App.jsx में बदलाव करें; परिवर्तन तुरंत दिखाई देंगे (हॉट रीलोड)
रेंडरिंग की जाँच
सेटअप सही ढंग से काम कर रहा है या नहीं, यह सुनिश्चित करने के लिए एक छोटा App रेंडर करें; हॉट रीलोड देखने के लिए टेक्स्ट में थोड़ा बदलाव करें।
<div id="root"></div>
माउंटिंग बिंदु वाली फ़ाइल
पुनरावलोकन
पुनरावलोकन: Vite के साथ ढाँचा तैयार करें, समझें कि index.html, main.jsx और App.jsx कहाँ रहते हैं, डेव सर्वर चलाएँ और एक छोटे घटक से रेंडरिंग की जाँच करें।
एआई शिक्षक के साथ React सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 88
- पाठ
- 324
अक्सर पूछे जाने वाले प्रश्न
क्या “Project Setup: Vite, Layout और Dev Server” पाठ निःशुल्क है?
हाँ—“Project Setup: Vite, Layout और Dev Server” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“Project Setup: Vite, Layout और Dev Server” में मैं क्या सीखूँगा?
Vite (या समान tool) से React app बनाएँ, basic folder layout समझें, dev server चलाएँ और छोटे component से rendering सत्यापित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 2वाँ पाठ है।
“Project Setup: Vite, Layout और Dev Server” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- React Kickoff: अवधारणाएँ और setup
- Project Setup: Vite, Layout और Dev Server
- पहला Component और Render