रिएक्ट ट्यूटोरियल भाग 3: घटक फाइलें, परियोजना संरचना

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



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

पाठ 8. घटक फाइलें, प्रतिक्रिया परियोजनाओं की संरचना

→ मूल

घटक फ़ाइलें

यदि हम यह मान लेते हैं कि आपने पिछले प्रैक्टिकल पाठ से कार्य का निर्माण किया, जो कि create-react-app द्वारा बनाई गई मानक परियोजना का उपयोग कर रहा है, तो अब वह public फ़ोल्डर से index.html फ़ाइल का उपयोग करता है, जिसकी सामग्री हमें सूट करती है, और src फ़ोल्डर से index.js फ़ाइल। जिसमें हम कोड लिखते हैं। विशेष रूप से, index.js अब index.js इस तरह दिखता index.js :

 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 कार्यात्मक घटक का कोड निहित है। जैसा कि आपको याद है, रिएक्ट आपको कई घटक बनाने की अनुमति देता है, यह इसकी खूबियों में से एक है। यह स्पष्ट है कि एक फ़ाइल में बड़ी संख्या में घटकों का कोड रखना, हालांकि व्यवहारिक रूप से व्यवहार्य है, का अर्थ है बड़ी असुविधा। इसलिए, घटकों का कोड, यहां तक ​​कि छोटे भी, आमतौर पर अलग-अलग फ़ाइलों में व्यवस्थित होते हैं। यह वह दृष्टिकोण है जो प्रतिक्रिया अनुप्रयोगों को विकसित करते समय पालन करने की सिफारिश की जाती है।

घटक फ़ाइलों को उन घटकों के नाम के नाम दिए गए हैं जिनके कोड ये फ़ाइलें संग्रहीत करते हैं। उन्हें create-react-app के मामले में, उसी src फ़ोल्डर में जहां index.js फ़ाइल index.js । इस दृष्टिकोण के साथ, MyInfo घटक के साथ फ़ाइल का नाम MyInfo.js ।

एक MyInfo.js फ़ाइल बनाएं और इसे index.js से हटाते हुए MyInfo घटक कोड को इसमें स्थानांतरित करें।

इस स्तर पर, index.js इस तरह दिखेगा:

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

MyInfo.js कोड इस तरह होगा:

 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>   ) } 

यह सब VSCode में कैसा दिखता है।


घटक कोड को एक नई फ़ाइल में स्थानांतरित करें

हमने index.js से घटक कोड को स्थानांतरित किया, लेकिन हमारे पास जो संरचना है वह अभी भी निष्क्रिय है।

सबसे पहले, याद रखें कि index.js में import React from "react" कमांड import React from "react" क्या है, भले ही हम यहां React सीधे एक्सेस न करें। इसका कारण यह है कि React आयात के बिना, इस पुस्तकालय के तंत्र, विशेष रूप से, जेएसएक्स, काम नहीं करेंगे। इस आयात कमांड के लिए धन्यवाद, हम पिछली कक्षाओं में, ReactDOM.render() कोड को ReactDOM.render() विधि से पास करने और पृष्ठ के आधार पर इसके आधार पर बनाए गए HTML मार्कअप को आउटपुट करने में सक्षम थे। इसका मतलब यह है कि MyInfo.js फ़ाइल में हमें React आयात करने की भी आवश्यकता है। यह घटक फ़ाइलों के लिए सामान्य अभ्यास है।

दूसरे, हमें यह सुनिश्चित करने की आवश्यकता है कि MyInfo.js फ़ाइल से MyInfo फ़ंक्शन का उपयोग अन्य एप्लिकेशन फ़ाइलों में किया जा सकता है। इसके लिए निर्यात करने की जरूरत है। यहां ES6 मानक की क्षमताओं का उपयोग किया जाता है। परिणामस्वरूप, अद्यतन MyInfo.js कोड निम्न रूप लेता है:

 import React from "react" 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>   ) } export default MyInfo 

अब हम index.js फ़ाइल पर काम करते हैं। अर्थात्, इस फाइल में उपलब्ध होने के लिए हमें MyInfo घटक की आवश्यकता है। आप इसे आयात index.js में उपलब्ध करा सकते हैं।

क्या होगा यदि मैं index.js में react और react-dom आयात react आधार पर एक घटक आयात कमांड लिखने की कोशिश करता हूं? उदाहरण के लिए, फ़ाइल में निम्न आयात कमांड जोड़ें:

 import MyInfo from "MyInfo.js" //  

सिस्टम, इस तरह की कमांड को देख रहा है, विशेष रूप से, इस तथ्य पर भरोसा करते हुए कि इसमें फ़ाइल के सापेक्ष पथ के बारे में जानकारी नहीं है, परियोजना निर्भरता की तलाश करेगा - निर्दिष्ट नाम के साथ मॉड्यूल जब यह कमांड कहा जाता था ( यहां देखें कि कैसे बनाये जाने वाले प्रोजेक्टों में स्थापित create-react-app ; ये निर्भरताएँ उसी तरह रिएक्ट परियोजनाओं में आयात की जा सकती हैं, जिस तरह रिएक्ट लाइब्रेरी आयात की गई थी)। उसे ऐसा कोई मॉड्यूल नहीं मिलेगा, नतीजतन, आयात कमांड काम नहीं करेगा। इसलिए, फ़ाइल आयात कमांड को इसके पथ के साथ फिर से लिखना चाहिए। इस स्थिति में, हम वर्तमान निर्देशिका ( ./ ) के संकेत से संतुष्ट हैं और आयात कमांड निम्न रूप लेगी:

 import MyInfo from "./MyInfo.js" //  

इसके अलावा, अगर हम import कमांड के बारे में बात करते हैं, तो यह विचार करना महत्वपूर्ण है कि इसका मतलब है कि जावास्क्रिप्ट फाइलें इसकी मदद से आयात की जाती हैं। यही है, .js एक्सटेंशन को पूरी तरह से हटाया जा सकता है, और import कमांड, नीचे दिखाए गए फॉर्म का अधिग्रहण करके, अपनी कार्यक्षमता को नहीं खोएगा।

 import MyInfo from "./MyInfo" //  

आमतौर पर, ये JS फ़ाइल आयात आदेश इस तरह लिखते हैं।

यहाँ पूर्ण index.js फ़ाइल index.js ।

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

▍ परियोजना की संरचना

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

ऐसा एक फोल्डर बनाएं और इसमें MyInfo.js फाइल को MyInfo.js । उसके बाद, आपको इस फ़ाइल के आयात कमांड को index.js में संपादित करना होगा।

अर्थात्, अब MyInfo.js लिए पथ इंगित करता है कि यह फ़ाइल index.js के समान स्थान पर स्थित है, लेकिन वास्तव में यह फ़ाइल अब उसी फ़ोल्डर में स्थित components फ़ोल्डर में index.js रूप में स्थित है। नतीजतन, index.js में इसके सापेक्ष पथ इस तरह दिखाई देगा: ./components/MyInfo । यहाँ अद्यतन किया गया है। index.js कोड:

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

और यहाँ है कि यह सब कैसे VSCode में दिखता है।


घटकों को संग्रहीत करने के लिए एक फ़ोल्डर और इस फ़ोल्डर से एक घटक को VSCode में आयात करना

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

आज आपके द्वारा सीखी गई हर चीज के साथ प्रयोग करने की सिफारिश की जाती है। उदाहरण के लिए, आप कुछ फ़ोल्डर में MyInfo.js फ़ाइल को स्थानांतरित करने का प्रयास कर सकते हैं और देख सकते हैं कि क्या MyInfo.js , आप इसका नाम बदलने की कोशिश कर सकते हैं, इसमें कुछ कोड बदल सकते हैं। जब इस तरह के प्रयोगों के दौरान परियोजना का सही संचालन बाधित हो जाएगा - यह समस्या को समझने और परियोजना को काम करने की स्थिति में वापस लाने के लिए उपयोगी होगा।

परिणाम

इस पाठ में, हमने अलग-अलग फ़ाइलों के रूप में घटक कोड को प्रारूपित करने, ES6 का उपयोग करके कोड को निर्यात और आयात करने और प्रतिक्रिया परियोजनाओं की संरचना के बारे में बात की। अगली बार हम घटकों की क्षमताओं से परिचित होना जारी रखेंगे।

प्रिय पाठकों! हम अनुभवी रिएक्टर डेवलपर्स से प्रोजेक्ट संरचना के संगठन के बारे में नए लोगों के साथ विचार साझा करने के लिए कहते हैं।