रिएक्ट ट्यूटोरियल भाग 4: अभिभावक और बाल घटक

हम रिएक्ट प्रशिक्षण पाठ्यक्रम के अनुवाद के अगले भाग को प्रकाशित कर रहे हैं। हमारा विषय आज माता-पिता और बाल घटकों के बीच संबंध होगा।



→ भाग 1: पाठ्यक्रम अवलोकन, प्रतिक्रिया की प्रतिक्रिया के कारण, ReactDOM और JSX
→ भाग 2: कार्यात्मक घटक
→ भाग 3: घटक फाइलें, परियोजना संरचना
→ भाग 4: माता-पिता और बच्चे के घटक
→ भाग 5: एक TODO आवेदन, स्टाइलिंग की मूल बातें पर काम शुरू
→ भाग 6: पाठ्यक्रम की कुछ विशेषताओं के बारे में, जेएसएक्स और जावास्क्रिप्ट
→ भाग 7: इनलाइन शैली
→ भाग 8: TODO आवेदन पर काम जारी रखा, घटकों के गुणों से परिचित
→ भाग 9: घटक गुण
→ भाग 10: घटक गुणों और स्टाइल के साथ काम करने पर कार्यशाला
→ भाग 11: डायनेमिक मार्कअप जेनरेशन और मैप एरे विधि
→ भाग 12: कार्यशाला, एक TODO आवेदन पर काम का तीसरा चरण
→ भाग 13: वर्ग-आधारित घटक
→ भाग 14: वर्ग-आधारित घटकों, घटक स्थिति पर कार्यशाला
→ भाग 15: घटक स्वास्थ्य कार्यशालाएँ
→ भाग 16: TODO अनुप्रयोग, ईवेंट हैंडलिंग पर काम का चौथा चरण
→ भाग 17: TODO अनुप्रयोग पर काम का पांचवा चरण, घटकों की स्थिति को संशोधित करता है
→ भाग 18: TODO आवेदन पर काम का छठा चरण
→ भाग 19: घटक जीवन चक्र विधियाँ
भाग 20: सशर्त प्रतिपादन में पहला पाठ
→ भाग 21: सशर्त प्रतिपादन पर दूसरा पाठ और कार्यशाला
→ भाग 22: TODO आवेदन पर काम का सातवां चरण, बाहरी स्रोतों से डेटा डाउनलोड करना
→ भाग 23: रूपों के साथ काम करने पर पहला पाठ
→ भाग 24: दूसरा रूप पाठ
→ भाग 25: रूपों के साथ काम करने पर कार्यशाला
→ भाग 26: अनुप्रयोग वास्तुकला, कंटेनर / घटक पैटर्न
→ भाग 27: पाठ्यक्रम परियोजना

पाठ 9. माता-पिता और बच्चे के घटक

→ मूल

आज हम माता-पिता और बच्चे के घटकों के बारे में बात करेंगे। इस तरह के निर्माणों का उपयोग करने से हमारे आवेदन की तुलना में अधिक जटिल हो जाएगा, जब यह डोम में केवल एक घटक आउटपुट था, जैसे कि MyInfo । इस सरल संरचना के बजाय, आवेदन में घटकों का एक जटिल पदानुक्रम हो सकता है, जो परिणामस्वरूप, जेएसएक्स तत्वों में बदल जाता है।

चलिए शुरू करते हैं उस एप्लीकेशन टेम्पलेट से जिसे आप पहले से जानते हैं। आपने जो भी index.js , उसे याद रखने के लिए, आप मेमोरी से, खाली index.js फ़ाइल में एक कोड लिख सकते हैं, जो Hello World! साथ पहले स्तर के हेडर पेज को प्रदर्शित करने के लिए है Hello World! प्रतिक्रिया उपकरण। यहाँ कोड की तरह लग सकता है:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <h1>Hello World!</h1>, document.getElementById("root") ) 

पिछली बार, जहां <h1> तत्व का वर्णन उपरोक्त कोड में है, MyInfo घटक प्रदर्शित करने के लिए कोड था। अब हम App कंपोनेंट बनाने और इसे प्रदर्शित करने जा रहे हैं। ऐसा करने के लिए, हमें निम्नलिखित फ़ॉर्म का एक कोड चाहिए:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <App />, document.getElementById("root") ) 

App घटक हमारे आवेदन का प्रवेश बिंदु होगा। आपने शायद पहले से ही देखा है कि पिछले उदाहरण के कोड में कुछ गायब था। यह सच है - हमने अभी तक यहां App आयात नहीं किया है। चलो इसे करते हैं:

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

लेकिन ऐसा कोड अभी भी निष्क्रिय है। हमें index.js के समान फ़ोल्डर में स्थित App घटक फ़ाइल ( App.js ) की आवश्यकता है। यह वह फ़ाइल है जिसे हम import App from "./App" आयात कमांड import App from "./App" में संदर्भित करते हैं। याद रखें कि रिएक्ट घटकों के नाम ऊंट शैली में लिखे गए हैं और एक बड़े अक्षर से शुरू होते हैं। हमें जिस फ़ाइल की आवश्यकता है उसे बनाएं और उसमें App घटक का वर्णन करें। इसे स्वयं करने का प्रयास करें। अर्थात्, उस कोड को लिखें जिसके लिए App घटक पृष्ठ पर Hello again प्रदर्शित करता है।

यह कोड इस तरह दिखता है:

 import React from "react" function App(){ return (   <h1>Hello again</h1> ) } export default App 

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

 import React from "react" function App(){ return (   <div>     <h1>Hello a third time!</h1>     <ul>       <li>Thing 1</li>       <li>Thing 2</li>       <li>Thing 3</li>     </ul>   </div> ) } export default App 

शायद अब हम तय करेंगे कि App घटक के माध्यम से जो बनता है वह एक वेबसाइट होना चाहिए। इसमें एक नेविगेशन ब्लॉक ( <nav></nav> ) और एक मुख्य सामग्री क्षेत्र ( <main></main> ) होगा। यह समाधान निम्नलिखित कोड के गठन की ओर ले जाएगा:

 import React from "react" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>   </div> ) } export default App 

यह है कि यह एक ब्राउज़र में कैसे दिखेगा।


ब्राउज़र में अनुप्रयोग

यहां आप अभी भी सूची को स्टाइल कर सकते हैं ताकि यह नेविगेशन बार की तरह बन जाए।

आप देख सकते हैं कि घटक कोड पहले से ही काफी बड़ा हो गया है। यह उस उद्देश्य के खिलाफ जाता है जिसके लिए हम रिएक्ट का उपयोग करते हैं। इससे पहले हमने इस तथ्य के बारे में बात की थी कि एचटीएमएल-कोड के टुकड़ों को अलग-अलग घटकों के रूप में दर्शाया जा सकता है, और हमारे घटक में सब कुछ एक ढेर में ढेर हो जाता है। इसलिए, अब हम मार्कअप के प्रत्येक स्वतंत्र टुकड़े के लिए घटक बनाएंगे।

दांव पर क्या है यह बेहतर ढंग से समझने के लिए इस आरेख पर एक नज़र डालें।


App घटक MyInfo घटक, <div> तत्व के आउटपुट को प्रदर्शित करता है

यहाँ हम पृष्ठ पर App घटक प्रदर्शित करते हैं। इस स्थिति में, App घटक एक अन्य घटक - MyInfo प्रदर्शित करने का निर्णय लेता है। और MyInfo घटक पहले से ही एक निश्चित MyInfo तत्व प्रदर्शित करता है। "घटक" और "तत्व" की अवधारणाओं के बीच अंतर पर ध्यान दें। तत्व ऐसी इकाइयाँ हैं जो नियमित HTML कोड में बदल जाती हैं। इसलिए, आरेख के तल पर प्रस्तुत तत्व में, एक सरल <div> टैग का उपयोग किया जाता है, इसका नाम एक छोटे अक्षर से शुरू होता है, जो हमें बताता है कि यह एक साधारण तत्व है, और हमारे द्वारा बनाए गए घटकों में से एक नहीं है। दूसरी ओर, MyInfo नाम एक बड़े अक्षर से शुरू होता है। यह समझने में मदद करता है कि हमारे पास एक घटक है।

आपने सुना होगा कि DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल, जिसे अक्सर "ट्री" कहा जाता है)। इस पेड़ का मूल तत्व <html> तत्व है। हमारे मामले में, आरेख में प्रस्तुत पेड़ का मूल तत्व App घटक है। इस घटक की क्षमताएं हमारे मामले में किसी अन्य घटक, MyInfo के आउटपुट तक सीमित नहीं हैं। उदाहरण के लिए, यह एक अन्य घटक है, जो एक "पाद" है, पृष्ठ के नीचे प्रदर्शित कर सकता है। मान लें कि इस घटक को AwesomeFooter कहा जाएगा।


घटक ऐप दो घटकों को आउटपुट करता है

यह घटक, बदले में, एक <footer> तत्व को आउटपुट कर सकता है जिसमें पृष्ठ के नीचे HTML कोड होगा।

यदि हमारे पास एक पृष्ठ का "पाद" है, तो इसमें एक "हेडर" भी हो सकता है, जो इसका ऊपरी भाग बनाता है।


घटक ऐप आउटपुट तीन घटक

पृष्ठ के शीर्ष को हमारे आरेख में AwesomeHeader घटक द्वारा दर्शाया गया है। इन घटकों को ऐसे नाम दिए गए हैं ताकि वे तत्वों के साथ भ्रमित न हों। App घटक की तरह बहुत AwesomeHeader घटक, न केवल JSX मार्कअप, बल्कि अन्य घटकों को भी आउटपुट कर सकता है। उदाहरण के लिए, यह एक NavBar घटक हो सकता है, जो एक नेविगेशन बार है, और एक Logo घटक है जो एक लोगो प्रदर्शित करता है। और ये घटक पहले से ही साधारण तत्वों को प्रदर्शित करेंगे - जैसे कि <img /> और <nav> ।

जैसा कि आप इस योजना की समीक्षा करते हैं, आप देख सकते हैं कि एक प्रतिक्रिया अनुप्रयोग, जैसा कि यह विकसित होता है, अधिक से अधिक जटिल हो सकता है। और यहां हमने जो जांच की, वह वास्तव में एक अत्यंत सरल अनुप्रयोग संरचना का एक उदाहरण है।

अब हमारे प्रशिक्षण एप्लिकेशन में एक घटक बनाते हैं जो पेज का "पाद" होगा।

ऐसा करने के लिए, index.js फ़ाइल, एक नई फ़ाइल के समान फ़ोल्डर में बनाएं। इसे Footer.js और इसमें निम्न कोड डालें:

 import React from "react" function Footer() {   return (       <footer>           <h3><font color="#3AC1EF">▍This is my footer element</font></h3>       </footer>   ) } export default Footer 

कृपया ध्यान दें कि कार्यात्मक घटक का नाम बड़े अक्षर ( Footer ) से शुरू होता है, और तत्व का नाम (<footer> ) एक छोटे से शुरू होता है। जैसा कि पहले ही उल्लेख किया गया है, यह तत्वों को तत्वों से अलग करने में मदद करता है।

यदि आप अब पृष्ठ को ताज़ा करते हैं, तो Footer घटक द्वारा उत्पन्न मार्कअप उसके निचले हिस्से में प्रदर्शित नहीं किया जाएगा। यह पूरी तरह से अपेक्षित है, क्योंकि इसे प्रदर्शित करने के लिए, आपको App घटक के कोड में उचित बदलाव करने की आवश्यकता है।

अर्थात्, हम इस तथ्य के बारे में बात कर रहे हैं कि App घटक की फ़ाइल के कोड में, आपको Footer घटक को आयात करने और इसका एक उदाहरण बनाने की आवश्यकता है। App.js फ़ाइल के लिए कोड संपादित करें:

 import React from "react" import Footer from "./Footer" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>     <Footer />   </div> ) } export default App 

अब वह पृष्ठ जो आवेदन प्रपत्र नीचे दिखाया गया है, जैसा दिखेगा।


अनुप्रयोग घटक पृष्ठ के तल पर एक अन्य घटक द्वारा गठित मार्कअप प्रदर्शित करता है - पाद

आप देख सकते हैं कि अब App घटक द्वारा कोड आउटपुट में घटकों के साथ साधारण JSX तत्वों का एक अजीब मिश्रण है। यह बेहतर होगा अगर App घटक किसी पुस्तक में सामग्री की तालिका की तरह प्रदर्शित हो, ताकि इसमें अधिकतर घटक शामिल हों। अर्थात्, घटक कोड कुछ इस तरह दिखेगा:

 import React from "react" import Footer from "./Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

यदि एप्लिकेशन में एक समान संरचना है (हमारे मामले में, चूंकि Header और MainContent घटक फ़ाइलों को अभी तक नहीं बनाया गया है, तो कोड काम नहीं करेगा), तो पृष्ठ के विभिन्न हिस्सों को बनाने वाले तत्वों का विवरण संबंधित घटकों की फाइलों में होगा। उसी समय, App घटक में आयातित घटकों में अन्य नेस्टेड घटक शामिल हो सकते हैं। तो काफी व्यापक संरचनाएं बनाई जा सकती हैं, जिनमें से आयाम किसी विशेष एप्लिकेशन की आवश्यकताओं द्वारा निर्धारित किए जाते हैं।

यहां हमने नेस्टेड घटकों के साथ काम करने के तरीके के बारे में बात की। आप बहुत अच्छी तरह से अभ्यास में कोशिश कर सकते हैं कि आपने प्रोजेक्ट लाकर क्या सीखा, App.js फ़ाइल, जो ऊपर दिखाई गई है, काम करने की स्थिति में है।

पाठ 10. कार्यशाला। माता-पिता और बच्चे के घटक

→ मूल

▍Zadanie

खरोंच से एक प्रतिक्रिया आवेदन बनाएँ। पृष्ठ पर App के मूल घटक (एक अलग फ़ाइल में परिभाषित) को प्रदर्शित करें। इस घटक के अंदर निम्नलिखित घटकों को मुद्रित करें:

1. Navbar
2. MainContent
3. Footer

App द्वारा प्रदर्शित घटकों को अलग-अलग फ़ाइलों में वर्णित किया जाना चाहिए, उनमें से प्रत्येक को कुछ JSX तत्वों का उत्पादन करना चाहिए।

▍Reshenie

इस समस्या को हल करने के लिए एक आधार के रूप में, एक मानक प्रोजेक्ट create-react-app टूल्स का उपयोग किया जाता है (यदि आप नहीं जानते कि इस तरह के प्रोजेक्ट को कैसे बनाया जाए, तो इस सामग्री पर एक नज़र डालें)। यह मानक index.html का उपयोग करता है।

index.js फ़ाइल index.js कोड index.js :

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

यहाँ App.js फ़ाइल के लिए कोड है। कृपया ध्यान दें कि हम घटक फ़ाइलों को संग्रहीत करने के लिए components फ़ोल्डर का उपयोग करेंगे।

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

Header.js फ़ाइल Header.js कोड Header.js :

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

MainContent.js फ़ाइल MainContent.js :

 import React from "react" function MainContent() {   return (       <main>This is the main section</main>   ) } export default MainContent 

फ़ाइल का कोड Footer.js :

 import React from "react" function Footer() {   return (       <footer>This is the footer</footer>   ) } export default Footer 

आप जैसे चाहें घटकों के साथ काम व्यवस्थित कर सकते हैं। उदाहरण के लिए, आप कर सकते हैं, पहले App.js फ़ाइल में सभी आवश्यक कोड लिखें जो घटकों को आयात करता है और उनके उदाहरण प्रदर्शित करता है, और फिर घटक फ़ाइलें बनाता है। आप इसके विपरीत कर सकते हैं - पहले कोड के साथ घटक फ़ाइलें बनाएँ, और फिर App.js फ़ाइल पर काम करें। सबसे महत्वपूर्ण बात यह है कि आप एक कामकाजी अनुप्रयोग के साथ समाप्त होते हैं।

यह वही है जो प्रोजेक्ट VSCode में दिखता है।


VSCode में परियोजना

और यहाँ पृष्ठ है कि इस आवेदन का गठन किया है।


ब्राउज़र में एप्लिकेशन पेज

हमारा रिएक्ट एप्लिकेशन काम करता है, लेकिन पृष्ठ पर जो कुछ भी प्रदर्शित होता है वह किसी भी तरह पूरी तरह से निर्बाध दिखता है। आप पृष्ठ की सामग्री को स्टाइल करके इसे ठीक कर सकते हैं।

परिणाम

आज हमने अभिभावक और बाल घटकों के बारे में बात की। अगली बार हम अपनी पहली बड़ी प्रशिक्षण परियोजना पर काम शुरू करेंगे और पेजिंग तत्वों के बारे में बात करेंगे।

प्रिय पाठकों! यदि आप इस कोर्स में लगे हुए हैं, तो कृपया हमें बताएं कि आप व्यावहारिक अभ्यास कैसे करते हैं। अर्थात् - क्या आप उस कोड को लिखते हैं जिसे "सिर से" कहा जाता है, या पिछले पाठ के पाठ को देखें? या हो सकता है कि आप इंटरनेट पर जो कुछ भूल गए थे, उसे खोजने की कोशिश कर रहे हों।