🕊️ 🐇 🙏 रिएक्ट ट्यूटोरियल, भाग 8: एक TODO अनुप्रयोग पर निरंतर काम, घटक गुणों का परिचय 🗺️ 👨🏽‍⚖️ 🌮

रिएक्ट प्रशिक्षण पाठ्यक्रम में आज की कक्षाएं, जिन्हें हम प्रकाशित कर रहे हैं, TODO आवेदन और घटक गुणों पर काम जारी रखने के लिए समर्पित हैं।

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

पाठ 16. कार्यशाला। TODO आवेदन। स्टेज नंबर 2

→ मूल

▍Zadanie

पिछली कार्यशाला के बाद, आपने एक प्रतिक्रिया एप्लिकेशन बनाया, जिसमें App घटक तत्वों के जोड़े का एक सेट प्रदर्शित करता है - झंडे (तत्व <input type="checkbox" /> ) और उनके विवरण (तत्व <p> </p> )। इस सेट के तत्वों को एक अलग घटक के रूप में डिज़ाइन करें - <TodoItem /> और App घटक में एक सूची बनाने के लिए इसका उपयोग करें। इसी समय, इस तथ्य पर ध्यान न दें कि इस सूची के सभी तत्व समान दिखेंगे (बाद में हम इस बारे में बात करेंगे कि उन्हें अलग-अलग डेटा कैसे भरना है)।
CSS फाइलों, इनलाइन शैलियों, या रिएक्ट एप्लिकेशन के लिए इन स्टाइलिंग विधियों के संयोजन का उपयोग करते हुए पृष्ठ को लाइक करें।

▍Reshenie

यह मानता है कि आप एक मानक परियोजना के आधार पर एक एप्लिकेशन पर काम करना जारी रख रहे हैं जो create-react-app का उपयोग करके बनाया गया था। यह वही है जो App घटक कोड नौकरी से पहले की तरह था।

 import React from "react" function App() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default App

आइए बनाते हैं, उसी फ़ोल्डर में जिसमें यह फ़ाइल स्थित है, TodoItem.js फ़ाइल, जिसमें TodoItem घटक का कोड संग्रहीत किया जाएगा। अब इस फ़ाइल को निम्न कमांड के App.js फ़ाइल में आयात करें:

 import TodoItem from "./TodoItem"

आप इसे बाद में कर सकते हैं, जब TodoItem घटक TodoItem (अभी तक लिखित नहीं) का उपयोग करने का समय आता है। अब हम इस कोड का ध्यान रखेंगे। यहाँ है कि यह क्या होगा:

 import React from "react" function TodoItem() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default TodoItem

दो बातों पर ध्यान दो। सबसे पहले, यह घटक दो तत्वों को लौटाता है - इसलिए वे <div> तत्व में लिपटे हुए हैं। दूसरे, यह जो रिटर्न देता है वह App.js फ़ाइल से चेक / विवरण तत्वों में से एक की एक प्रति है।

अब हम फिर से App.js फ़ाइल पर जाते हैं और, चेक / विवरण जोड़े के बजाय, हम इसके द्वारा दिए गए मार्कअप में TodoItem घटक के उदाहरणों का उपयोग करते हैं:

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

नतीजतन, आवेदन फॉर्म जिस पृष्ठ पर दिखाई देगा, वह नीचे दिखाया गया है।

ब्राउज़र में ऐप उपस्थिति

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

अब हम CSS कक्षाओं का उपयोग करके एप्लिकेशन को स्टाइल करते हुए दूसरा कार्य पूरा करेंगे। ऐसा करने के लिए, हम App घटक का कोड निम्नलिखित फॉर्म में लाते हैं:

 import React from "react" import TodoItem from "./TodoItem" function App() {   return (       <div className="todo-list">           <TodoItem />           <TodoItem />           <TodoItem />           <TodoItem />       </div>   ) } export default App

यहां हमने क्लास का नाम <div> एलिमेंट सौंपा है। इसी तरह, TodoItem घटक TodoItem साथ काम करते हैं:

 import React from "react" function TodoItem(){     return (       <div className="todo-item">           <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default TodoItem

अब हम CSS index.css फ़ाइल को पहले से ही प्रोजेक्ट में शामिल index.css , क्योंकि यह index.js फ़ाइल में create-react-app का उपयोग करके बनाया गया था:

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

index.css में निम्नलिखित शैली विवरण जोड़ें:

 body {   background-color: whitesmoke; } .todo-list {   background-color: white;   margin: auto;   width: 50%;   display: flex;   flex-direction: column;   align-items: center;   border: 1px solid #efefef;   box-shadow:   /* The top layer shadow */       0 1px 1px rgba(0,0,0,0.15),           /* The second layer */       0 10px 0 -5px #eee,           /* The second layer shadow */       0 10px 1px -4px rgba(0,0,0,0.15),           /* The third layer */       0 20px 0 -10px #eee,           /* The third layer shadow */       0 20px 1px -9px rgba(0,0,0,0.15);   padding: 30px; } .todo-item {   display: flex;   justify-content: flex-start;   align-items: center;   padding: 30px 20px 0;   width: 70%;   border-bottom: 1px solid #cecece;   font-family: Roboto, sans-serif;   font-weight: 100;   font-size: 15px;   color: #333333; } input[type=checkbox] {   margin-right: 10px;   font-size: 30px; } input[type=checkbox]:focus {   outline: 0; }

इस प्रकार अब एप्लिकेशन पेज ब्राउज़र में दिखेगा।

ब्राउज़र में ऐप उपस्थिति

आप इन शैलियों का विश्लेषण और संपादन स्वयं कर सकते हैं।

अगर हम स्टाइल में उपयोग किए गए कोड की className बारे में बात करते हैं, तो ध्यान दें कि className कीवर्ड का उपयोग तत्वों को कक्षाएं देने के लिए किया जाता है, और यह कि रिएक्ट इनलाइन शैलियों का समर्थन करता है। यह कैसे VSCode में हमारे आवेदन की परियोजना इस स्तर पर लग रहा है।

VSCode में अनुप्रयोग परियोजना

यदि अब हमारे पास जो कुछ भी है, उसके साथ प्रयोग करते हैं, तो यह पता चलता है कि चेकबॉक्स उपयोगकर्ता की बातचीत का जवाब देते हैं।

झंडे उपयोगकर्ता बातचीत का जवाब देते हैं।

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

पाठ 17. गुण, भाग 1. HTML तत्वों के गुण

→ मूल

आइए रिएक्ट में गुणों की अवधारणा के बारे में बात करते हैं। आइए एक पृष्ठ के लिए नमूना HTML कोड से शुरू करें:

 <html>   <head></head>   <body>       <a>This is a link</a>       <input />       <img />   </body> </html>

जैसा कि आप देख सकते हैं, प्रतिक्रिया से संबंधित कुछ भी नहीं है। हमसे पहले सामान्य HTML मार्कअप है। इस मार्कअप द्वारा वर्णित पृष्ठ के मुख्य भाग में मौजूद तीन तत्वों पर ध्यान दें: <a> , <input /> और <img /> , और उनके बारे में क्या गलत है, इस बारे में सोचें।

यहां समस्या यह है कि ये सभी तत्व अपने निहित कार्यों को पूरा नहीं करते हैं। <a> टैग द्वारा वर्णित लिंक कहीं नहीं जाता है। इस टैग को एक विशेषता (गुण) href निर्दिष्ट करना होगा, जिसमें एक निश्चित पता होगा, जिस पर लिंक पर क्लिक करने पर आपको पुनर्निर्देशित किया जाएगा। वही समस्या हमारे उदाहरण से <img /> लिए विशिष्ट है। इसे src विशेषता नहीं दी गई है, जो URL द्वारा छवि, स्थानीय या सुलभ को निर्दिष्ट करता है जो यह तत्व प्रदर्शित करेगा। परिणामस्वरूप, यह पता चला है कि <a> और <img> तत्वों के सही संचालन को सुनिश्चित करने के लिए, क्रमशः उनके href और src संपत्तियों को सेट करना आवश्यक है। यदि हम <input> तत्व के बारे में बात करते हैं, तो इसकी विशेषताओं को सेट किए बिना, यह पृष्ठ पर एक इनपुट फ़ील्ड प्रदर्शित करेगा, लेकिन इस रूप में इसका उपयोग आमतौर पर नहीं किया जाता है, इसके गुण placeholder , name , type । अंतिम संपत्ति, उदाहरण के लिए, आपको मूल रूप से <input> तत्व की उपस्थिति और व्यवहार को बदलने की अनुमति देता है, इसे टेक्स्ट इनपुट फ़ील्ड से एक ध्वज में, रेडियो बटन में, या एक फॉर्म भेजने के लिए एक बटन में बदल देता है। यह ध्यान दिया जाना चाहिए कि शब्द "विशेषता" और "संपत्ति" हम यहाँ परस्पर उपयोग करते हैं।

उपरोक्त कोड को संपादित करके, हम इसे निम्नलिखित रूप में ला सकते हैं:

 <html>   <head></head>   <body>       <a href="https://google.com">This is a link</a>       <input placeholder="First Name" name="" type=""/>       <img align="center" src=""/>   </body> </html>

यह अभी भी इस रूप में बिल्कुल सामान्य नहीं है, लेकिन यहां, कम से कम, हम HTML तत्वों की कुछ विशेषताओं के लिए मान निर्धारित करते हैं, और निर्दिष्ट स्थान जहां आप कुछ और विशेषताओं के लिए मान दर्ज कर सकते हैं।

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

पाठ 18. गुण, भाग 2. पुन: प्रयोज्य अवयव

→ मूल

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

YouTube मुखपृष्ठ

मुझे यकीन है कि रिएक्ट इस पृष्ठ का उपयोग नहीं करता है, क्योंकि Google कोणीय ढांचे के विकास में लगा हुआ है, लेकिन हम इस उदाहरण में जिन सिद्धांतों पर विचार करेंगे, वे सार्वभौमिक हैं।

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

YouTube मुखपृष्ठ, एक दूसरे के समान तत्व

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

यह काफी समझ में आता है कि इस पृष्ठ को बनाने वाले ने इस पर प्रदर्शित प्रत्येक तत्वों का प्रतिनिधित्व करने के लिए कोड को कॉपी करने, चिपकाने या संशोधित करने जैसा कुछ नहीं किया। यदि इस तरह के एक पेज को रिएक्ट टूल्स का उपयोग करके बनाया गया था, तो यह कल्पना करना संभव होगा कि वीडियो क्लिप कार्ड कुछ घटक के उदाहरण हैं, कहते हैं, <VideoTile /> । इसके अलावा, इस तरह के एक घटक में कई अन्य घटक शामिल हैं, जो एक छवि, एक शीर्षक, क्लिप की अवधि के बारे में जानकारी और वीडियो क्लिप कार्ड के अन्य तत्व हैं।

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

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

YouTube होमपेज, माता-पिता और बच्चे के घटक

इसके अलावा, पृष्ठ के बाईं ओर आप एक दूसरे के समान तत्वों का एक ऊर्ध्वाधर समूह देख सकते हैं। सबसे अधिक संभावना है, वे एक ही घटक के उदाहरण हैं। इसके अलावा, उनमें से प्रत्येक की अपनी छवि और पाठ है।

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

परिणाम

इस पाठ में, हमने टीओडीओ एप्लिकेशन पर काम करना जारी रखा और HTML तत्वों की विशेषताओं और पुन: उपयोग करने वाले घटकों के विचार पर विषयों को शामिल किया, जो हमें रिएक्ट घटकों के गुणों के साथ काम करने के लिए लाता है। यह हम अगली बार करेंगे।

प्रिय पाठकों! क्या आप घटक गुणों की अवधारणा को समझते हैं?