React का परिचय और उपयोग

पिछली वीडियो का सारांश

• Javascript की संभावनाएं देखीं और समझा कि Javascript से क्या-क्या कर सकते हैं।
• यह स्पष्ट किया कि React का प्रोजेक्ट कैसे बनाया जा सकता है।

मुख्य बिंदु

• React को अगर आप समझना चाहते हैं, तो React का official documentation देखें।
  • Documentation में React के सभी बेसिक्स और advanced topics का वर्णन है।
• React project को Visual Studio Code (VS Code) में बनाना है।
  • टेक्स्ट यूटिल्स नाम का प्रोजेक्ट VS Code में खोला।

React App बनाना

1. Create React App का उपयोग कर एक प्रोजेक्ट बनाएं।
2. अगर कंप्यूटर स्लो है, तो इसे बनने में थोड़ा समय लग सकता है। धैर्य रखें।
3. इंडेक्स और पब्लिक फोल्डर में महत्वपूर्ण फाइल्स होती हैं।
4. index.html की महत्वपूर्ण फाइल्स:

• <div id="root"></div> – React app यहीं रेंडर होती है।

JSX का परिचय

• JSX (JavaScript XML) : एक HTML जैसा syntax है जो JavaScript में पाया जा सकता है।
  • JSX का मुख्य लाभ यह है कि यह HTML और JavaScript को एक जगह रखता है।
  • क्लास (class) को className से और फॉर (for) को htmlFor से रिप्लेस करना होता है।
• JSX में JavaScript को {} के अंदर डाल सकते हैं।

Components & Functional Components

• React के components पुनः उपयोगी UI हिस्से होते हैं।
• दो प्रकार के components – Class-based और Functional components
  • Functional components अधिक पॉपुलर हो रहे हैं।
• एक Simple Functional Component का उदाहरण: function App() { return ( <div> <h1>Hello, world!</h1> </div> ); }

State और Props का परिचय

• स्टेट (state) और प्रॉप्स (props) React के महत्वपूर्ण हिस्से हैं।
• स्टेट किसी component की लोकल इन्फ़र्मेशन होती है और प्रॉप्स पैरेंट से चाइल्ड तक जानकारी को पास करने का माध्यम है।

Project के Main Files और उनके काम

• index.js: मुख्य entry point, ReactDOM.render() से app को रेंडर करता है।
• App.js: Primary React component जिसमें अन्य components को import और उपयोग कर सकते हैं।

Useful Tools

• VS Code और React developer tools उपयोगी सिद्ध हो सकते हैं।

Common Errors & Fixes

• JSX में एक ही root element होना चाहिए।
• CSS की import और JS के साथ विश्वसनीय तरीके से काम करना।

Conclusion

• React की documentation देखें और उसका पालन करें
• JSX का सही उपयोग करें
• Functional components बनाएं
• Project structure को समझें और सही तरीके से काम में लें