रिएक्ट ट्यूटोरियल भाग 21: दूसरा पाठ और सशर्त प्रतिपादन कार्यशाला

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



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

पाठ 37. सशर्त प्रतिपादन, भाग 2

→ मूल

सशर्त प्रतिपादन के आज के ट्यूटोरियल में, हम तार्किक ऑपरेटर && (और) का उपयोग करने के बारे में बात करेंगे। हम App.js फ़ाइल में निम्न कोड स्थित है, जो create-react-app द्वारा बनाई गई एक मानक परियोजना के साथ प्रयोग करेंगे:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           unreadMessages: [               "Call your mom!",               "New spam email available. All links are definitely safe to click."           ]       }   }   render() {       return (           <div>              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           </div>       )   } } export default App 

अब एप्लिकेशन ब्राउज़र में दिखता है जैसा कि नीचे दिखाया गया है।


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

आपने पहले ही निर्माण में && ऑपरेटर का उपयोग किया होगा जैसे कि true && false (जो false देता false )। इस तरह की अभिव्यक्ति की गणना के परिणामस्वरूप true अभिव्यक्ति को वापस करने के लिए, इसे true && true जैसा दिखना चाहिए। इस तरह के भावों को संसाधित करते समय, जावास्क्रिप्ट निर्धारित करता है कि क्या उनका बाईं ओर सच है, और यदि ऐसा है, तो बस उनके दाहिने हिस्से में क्या है। यदि फॉर्म की एक false && false प्रक्रिया संसाधित होती है, तो अभिव्यक्ति के दाईं ओर की जांच किए बिना, false को तुरंत वापस कर दिया जाएगा। परिणामस्वरूप, && संचालक का उपयोग सशर्त प्रतिपादन में किया जा सकता है। इसके साथ, आप या तो कुछ वापस कर सकते हैं जो स्क्रीन पर प्रदर्शित होगा, या कुछ भी नहीं लौटाएगा।

चलो प्रशिक्षण एप्लिकेशन के कोड का विश्लेषण करें।

App घटक की स्थिति unreadMessages की एक सरणी संग्रहीत unreadMessages । इस सरणी में प्रत्येक पंक्ति एक अपठित संदेश का प्रतिनिधित्व करती है। यह पृष्ठ अपठित संदेशों की संख्या को प्रदर्शित करता है, जो सरणी की लंबाई के आधार पर निर्धारित किया जाता है। यदि यह सरणी खाली है, अर्थात, इसमें एक भी तत्व नहीं होगा, तो एप्लिकेशन प्रदर्शित करेगा जो पृष्ठ पर नीचे दिखाया गया है।


एप्लिकेशन हमें सूचित करता है कि कोई अपठित संदेश नहीं हैं

इस प्रभाव को प्राप्त करने के लिए, सरणी को इस रूप में लाने के लिए पर्याप्त है: unreadMessages: [] ।

यदि कोई अपठित संदेश नहीं हैं, तो यह पूरी तरह से संभव है कि किसी भी संदेश को प्रदर्शित न किया जाए। यदि हम आवेदन के इस व्यवहार को लागू करने के लिए पिछली बार के बारे में बात करने वाले टर्नरी ऑपरेटर का उपयोग करते हैं, तो App घटक के render() विधि निम्नानुसार फिर से लिखी जा सकती है:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 ?              <h2>You have {this.state.unreadMessages.length} unread messages!</h2> :               null           }       </div>   ) } 

अब, यदि unreadMessages सरणी खाली है, तो पृष्ठ पर कुछ भी प्रदर्शित नहीं होगा। लेकिन यहां प्रस्तुत कोड को && ऑपरेटर के उपयोग से सरल बनाया जा सकता है। यहाँ है कि यह कैसा दिखेगा:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 &&              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           }       </div>   ) } 

यदि ऐरे में कुछ है, तो पृष्ठ पर अभिव्यक्ति का दाईं ओर प्रदर्शित किया जाता है। यदि सरणी खाली है, तो पृष्ठ पर कुछ भी प्रदर्शित नहीं किया गया है।

यह कहने के लिए नहीं है कि सशर्त रेंडरिंग में && ऑपरेटर का उपयोग करना नितांत आवश्यक है, क्योंकि एक ही प्रभाव को एक टर्नरी ऑपरेटर के उपयोग से प्राप्त किया जा सकता है जो कि यदि यह परीक्षण गलत है तो null देता है। लेकिन यहां प्रस्तुत दृष्टिकोण कोड को सरल करता है, और, इसके अलावा, इसका उपयोग अक्सर किया जाता है, इसलिए आप इसे अन्य लोगों के कार्यक्रमों को पढ़ते समय सामना कर सकते हैं।

पाठ 38. कार्यशाला। सशर्त प्रतिपादन

→ मूल

▍Zadanie

यहाँ App कार्यात्मक घटक का कोड है, जो create-react-app का उपयोग करके बनाई गई एक मानक परियोजना के App.js फ़ाइल में संग्रहीत है।

 import React from "react" function App() {   return (       <div>           Code goes here       </div>   ) } export default App 

आपको निम्नलिखित करने की आवश्यकता है:

1. इसे राज्य से लैस करने के लिए घटक कोड परिवर्तित करें।
2. सुनिश्चित करें कि घटक की स्थिति में इस बारे में जानकारी होगी कि उपयोगकर्ता "लॉग इन" है या नहीं (इस अभ्यास में, "सिस्टम में लॉग इन" और "लॉग आउट" का अर्थ केवल राज्य में संग्रहीत संबंधित मान को बदलना है)।
3. उस पृष्ठ में जोड़ें जो घटक एक बटन बनाता है जो उपयोगकर्ता को अंदर और बाहर लॉग इन करने की अनुमति देता है।
   
   
   1. यह एक अतिरिक्त कार्य है। सुनिश्चित करें कि यदि उपयोगकर्ता लॉग इन नहीं है, तो बटन LOG IN प्रदर्शित करेगा, और यदि वह लॉग इन है, तो LOG OUT ।
      
4. घटक द्वारा गठित पृष्ठ पर, यदि उपयोगकर्ता लॉग इन है और Logged out नहीं है, तो Logged out इन करें।
   

यदि अब आपको लगता है कि आपके लिए इन समस्याओं को हल करना शुरू करना मुश्किल है, तो सुझावों पर एक नज़र डालें और फिर काम पर लग जाएँ।

▍Podskazki

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

▍Reshenie

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

यहां कक्षा-आधारित घटक में परिवर्तित कार्यात्मक घटक के लिए कोड क्या होगा। यहां हम, कंपोनेंट कंस्ट्रक्टर में, इसकी प्रारंभिक स्थिति का वर्णन करते हैं, जिसमें isLoggedIn प्रॉपर्टी है जो false सेट है।

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }   }   render() {          return (           <div>               Code goes here           </div>       )   } } export default App 

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

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       console.log("I'm working!")   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

जब आप LOG IN बटन पर क्लिक करते हैं, I'm working! ।

अब याद करते हैं कि जब हम बटन पर क्लिक करते हैं, तो isLoggedIn राज्य में संग्रहीत संपत्ति true से false और इसके विपरीत बदल जाती है। ऐसा करने के लिए, बटन क्लिक हैंडलर में, आपको this.setState() फ़ंक्शन को कॉल करना होगा, जिसे दो तरीकों से उपयोग किया जा सकता है। अर्थात्, यह एक वस्तु के रूप में प्रदान किया जा सकता है, जो राज्य में निहित होना चाहिए का एक नया विचार। इसके उपयोग का दूसरा संस्करण एक फ़ंक्शन के हस्तांतरण के लिए प्रदान करता है जो घटक की पिछली स्थिति लेता है और एक नया एक बनाता है, फिर से, फिर से वस्तु। हम बस इतना ही करेंगे। काम के इस चरण में हमें यही मिला है।

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

यहाँ हम if-else निर्माण का उपयोग कर सकते हैं, लेकिन हम तार्किक ऑपरेटर के उपयोग से true और false को true बदल देते हैं ! (नहीं)।

अब तक, हमारे पास कोई तंत्र नहीं है, जो राज्य में संग्रहीत है के आधार पर, हमें आवेदन की उपस्थिति को प्रभावित करने की अनुमति देगा। इसलिए, अब हम कार्य संख्या 3 के अतिरिक्त कार्य को हल करेंगे। अर्थात्, हम घटक की स्थिति के आधार पर बटन परिवर्तन पर लेबल बनाएंगे। इसे प्राप्त करने के लिए, आप render() पद्धति में एक वैरिएबल घोषित कर सकते हैं जिसका मूल्य, LOG IN या LOG OUT , राज्य में संग्रहीत क्या है पर निर्भर करता है। यह मान तब बटन पाठ के रूप में उपयोग किया जा सकता है। यहाँ है कि यह कैसा दिखता है।

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>           </div>       )   } } export default App 

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

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       let displayText = this.state.isLoggedIn ? "Logged in" : "Logged out"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>               <h1>{displayText}</h1>           </div>       )   } } export default App 

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


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

पिछले आकृति में दिखाए गए LOG IN बटन पर क्लिक करने से एप्लिकेशन स्थिति बदल जाती है, जिसके बाद बटन पर LOG OUT प्रदर्शित होता है, और पृष्ठ पर पाठ उपयोगकर्ता को सूचित करता है कि वह लॉग इन है।

परिणाम

आज हम सशर्त प्रतिपादन के बारे में बात करते रहे, && ऑपरेटर के उपयोग की जांच की, और हमारे द्वारा अध्ययन किए गए कई तंत्रों को शामिल करते हुए एक व्यावहारिक कार्य पूरा किया। अगली बार, आप टोडो-एप्लिकेशन और एक नए विषय पर काम करना जारी रखेंगे।

प्रिय पाठकों! क्या आप आज के व्यावहारिक कार्य से मुकाबला कर चुके हैं?