React Academy · पाठ

Props और Composition

props पास करना, destructuring से default props, composition बनाम inheritance, children/slots patterns और सरल presentational components।

पाठ 2, कुल 3 में से8 चरण

Props और Composition, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 3 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

अवलोकन

लक्ष्य: प्रॉप्स के माध्यम से डेटा भेजें, डिफ़ॉल्ट मान निर्धारित करें और छोटे घटकों को संयोजित करके उपयोगकर्ता इंटरफ़ेस बनाएँ।

  • प्रॉप्स घटकों तक डेटा पहुँचाते हैं।
  • सरल डिस्ट्रक्चरिंग के माध्यम से डिफ़ॉल्ट मान।
  • संयोजन और चिल्ड्रेन स्लॉट्स।

प्रॉप्स भेजना

प्रॉप्स केवल-पठन इनपुट होते हैं। कोई पैरेंट घटक चाइल्ड घटक को रेंडर करके मान देता है; चाइल्ड घटक अपने पैरामीटर से उन्हें पढ़ता है।

  • प्रॉप्स को बदलें नहीं।
  • जब पैरेंट घटक अपनी स्थिति या प्रॉप्स बदलते हैं, तब फिर से रेंडर होता है।

सरल डिफ़ॉल्ट प्रॉप्स

पैरामीटर सूची में डिस्ट्रक्चरिंग करके प्रॉप्स के लिए डिफ़ॉल्ट मान दें: function Card({ title = "Untitled" })।

  • घटकों को अधिक विश्वसनीय बनाए रखता है।
  • मार्कअप में अनिर्धारित मान की जाँच से बचाता है।

संयोजन, विरासत नहीं

संयोजन का अर्थ है छोटे हिस्सों (चिल्ड्रेन/स्लॉट्स) से बड़े उपयोगकर्ता इंटरफ़ेस बनाना। लचीलेपन और स्पष्ट डेटा प्रवाह के लिए इसे विरासत पर प्राथमिकता दीजिए।

उदाहरण: प्रॉप्स + चिल्ड्रेन

उदाहरण: एक सरल कार्ड लेआउट के भीतर प्रॉप्स भेजें, डिफ़ॉल्ट मान निर्धारित करें और चिल्ड्रेन को संयोजित करें।


<div id="root"></div>

पुन: उपयोग योग्य प्रस्तुतीकरण

प्रस्तुतीकरण घटक लेआउट और दृश्य रूप पर ध्यान देते हैं; आसान पुन: उपयोग के लिए जहाँ संभव हो, उन्हें प्रॉप्स-आधारित और स्थिति-रहित रखें।

  • इंटरफ़ेस का छोटा क्षेत्र (केवल प्रॉप्स)।
  • क्लासों के माध्यम से शैली दें; छिपे हुए साइड इफ़ेक्ट से बचें।

संयोजन बनाम विरासत

पुन: उपयोग योग्य घटक बनाने के लिए React, विरासत की अपेक्षा संयोजन को प्राथमिकता क्यों देता है?

पुनरावलोकन

पुनरावलोकन: प्रॉप्स के माध्यम से डेटा भेजें, सुरक्षित डिफ़ॉल्ट मान निर्धारित करें और लचीले, पुन: उपयोग योग्य उपयोगकर्ता इंटरफ़ेस बनाने के लिए चिल्ड्रेन को संयोजित करें; विरासत-आधारित पदानुक्रम से बचें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ React सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
88
पाठ
324

अक्सर पूछे जाने वाले प्रश्न

क्या “Props और Composition” पाठ निःशुल्क है?

हाँ—“Props और Composition” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

“Props और Composition” में मैं क्या सीखूँगा?

props पास करना, destructuring से default props, composition बनाम inheritance, children/slots patterns और सरल presentational components। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 2वाँ पाठ है।

“Props और Composition” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. Props पास करना और Composition Patterns
  2. Props और Composition
  3. पुनः उपयोग योग्य Presentational Components
← React Academy पर वापस जाएँ