रिएक्ट ट्यूटोरियल भाग 11: डायनामिक मार्कअप फॉर्मेशन और मैप एरे विधि

रिएक्ट प्रशिक्षण पाठ्यक्रम के अनुवाद के भाग में, हम उसी प्रकार के तत्वों के सेटों का वर्णन करते हुए JSX मार्कअप के गतिशील गठन को व्यवस्थित करने के लिए मानक मानचित्र () सरणी विधि का उपयोग करने के बारे में बात करेंगे।



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

पाठ 21. डायनेमिक मार्कअप जनरेशन और मैप एरेज़ विधि

→ मूल

हम पिछले व्यावहारिक कार्य को पूरा करने से रोक दिए गए समय से काम जारी रखेंगे। याद रखें कि तब App.js फ़ाइल का कोड इस तरह दिखता था:

 import React from "react" import Joke from "./Joke" function App() {   return (       <div>           <Joke punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." />                     <Joke               question="What's the best thing about Switzerland?"               punchLine="I don't know, but the flag is a big plus!"           />                     <Joke               question="Did you hear about the mathematician who's afraid of negative numbers?"               punchLine="He'll stop at nothing to avoid them!"           />                     <Joke               question="Hear about the new restaurant called Karma?"               punchLine="There's no menu: You get what you deserve."           />                     <Joke               question="Did you hear about the actor who fell through the floorboards?"               punchLine="He was just going through a stage."           />                     <Joke               question="Did you hear about the claustrophobic astronaut?"               punchLine="He just needed a little space."           />                 </div>   ) } export default App 

App घटक Joke घटकों का एक सेट प्रदर्शित करता है। इस तरह से काम के इस चरण में आवेदन पृष्ठ दिखता है।


आवेदन पृष्ठ

question और punchLine गुण इनमें से कुछ घटकों को पास किए जाते हैं, और punchLine को केवल punchLine । इन गुणों के लिए मूल्य अब सादे पाठ में Joke घटक तात्कालिकता कोड में सेट किए गए हैं। वास्तव में, रिएक्ट एप्लिकेशन के पन्नों पर प्रदर्शित डेटा का बड़ा हिस्सा कुछ एपीआई के HTTP अनुरोधों के परिणामस्वरूप आवेदन में प्रवेश करता है। ये API सर्वरों के माध्यम से समर्थित होते हैं जो डेटाबेस से जानकारी लेते हैं, इसे JSON कोड के रूप में प्रारूपित करते हैं और इस कोड को एप्लिकेशन के क्लाइंट भागों में भेजते हैं। हम अभी तक एपीआई अनुरोधों को पूरा करने के लिए इस तरह के स्तर तक नहीं पहुंचे हैं, इसलिए अब, डेटा स्रोत के रूप में, हम डेटा के साथ एक फ़ाइल का उपयोग करेंगे जो सर्वर के JSON प्रतिक्रिया को पार्स करके प्राप्त किया जा सकता है। अर्थात्, यह निम्नलिखित सामग्रियों के साथ एक jokesData.js फ़ाइल होगी:

 const jokesData = [   {       id: 1,       punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally."   },   {       id: 2,       question: "What's the best thing about Switzerland?",       punchLine: "I don't know, but the flag is a big plus!"   },   {       id: 3,       question: "Did you hear about the mathematician who's afraid of negative numbers?",       punchLine: "He'll stop at nothing to avoid them!"   },   {       id: 4,       question: "Hear about the new restaurant called Karma?",       punchLine: "There's no menu: You get what you deserve."   },   {       id: 5,       question: "Did you hear about the actor who fell through the floorboards?",       punchLine: "He was just going through a stage."   },   {       id: 6,       question: "Did you hear about the claustrophobic astronaut?",       punchLine: "He just needed a little space."   } ] export default jokesData 

यह फ़ाइल हमारे प्रोजेक्ट की src डायरेक्टरी में स्थित होगी।


Src फ़ोल्डर में नई फ़ाइल

वास्तव में, इसमें वस्तुओं की एक सरणी होती है। एक निश्चित एपीआई से प्राप्त JSON डेटा को पार्स करके एक समान सरणी प्राप्त की जा सकती है। हम इस फ़ाइल से jokesData की एक सरणी निर्यात jokesData । यदि आवश्यक हो, तो हम इस फ़ाइल को उस घटक में आयात कर सकते हैं जिसमें इसकी आवश्यकता है, और कल्पना करें कि हम फ़ाइल से लिए गए डेटा के साथ काम नहीं कर रहे हैं, लेकिन कुछ एपीआई के साथ क्या हुआ।

अब जब हमारे पास स्रोत डेटा की एक सरणी है, तो आइए इस बारे में विचार करें कि इस डेटा को कैसे प्रतिक्रिया घटकों के उदाहरणों में सेट किया जाए।

कई डेवलपर्स का कहना है कि रिएक्ट में महारत हासिल करने के लिए, उन्होंने जावास्क्रिप्ट के बारे में अधिक सीखा है। इसका कारण यह है क्योंकि हम उसी तरह के कार्यों के बारे में बात कर रहे हैं जैसे कि अन्य विशेष उपकरण का उपयोग करके कोणीय और Vue जैसे अन्य ढांचे में किया जाता है। और प्रतिक्रिया में, यह नियमित जावास्क्रिप्ट का उपयोग करके किया जाता है।

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

मान लीजिए कि हमारे पास एक संख्यात्मक सरणी है:

 const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 

हम मानक सरणी map() सरणी विधि का उपयोग करके इस सरणी को संसाधित कर सकते हैं, इसे एक निश्चित फ़ंक्शन से गुजारें जो इस सरणी के तत्वों के रूपांतरण क्रम को निर्धारित करता है। हमारे मामले में, यह फ़ंक्शन पारित हो जाएगा, एक बार में, इस सरणी से संख्या। एक फ़ंक्शन उनके साथ कुछ भी कर सकता है, जिसके बाद यह जो रिटर्न देता है वह एक नए सरणी में जाएगा, एक तत्व के लिए जिसका सूचकांक संसाधित होने वाले तत्व के सूचकांक से मेल खाता है। यदि हमें एक नई सारणी बनाने की आवश्यकता है, जिसमें मूल सरणी के तत्व 2 से गुणा किए जाते हैं, तो यह इस तरह दिखाई देगा:

 const doubled = nums.map(function(num) {   return num * 2 }) 

इस कोड के संचालन की जाँच करें:

 console.log(doubled) // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20] 

यदि आप पहले सरणी विधियों के साथ नहीं मिले हैं - जैसे कि map() , filter() , reduce() और अन्य - उनसे निपटने के लिए अनुशंसित है।

यहां हम घटक उदाहरणों की सूची को स्वचालित रूप से उत्पन्न करने के लिए map() विधि का उपयोग करेंगे।

आइए हम अपने उदाहरण पर लौटते हैं। App.js फ़ाइल में App.js फ़ाइल आयात करें। यह इस तरह किया जाता है:

 import jokesData from "./jokesData" 

उसके बाद, प्रोग्राम कोड में, हम jokesData सरणी के साथ काम कर सकते हैं। अर्थात्, हम map() पद्धति का उपयोग करने जा रहे हैं। यहाँ इस विधि का "रिक्त" कैसा दिखेगा।

 jokesData.map(joke => { }) 

ध्यान दें कि यहां हम तीर फ़ंक्शन को map() विधि से पास कर रहे हैं। हमारे मामले में, यह हमें कोड को अधिक कॉम्पैक्ट बनाने की अनुमति देता है। चूंकि फ़ंक्शन केवल एक पैरामीटर ( joke ) लेता है, हम, जब यह घोषित किया जाता है, तो कोष्ठक के बिना कर सकते हैं।

फ़ंक्शन से map() विधि में पारित होने से, हम Joke घटक का एक नया उदाहरण लौटना चाहते हैं, जिसमें punchLine एरे तत्व के question और punchLine गुण जो punchLine आए थे, उसे पास कर punchLine गया है। यहाँ यह है कि यह कैसा दिख सकता है:

 jokesData.map(joke => {   return (   <Joke question={joke.question} punchLine={joke.punchLine} />   ) }) 

यदि दो तथ्यों को ध्यान में रखा जाए तो इस कोड को छोटा किया जा सकता है। सबसे पहले, रिटर्न केवल एक तत्व देता है, इसलिए आप return तुरंत बाद इस तत्व को रख सकते return , जिससे कोष्ठक की आवश्यकता समाप्त हो जाती है। दूसरे, तीर फ़ंक्शन में केवल एक निश्चित मान वापस करने का ऑपरेशन होता है, इसलिए, इस तरह के फ़ंक्शन की घोषणा करते समय, आप return कीवर्ड के बिना और घुंघराले ब्रेस के बिना कर सकते हैं। इसके अलावा, हम याद करते हैं कि map() विधि के परिणामस्वरूप, एक नया सरणी बनता है। इस सरणी को कहीं सहेजने की आवश्यकता है। ये सभी विचार हमें निम्नलिखित में ले जाते हैं:

 const jokeComponents = jokesData.map(joke => <Joke question={joke.question} punchLine={joke.punchLine} />) 

jokeComponents स्थिरांक jokeComponents अब एक सरणी होगी, जिसमें से प्रत्येक तत्व question साथ Joke घटक की एक आवृत्ति का वर्णन है और इसके लिए punchLine गुण पास किए गए हैं।

घटकों की इस सरणी के साथ अब हम क्या करते हैं? प्रतिक्रिया ऐसे सरणियों के साथ काम करने के लिए बहुत सुविधाजनक बनाती है। अर्थात्, हम इस तथ्य के बारे में बात कर रहे हैं कि इस तरह की सरणी का उपयोग JSX कोड में किया जा सकता है। यहाँ अब App फ़ाइल कोड क्या दिखेगा:

 import React from "react" import Joke from "./Joke" import jokesData from "./jokesData" function App() {   const jokeComponents = jokesData.map(joke => <Joke question={joke.question} punchLine={joke.punchLine} />)       return (       <div>           {jokeComponents}       </div>   ) } export default App 

उसके बाद, एप्लिकेशन पृष्ठ पहले जैसा दिखाई देगा, हालांकि, आपको ब्राउज़र कंसोल में निम्नलिखित चेतावनी दिखाई देगी:

 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `App`. See https://fb.me/react-warning-keys for more information.   in Joke (at App.js:7)   in App (at src/index.js:6) 

इसका अर्थ इस तथ्य से उबलता है कि सरणी तत्वों के पास एक अद्वितीय key गुण होना चाहिए। हम इस बारे में विवरण में नहीं जाएंगे कि रिएक्ट डुप्लिकेट घटकों की अद्वितीय key संपत्ति की अपेक्षा क्यों करता है। हमारे लिए इस तथ्य को ध्यान में रखना पर्याप्त है कि, घटक उदाहरणों के थोक निर्माण का प्रदर्शन करते समय, जैसे हमने सिर्फ map() पद्धति का उपयोग करके प्रदर्शन किया था, उदाहरणों के लिए key संपत्ति को पारित करना होगा। इसके अलावा, ऐसी संपत्ति को घटक उदाहरण के लिए ही पास किया जा सकता है, और उदाहरण के लिए, <div> , जिसमें घटक कोड संलग्न है। यह एक विशेष भूमिका नहीं निभाता है।

इसलिए, key संपत्ति को कुछ विशिष्ट मूल्य सौंपा जाना चाहिए। एक नियम के रूप में, एपीआई से प्राप्त डेटा ऑब्जेक्ट्स में कुछ पहचानकर्ता ( id जैसे गुण) होते हैं। हमारे लिए मुख्य बात उनकी विशिष्टता है। उदाहरण के लिए, हम joke.question करने के लिए key संपत्ति निर्धारित कर सकते हैं। joke.question - इन गुणों के सभी ग्रंथ हमारे आवेदन में अद्वितीय हैं। लेकिन हम अन्यथा करेंगे। याद रखें कि जिस वस्तु से हमने jokesData.js फ़ाइल से निर्यात किया है, उस डेटा की वस्तुएं jokesData.js । यहाँ इसका एक टुकड़ा है:

 const jokesData = [   {       id: 1,       punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally."   },   {       id: 2,       question: "What's the best thing about Switzerland?",       punchLine: "I don't know, but the flag is a big plus!"   }, ... ] 

प्रत्येक वस्तु में एक id गुण होता है, जिसकी विशिष्टता हम स्वतंत्र रूप से बनाए रखते हैं। यह ऐसे गुणों के मूल्य हैं जिनका उपयोग key संपत्ति के मूल्यों के रूप में किया जा सकता है।

अब App.js में घटक उदाहरणों की एक सरणी बनाने के लिए कोड निम्न रूप लेगा:

 const jokeComponents = jokesData.map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />) 

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

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

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

उसी समय, जैसा कि हमने पहले ही कहा है, सरणियों के मानक तरीकों के बीच, आप अन्य दिलचस्प उपकरण पा सकते हैं। उदाहरण के लिए, सॉर्ट तत्वों को सॉर्ट करने के लिए sort() विधि का उपयोग किया जा सकता है। filter() विधि का उपयोग केवल उन सरणी तत्वों को चुनने के लिए किया जा सकता है जो कुछ मानदंडों को पूरा करते हैं। यह सब घटकों के उदाहरणों वाले सरणियों के साथ काम करने के लिए लागू होता है।

आप चाहें तो इन तरीकों के साथ प्रयोग कर सकते हैं। मान लें कि filter() विधि का उपयोग करने की कोशिश करें और App घटक द्वारा उत्पन्न आउटपुट से हटा दें Joke घटक के उन उदाहरण हैं जिनकी question संपत्ति निर्दिष्ट लंबाई से अधिक नहीं है। या सुनिश्चित करें कि केवल घटक जिसके लिए question संपत्ति और punchLine संपत्ति दोनों punchLine हैं।

परिणाम

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

प्रिय पाठकों! आप ऐप घटक द्वारा केवल जोक घटक के उन उदाहरणों को प्रदर्शित करने की समस्या को हल करने के बारे में कैसे जाएंगे जिनकी प्रश्न संपत्ति निर्दिष्ट लंबाई से अधिक है?