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

किसी भी वेबसाइट को देखें। यह स्वतंत्र ब्लॉकों के एक सेट से बनी होती है: हेडर, साइडबार, फूटर, कॉन्टेंट। यह कहा जा सकता है कि ये ब्लॉक React में जिस अर्थ में समझा जाता है, उसी अर्थ में कंपोनेंट्स हैं।

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

React में भी बात इसी तरह है - वेबसाइट कंपोनेंट्स के एक सेट से बनती है, जो बदले में अन्य कंपोनेंट्स को शामिल कर सकते हैं।

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

आइए नए कंपोनेंट्स बनाना अभ्यास करें।

मान लीजिए, उदाहरण के लिए, हमें एक ऐसे कंपोनेंट की आवश्यकता है जो उत्पाद का डेटा दिखाए। इसके लिए हमें कार्यशील फ़ोल्डर में Product.js फ़ाइल बनानी होगी और उसमें निम्नलिखित कोड जोड़ना होगा:

jsximport React from 'react';

function Product() {
  return <p>
    product
  </p>;
}

export default Product;

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

आइए अब हमारे द्वारा बनाए गए कंपोनेंट को App कंपोनेंट में दिखाएं। मान लीजिए कि अभी हमारा App में निम्नलिखित कोड है:

jsximport React from 'react';

function App() {
  return <div>
    text
  </div>;
}

export default App;

शुरुआत के लिए, हमें बनाए गए उत्पाद कंपोनेंट को इम्पोर्ट करने की आवश्यकता है:

jsximport React from 'react';
import Product from './Product'; // उत्पाद को इम्पोर्ट करें

function App() {
  return <div>
    text
  </div>;
}

export default App;

ऐसे इम्पोर्ट के बाद App कंपोनेंट के अंदर Product कंपोनेंट का उपयोग किया जा सकता है।