रिएक्ट ट्यूटोरियल, भाग 22: एक 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: पाठ्यक्रम परियोजना

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

→ मूल

▍Zadanie

अब टोडो एप्लिकेशन निम्न आकृति की तरह दिखता है।


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

TodoItem घटक TodoItem इस तरह दिखता है:

 import React from "react" function TodoItem(props) {   return (       <div className="todo-item">           <input               type="checkbox"               checked={props.item.completed}               onChange={() => props.handleChange(props.item.id)}           />           <p>{props.item.text}</p>       </div>   ) } export default TodoItem 

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

▍Reshenie

यहां प्रस्तुत समस्या को विभिन्न तरीकों से हल किया जा सकता है। हम बिल्ट-इन स्टाइल का उपयोग करेंगे, जिसे हम TodoItem कार्यात्मक घटक के कोड में completedStyle स्थिरांक के रूप में वर्णित करेंगे। यहां हम टेक्स्ट प्रॉपर्टीज fontStyle , color और textDecoration कॉन्फ़िगर करते हैं। उसके बाद, सशर्त रेंडरिंग तकनीक का उपयोग करते हुए, हम इस शैली को <p> तत्व को असाइन करेंगे यदि इसके द्वारा काटा गया मामला पूरा हो गया है। हम घटक उदाहरण के लिए दी गई संपत्ति के आधार पर यह निर्धारित करेंगे, जो कि इसमें props.item.completed रूप में उपलब्ध है।

परिवर्तित घटक कोड इस तरह दिखेगा:

 import React from "react" function TodoItem(props) {   const completedStyle = {       fontStyle: "italic",       color: "#cdcdcd",       textDecoration: "line-through"   }     return (       <div className="todo-item">           <input               type="checkbox"               checked={props.item.completed}               onChange={() => props.handleChange(props.item.id)}           />           <p style={props.item.completed ? completedStyle: null}>{props.item.text}</p>       </div>   ) } export default TodoItem 

यहां बताया गया है कि एप्लिकेशन पृष्ठ का रूप कैसे बदलता है।


ब्राउज़र में परिवर्तित एप्लिकेशन पृष्ठ

उसी समय, शैलियों को तब लागू किया जाता है, जब झंडे को सूची में वस्तुओं की स्थिति का संकेत देते हुए अनियंत्रित और अनचेक किया जाता है।

यह टोडो आवेदन पर काम समाप्त करता है।

पाठ 40. बाहरी स्रोतों से डेटा डाउनलोड करना

→ मूल

घटक जीवन चक्र विधियों पर एक पाठ में, हमने componentDidMount() विधि के बारे में बात की। यह याद रखने की कोशिश करें कि यह कैसे काम करता है। यह विधि आपको घटक को DOM ट्री में जोड़े जाने के तुरंत बाद कुछ कोड निष्पादित करके घटक के संचालन में हस्तक्षेप करने की अनुमति देती है। जब हमने घटक जीवन चक्र विधियों के बारे में बात की, तो मैंने उल्लेख किया कि कुछ बाहरी स्रोतों से डेटा लोड करने के लिए सबसे अधिक बार componentDidMount() विधि का उपयोग किया जाता है। इस डेटा का उपयोग घटक द्वारा अपने उद्देश्य को महसूस करने के लिए किया जाता है।

चलिए हमारे आज के प्रयोगों की शुरुआत एक नए प्रोजेक्ट के साथ करते हैं जिसमें क्रिएट-रिएक्शन-ऐप App.js का उपयोग किया गया है App.js जिनकी App.js फ़ाइल में निम्नलिखित कोड हैं:

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

घटक-आधारित App घटक के कोड में, हम componentDidMount() विधि का वर्णन करते componentDidMount() और इस विधि से कंसोल को कुछ आउटपुट करके परिणामी निर्माण की संचालन क्षमता की जांच करते हैं।

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     componentDidMount() {       console.log("Hi!")   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

कंसोल स्ट्रिंग को आउटपुट Hi! कोड की कार्यक्षमता को साबित करता है, इसलिए हम काम करना जारी रख सकते हैं। जैसा कि पहले ही उल्लेख किया गया है, यह विधि आमतौर पर घटक के काम करने के लिए आवश्यक डेटा को लोड करती है।

इस पाठ में, हम कई सहायक उपकरणों का उपयोग करेंगे जो घटक में डेटा लोड करते समय हमारे लिए उपयोगी होंगे।

पहले वाला बिल्ट-इन जावास्क्रिप्ट फीचर है। हम API Fetch के बारे में बात कर रहे हैं, जो वादों के आधार पर संसाधनों को प्राप्त करने के लिए एक सुविधाजनक इंटरफ़ेस है, जो आपको HTTP अनुरोध करने की अनुमति देता है, जिसके माध्यम से डेटा लोड किया जाता है।

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

componentDidMount() विधि में, हम fetch() फ़ंक्शन का उपयोग करने जा रहे हैं, इसे लोड करने वाले डेटा के लिए पता पास करते हैं, इस डेटा को उस प्रकार में परिवर्तित करते हैं जिसकी हमें आवश्यकता है, और सिस्टम के सही संचालन की जांच करने के लिए, इस डेटा को कंसोल में आउटपुट करें। हम विधि कोड को निम्न रूप में बदलते हैं:

 componentDidMount() {   fetch("https://swapi.co/api/people/1")       .then(response => response.json())       .then(data => console.log(data)) } 

यहां हम फिल्म के एक निश्चित नायक के बारे में डेटा डाउनलोड करते हैं, एपीआई का जिक्र करते हैं, उसके बाद हम सर्वर से जो JSON प्रारूप में आते हैं, उसे रूपांतरित करते हैं, और फिर इस डेटा को कंसोल पर प्रिंट करते हैं। कंसोल में जो मिला वह निम्न आकृति में दिखाया गया है।


Star Wars API से डाउनलोड किया गया डेटा कंसोल पर आउटपुट होता है

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

 this.state = {   character: {} } 

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

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

 componentDidMount() {   fetch("https://swapi.co/api/people/1")       .then(response => response.json())       .then(data => {           this.setState({               character: data           })       }) } 

कोड में मौजूद तंत्र के सही संचालन की जांच करने के लिए, हम render() विधि में कुछ प्रदर्शित करेंगे जो लोड किए गए डेटा को लिखे जाने के बाद राज्य में मौजूद होना चाहिए। अब App.js फ़ाइल का कोड इस तरह दिखेगा:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           character: {}       }   }     componentDidMount() {       fetch("https://swapi.co/api/people/1")           .then(response => response.json())           .then(data => {               this.setState({                   character: data               })           })   }     render() {       return (           <div>               {this.state.character.name}           </div>       )   } } export default App 

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


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

पृष्ठ पर Luke Skywalker पाठ प्रदर्शित करना दर्शाता है कि डेटा लोडिंग तंत्र कैसे काम करता है।

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

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

राज्य में एक नई संपत्ति जोड़ें, यह दर्शाता है कि डेटा किसी समय में लोड हो रहा है या नहीं। इसे loading कॉल करें और इसे false । उसके बाद, fetch() का उपयोग करके डेटा लोड करने से ठीक पहले, हम इस संपत्ति के लिए true लिखते हैं।

अगला, render() विधि में, loading स्टेट प्रॉपर्टी के आधार पर, हम पृष्ठ पर प्रदर्शित पाठ को कॉन्फ़िगर करेंगे। यहाँ इन रूपांतरणों के बाद App.js कोड App.js दिखेगा।

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           loading: false,           character: {}       }   }     componentDidMount() {       this.setState({loading: true})       fetch("https://swapi.co/api/people/1")           .then(response => response.json())           .then(data => {               this.setState({                   character: data               })           })   }     render() {       const text = this.state.loading ? "loading..." : this.state.character.name       return (           <div>               <p>{text}</p>           </div>       )   } } export default App 

हालाँकि, यह कोड सही तरीके से काम नहीं करता है। अर्थात्, यह वही है जो अब आवेदन पृष्ठ जैसा दिखता है।


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

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

दरअसल, समस्या यह है कि, डेटा लोडिंग शुरू करने से पहले, हमने loading को true सेट किया true , और डाउनलोड पूरा होने के बाद, हमने loading करने के लिए false नहीं loading । परिणामस्वरूप, पाठ loading... हमेशा पृष्ठ पर प्रदर्शित होता है। इस त्रुटि को ठीक करना मुश्किल नहीं है। पर्याप्त, उसी जगह जहां हम राज्य को लोड किए गए डेटा लिखते हैं, loading को false सेट false । नतीजतन, App.js कोड निम्नलिखित रूप लेगा:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           loading: false,           character: {}       }   }     componentDidMount() {       this.setState({loading: true})       fetch("https://swapi.co/api/people/1")           .then(response => response.json())           .then(data => {               this.setState({                   loading: false,                   character: data               })           })   }     render() {       const text = this.state.loading ? "loading..." : this.state.character.name       return (           <div>               <p>{text}</p>           </div>       )   } } export default App 

अब, डेटा लोड करते समय, शिलालेख loading... संक्षेप में दिखाई देता है, और उसके बाद पृष्ठ पर चरित्र का नाम प्रदर्शित होता है।

परिणाम

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

प्रिय पाठकों! आप बाहरी स्रोतों से डेटा को रिएक्ट एप्लिकेशन में कैसे लोड करते हैं?