Lists और Keys; Conditional Rendering
map() से arrays render करें, stable keys चुनें, empty/loading states संभालें और सामान्य conditional patterns लागू करें।
Lists और Keys; Conditional Rendering, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 3 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
अवलोकन
लक्ष्य: कुंजियों की सहायता से सरणियों को सुरक्षित और स्पष्ट रूप से रेंडर करें तथा खाली या लोड होने वाले उपयोगकर्ता इंटरफ़ेस के लिए सरल सशर्त प्रतिरूपों का उपयोग करें।
सरणियाँ रेंडर करने के लिए map()
डेटा को तत्वों में बदलने के लिए array.map() का उपयोग करें; स्थिर पुनर्मिलान के लिए सूची में मौजूद हर सीधे चाइल्ड को एक key प्रॉप की आवश्यकता होती है।
उदाहरण: सूची + कुंजियाँ
अपने डेटा की स्थिर आईडी को key के रूप में प्राथमिकता दें; जब तक सूची स्थिर न हो, तब तक सरणी के क्रमांकों का उपयोग करने से बचें।
<div id="root"></div>
सशर्त रेंडरिंग की मूल बातें
सशर्त कथन:
- खाली स्थिति: सूची खाली होने पर उपयोगी संदेश दिखाएँ।
- लोड होना: घूमता संकेतक या कंकाल दिखाएँ।
- रेंडर करने के विकल्प: cond ? A : B या cond && A।
लोड होने या खाली उपयोगकर्ता इंटरफ़ेस का उदाहरण
खाली स्क्रीन से बचने के लिए लोड होने और खाली स्थितियों को स्पष्ट रूप से संभालें।
<div id="root"></div>
कुंजियों और सशर्त कथनों के सुझाव
सुझाव:
- कुंजियों के रूप में स्थिर आईडी का उपयोग करें; गतिशील सूचियों के लिए क्रमांकों से बचें।
- कुंजी को मैप किए गए सबसे बाहरी तत्व पर रखें।
- सशर्त कथनों को छोटा और पढ़ने योग्य रखें।
कुंजियों का सर्वोत्तम तरीका
पुनरावलोकन
पुनरावलोकन: स्थिर कुंजियों की सहायता से सरणियों को तत्वों में मैप करें और सरल सशर्त प्रतिरूपों का उपयोग करके लोड होने या खाली स्थितियों को संभालें।
एआई शिक्षक के साथ React सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 88
- पाठ
- 324
अक्सर पूछे जाने वाले प्रश्न
क्या “Lists और Keys; Conditional Rendering” पाठ निःशुल्क है?
हाँ—“Lists और Keys; Conditional Rendering” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“Lists और Keys; Conditional Rendering” में मैं क्या सीखूँगा?
map() से arrays render करें, stable keys चुनें, empty/loading states संभालें और सामान्य conditional patterns लागू करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 2वाँ पाठ है।
“Lists और Keys; Conditional Rendering” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- JSX Rules: Expressions, Attributes, Fragments
- Lists और Keys; Conditional Rendering
- Styling विकल्प: CSS Modules, Inline Styles, Class Helpers