रिएक्ट ट्यूटोरियल भाग 10: घटक गुणों और स्टाइल के साथ काम करने पर कार्यशाला

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



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

पाठ 20. कार्यशाला। घटक गुण, स्टाइल

→ मूल

▍Zadanie

1. एक नया रिएक्ट एप्लिकेशन प्रोजेक्ट बनाएं।
2. एप्लिकेशन पृष्ठ पर एप्लिकेशन घटक प्रदर्शित करें, जिसका कोड एक अलग फ़ाइल में होना चाहिए।
3. एप्लिकेशन घटक को चुटकुले वाले 5 Joke घटकों का उत्पादन करना चाहिए। इन घटकों को अपने इच्छित तरीके से बाहर लाएँ।
4. प्रत्येक Joke घटक को अपने मुख्य वाक्यांश के लिए, मजाक के मुख्य भाग और punchLine संपत्ति के लिए question संपत्ति को स्वीकार और संसाधित करना चाहिए।

▍आधार कार्य

कुछ चुटकुले पूरी तरह से एक महत्वपूर्ण वाक्यांश से मिलकर बने होते हैं। उदाहरण के लिए: "क्लेप्टोमैनियाक को दंडों की व्याख्या करना कठिन है क्योंकि वे हमेशा चीजों को शाब्दिक रूप से लेते हैं।" विचार करें कि question घटक सेट नहीं होने पर Joke घटक केवल punchLine संपत्ति को कैसे प्रदर्शित कर सकता है। अपने घटकों को स्टाइल के साथ प्रयोग करें।

▍Reshenie

मुख्य कार्य

index.js फ़ाइल काफी परिचित होगी:

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render(<App />,   document.getElementById("root")) 

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

 import React from "react" import Joke from "./Joke" function App() {   return (       <div>           <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 

कृपया ध्यान दें कि चूंकि Joke घटक फ़ाइल App घटक फ़ाइल के समान फ़ोल्डर में स्थित है, इसलिए हम इसे import Joke from "./Joke" साथ आयात करते हैं। हम App से कई तत्वों को वापस करते हैं, इसलिए हमें एक निश्चित टैग में सभी आउटपुट को लपेटने की आवश्यकता है, उदाहरण के लिए, <div> । घटक उदाहरणों के लिए, हम question और punchLine पास करते punchLine ।

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

 import React from "react" function Joke(props) {   return (       <div>           <h3>Question: {props.question}</h3>           <h3>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

यहां, Joke फ़ंक्शन की घोषणा करते समय, हम props पैरामीटर निर्दिष्ट करते हैं। स्मरण करो कि यह एक ऐसा नाम है जिसका उपयोग स्थापित परंपरा के अनुसार किया जाता है। वास्तव में, यह कुछ भी हो सकता है, लेकिन इसे props कॉल करना बेहतर है।

हम घटक से कई तत्वों को लौटाते हैं - इसलिए वे <div> में संलग्न हैं। props.question और props.punchLine का उपयोग करते हुए props.punchLine हम घटक उदाहरण के लिए पारित गुणों का उपयोग करते हैं जब इसे बनाया गया था। ये गुण props ऑब्जेक्ट के गुण बन जाते हैं। वे इस तथ्य के कारण घुंघराले ब्रेसिज़ में संलग्न हैं कि JSX मार्कअप में उपयोग किए गए जावास्क्रिप्ट कोड को घुंघराले ब्रेसिज़ में संलग्न किया जाना चाहिए। अन्यथा, सिस्टम चर नामों को सादे पाठ के रूप में ले जाएगा। <h3> तत्वों की एक जोड़ी के बाद, जिनमें से एक में चुटकुले का मुख्य पाठ प्रदर्शित किया गया है, और दूसरे में - इसका प्रमुख वाक्यांश, <hr/> तत्व है जो क्षैतिज रेखा का वर्णन करता है। प्रत्येक मजाक के बाद, उन्हें अलग करते हुए ऐसी लाइनें प्रदर्शित की जाएंगी।

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


VSCode में आवेदन

यहाँ आवेदन पृष्ठ है।


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

अतिरिक्त कार्य

याद रखें कि अतिरिक्त कार्य का मुख्य लक्ष्य चुटकुलों के सही निष्कर्ष को व्यवस्थित करना है, जिसमें पूरी तरह से एक महत्वपूर्ण वाक्यांश शामिल है। यह इस तथ्य में व्यक्त किया जाता है कि Joke घटक का एक उदाहरण बनाते समय, केवल punchLine संपत्ति punchLine , और question संपत्ति को पारित नहीं किया जाता है। इस तरह के एक घटक का एक उदाहरण बनाना इस तरह दिखता है:

 <Joke   punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." /> 

यदि आप इस कोड को App घटक द्वारा लौटाए गए कोड के शीर्ष पर रखते हैं, तो आवेदन पृष्ठ इस तरह दिखेगा।


बेहतर ढंग से गठित आवेदन पृष्ठ

जाहिर है, यहां समस्या यह है कि, हालांकि question संपत्ति घटक को पारित नहीं किया गया है, यह पाठ प्रदर्शित करता है जो प्रत्येक मजाक के मुख्य भाग से पहले होता है, जिसके बाद कुछ भी आउटपुट नहीं होता है।

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

 import React from "react" function Joke(props) {   return (       <div>           <h3 style={{display: props.question ? "block" : "none"}}>Question: {props.question}</h3>           <h3>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

हम पहले तत्व को निर्दिष्ट करते हैं <h3> शैली, जो ऑब्जेक्ट में props.question प्रॉपर्टी की उपस्थिति के आधार पर घटक की तात्कालिकता के दौरान निर्धारित की जाती है। यदि यह गुण ऑब्जेक्ट में है, तो तत्व display: block पर ले जाता है display: block शैली को display: block और पृष्ठ पर प्रदर्शित किया जाता है; यदि नहीं, तो display: none और पृष्ठ पर प्रदर्शित नहीं होता है। इस तरह के निर्माण के उपयोग से समान प्रभाव होगा:

 <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3> 

यहाँ, display: none शैली तत्व को नहीं दी गई है यदि props ऑब्जेक्ट में question संपत्ति नहीं है, अन्यथा display संपत्ति को कुछ भी नहीं सौंपा गया है।

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


ऐसी स्थिति से संबंधित उचित घटक जिससे प्रश्न संपत्ति को पारित नहीं किया जाता है

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

 import React from "react" function Joke(props) {   return (       <div>           <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>           <h3 style={{color: !props.question && "#888888"}}>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

और यहां वह है जो अब एप्लिकेशन पेज पर दिखाई देता है।


ऐसी वस्तु को स्टाइल करना जो दूसरों से अलग हो

अब हमने Joke घटक पर काम किया है, यह पुन: उपयोग के लिए अधिक बहुमुखी और बेहतर अनुकूल हो गया है।

परिणाम

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

प्रिय पाठकों! यदि इस कार्यशाला की समस्याओं का समाधान प्रस्तावित एक से अलग है, तो कृपया हमें इसके बारे में बताएं।