रिएक्ट ट्यूटोरियल, भाग 12: कार्यशाला, चरण 3 TODO अनुप्रयोग

प्रतिक्रिया पाठ्यक्रम के अनुवाद के आज के भाग में, हम सुझाव देते हैं कि आप जावास्क्रिप्ट का उपयोग करके घटकों के सेट बनाने के व्यावहारिक कार्य को पूरा करें और 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: पाठ्यक्रम परियोजना

पाठ 22. कार्यशाला। घटकों के सेट का गतिशील गठन

→ मूल

▍Zadanie

create-react-app द्वारा उत्पन्न मानक रिएक्ट एप्लिकेशन प्रोजेक्ट के आधार पर, और vschoolProducts.js डेटा फ़ाइल के कोड का उपयोग करके, एक ऐसा एप्लिकेशन बनाएं जो पेज पर Product घटकों की सूची प्रदर्शित करता है, जो मानक .map() सरणी विधि का उपयोग करके बनाया गया है। vschoolProducts.js डेटा के आधार पर।

घटक के उदाहरण बनाने के लिए याद रखें और उन्हें एक अद्वितीय पहचानकर्ता के साथ key विशेषता को पारित करें, अन्यथा सिस्टम एक चेतावनी जारी करेगा।

समस्या को हल करने की प्रक्रिया में, आप App.js फ़ाइल की निम्नलिखित तैयारी का उपयोग कर सकते हैं:

 import React from "react" import productsData from "./vschoolProducts" function App() { return (   <div>         </div> ) } export default App 

यहाँ vschoolProducts.js फ़ाइल vschoolProducts.js :

 const products = [   {       id: "1",       name: "Pencil",       price: 1,       description: "Perfect for those who can't remember things! 5/5 Highly recommend."   },   {       id: "2",       name: "Housing",       price: 0,       description: "Housing provided for out-of-state students or those who can't commute"   },   {       id: "3",       name: "Computer Rental",       price: 300,       description: "Don't have a computer? No problem!"   },   {       id: "4",       name: "Coffee",       price: 2,       description: "Wake up!"   },   {       id: "5",       name: "Snacks",       price: 0,       description: "Free snacks!"   },   {       id: "6",       name: "Rubber Duckies",       price: 3.50,       description: "To help you solve your hardest coding problems."   },   {       id: "7",       name: "Fidget Spinner",       price: 21.99,       description: "Because we like to pretend we're in high school."   },   {       id: "8",       name: "Sticker Set",       price: 14.99,       description: "To prove to other devs you know a lot."   } ] export default products 

▍Reshenie

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

 import React from "react" import Product from "./Product" import productsData from "./vschoolProducts" function App() {   const productComponents = productsData.map(item => <Product key={item.id} product={item}/>)     return (       <div>           {productComponents}       </div>   ) } export default App 

कृपया ध्यान दें कि डेटा फ़ाइल से वस्तुओं का id गुण वैकल्पिक है। यह गुण Product घटक के उदाहरणों के .map() विधि के द्वारा बनाई गई key विशेषता को सेट करने के लिए हमारे लिए उपयोगी था।

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

 import React from "react" function Product(props) {   return (       <div>           <h2><font color="#3AC1EF">{props.product.name}</font></h2>           <p>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}</p>       </div>   ) } export default Product 

यहां, उत्पाद की कीमत से युक्त एक संपत्ति प्राप्त करते समय, जो कि घटक में दिखाई देता है props.product.price , हम toLocaleString() विधि का उपयोग करते हैं, जिसके द्वारा हम उत्पाद की मात्रा को प्रारूपित करते हैं।

यह वही है जो VSCode में एप्लिकेशन प्रोजेक्ट जैसा दिखता है।


VSCode में आवेदन

और यहाँ ब्राउज़र में एप्लिकेशन पेज है।


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

उस फॉर्म पर ध्यान दें जिसमें माल का मूल्य प्रस्तुत किया गया है।

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

→ मूल

यहां हम TODO एप्लिकेशन पर काम करना जारी रखते हैं, जिसे यहां और यहां से निपटाया गया था। विशेष रूप से, यहां आपको एप्लिकेशन द्वारा प्रदर्शित टू-डू सूची बनाने के लिए घटकों की सूचियों के गतिशील गठन के बारे में ज्ञान लागू करने के लिए कहा जाएगा।

▍Zadanie

todosData.js केस todosData.js का उपयोग करना, todosData.js से सामग्री नीचे दी गई है, TodoItem घटकों की एक सूची बनाएं और इस सूची को App घटक में प्रदर्शित करें। कृपया ध्यान दें कि आपको TodoItem घटक के कोड को संशोधित करने की आवश्यकता होगी ताकि वह इसमें पारित गुणों को प्रदर्शित कर सके।

यहाँ todosData.js फ़ाइल की सामग्री है:

 const todosData = [   {       id: 1,       text: "Take out the trash",       completed: true   },   {       id: 2,       text: "Grocery shopping",       completed: false   },   {       id: 3,       text: "Clean gecko tank",       completed: false   },   {       id: 4,       text: "Mow lawn",       completed: true   },   {       id: 5,       text: "Catch up on Arrested Development",       completed: false   } ] export default todosData 

▍Reshenie

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

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() {   const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)     return (       <div className="todo-list">           {todoItems}       </div>   ) } export default App 

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

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

यहां VSCode में एप्लिकेशन प्रोजेक्ट है।


VSCode में आवेदन

यह ध्यान दिया जाना चाहिए कि इस व्यावहारिक सबक के लिए प्रदान किए गए कार्य के पूरा होने के बाद, हम, इस तथ्य के बावजूद कि हम एप्लिकेशन को नई सुविधाओं से लैस करेंगे, इसकी कार्यक्षमता को बाधित करेंगे। विशेष रूप से, हम झंडे की स्थिति के बारे में बात कर रहे हैं। जिन झंडों के लिए props.item.completed संपत्ति सेट की गई थी, वे राज्य को सेट करने के लिए उपयोग किए गए थे, उन झंडों की जाँच की जाएगी, जिनके लिए false में सेट की गई समान संपत्ति का उपयोग अनियंत्रित किया जाएगा। लेकिन यदि आप एप्लिकेशन पेज पर ध्वज पर क्लिक करते हैं, तो कुछ भी नहीं होगा, क्योंकि हमने संबंधित HTML तत्व को गलत तरीके से कॉन्फ़िगर किया है। आप कंसोल में इसके बारे में चेतावनी देख सकते हैं।


ब्राउज़र में एप्लिकेशन पेज और कंसोल में चेतावनी

बाद में हम रूपों के बारे में बात करेंगे और उस पर काम करना जारी रखते हुए अपने प्रशिक्षण आवेदन को ठीक करेंगे।

परिणाम

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

प्रिय पाठकों! क्या आपने घटकों के सेट बनाने के लिए .map() जावास्क्रिप्ट सरणी विधि का उपयोग करने की तकनीक में महारत हासिल की है?