React Academy · पाठ

घटक ट्री और Props का निरीक्षण

घटक पदानुक्रम में गहराई तक जाएँ और लाइव prop तथा state मान पढ़ें

पाठ 2, कुल 4 में से13 चरण

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

स्वागत है

इस पाठ में आप React DevTools में नेस्टेड घटक पदानुक्रमों की गहराई से जाँच करना और Components पैनल के साइडबार से जटिल प्रॉप्स और स्थिति के मान पढ़ना सीखेंगे।

घटक ट्री एक दर्पण है

DevTools में दिखाई देने वाला हर घटक आपके JSX के नेस्टिंग को दर्शाता है। रूट आमतौर पर आपका App घटक होता है। चाइल्ड घटक अपने पैरंट घटकों के नीचे इंडेंट किए जाते हैं, ठीक वैसे ही जैसे वे स्रोत कोड में दिखाई देते हैं।

किसी घटक का चयन करना

ट्री में किसी भी घटक के नाम पर क्लिक करें। दायाँ पैनल तुरंत उसके **प्रॉप्स**, **हुक** (स्थिति, प्रभाव, रेफ़) और उस **स्रोत** फ़ाइल तथा पंक्ति संख्या को दिखाता है जहाँ उसे परिभाषित किया गया था।

स्ट्रिंग और संख्या वाले प्रॉप्स पढ़ना

स्ट्रिंग वाले प्रॉप्स उद्धरण चिह्नों में दिखाई देते हैं: `"hello"`। संख्याएँ उद्धरण चिह्नों के बिना दिखाई देती हैं: `42`। बूलियन मान `true` या `false` के रूप में दिखते हैं। यदि कोई मान काटकर दिखाया गया हो, तो उसकी पूरी सामग्री देखने के लिए उस पर माउस ले जाएँ।

ऑब्जेक्ट और ऐरे वाले प्रॉप्स फैलाना

जब किसी प्रॉप का मान ऑब्जेक्ट या ऐरे होता है, तो DevTools एक ऐसा ट्री दिखाता है जिसे फैलाया या समेटा जा सकता है। उसे फैलाने और हर नेस्टेड कुंजी तथा मान को देखने के लिए `{…}` या `[…]` के आगे दिए गए तीर पर क्लिक करें।

फ़ंक्शन वाले प्रॉप्स का निरीक्षण करना

फ़ंक्शन वाले प्रॉप्स (जैसे `onClick` हैंडलर) `f onClick()` के रूप में दिखाई देते हैं। Sources पैनल में फ़ंक्शन की परिभाषा पर जाने के लिए उनके पास दिए गए छोटे तीर आइकन पर क्लिक कर सकते हैं।

ट्री को फ़िल्टर करना

नाम के अनुसार फ़िल्टर करने के लिए Components पैनल के शीर्ष पर मौजूद खोज बॉक्स का उपयोग करें। केवल उन घटकों को दिखाने के लिए `Button` टाइप करें जिनके नाम में *Button* शामिल है। सैकड़ों घटकों वाले ऐप में यह उपयोगी होता है।

DOM से React पर जाना

**Elements** टैब में किसी DOM नोड पर राइट-क्लिक करें और **React घटक का निरीक्षण करें** चुनें (DevTools इंस्टॉल होने पर उपलब्ध)। DevTools Components टैब पर चला जाता है और उस DOM नोड को रेंडर करने वाले React घटक का चयन करता है।

DevTools में प्रॉप्स संपादित करना

DevTools में किसी प्रॉप के मान को लाइव संपादित करने के लिए उस पर डबल-क्लिक करें। घटक नए मान के साथ तुरंत दोबारा रेंडर होता है। स्रोत कोड बदले बिना अलग-अलग परिस्थितियों का परीक्षण करने के लिए यह उपयोगी है।

प्रॉप्स को JSON के रूप में कॉपी करना

DevTools में किसी भी प्रॉप या स्थिति के मान पर राइट-क्लिक करें और **मान कॉपी करें** चुनें। इससे मान JSON के रूप में आपके क्लिपबोर्ड पर कॉपी हो जाता है, जिसे परीक्षणों या दस्तावेज़ों में चिपकाना आसान होता है।

त्वरित जाँच

React DevTools के Components पैनल में ऑब्जेक्ट या ऐरे वाले प्रॉप को आप कैसे फैलाते हैं?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

अब आप घटक ट्री में नेविगेट कर सकते हैं, स्ट्रिंग, संख्याएँ, ऑब्जेक्ट और फ़ंक्शन पढ़ सकते हैं, नाम के अनुसार फ़िल्टर कर सकते हैं, DOM तत्वों से React घटकों पर जा सकते हैं और DevTools में प्रॉप्स को लाइव संपादित कर सकते हैं।

आगे

अगला पाठ: **Profiler टैब का उपयोग करना** — आप रेंडर रिकॉर्ड करेंगे, फ्लेम ग्राफ़ पढ़ेंगे और धीमी इंटरैक्शन के लिए ज़िम्मेदार घटकों का पता लगाएँगे।

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

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

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

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

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

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

क्या “घटक ट्री और Props का निरीक्षण” पाठ निःशुल्क है?

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

“घटक ट्री और Props का निरीक्षण” में मैं क्या सीखूँगा?

घटक पदानुक्रम में गहराई तक जाएँ और लाइव prop तथा state मान पढ़ें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“घटक ट्री और Props का निरीक्षण” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

← React Academy पर वापस जाएँ