रिएक्ट के साथ एप्लिकेशन बनाना शुरू करने से पहले, सही विकास वातावरण का होना महत्वपूर्ण है। आरंभ करने में आपकी सहायता के लिए यहां चरण-दर-चरण मार्गदर्शिका दी गई है:

चरण 1. Node.js और npm स्थापित करें

अपना रिएक्ट वातावरण स्थापित करने में पहला कदम Node.js स्थापित करना है, क्योंकि यह ब्राउज़र के बाहर कोड निष्पादित करने के लिए आवश्यक जावास्क्रिप्ट रनटाइम प्रदान करता है। जब आप Node.js इंस्टॉल करते हैं, तो यह npm (नोड पैकेज मैनेजर) के साथ बंडल में आता है, जो आपके प्रोजेक्ट में निर्भरता के प्रबंधन के लिए आवश्यक है। Node.js डाउनलोड करने के लिए, आधिकारिक वेबसाइट पर जाएँ और अपने सिस्टम के लिए उपयुक्त संस्करण चुनें।

चरण 2. क्रिएट रिएक्ट ऐप (सीआरए) के साथ एक नया रिएक्ट प्रोजेक्ट सेट करें

रिएक्ट क्रिएट रिएक्ट ऐप (सीआरए) नामक एक आधिकारिक टूल प्रदान करता है, जो पूर्व-कॉन्फ़िगर वातावरण के साथ एक नया प्रोजेक्ट बनाने की प्रक्रिया को सरल बनाता है। सीआरए वेबपैक, बैबेल और अन्य आवश्यक टूल के सेटअप को संभालता है ताकि आप कोडिंग पर ध्यान केंद्रित कर सकें। एक नया रिएक्ट प्रोजेक्ट बनाने के लिए, अपना टर्मिनल खोलें और निम्नलिखित कमांड चलाएँ:

npx create-react-app my-react-app

यहां, आप अपने प्रोजेक्ट के लिए my-react-app को किसी भी पसंदीदा नाम से बदल सकते हैं। यह एक बुनियादी रिएक्ट प्रोजेक्ट के लिए आवश्यक सभी आवश्यक फ़ाइलें और फ़ोल्डर उत्पन्न करेगा।

चरण 3. अपने प्रोजेक्ट फ़ोल्डर पर नेविगेट करें

एक बार रिएक्ट प्रोजेक्ट बन जाने के बाद, आप विकास शुरू करने के लिए अपने प्रोजेक्ट फ़ोल्डर में नेविगेट करना चाहेंगे। अपनी नव निर्मित प्रोजेक्ट निर्देशिका में जाने के लिए निम्नलिखित कमांड का उपयोग करें:

सीडी माय-रिएक्शन-ऐप

चरण 4. अपना रिएक्ट एप्लिकेशन शुरू करें और चलाएं

अब जब आपका प्रोजेक्ट सेट हो गया है, तो आप अपने रिएक्ट एप्लिकेशन को क्रियाशील देखने के लिए डेवलपमेंट सर्वर शुरू कर सकते हैं। अपनी प्रोजेक्ट निर्देशिका के अंदर निम्नलिखित कमांड चलाएँ:

एनपीएम प्रारंभ

यह कमांड डेवलपमेंट सर्वर शुरू कर देगा और एप्लिकेशन को प्रदर्शित करने के लिए स्वचालित रूप से आपका डिफ़ॉल्ट ब्राउज़र खोल देगा।

डिफ़ॉल्ट रूप से, ऐप http://localhost:3000 पर चलेगा। डेवलपमेंट सर्वर हॉट रीलोडिंग प्रदान करता है, जिसका अर्थ है कि कोड में आपके द्वारा किया गया कोई भी बदलाव पेज को मैन्युअल रूप से रीफ्रेश किए बिना ब्राउज़र में स्वचालित रूप से दिखाई देगा।

रिएक्ट के बारे में अधिक जानने के लिए मेरे माध्यम पर जाएं: https://medium.com/@CodingAdventure