Bootstrap in React Projects

Introduction

• आज का विषय: Bootstrap का उपयोग React प्रोजेक्ट में।
• jQuery को इंस्टॉल नहीं किया जाएगा क्योंकि React और jQuery का संयोजन सही नहीं माना जाता।
• jQuery DOM को manipulate करता है, जो React का काम है।

Bootstrap Installation Methods

1. CDN लिंक

• Google पर जाकर "Bootstrap" सर्च करें।
• Bootstrap की वेबसाइट पर जाएं, और "Get Started" से CDN लिंक प्राप्त करें।
• लिंक को अपनी index.html फ़ाइल के head टैग में पेस्ट करें।
• Bootstrap के क्लासेस का उपयोग करें, जैसे:
  • btn-primary, btn-danger, btn-warning, आदि।

2. NPM पैकेज के रूप में इंस्टॉल करना

• पैकेज को इंस्टॉल करने के लिए:

  npm install bootstrap
  

• इसके बाद package.json में Bootstrap दिखेगा।

React में Bootstrap का उपयोग

• Bootstrap के क्लासेस को React में इस्तेमाल करने के लिए class को className से बदलें।
• उदाहरण के लिए:

  <button className="btn btn-danger">Danger</button>
  

Server प्राप्त करना

• अपने प्रोजेक्ट को रन करने के लिए:

  npm start
  

• अपनी कस्टम बटन क्लास को अपडेट करें।

Example: Button Classes

• बटन के लिए कई विकल्प हैं:
  • btn-primary (ब्लू)
  • btn-secondary (ग्रे)
  • btn-success (हरा)
  • btn-danger (लाल)

Conclusion

• Bootstrap एक बहुत लोकप्रिय CSS फ्रेमवर्क है।
• React प्रोजेक्ट में Bootstrap का उपयोग करके रिस्पॉन्सिव वेबसाइट बनाई जा सकती हैं।
• आप चाहें तो react-bootstrap का उपयोग करें, जो जेक्वेरी पर निर्भर नहीं करता।

Additional Tips

• ऐडिशनल पैकेजेस जैसे reactstrap या react-bootstrap की जांच करें।
• वेबसाइट पर जाकर विभिन्न कंपोनेंट्स के बारे में अधिक जानकारी प्राप्त करें।

---

Summary

• Bootstrap को React में जोड़ने के लिए CDN या NPM का उपयोग करें।
• ध्यान दें कि class को className से बदलें।
• Bootstrap की कई क्लासेस का प्रयोग कर सकते हैं।

Thank You!

• उम्मीद है कि यह जानकारी उपयोगी रही होगी।

📚