[अनुवाद] रिएक्ट करने वाले घटकों को उत्तेजित करने के ४ तरीके

नमस्कार, हेब्र! मैं आपके लिए "4 तरीके टू स्टाइल रिएक्ट कंपोनेंट्स" लेख का अनुवाद प्रस्तुत करता हूं।



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

इनलाइन सी.एस.एस.

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



हालाँकि, यह विधि बहुत सीमित है। यह छद्म चयनकर्ताओं का उपयोग नहीं कर सकता है, जैसे: होवर, साथ ही साथ मीडिया क्वेरी। लेकिन इसका मतलब यह नहीं है कि इसका उपयोग नहीं किया जाना चाहिए। इसका उपयोग तब किया जा सकता है जब केवल 2 या 3 गुण होते हैं जिन्हें छद्म चयनकर्ताओं या मीडिया प्रश्नों की आवश्यकता नहीं होती है, और / या उन स्थितियों में जहां शैलियों में स्थितियों का उपयोग आवश्यक होता है।

स्टाइलिंग लाइब्रेरी

मुझे सिर्फ नई लाइब्रेरी या फ्रेमवर्क सीखना पसंद है। यह विधि रिएक्ट घटकों को स्टाइल करने के लिए मेरा पसंदीदा है। कई स्टाइलिंग लाइब्रेरी हैं जो आपको न केवल घटकों को स्टाइल करने की अनुमति देती हैं, बल्कि अतिरिक्त "सुपर फीचर्स" भी प्रदान करती हैं, जैसा कि मैं उन्हें कॉल करता हूं, साथ ही सभी सीएसएस सुविधाओं के साथ जो चीजों को बहुत आसान बनाती हैं।

एक उपयोग उदाहरण इस तरह लग सकता है:



ऊपर स्टाइल-घटक लाइब्रेरी का उपयोग करने का एक उदाहरण है।

रैपर को एक स्टाइल घटक कहा जाता है। Wrapper स्थिर में शैलियों को परिभाषित किया गया है, जो बस इन शैलियों के साथ एक घटक बनाता है। बस यह निर्धारित करें कि आपको किस प्रकार के तत्व की आवश्यकता है, उदाहरण के लिए: div, शीर्ष लेख या img, और इसका उपयोग करें जैसे कि यह एक प्रतिक्रियाशील घटक था। एचटीएमएल तत्व नहीं, बस घटक, जो कोड क्लीनर और पढ़ने में आसान बनाता है।

यह सिर्फ मेरी प्राथमिकता है। हो सकता है कि आपको div का उपयोग करना पसंद हो, या मूल HTML तत्व देखें। कोई बात नहीं! खान अकादमी ने एफ़्रोडाइट पुस्तकालय विकसित किया, जो एचटीएमएल तत्वों का उपयोग करता है लेकिन क्लासनेम विशेषता का उपयोग करके घटक को शैलियों को जोड़ता है।

Aphrodite पर मेरा लेख

इन पुस्तकालयों में कई अतिरिक्त विशेषताएं हैं जो आपको भयानक सामान करने देती हैं। कई पुस्तकालय हैं, इसलिए आपको बस कोशिश करने और देखने की जरूरत है कि कौन सा आपके साथ रहेगा।

यहाँ इस समय दो सबसे लोकप्रिय हैं:

https://www.styled-components.com/
https://glamorous.rocks/

बाहरी शैलियों

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

सीएसएस मॉड्यूल

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

https://github.com/css-modules/css-modules

जो भी आप उपयोग करने का निर्णय लेते हैं: पारंपरिक सीएसएस, सीएसएस मॉड्यूल, इनलाइन सीएसएस, स्टाइल लाइब्रेरी या इन तरीकों का एक संयोजन, मेरी राय में, यह सब आपकी प्राथमिकताओं और आपकी टीम की प्राथमिकताओं के लिए नीचे आता है।

पढ़ने के लिए धन्यवाद। एक गलती मिली? बेझिझक मुझे उसके बारे में बताओ। आपका दिन शुभ हो!