🧝🏿 🔺 💆🏼 रिएक्ट ट्यूटोरियल भाग 7: इनलाइन स्टाइल्स ✉️ 🙋🏿 👨🏼‍🎤

आज, प्रतिक्रिया पाठ्यक्रम के अगले भाग में, हम इनलाइन शैलियों के बारे में बात करेंगे।

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

पाठ 15. निर्मित शैलियाँ

→ मूल

अंतिम पाठ के अंत में, हमने एक घटक बनाया जो दिन के समय का विश्लेषण करता है और एक संबंधित अभिवादन प्रदर्शित करता है। यहाँ पूर्ण index.js फ़ाइल index.js जो इस कार्यक्षमता को लागू करता है:

 import React from "react" import ReactDOM from "react-dom" function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } ReactDOM.render(<App />, document.getElementById("root"))

अब हमें यह स्टाइल करने की आवश्यकता है कि यह कोड पृष्ठ पर क्या प्रदर्शित करता है। उसी समय, हम यहां एक दृष्टिकोण का उपयोग करने जा रहे हैं जो सीएसएस कक्षाओं का उपयोग करने से पहले माना जाने वाले तत्वों के स्टाइलाइजेशन से अलग है। अर्थात्, हम HTML विशेषता style का उपयोग करने के बारे में बात कर रहे style । आइए देखें कि अगर आप इस डिज़ाइन का उपयोग करते हैं तो क्या होता है:

 <h1 style="color: #FF8C00">Good {timeOfDay}!</h1>

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

JSX कोड में HTML विशेषताओं का उपयोग करने का प्रयास करते समय, हमें यह नहीं भूलना चाहिए कि हम जो काम कर रहे हैं, हालांकि यह नियमित HTML कोड जैसा दिखता है, वह नहीं है। परिणामस्वरूप, यह या यह डिज़ाइन यहाँ कैसे दिखाई देगा यह HTML में स्वीकार किए गए से भिन्न हो सकता है। इस मामले में, हमें एक नियमित जावास्क्रिप्ट ऑब्जेक्ट की आवश्यकता है जिसमें शैलियों का विवरण है। इस विचार के साथ, हम उपरोक्त कोड के टुकड़े को फिर से लिखते हैं:

 <h1 style={color: "#FF8C00"}>Good {timeOfDay}!</h1>

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

 <h1 style={{color: "#FF8C00"}}>Good {timeOfDay}!</h1>

अब घटक वही बनाता है जो पृष्ठ पर आवश्यक होता है।

घटक द्वारा पृष्ठ पर प्रदर्शित स्थिर पाठ

क्या होगा यदि हम इस पाठ को स्टाइल करना जारी रखने का निर्णय लेते हैं? ऐसा करने के लिए, हमें यह याद रखने की आवश्यकता है कि हम JS-object में शैलियों का वर्णन करते हैं, जिसका अर्थ है कि हमें इस ऑब्जेक्ट में अतिरिक्त : जोड़े जोड़ने की आवश्यकता है। उदाहरण के लिए, हम सीएसएस संपत्ति background-color का उपयोग करके इस तरह से पाठ की पृष्ठभूमि को स्टाइल करने की कोशिश करेंगे और इस तरह कोड को पूरक करेंगे:

 <h1 style={{color: "#FF8C00", background-color: "#FF2D00"}}>Good {timeOfDay}!</h1>

इस डिज़ाइन में त्रुटि संदेश होगा। यहाँ मुद्दा यह है कि हम एक नियमित JS-object का उपयोग करके शैलियों का वर्णन करते हैं, और जावास्क्रिप्ट में, चर और ऑब्जेक्ट संपत्ति के नाम ( पहचानकर्ता ) में "-" प्रतीक, डैश नहीं हो सकते। वास्तव में, इस प्रतिबंध को, उदाहरण के लिए, उद्धरण चिह्नों में वस्तु के संपत्ति नाम को संलग्न करके, दरकिनार किया जा सकता है, लेकिन हमारे मामले में ऐसा नहीं है। ऐसी स्थितियों में, जब सीएसएस संपत्ति के नामों में डैश होता है, तो हम इस वर्ण को हटा देते हैं और इस शब्द का पहला अक्षर इसे राजधानी बनाते हैं। यह देखना आसान है कि इस दृष्टिकोण के साथ, सीएसएस संपत्ति के नाम ऊंट शैली में लिखे जाएंगे - ठीक उसी तरह जैसे कि जावास्क्रिप्ट में कई शब्दों से युक्त चर नाम लिखने की प्रथा है। कोड को फिर से लिखें:

 <h1 style={{color: "#FF8C00", backgroundColor: "#FF2D00"}}>Good {timeOfDay}!</h1>

आइए उनके काम के परिणामों पर नज़र डालें।

घटक द्वारा पृष्ठ पर प्रदर्शित स्थिर पाठ

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

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00" } return (   <h1 style={styles}>Good {timeOfDay}!</h1> )

यह कोड ठीक उसी तरह काम करता है जैसा कि ऊपर वर्णित है, लेकिन यह दृष्टिकोण बहुत सुविधाजनक है जब वस्तु में नई शैलियों को जोड़ना आवश्यक हो जाता है। यह घटक बढ़ने के कारण कोड वापस नहीं करता है।

जैसा कि आप देख सकते हैं, अब सीएसएस गुणों के मूल्य स्ट्रिंग्स के रूप में styles ऑब्जेक्ट में सेट किए गए हैं। इस ऑब्जेक्ट के साथ काम करते समय, यह कुछ विशेषताओं पर विचार करने के लायक है, जो विशेष रूप से उन संपत्तियों से संबंधित हैं जिनके मूल्य संख्याओं के रूप में निर्धारित हैं। उदाहरण के लिए, यह एक fontSize प्रॉपर्टी है (सीएसएस में font-size तरह दिखता है)। तो, इस संपत्ति को एक साधारण संख्या के रूप में सेट किया जा सकता है, न कि उद्धरण चिह्नों में संलग्न स्ट्रिंग। उदाहरण के लिए, निम्नलिखित निर्माण पूरी तरह से मान्य है:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00",   fontSize: 24 }

यहां, संख्या 24 को पिक्सेल में इंगित फ़ॉन्ट आकार के रूप में समझा जाएगा। यदि माप की इकाई को स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता है, तो हमें फिर से गुणों के स्ट्रिंग मान का उपयोग करने की आवश्यकता होगी। उदाहरण के लिए, निम्न कोड टुकड़ा समान है, फ़ॉन्ट आकार पर प्रभाव के संदर्भ में, पिछले एक पर, लेकिन आकार के लिए माप की इकाई स्पष्ट रूप से यहां इंगित की गई है:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00",   fontSize: "24px" }

यहां हमने पिक्सेल में आकार का संकेत दिया, लेकिन यदि आवश्यक हो, तो अन्य इकाइयों को समान डिजाइनों में उपयोग किया जा सकता है।

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

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

यहां पूर्ण घटक कोड है जो गतिशील शैली गठन का उपयोग करता है।

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay const styles = {   fontSize: 30 } if (hours < 12) {   timeOfDay = "morning"   styles.color = "#04756F" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon"   styles.color = "#2E0927" } else {   timeOfDay = "night"   styles.color = "#D90000" } return (   <h1 style={styles}>Good {timeOfDay}!</h1> ) }

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

 const date = new Date(2018, 6, 31, 15)

सख्ती से बोलना, इस सब का अर्थ यह है कि गतिशील डेटा प्रभावित कर सकता है कि घटकों द्वारा गठित तत्व कैसे दिखते हैं। यह डेवलपर के लिए बेहतरीन अवसर खोलता है।

परिणाम

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

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

रिएक्ट ट्यूटोरियल भाग 7: इनलाइन स्टाइल्स

पाठ 15. निर्मित शैलियाँ

परिणाम

More articles: