रियाक्ट का परिचय

जावास्क्रिप्ट रिफ्रेशर

• पिछले वीडियो में जावास्क्रिप्ट के उपयोग का परिचय दिया गया था।
• रियाक्ट के लिए जावास्क्रिप्ट की कितनी जानकारी चाहिए।

रियाक्ट की मूल बातें

• रियाक्ट कोई सामान्य प्रोजेक्ट नहीं है, इसे विशेष रूप से विकसित किया गया है।
• रियाक्ट के बेसिक्स को समझने के लिए डॉक्स पर जाया जा सकता है।

प्रोजेक्ट सेटअप

• रियाक्ट प्रोजेक्ट को "create-react-app" से बनाया गया है।
• ध्यान रखें कि अगर कंप्यूटर धीमा है, तो समय लग सकता है।

HTML एंट्री पॉइंट

• index.html फ़ाइल मुख्य एंट्री पॉइंट होती है।
• div के अंदर id=root के साथ रेंडर करना है।

डेवलपमेंट सर्वर

• npm start से सर्वर लॉन्च करें।
• स्थानीय स्तर पर वेबसाइट की देखरेख करें।

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

• दो प्रकार के कंपोनेंट्स होते हैं:
  • क्लास-आधारित कंपोनेंट्स
  • फ़ंक्शन-आधारित कंपोनेंट्स (आजकल अधिक प्रचलित)

JSX (JavaScript XML)

• JSX एक HTML जैसा सिंटैक्स है जो जावास्क्रिप्ट में लिखा जाता है।
• JSX कोड को रिटर्न करते समय ध्यान दें कि केवल एक टैग को ही रिटर्न किया जाना चाहिए।
• JSX फ़्रैगमेंट का उपयोग करते समय ध्यान रखें, जैसे: <> <div>Content</div> </>

JSX में विशेषताएँ

• JSX में HTML के कुछ कीवर्ड जैसे class की जगह className का उपयोग करें।
• for की जगह भी एक और कीवर्ड का उपयोग करना होता है।

वेरिएबल्स का उपयोग

• इमेज आदि को जोड़ने के लिए आपको src प्रॉपर्टी का उपयोग करना होगा।
• वेरिएबल्स को curly braces में लिखकर JSX में शामिल करें।

CSS का उपयोग

• CSS को इनपोर्ट करके स्टाइलिंग करें।
• रियाक्ट में स्टाइलिंग को आसानी से लागू किया जा सकता है।

अंतिम सुझाव

• चिंता करने की कोई आवश्यकता नहीं है, धीरे-धीरे सभी चीजें समझ में आ जाएंगी।
• ध्यान दें कि सभी कोड app.js में होना चाहिए।
• भविष्य में और जटिल परियोजनाओं को भी देखते रहेंगे।

निष्कर्ष

• यह वीडियो रियाक्ट के मूल बातें समझाने के लिए था।
• आगे आने वाले वीडियो में अधिक गहराई से अध्ययन करेंगे।
• सभी कोड साइट पर उपलब्ध होगा।

धन्यवाद!
इस वीडियो को देखने के लिए।
जल्द ही अगला वीडियो आएगा।