🙍 👨‍❤️‍👨 👐🏾 रिएक्ट ट्यूटोरियल भाग 2: कार्यात्मक घटक 🚶🏼 🉑 ⛸️

हमारे पिछले लेखों में से एक में, हमने आपसे पूछा था कि क्या इस प्रतिक्रिया पाठ्यक्रम के आधार पर पारंपरिक प्रकाशनों की एक श्रृंखला बनाना उचित है। आपने हमारे विचार का समर्थन किया। इसलिए, आज हम आपके ध्यान में पाठ्यक्रम की निरंतरता को प्रस्तुत करते हैं। यहां हम कार्यात्मक घटकों के बारे में बात करते हैं।

→ भाग 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: पाठ्यक्रम परियोजना

पाठ 6. कार्यात्मक घटक

→ मूल

पिछले व्यावहारिक पाठ में, हमने इस तथ्य के बारे में बात की कि सभी JSX कोड को जगह देना आवश्यक नहीं है जो ReactDOM.render() विधि के तर्क में HTML तत्व बनाता है। हमारे मामले में, हम बुलेटेड सूची के बारे में बात कर रहे हैं, जो नीचे वर्णित है।

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") )

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

इन घटकों को "कार्यात्मक" कहा जाता है इस तथ्य के कारण कि वे विशेष कार्यों का निर्माण करके उन्हें बनाते हैं।

एक नया फ़ंक्शन बनाएं और इसे MyApp नाम दें:

 import React from "react" import ReactDOM from "react-dom" function MyApp() { } ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") )

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

कार्यात्मक घटकों को काफी सरलता से व्यवस्थित किया जाता है। अर्थात्, फ़ंक्शन के शरीर में एक कमांड होनी चाहिए जो JSX कोड लौटाती है, जो संबंधित घटक का प्रतिनिधित्व करती है।

हमारे उदाहरण में, बुलेटेड कोड को लेना और कार्यात्मक घटक से इस कोड की वापसी को व्यवस्थित करने के लिए पर्याप्त है। यहाँ यह है कि यह कैसा दिख सकता है:

 function MyApp() { return <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul> }

और हालांकि इस मामले में सब कुछ उम्मीद के मुताबिक काम करेगा, यानी return कमांड यह सभी कोड वापस कर देगा, यह कोष्ठक में समान निर्माणों को संलग्न करने और प्रोग्राम कोड को फॉर्मेट करते समय रिएक्ट में अपनाए गए एक और सम्मेलन को लागू करने की सिफारिश की गई है। इसमें अलग-अलग तत्वों को अलग-अलग लाइनों पर रखने और तदनुसार उन्हें संरेखित करने में शामिल है। उपरोक्त विचारों को लागू करने के परिणामस्वरूप, हमारे कार्यात्मक घटक का कोड इस तरह दिखाई देगा:

 function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) }

इस दृष्टिकोण के साथ, घटक से लौटाया गया मार्कअप नियमित HTML कोड के समान है।

अब, ReactDOM.render() विधि में, आप इस पद्धति को पहले तर्क के रूप में पास करके और JSX टैग में इसे संलग्न करके हमारे कार्यात्मक घटक का एक उदाहरण बना सकते हैं।

 import React from "react" import ReactDOM from "react-dom" function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } ReactDOM.render( <MyApp />, document.getElementById("root") )

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

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

कार्यात्मक घटकों द्वारा लौटाया गया मार्कअप उन्हीं नियमों का पालन करता है जिन्हें हमने पहले पैरामीटर के लिए ReactDOM.render() विधि को लागू करते समय माना था। वह है - यह असंभव है कि इसमें जेएसएक्स तत्व शामिल हैं जो एक के बाद एक का पालन करते हैं। पिछले उदाहरण में <ul> तत्व के बाद किसी अन्य तत्व को रखने की कोशिश करते हुए, कहते हैं - <ol> , परिणामस्वरूप त्रुटि होगी। आप इस समस्या से बच सकते हैं, उदाहरण के लिए, एक <div> तत्व में एक कार्यात्मक घटक रिटर्न करने वाली हर चीज को लपेटकर।

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

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

नतीजतन, जब हम अधिक से अधिक घटक बनाते हैं, तो हम उन्हें अलग-अलग फ़ाइलों में रख देंगे, लेकिन अब आपके लिए यह महत्वपूर्ण है कि हम अभी क्या चर्चा करते हैं, कार्यात्मक घटकों के लिए उपयोग करें। पाठ्यक्रम के दौरान आप अधिक से अधिक जटिल फ़ाइल संरचनाएँ बनाएंगे।

इस पाठ में, हमने कार्यात्मक घटकों की मूल बातों की जांच की, और अगले में हम अभ्यास में अर्जित ज्ञान को लागू करते हैं।

पाठ 7. कार्यशाला। कार्यात्मक घटक

→ मूल

▍Zadanie

एक बुनियादी प्रतिक्रिया परियोजना तैयार करें।
एक कार्यात्मक घटक MyInfo बनाएं जो निम्न HTML तत्व बनाता है:
1. तत्व <h1> अपने नाम के साथ।
2. एक पाठ पैराग्राफ ( <p> तत्व) जिसमें आपकी छोटी कहानी है।
3. तीन स्थानों की एक सूची के साथ एक सूची, ( <ul> ) या क्रमांकित ( <ol> ), जिसे आप देखना चाहते हैं।
वेब पेज पर MyInfo घटक के उदाहरण को सूचीबद्ध करें।

▍आधार कार्य

पृष्ठ के तत्वों को यह जानकर सीखें कि इसे स्वयं कैसे करें (Google खोजें)। यह ध्यान दिया जाना चाहिए कि हम इस पाठ्यक्रम में स्टाइलिंग घटकों के बारे में अधिक बात करेंगे।

नोट: बंधनेवाला ब्लॉक

▍Reshenie

यहां हम उसी HTML पेज से संतुष्ट हैं जो हमने पहले इस्तेमाल किया था। रिएक्ट कोड वाली फाइल भी काफी मानक होगी। अर्थात्, हम इसमें पुस्तकालयों को आयात करते हैं, MyInfo कार्यात्मक घटक का कंकाल बनाते हैं और ReactDOM ऑब्जेक्ट के render() विधि को कॉल करते हैं, ReactDOM यह पृष्ठ पर प्रदर्शित होने वाला घटक और पेज तत्व के लिंक से गुजरता है जिसमें यह घटक प्रदर्शित किया जाना चाहिए। इस स्तर पर, कोड इस तरह दिखेगा:

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { } ReactDOM.render(<MyInfo />, document.getElementById("root"))

अब आपको MyInfo से MyInfo कोड वापस करने की आवश्यकता है जो HTML मार्कअप को कार्य के अनुसार उत्पन्न करता है। यहां संपूर्ण समाधान कोड दिया गया है।

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") )

ध्यान दें कि MyInfo से लौटाया गया निर्माण कोष्ठकों में संलग्न है, और प्रदर्शित होने वाले तत्व सहायक <div> तत्व के अंदर हैं।

परिणाम

इस लेख में, हमने रिएक्ट के कार्यात्मक घटकों को पेश किया। अगली बार हम घटक फ़ाइलों और प्रतिक्रिया परियोजनाओं की संरचना के बारे में बात करेंगे।

प्रिय पाठकों! यदि आप यह कोर्स करते हैं, तो कृपया हमें उस पर्यावरण के बारे में बताएं जिसमें आप अभ्यास करते हैं।