// === Reminder ===
All tags must return under a parent tag or using a react fragment(>)

// === Reminder ===
React component name must start with a capital letter otherwise it won't treated as a component

प्रोडक्टकार्ड घटक h1,h2,p, या HTML जैसे लिखे गए कुछ अन्य आवश्यक टैग के साथ एक div टैग लौटाता है, लेकिन यह हुड के नीचे जावास्क्रिप्ट है। सिंटैक्स को JSX (जावास्क्रिप्ट XML) कहा जाता है। कोई चिंता नहीं मैं इसे बाद में समझाऊंगा।

// === Reminder ===
JSX is a syntax extension for javascript that lets you write HTML-like markup inside a javascript file which handles the logic of rendering and markup live together in the same place as components.

अब आपका घटक उपयोग के लिए तैयार है। उदाहरण के लिए, आपके पास एक उत्पाद पृष्ठ है और आपको कुछ उत्पाद प्रस्तुत करने हैं।

//Products.js or jsx file
function ProductCard(){
  return(
      

        
title of the product
        
price of the product
        
description of the product
        // rest of info
      
  )
}

function ProductPage(){
  return(
      
product page
        
  )
}

आपका ब्राउज़र ProductCard को 3 गुना प्रस्तुत करेगा इसका मतलब है कि ब्राउज़र को 3 उत्पाद कार्ड दिखाई दे चुके हैं।

मुद्दा यह है कि इस ProductPage कोड को प्राप्त करने के बाद ब्राउज़र कैसे प्रतिक्रिया देगा

• लोअरकेस है, इसलिए रिएक्ट जानता है कि यह HTML टैग के रूप में संदर्भित होगा
• बड़े अक्षर P से शुरू होता है, इसलिए React जानता है कि इसे एक घटक के रूप में माना जाएगा।

अब तक तो सब ठीक है?। सफलतापूर्वक हमने उत्पाद कार्ड को उत्पाद पृष्ठ पर प्रस्तुत कर दिया है।
अब कोड को व्यवस्थित करने का समय:
आपके पास एक या अधिक घटक जैसे ProductCard, ProductReviewCard, SimpleProductCard इत्यादि हो सकते हैं, इसलिए, सभी घटकों को एक फ़ाइल में घोषित करना और प्रबंधित करना बोझिल हो सकता है। तो, आइए इसे केवल फ़ाइल संरचना का उपयोग करके प्रबंधित करने के लिए इसे और अधिक व्यवस्थित बनाएं।
आइए एक पुन: प्रयोज्य फ़ोल्डर बनाएं क्योंकि उत्पाद कार्ड का उपयोग कई पृष्ठों से किया जा सकता है। पुन: प्रयोज्य फ़ोल्डर के अंदर ProductCard.js/jsx फ़ाइल बनाएं।

//reusable/ProductCard.js or jsx file
function ProductCard(){
  return(
      

        
title of the product
        
price of the product
        
description of the product
        // rest of info
      
  )
}

अब एक मुद्दा यह है कि यदि आप ProductCardcomponent को अलग करते हैं तो इसे ProductPage फ़ाइल से कैसे उपयोग किया जाएगा। मुझे पता है कि आप पहले से ही समझ गए होंगे कि हाँ, हम ProductCardfile से ProductCardfunction को नाम या डिफ़ॉल्ट के रूप में निर्यात कर सकते हैं जिसे आप वास्तव में पसंद करते हैं।

//reusable/ProductCard.js or jsx file
export default function ProductCard(){
  return(
      

        
title of the product
        
price of the product
        
description of the product
        // rest of info
      
  )
}

अब इसे ProductPage फ़ाइल से प्रयोग किया जा सकता है। बस ProductPagefile से ProductCard आयात करें और फिर जितना चाहें इसका उपयोग करें।

//ProductPage.js or jsx file
import ProducrCard from './reusable/ProductCard.js'
function ProductPage(){
  return(
      
product page
        
  )
}

मैंने पहले बताया था कि घटक का उपयोग पुन: प्रयोज्यता, चिंता के पृथक्करण और मॉड्यूलरिटी के लिए क्यों किया जाना चाहिए।

• हमारा प्रोडक्टकार्ड घटक अब पूरी तरह से पुन: प्रयोज्य है। हम इसे कहीं से भी उपयोग कर सकते हैं।
• उत्पाद पृष्ठ में कई अनुभाग हो सकते हैं जैसे उत्पाद कार्ड, उत्पाद समीक्षा कार्ड, समान उत्पाद कार्ड, अनुशंसित उत्पाद कार्ड आदि। यह कोड को घटक दर घटक और अनुभाग दर अनुभाग के रूप में एक अलग अनुभाग में केंद्रित करके प्रबंधित और बनाए रखता है।
• यूआई को छोटे-छोटे खंडों में तोड़ने के बाद परीक्षण करना, डीबग करना और विकसित करना आसान हो जाता है। यदि बग उत्पन्न होते हैं तो हम विशेष घटक से आसानी से बग/समस्याएं ढूंढ सकते हैं। मुझे आशा है कि यह अब अधिक स्पष्ट हो गया है?

इस सब के बाद, आप समझ गए हैं कि आप अपने घटक को भी नेस्ट कर सकते हैं।

ठीक है आइए फिर से देखें-?
एक लेआउट फ़ोल्डर बनाएं
लेआउट फ़ोल्डर के अंतर्गत हेडर फ़ोल्डर बनाएं, फिर हेडर फ़ोल्डर के अंदर Index.js फ़ाइल बनाएं

export default function Header(){
  return(
      
Header
      
  )
}

create `Footer` folder under the `Layout` folder then create `index.js` file inside `Footer` folder
export default function Footer(){
  return(
      
Footer
      
  )
}

अब लेआउट फ़ोल्डर के अंतर्गत Index.js फ़ाइल बनाएं

import Header from './Header';
import Footer from './Footer';
export default function Layout(){
  return(
      
page content
        
  )
}

मुझे आशा है कि आप पहले ही रिएक्ट कंपोनेंट आर्किटेक्चर की सुंदरता का पता लगा चुके होंगे। यह तो अभी शुरुआत है और आपके मन में रुचि बढ़ाने का प्रयास किया गया है।
हैप्पी कोडिंग??