रिएक्ट ट्यूटोरियल भाग 9: घटक गुण

रिएक्ट ट्यूटोरियल के अनुवाद के भाग में, हम घटक गुणों के बारे में बात करेंगे। यह इस पुस्तकालय में परिलक्षित सबसे महत्वपूर्ण अवधारणाओं में से एक है।



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

पाठ 19. अभिक्रिया में घटक गुण

→ मूल

Create create-react-app का उपयोग करके एक नया प्रोजेक्ट बनाएं और src फ़ोल्डर से कई मानक फ़ाइलों का कोड बदलें।

यहाँ index.js फ़ाइल के लिए कोड है:

 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 { margin: 0; } .contacts { display: flex; flex-wrap: wrap; } .contact-card { flex-basis: 250px; margin: 20px; } .contact-card > img { width: 100%; height: auto; } .contact-card > h3 { text-align: center; } .contact-card > p { font-size: 12px; } 

यहाँ App.js फ़ाइल में पाया गया कोड है:

 import React from "react" function App() {   return (       <div className="contacts">           <div className="contact-card">               <img align="center" src="http://placekitten.com/300/200"/>               <h3><font color="#3AC1EF">▍Mr. Whiskerson</font></h3>               <p>Phone: (212) 555-1234</p>               <p>Email: mr.whiskaz@catnap.meow</p>           </div>                     <div className="contact-card">               <img align="center" src="http://placekitten.com/400/200"/>               <h3><font color="#3AC1EF">▍Fluffykins</font></h3>               <p>Phone: (212) 555-2345</p>               <p>Email: fluff@me.com</p>           </div>                     <div className="contact-card">               <img align="center" src="http://placekitten.com/400/300"/>               <h3><font color="#3AC1EF">▍Destroyer</font></h3>               <p>Phone: (212) 555-3456</p>               <p>Email: ofworlds@yahoo.com</p>           </div>                     <div className="contact-card">               <img align="center" src="http://placekitten.com/200/100"/>               <h3><font color="#3AC1EF">▍Felix</font></h3>               <p>Phone: (212) 555-4567</p>               <p>Email: thecat@hotmail.com</p>           </div>       </div>   ) } export default App 

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


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

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

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

 <div className="contact-card">   <img align="center" src="http://placekitten.com/300/200"/>   <h3><font color="#3AC1EF">▍Mr. Whiskerson</font></h3>   <p>Phone: (212) 555-1234</p>   <p>Email: mr.whiskaz@catnap.meow</p> </div> 

ऐप चार ऐसे ब्लॉक लौटाता है, जिनमें से प्रत्येक का उपयोग एक स्वतंत्र घटक बनाने के लिए किया जा सकता है, लेकिन यह दृष्टिकोण हमें शोभा नहीं देता। इसलिए, हम एक घटक बनाएंगे जो एप्लिकेशन द्वारा प्रदर्शित सभी कार्डों का आधार बन जाएगा। ऐसा करने के लिए, src फ़ोल्डर - ContactCard.js में एक नया घटक फ़ाइल बनाएं और इसमें एक कोड डालें जो App घटक द्वारा लौटाए गए पहले <div> तत्व को देता है, जिसका कोड ऊपर दिया गया है। यहाँ ContactCard घटक के लिए कोड है:

 import React from "react" function ContactCard() {   return (       <div className="contact-card">           <img align="center" src="http://placekitten.com/300/200"/>           <h3><font color="#3AC1EF">▍Mr. Whiskerson</font></h3>           <p>Phone: (212) 555-1234</p>           <p>Email: mr.whiskaz@catnap.meow</p>       </div>   ) } export default ContactCard 

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

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

 function addNumbers() {   return 1 + 1 } 

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

 function addNumbers(a, b) {   return a + b } 

इस तरह के एक फ़ंक्शन रिटर्न क्या इस बात पर निर्भर करेगा कि इसे कब बुलाया गया था। प्रतिक्रिया घटकों को बनाकर हम बिल्कुल उसी तरह से जा सकते हैं।

अब हम ContactCard घटक ContactCard आयात करते हैं और अब तक के लिए आवेदन पृष्ठ पर कार्ड बनाने वाले कोड को हटाए बिना, इसके चार उदाहरण लौटाते हैं:

 import React from "react" import ContactCard from "./ContactCard" function App() {   return (       <div className="contacts">           <ContactCard />           <ContactCard />           <ContactCard />           <ContactCard />           <div className="contact-card">               <img align="center" src="http://placekitten.com/300/200"/>               <h3><font color="#3AC1EF">▍Mr. Whiskerson</font></h3>               <p>Phone: (212) 555-1234</p>               <p>Email: mr.whiskaz@catnap.meow</p>           </div>                     <div className="contact-card">               <img align="center" src="http://placekitten.com/400/200"/>               <h3><font color="#3AC1EF">▍Fluffykins</font></h3>               <p>Phone: (212) 555-2345</p>               <p>Email: fluff@me.com</p>           </div>                     <div className="contact-card">               <img align="center" src="http://placekitten.com/400/300"/>               <h3><font color="#3AC1EF">▍Destroyer</font></h3>               <p>Phone: (212) 555-3456</p>               <p>Email: ofworlds@yahoo.com</p>           </div>                     <div className="contact-card">               <img align="center" src="http://placekitten.com/200/100"/>               <h3><font color="#3AC1EF">▍Felix</font></h3>               <p>Phone: (212) 555-4567</p>               <p>Email: thecat@hotmail.com</p>           </div>       </div>   ) } export default App 

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

प्रत्येक कार्ड में जानकारी के चार टुकड़े होते हैं, जो कार्ड से कार्ड में बदल सकते हैं। यह एक बिल्ली और उसके नाम की एक छवि है, साथ ही एक फोन और ईमेल पता भी है। बिल्ली का नाम name संपत्ति, छवि पता imgURL संपत्ति, phone संपत्ति में phone और email संपत्ति में ईमेल पते में निहित होने दें।

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

 import React from "react" import ContactCard from "./ContactCard" function App() {   return (       <div className="contacts">           <ContactCard               name="Mr. Whiskerson"               imgUrl="http://placekitten.com/300/200"               phone="(212) 555-1234"               email="mr.whiskaz@catnap.meow"           />                     <ContactCard               name="Fluffykins"               imgUrl="http://placekitten.com/400/200"               phone="(212) 555-2345"               email="fluff@me.com"           />                     <ContactCard               name="Destroyer"               imgUrl="http://placekitten.com/400/300"               phone="(212) 555-3456"               email="ofworlds@yahoo.com"           />                     <ContactCard               name="Felix"               imgUrl="http://placekitten.com/200/100"               phone="(212) 555-4567"               email="thecat@hotmail.com"           />                 </div>   ) } export default App 

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


कोड में कार्ड डेटा हार्डकोड किया गया है; घटक इसके पास दिए गए गुणों के साथ काम नहीं कर सकता है

तो अब यह बात करने का समय आ गया है कि ContactCard घटक उन संपत्तियों के साथ कैसे काम कर सकता है जो इसे तुरंत पारित होने पर पास किए जाते हैं।

हम संपर्क समस्या को घोषित करते हुए इस समस्या को हल करने के लिए आगे बढ़ते हैं, जब यह props पैरामीटर को स्वीकार करता है। इस स्थिति में, घटक कोड इस तरह दिखेगा:

 import React from "react" function ContactCard(props) {   return (       <div className="contact-card">           <img align="center" src="http://placekitten.com/300/200"/>           <h3><font color="#3AC1EF">▍Mr. Whiskerson</font></h3>           <p>Phone: (212) 555-1234</p>           <p>Email: mr.whiskaz@catnap.meow</p>       </div>   ) } export default ContactCard 

वास्तव में, इस पैरामीटर को आप की तरह कुछ भी कहा जा सकता है, लेकिन प्रतिक्रिया में इसे props कहने के लिए प्रथागत है, और जिन गुणों के बारे में हम यहां बात कर रहे हैं, उन्हें अक्सर "प्रॉप्स" कहा जाता है।

props पैरामीटर एक ऑब्जेक्ट है। इस ऑब्जेक्ट के गुण घटक के लिए पास किए गए गुण हैं जब इसे त्वरित किया गया था। उदाहरण के लिए, उदाहरण के लिए, हमारे props.name ऑब्जेक्ट में प्रॉपर्टी props.name के बाद जब कंपोनेंट को बिल्ली का नाम दिया गया तो उसका नाम होगा। इसके अलावा, इसमें props.imgUrl , props.phone , props.email । इसे सत्यापित करने के लिए, ContactCard फ़ंक्शन की शुरुआत में console.log(props) कमांड ContactCard ।

 import React from "react" function ContactCard(props) {   console.log(props)   return (       <div className="contact-card">           <img align="center" src="http://placekitten.com/300/200"/>           <h3><font color="#3AC1EF">▍Mr. Whiskerson</font></h3>           <p>Phone: (212) 555-1234</p>           <p>Email: mr.whiskaz@catnap.meow</p>       </div>   ) } export default ContactCard 

यह घटक द्वारा प्राप्त props ऑब्जेक्ट को कंसोल में लाएगा।


कंसोल प्रॉप्स ऑब्जेक्ट

यहां आप ContactCard.js से चार ऑब्जेक्ट का आउटपुट देख सकते हैं। उनमें से बहुत सारे हैं क्योंकि हम ContactCard घटक के चार उदाहरण बनाते हैं।

यह सब हमें घटक कोड में उपयोग करने का अवसर देता है, हार्ड-कोडित मूल्यों के बजाय, इसके उदाहरण को बनाते समय इसे पारित किया गया था, जो कि props ऑब्जेक्ट props के रूप में उपलब्ध है।

क्या होगा अगर हम इस props.imgUrl से props.imgUrl संपत्ति का उपयोग करने की कोशिश करते हैं:

 <img align="center" src=props.imgUrl/> 

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

 <img align="center" src={props.imgUrl}/> 

हम घटक द्वारा दिए गए अन्य तत्वों को उसी तरह संसाधित करते हैं, जिसके बाद इसका कोड निम्नलिखित रूप लेगा:

 import React from "react" function ContactCard(props) {   return (       <div className="contact-card">           <img align="center" src={props.imgUrl}/>           <h3><font color="#3AC1EF">▍{props.name}</font></h3>           <p>Phone: {props.phone}</p>           <p>Email: {props.email}</p>       </div>   ) } export default ContactCard 

कृपया ध्यान दें कि फ़ोन और ईमेल पते को प्रदर्शित करने के लिए हमने उन ग्रंथों को छोड़ दिया है Phone: और Email: उनके बाद रिक्त स्थान के साथ, क्योंकि ये पाठ सभी घटकों में उपयोग किए जाते हैं। यदि आप अब एप्लिकेशन पेज देखते हैं, तो आप देखेंगे कि इसमें चार अलग-अलग कार्ड हैं।


एक सार्वभौमिक घटक का उपयोग करके पृष्ठ का गठन किया गया

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

 import React from "react" import ContactCard from "./ContactCard" function App() {   return (       <div className="contacts">           <ContactCard               contact={{                 name: "Mr. Whiskerson",                 imgUrl: "http://placekitten.com/300/200",                 phone: "(212) 555-1234",                 email: "mr.whiskaz@catnap.meow"               }}           />                     <ContactCard               name="Fluffykins"               imgUrl="http://placekitten.com/400/200"               phone="(212) 555-2345"               email="fluff@me.com"           />                     <ContactCard               name="Destroyer"               imgUrl="http://placekitten.com/400/300"               phone="(212) 555-3456"               email="ofworlds@yahoo.com"           />                     <ContactCard               name="Felix"               imgUrl="http://placekitten.com/200/100"               phone="(212) 555-4567"               email="thecat@hotmail.com"           />                 </div>   ) } export default App 

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

संपर्क घटक के पहले उदाहरण को बनाने के लिए उपयोग किए जाने वाले App घटक के कोड के संशोधन के दौरान, App का सही संचालन टूट गया था। इस तरह अब उसका पेज दिखेगा।


आवेदन की खराबी

यह कैसे तय किया जा सकता है? इसे समझने के लिए, यह विश्लेषण करना उपयोगी होगा कि console.log(props) का उपयोग क्या हो रहा है।


प्रॉपर ऑब्जेक्ट का विश्लेषण

जैसा कि आप देख सकते हैं, पहले घटक की props वस्तु दूसरे और अगले घटकों की एक ही वस्तु से अलग है।

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

हमारे घटक को एक संपत्तियों के केवल एक गुण का उपयोग करके अन्य गुणों वाले मॉडल में परिवर्तित करना काफी सरल है। ऐसा करने के लिए, उदाहरण के लिए, name संपत्ति का उपयोग करने के लिए, यह घटक कोड में प्रपत्र props.contact.name निर्माण का उपयोग करने के लिए पर्याप्त है। इसी तरह के डिजाइन हमें उन अन्य गुणों के साथ ठीक से काम करने की अनुमति देते हैं जिनकी हमें ज़रूरत है।

आइए घटक कोड को रीसायकल करें, एक संपत्ति-वस्तु contact के हस्तांतरण को ध्यान में रखते हुए, जिसमें अन्य गुण हैं:

 import React from "react" function ContactCard(props) {   console.log(props)   return (       <div className="contact-card">           <img align="center" src={props.contact.imgUrl}/>           <h3><font color="#3AC1EF">▍{props.contact.name}</font></h3>           <p>Phone: {props.contact.phone}</p>           <p>Email: {props.contact.email}</p>       </div>   ) } export default ContactCard 

पहले घटक को अब सामान्य रूप से प्रदर्शित किया जाना चाहिए, लेकिन हम इसे परियोजना के इस चरण में नहीं देखेंगे, क्योंकि सिस्टम हमें इस तथ्य से संबंधित बहुत सारी त्रुटियों से अवगत ContactCard कि App घटक में बनाए गए ContactCard घटक के कई उदाहरण संपत्ति प्राप्त नहीं करते हैं। contact वस्तु। कोड निष्पादित करते समय, यह संपत्ति undefined होगी। नतीजतन, undefined मूल्य की एक निश्चित संपत्ति को संदर्भित करने का प्रयास किया जाता है, जिससे त्रुटि होती है। हम संपर्क घटक के गठन के लिए जिम्मेदार App घटक के कोड को संसाधित करके इसे ठीक करेंगे:

 import React from "react" import ContactCard from "./ContactCard" function App() {   return (       <div className="contacts">           <ContactCard               contact={{                 name: "Mr. Whiskerson",                 imgUrl: "http://placekitten.com/300/200",                 phone: "(212) 555-1234",                 email: "mr.whiskaz@catnap.meow"               }}           />                     <ContactCard               contact={{                 name: "Fluffykins",                 imgUrl: "http://placekitten.com/400/200",                 phone: "(212) 555-2345",                 email: "fluff@me.com"               }}           />                     <ContactCard               contact={{                 name: "Destroyer",                 imgUrl: "http://placekitten.com/400/300",                 phone: "(212) 555-3456",                 email: "ofworlds@yahoo.com"               }}           />                     <ContactCard               contact={{                 name: "Felix",                 imgUrl: "http://placekitten.com/200/100",                 phone: "(212) 555-4567",                 email: "thecat@hotmail.com"               }}           />                 </div>   ) } export default App 

अब एप्लिकेशन पेज पहले जैसा ही दिखेगा।

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

परिणाम

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

प्रिय पाठकों! रिएक्ट घटकों के गुणों को बेहतर ढंग से समझने के लिए आपने आज के उदाहरण के लिए कोड के साथ कैसे प्रयोग किया?