रिएक्ट ट्यूटोरियल भाग 14: कक्षा-आधारित घटकों, घटक स्थिति पर कार्यशाला

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



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

पाठ 25. कार्यशाला। कक्षा आधारित घटक

→ मूल

▍Zadanie

नीचे वह कोड है जिसे create-react-app द्वारा बनाए गए एक मानक रिएक्ट एप्लिकेशन के index.js फ़ाइल में रखा जाना चाहिए। इस कोड में मिलने वाले कार्यात्मक घटकों को वर्ग-आधारित घटकों में परिवर्तित करें, और इसके अलावा, एक छोटे बग को ढूंढें और ठीक करें।

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

 import React from "react" import ReactDOM from "react-dom" // #1 function App() {   return (       <div>           <Header />           <Greeting />       </div>   ) } // #2 function Header(props) {   return (       <header>           <p>Welcome, {props.username}!</p>       </header>   ) } // #3 function Greeting() {   const date = new Date()   const hours = date.getHours()   let timeOfDay     if (hours < 12) {       timeOfDay = "morning"   } else if (hours >= 12 && hours < 17) {       timeOfDay = "afternoon"   } else {       timeOfDay = "night"   }   return (       <h1>Good {timeOfDay} to you, sir or madam!</h1>   ) } ReactDOM.render(<App />, document.getElementById("root")) 

▍Reshenie

सबसे पहले, आइए देखें कि ब्राउज़र में खुलने से एप्लिकेशन अपने मूल रूप में क्या दर्शाता है।


ब्राउज़र स्रोत पृष्ठ

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

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

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

हम क्लास के आधार पर App के कार्यात्मक घटक को एक घटक में बदलने के लिए आगे बढ़ते हैं। ऐसा करने के लिए, यह इस फॉर्म में अपना कोड लाने के लिए पर्याप्त है:

 class App extends React.Component {   render() {       return (           <div>               <Header username="vschool"/>               <Greeting />           </div>       )   } } 

अब class कीवर्ड घटक नाम से पहले आता है, उसके बाद extends React.Component का extends React.Component , जिसके बाद क्लास के शरीर को घुंघराले कोष्ठक में वर्णित किया जाता है। वहाँ एक render() विधि होनी चाहिए जो हम कार्यात्मक घटक से लौट आए। अन्य घटकों को उसी तरह से संसाधित किया जाता है। <Header username="vschool"/> के निर्माण पर ध्यान दें। यहां हम username संपत्ति vschool Header घटक के vschool के मूल्य के साथ पास करते हैं, जिससे मूल एप्लिकेशन में त्रुटि को ठीक किया जाता है।

जैसा कि आप पहले से ही जानते हैं, Header घटक को username संपत्ति प्राप्त करने की उम्मीद है, और कार्यात्मक घटक में, यह संपत्ति props.username निर्माण का उपयोग करके एक्सेस की props.username (इस मामले में props उस फ़ंक्शन का तर्क है जो घटक का वर्णन करता है)। क्लास-आधारित घटकों में, यह समान दिखता है। यहाँ Header घटक के लिए पुन: डिज़ाइन किया गया कोड है:

 class Header extends React.Component {   render() {       return (           <header>               <p>Welcome, {this.props.username}!</p>           </header>       )   } } 

तीसरा घटक, Greeting , दूसरों से थोड़ा अलग है। तथ्य यह है कि इसमें, return आदेश से पहले, कुछ गणना की जाती है। जब इसे एक वर्ग के आधार पर घटक में परिवर्तित किया जाता है, तो इन गणनाओं को रिटर्न कमांड से पहले render() विधि में रखा जाना चाहिए। यहाँ पुन: डिज़ाइन किए गए Greeting घटक के लिए कोड है:

 class Greeting extends Component {   render() {       const date = new Date()       const hours = date.getHours()       let timeOfDay             if (hours < 12) {           timeOfDay = "morning"       } else if (hours >= 12 && hours < 17) {           timeOfDay = "afternoon"       } else {           timeOfDay = "night"       }       return (           <h1>Good {timeOfDay} to you, sir or madam!</h1>       )   } } 

ध्यान दें कि इस घटक का उपयोग इस घटक की घोषणा में किया गया था: class Greeting extends Component । यह अक्सर संक्षिप्तता के लिए किया जाता है, लेकिन इसके लिए काम करने के लिए, हमें आयात कमांड react को परिष्कृत करने की आवश्यकता है, इसे इस रूप में लाएं:

 import React, {Component} from "react" 

यहां बताया गया है कि एक ब्राउज़र में पुनर्नवीनीकरण एप्लिकेशन पृष्ठ कैसा दिखता है।


ब्राउज़र में पुन: डिज़ाइन किया गया अनुप्रयोग पृष्ठ

वास्तव में, यह मूल एप्लिकेशन के पृष्ठ के समान ही दिखता है, और इन पृष्ठों के बीच एकमात्र ध्यान देने योग्य अंतर यह है कि Header घटक को पारित उपयोगकर्ता नाम अब पहली पंक्ति में प्रदर्शित होता है।

संसाधित किए गए index.js फ़ाइल का पूरा कोड यहां दिया गया है:

 import React, {Component} from "react" import ReactDOM from "react-dom" // #1 class App extends React.Component {   render() {       return (           <div>               <Header username="vschool"/>               <Greeting />           </div>       )   } } // #2 class Header extends React.Component {   render() {       return (           <header>               <p>Welcome, {this.props.username}!</p>           </header>       )   } } // #3 class Greeting extends Component {   render() {       const date = new Date()       const hours = date.getHours()       let timeOfDay             if (hours < 12) {           timeOfDay = "morning"       } else if (hours >= 12 && hours < 17) {           timeOfDay = "afternoon"       } else {           timeOfDay = "night"       }       return (           <h1>Good {timeOfDay} to you, sir or madam!</h1>       )   } } ReactDOM.render(<App />, document.getElementById("root")) 

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

पाठ 26. घटक की स्थिति

→ मूल

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

एक राज्य सिर्फ डेटा है जो घटक को नियंत्रित करता है। विशेष रूप से, इसका मतलब है कि घटक इस डेटा को बदल सकता है। उसी समय, गुण जो पहले से ही हमसे परिचित हैं, घटक द्वारा मूल घटक से प्राप्त किए जाते हैं, प्राप्त घटक बदल नहीं सकते हैं। वे, रिएक्ट प्रलेखन के अनुसार, अपरिवर्तनीय (अपरिवर्तनीय) हैं। उदाहरण के लिए, यदि हम एक वर्ग पर आधारित घटक में, this.props.name = "NoName" तरह के निर्माण का उपयोग करने के लिए प्रयास करते हैं। this.props.name = "NoName" , तो हम एक त्रुटि संदेश का सामना करेंगे।

यह ध्यान दिया जाना चाहिए कि यदि कुछ घटक को राज्य के साथ काम करने की आवश्यकता है, तो यह कक्षा के आधार पर एक घटक होना चाहिए। आइए निम्नलिखित कोड के टुकड़े से शुरू करके घटक को राज्य से लैस करने के तरीके के बारे में बात करें, जो कि create-react-app द्वारा बनाई गई एक मानक परियोजना के App.js फ़ाइल की सामग्री है:

 import React from "react" class App extends React.Component {   render() {       return (           <div>               <h1>Is state important to know?</h1>           </div>       )   } } export default App 

यह वह है जो एप्लिकेशन पृष्ठ ब्राउज़र में दिखता है।


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

एक घटक को राज्य से लैस करने के लिए, आपको पहले एक क्लास कंस्ट्रक्टर बनाने की आवश्यकता है। यह एक constructor() वर्ग विधि की तरह दिखता है। उसके बाद, घटक कोड इस तरह दिखेगा:

 class App extends React.Component {   constructor() {         }     render() {       return (           <div>               <h1>Is state important to know?</h1>           </div>       )   } } Constructor() 

यह जावास्क्रिप्ट में निर्मित एक विशेष विधि है जिसे कक्षाओं के आधार पर वस्तुओं को बनाने और शुरू करने के लिए डिज़ाइन किया गया है। वास्तव में, यदि आपको ऑब्जेक्ट बनाते समय कुछ को इनिशियलाइज़ करने की आवश्यकता होती है, तो constructor() विधि में संबंधित ऑपरेशन बिल्कुल किए जाते हैं।

कंस्ट्रक्टर कोड में पहली बात यह है कि पैरेंट क्लास के कंस्ट्रक्टर को कॉल करना है। यह super() फ़ंक्शन का उपयोग करके किया जाता है। पैरेंट क्लास के कंस्ट्रक्टर में, कुछ इनिशियलाइज़ेशन ऑपरेशन किए जा सकते हैं, जिसके परिणाम हमारी वस्तु के लिए उपयोगी होंगे। यहाँ हमारे क्लास कंस्ट्रक्टर को अब कैसा दिखेगा:

 constructor() {   super() } 

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

 constructor() {   super()   this.state = {} } 

यहां हमने इसे एक खाली वस्तु के साथ शुरू किया। आप इस घटक का उपयोग करके घटक कोड में राज्य के साथ काम कर सकते हैं। राज्य में एक नई संपत्ति जोड़ें:

 constructor() {   super()   this.state = {       answer: "Yes"   } } 

अब आइए इस बारे में सोचें कि कोड में राज्य में संग्रहीत क्या उपयोग किया जाए। याद रखें कि घटक प्रश्न प्रदर्शित करता है Is state important to know? । राज्य इस प्रश्न का उत्तर संग्रहीत करता है। प्रश्न के बाद इस उत्तर को जोड़ने के लिए, आपको वैसा ही करने की आवश्यकता है जैसा कि हम आमतौर पर JSX कोड में जावास्क्रिप्ट कंस्ट्रक्शन को जोड़कर करते हैं। अर्थात्, लाइन के अंत में {this.state.answer} निर्माण जोड़ें। परिणामस्वरूप, पूर्ण घटक कोड इस तरह दिखाई देगा:

 class App extends React.Component {   constructor() {       super()       this.state = {           answer: "Yes"       }   }     render() {       return (           <div>               <h1>Is state important to know? {this.state.answer}</h1>           </div>       )   } } 

और यहां बताया गया है कि ब्राउज़र में एप्लिकेशन पृष्ठ कैसा दिखेगा।


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

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

 <ChildComponent answer={this.state.answer}/> 

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

परिणाम

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

प्रिय पाठकों! यदि आप व्यवहार में प्रतिक्रिया का उपयोग करते हैं, तो कृपया हमें इस बारे में बताएं कि आप घटकों की स्थिति का प्रबंधन कैसे करते हैं। क्या आप मानक रिएक्ट टूल या कुछ और का उपयोग करते हैं?