रिएक्ट में उपघटक कैसे बनाएं

रिएक्ट में, एक घटक कोड का एक स्व-निहित टुकड़ा है जो अपने स्वयं के राज्य का प्रबंधन करता है और अपना स्वयं का यूआई प्रस्तुत करता है। एक घटक कोड के छोटे, पुन: प्रयोज्य टुकड़ों से बना हो सकता है जिन्हें उपघटक कहा जाता है।

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

उपघटक कई कारणों से उपयोगी हो सकते हैं:

1. पुन: प्रयोज्यता: उप-घटकों का उपयोग एक ऐप के भीतर कई स्थानों पर किया जा सकता है, जिससे कोड दोहराव कम हो जाता है और ऐप को बनाए रखना आसान हो जाता है।
2। मॉड्यूलैरिटी: उपघटकों को अन्य घटकों से स्वतंत्र रूप से विकसित और परीक्षण किया जा सकता है, जिससे ऐप के विभिन्न हिस्सों पर एक साथ काम करना आसान हो जाता है।
3. लचीलापन: विभिन्न उपयोग के मामलों की जरूरतों को पूरा करने के लिए उपघटकों को आसानी से बदला या अनुकूलित किया जा सकता है।
4. आसान डिबगिंग: यदि कोई उपघटक समस्याएँ पैदा कर रहा है, तो उसे अलग किया जा सकता है और अधिक आसानी से डीबग किया जा सकता है, बजाय इसके कि समस्या किसी बड़े घटक में हो। रिएक्ट में एक उपघटक बनाने के लिए, आप आम तौर पर उपघटक को एक अलग घटक फ़ाइल के रूप में परिभाषित करेंगे, और फिर आयात करेंगे। और इसे अपने मुख्य ऐप घटक के भीतर उपयोग करें। उदाहरण के लिए:
```
// Button.js
'प्रतिक्रिया' से प्रतिक्रिया आयात करें;

const बटन = () => {
वापसी (
<बटन>मुझे क्लिक करें!
);
};

निर्यात डिफ़ॉल्ट बटन ;

// App.js
import 'प्रतिक्रिया' से प्रतिक्रिया;
'./बटन' से आयात बटन;

const ऐप = () => {
वापसी (

<बटन />

);
};

निर्यात डिफ़ॉल्ट ऐप;
```
इस उदाहरण में, `बटन` घटक `ऐप` घटक का एक उपघटक है। `बटन` घटक को `बटन.जेएस` नामक एक अलग फ़ाइल में परिभाषित किया गया है, और इसे `ऐप` घटक के भीतर आयात और उपयोग किया जाता है।