कौम्पोनॅन्टस React की मुख्य अवधारणाओं में से एक हैं। वे नींव हैं जिस पर आप यूजर इंटरफेस (UI) का निर्माण करते हैं, जो उन्हें आपकी React यात्रा शुरू करने के लिए एक आदर्श स्थान बनाता है!

कौम्पोनॅन्ट: UI बिल्डिंग ब्लॉक्स

Web पर, HTML हमें <h1> और <li> जैसे टैग के अंतर्निहित सेट के साथ रिच स्ट्रक्चर्ड डाक्यूमेंट्स बनाने देता है:

<article>
<h1>My First Component</h1>
<ol>
<li>Components: UI Building Blocks</li>
<li>Defining a Component</li>
<li>Using a Component</li>
</ol>
</article>

यह मार्कअप इस आर्टिकल <article>, इसके शीर्षक <h1>, और एक (संक्षिप्त) टेबल ऑफ़ कंटेंट्सा को एक ऑर्डर्ड लिस्टी <ol> के रूप में दर्शाता है। इस तरह का मार्कअप, स्टाइल के लिए CSS के साथ मिला के, और जावास्क्रिप्ट इंटरएक्टिविटी के लिए, प्रत्येक साइडबार, अवतार, मोडल, ड्रॉपडाउन के पीछे रहता है — UI का हर टुकड़ा जो आप Web पर देखते हैं।

React आपको अपने मार्कअप, CSS और जावास्क्रिप्ट को कस्टम “कौम्पोनॅन्ट,” आपके एप्प के लिए री-यूज़ब्ले UI एलिमेंट्स में संयोजित करने देता है। ऊपर देखी गई टेबल ऑफ़ कंटेंट्स कोड को <TableOfContents /> कौम्पोनॅन्ट में बदल दिया जा सकता है जो आप हर पेज पर रेंडर कर सकते हैं। अंडर हुड, यह अभी भी HTML टैग जैसे <article>, <h1>, आदि का उपयोग करता है।

HTML टैग्स की तरह ही, आप संपूर्ण पेज को डिज़ाइन करने के लिए कौम्पोनॅन्ट को कंपोज़, ऑर्डर और नेस्ट कर सकते हैं। उदाहरण के लिए, आप जिस डॉक्यूमेंटेशन पेज को पढ़ रहे हैं वह React कौम्पोनॅन्ट से बना है:

<PageLayout>
<NavigationHeader>
<SearchBar />
<Link to="/docs">Docs</Link>
</NavigationHeader>
<Sidebar />
<PageContent>
<TableOfContents />
<DocumentationText />
</PageContent>
</PageLayout>

जैसे-जैसे आपका प्रोजेक्ट बढ़ताी है, आप देखेंगे कि आपके कई डिज़ाइन आपके द्वारा पहले से लिखे गए कौम्पोनॅन्ट का पुन: उपयोग करके, आपके डेवलपमेंट की गति को बढ़ाते हैं। ऊपर दिए गए हमारे टेबल ऑफ़ कंटेंट्स <TableOfContents /> के साथ किसी भी स्क्रीन पर ऐड किया जा सकता है! आप React ओपन सोर्स कम्युनिटी जैसे Chakra UI और Material UI द्वारा शेयर किए गए हजारों कौम्पोनॅन्ट के साथ अपने प्रोजेक्टा को एक शुरुआत दे सकते हैं।

एक कौम्पोनॅन्ट को डिफाइन करना

परंपरागत रूप से वेब पेज बनाते समय, वेब डेवलपर्स अपने कंटेंट को मार्कअप करते हैंा और फिर कुछ जावास्क्रिप्ट पर ऐड करके इंटरेक्शन ऐड करते हैं। यह तब बहुत अच्छा काम करता था जब वेब पर इंटरेक्शन एक अच्छी सुविधा थी। अब यह कई साइटों और सभी ऐप्स के लिए एक्सपेक्टेड है। React एक ही टेक्नोलॉजी का इस्तेमाल करते हुए इंटरएक्टिविटी को पहले रखता है: एक React कौम्पोनॅन्ट एक जावास्क्रिप्ट फ़ंक्शन है जिसे आप मार्कअप के साथ स्प्रिंकल सकते हैं। यह ऐसा दिखता है (आप नीचे दिए गए उदाहरण को एडिट कर सकते हैं):

और यहाँ एक कौम्पोनॅन्ट बनाने का तरीका बताया गया है:

Step 1: कौम्पोनॅन्ट एक्सपोर्ट करें

export default प्रीफिक्स एक स्टैण्डर्ड जावास्क्रिप्ट सिंटेक्स है (React के लिए स्पेसिफिक नहीं)। यह आपको फ़ाइल में मैन फ़ंक्शन को मार्क करने देता है ताकि आप बाद में इसे अन्य फ़ाइलों से इम्पोर्ट कर सकें। (इम्पॉर्टिंग एंड एक्सपोर्टिंग कौम्पोनॅन्टस में इम्पॉर्टिंग के बारे में और अधिक जानें!)

Step 2: फ़ंक्शन को डिफाइन करें

function Profile() { } के साथ आप Profile नाम से एक जावास्क्रिप्ट फ़ंक्शन को डिफाइन करते हैं।

Step 3: मार्कअप ऐड करें

कौम्पोनॅन्ट src और alt ऐट्रिब्यूट्स के साथ एक <img /> रिटर्न करता है। <img /> HTML की तरह लिखा गया है, लेकिन वास्तव में यह जावास्क्रिप्ट है! इस सिंटैक्स को JSX कहा जाता है, और यह आपको जावास्क्रिप्ट के अंदर मार्कअप एम्बेड करने देता है।

रिटर्न स्टेटमेंट सभी को एक लाइन पर लिखा जा सकता है, जैसा कि इस कौम्पोनॅन्ट में है:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

लेकिन अगर आपका मार्कअप return कीवर्ड की तरह एक ही लाइन पर नहीं है, तो आपको इसे इस तरह के ब्रैकेट्स की एक जोड़ी में लपेटना होगा:

return (
<div>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</div>
);

एक कौम्पोनॅन्ट का उपयोग करना

अब जब आपने अपना Profile कौम्पोनॅन्ट डिफाइन कर लिया है, तो आप इसे अन्य कौम्पोनॅन्ट के अंदर इस्तेमाला सकते हैं। उदाहरण के लिए, आप एक Gallery कौम्पोनॅन्ट एक्सपोर्ट कर सकते हैं जो एक से ज़्यादा Profile कौम्पोनॅन्ट का उपयोग करता है:

function Profile() {
  return (
    <img 
      src="https://i.imgur.com/MK3eW3As.jpg" 
      alt="Katherine Johnson" 
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

ब्राउज़र क्या देखता है

केसिंग में अंतर पर ध्यान दें:

• <section> लोअरकेस है, इसलिए React जानता है कि हम एक HTML टैग को रेफेर कर रहे हैं।
• <Profile /> कैपिटल P से शुरू होता है, इसलिए React जानता है कि हम Profile नामक हमारे कौम्पोनॅन्ट का उपयोग करना चाहते हैं।

और Profile में और भी अधिक HTML शामिल हैं: <img />। अंत में, ब्राउज़र यही देखता है:

<section>
<h1>Amazing scientists</h1>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

कौम्पोनॅन्टस को नेस्टेड और व्यवस्थित बनाना

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

चूंकि Profile कौम्पोनॅन्टस Gallery के अंदर रेंडर किए जाते हैं—यहां तक कि कई बार!—हम कह सकते हैं कि Gallery एक पैरेंट कौम्पोनॅन्ट है, प्रत्येक Profile को “चाइल्ड” के रूप में रेंडर करता है। यह React के जादू का हिस्सा है: आप एक कौम्पोनॅन्ट को एक बार डिफाइन कर सकते हैं, और फिर इसे कई जगहों पर और जितनी बार चाहें उपयोग कर सकते हैं।

export default function Gallery() {
// 🔴 Never define a component inside another component!
function Profile() {
// ...
}
// ...
}

export default function Gallery() {
// ...
}
// ✅ Declare components at the top level
function Profile() {
// ...
}