ReactJS का परिचय

ReactJS एक लोकप्रिय फ्रंट-एंड लाइब्रेरी है जिसका उपयोग यूजर इंटरफेस और सिंगल-पेज एप्लीकेशन बनाने के लिए किया जाता है। इस लेख में, हम ReactJS की बुनियादी बातों का पता लगाएंगे और शुरू से ही एक पूरी परियोजना बनाएंगे।

प्रोजेक्ट स्थापित करना

शुरू करने के लिए, हमें अपने मशीन पर Node.js और अपनी पसंद के कोड एडिटर को इंस्टॉल करवाना होगा। इस मामले में, हम Visual Studio Code का उपयोग करेंगे। हम "react-youtube" नामक एक नया फोल्डर बनाते हैं और इसे सीधे Visual Studio Code में खोलते हैं।

Setting Up the Project

फिर हम टर्मिनल को सीधे Visual Studio Code से खोलते हैं और Vite का उपयोग करते हैं, जो Create React App से तेज़ है, निम्नलिखित कमांड लॉन्च करने के लिए: npm create vite@latest my-react-app। इससे एक नया React प्रोजेक्ट बन जाएगा।

पहला कंपोनेंट बनाना

हम WelcomeMessage.jsx नामक एक नया कंपोनेंट बनाकर शुरुआत करते हैं। हम components नामक एक फ़ोल्डर बनाते हैं जहाँ हम अपने सभी कंपोनेंट डालेंगे। WelcomeMessage.jsx फ़ाइल में, हम एक फ़ंक्शन निर्यात करते हैं जो JSX का एक टुकड़ा लौटाता है।

Creating the First Component

फिर हम अपनी App.jsx फ़ाइल पर जाते हैं और WelcomeMessage कंपोनेंट आयात करते हैं। हम WelcomeMessage कंपोनेंट को कॉल करते हैं और इसमें एक message प्रॉप पास करते हैं।

कंपोनेंट में प्रॉप्स पास करना

हम प्रॉप्स की अवधारणा पेश करते हैं, जो हमें एक ही कंपोनेंट में अलग-अलग पैरामीटर पास करने की अनुमति देता है। हम WelcomeMessage कंपोनेंट में एक message प्रॉप पास करते हैं और इसका उपयोग एक गतिशील संदेश प्रदर्शित करने के लिए करते हैं।

Passing Props to Components

काउंटर कंपोनेंट बनाना

हम Counter.jsx नामक एक नया कंपोनेंट बनाते हैं और useState हुक का उपयोग करके count नामक एक स्टेट वेरिएबल बनाते हैं। फिर हम बटन क्लिक करने पर count वेरिएबल को बढ़ाने के लिए setCount फ़ंक्शन का उपयोग करते हैं।

Creating a Counter Component

useState हुक का उपयोग करना

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

Using the useState Hook

एपीआई से डेटा लाना

हम useEffect हुक पेश करते हैं, जो हमें कंपोनेंट माउंट होने पर एपीआई से डेटा लाने की अनुमति देता है। हम Random User API से डेटा लाने और यूजर का नाम और इमेज प्रदर्शित करने के लिए useEffect हुक का उपयोग करते हैं।

Fetching Data from an API

निष्कर्ष

निष्कर्ष में, हमने सीखा है कि शुरू से ही एक पूरा React प्रोजेक्ट कैसे बनाया जाता है। हमने सीखा है कि कंपोनेंट कैसे बनाएं, कंपोनेंट में प्रॉप्स कैसे पास करें, useState हुक का उपयोग कैसे करें और useEffect हुक का उपयोग करके एपीआई से डेटा कैसे लाएं।

Conclusion

एक अंतिम प्रोजेक्ट के रूप में, हम एक टू-डू सूची कंपोनेंट बनाते हैं जो यूजर को कार्यों को जोड़ने और हटाने की अनुमति देता है। हम tasks नामक एक स्टेट वेरिएबल और इसे अपडेट करने के लिए एक फ़ंक्शन setTasks बनाने के लिए useState हुक का उपयोग करते हैं।

Final Project

मुझे उम्मीद है कि यह लेख आपके लिए उपयोगी रहा होगा। यदि आपके कोई प्रश्न हैं या आप React के बारे में अधिक जानना चाहते हैं, तो कृपया नीचे एक टिप्पणी छोड़ दें।