इमोशन लाइब्रेरी रिएक्ट में CSS के आपके उपयोग को सरल बनाती है और कुछ आसान सिंटैक्स सुविधाएँ भी जोड़ती है।
रिएक्ट एप्लिकेशन को स्टाइल करना चुनौतीपूर्ण हो सकता है, खासकर यदि आप अपनी शैलियों को व्यवस्थित और बनाए रखना चाहते हैं। इस प्रक्रिया को सरल बनाने में मदद करने के लिए, इमोशन लाइब्रेरी CSS के शीर्ष पर एक उच्च-स्तरीय अमूर्तता प्रदान करती है।
भावना क्या है?
इमोशन रिएक्ट एप्लिकेशन को स्टाइल करने के लिए एक पुस्तकालय है जो आपकी शैलियों को प्रबंधित करने का एक सरल और कुशल तरीका प्रदान करता है। यह आपको जावास्क्रिप्ट में सीएसएस लिखने की अनुमति देता है और आपके घटकों को स्टाइल करने के लिए एक लचीला एपीआई प्रदान करता है।
अपने रिएक्ट एप्लिकेशन को स्टाइल करने के लिए इमोशन का उपयोग करने का एक मुख्य लाभ यह है कि यह आपकी शैलियों को प्रबंधित करने का एक अधिक कुशल तरीका प्रदान करता है। उदाहरण के लिए, आप नामकरण टकराव के जोखिम के बिना कई घटकों में समान वर्ग के नामों का उपयोग कर सकते हैं सीएसएस/एसएएसएस के साथ काम करते समय.
इमोशन लाइब्रेरी आपकी शैलियों को केवल उन घटकों पर लागू करती है जो पूरे पृष्ठ के बजाय उनका उपयोग करते हैं। यह पृष्ठ पर अन्य शैलियों के साथ संघर्ष से बचने में आपकी सहायता कर सकता है और आपके कोड को अधिक मॉड्यूलर और पुन: प्रयोज्य बना सकता है।
भावना कैसे स्थापित करें
अपने रिएक्ट एप्लिकेशन में इमोशन लाइब्रेरी जोड़ने के लिए, निम्नलिखित टर्मिनल कमांड चलाएँ:
एनपीएम इंस्टॉल --सेव @ इमोशन/रिएक्ट
इमोशन लाइब्रेरी को अब आपके प्रोजेक्ट में स्थापित किया जाना चाहिए और आपके रिएक्ट एप्लिकेशन को स्टाइल करने के लिए उपयोग करने के लिए तैयार होना चाहिए।
इमोशन के css प्रोप का उपयोग करके स्टाइलिंग
एक बार जब आप इमोशन लाइब्रेरी स्थापित कर लेते हैं, तो आप इसका उपयोग करने में सक्षम होंगे सीएसएस अपने रिएक्ट एप्लिकेशन को स्टाइल करने के लिए प्रोप। सीएसएस प्रोप स्टाइल प्रोप के समान है क्योंकि आप इसे स्ट्रिंग्स या नियमित जावास्क्रिप्ट ऑब्जेक्ट्स के रूप में स्टाइल पास कर सकते हैं।
का उपयोग करके अपने एप्लिकेशन को स्टाइल करने के लिए सीएसएस प्रॉप, आपको इसे से आयात करना होगा @भावना/प्रतिक्रिया पुस्तकालय, फिर अपनी शैलियों को परिभाषित करें:
/** @jsxImportSource @भावना/प्रतिक्रिया */
आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {सीएसएस} से'@भावना/प्रतिक्रिया';समारोहअनुप्रयोग() {
वापस करना (
गद्दी: 0.5रेम 1रेम;
सीमा: कोई नहीं;
फ़ॉन्ट-परिवार: कर्सिव;
सीमा-त्रिज्या: 12पीएक्स;
रंग: #333333;
पृष्ठभूमि-रंग: उत्तराधिकारी;
मार्जिन-ब्लॉक-स्टार्ट: 2रेम;
मार्जिन-ब्लॉक-एंड: 2रेम;
`}>
मुझे क्लिक करें
</button>
)
}
निर्यातगलती करना अनुप्रयोग;
कोड की पहली पंक्ति, /** @jsxImportSource @भावना/प्रतिक्रिया */, एक विशेष टिप्पणी है जिसे आपको यह इंगित करने के लिए JSX फ़ाइल में जोड़ना चाहिए कि उस फ़ाइल के लिए JSX प्रागमा के रूप में इमोशन लाइब्रेरी का उपयोग किया जाना चाहिए।
JSX में, एक प्रज्ञा एक ऐसा कार्य है जो JSX सिंटैक्स को नियमित जावास्क्रिप्ट में बदल देता है। डिफ़ॉल्ट रूप से, रिएक्ट इसका उपयोग करता है React.createElement JSX प्रागमा के रूप में कार्य करता है। हालाँकि, के साथ @jsxImportSource टिप्पणी, आप एक अलग pragma निर्दिष्ट कर सकते हैं।
इस मामले में, @भावना/प्रतिक्रिया प्रगमा JSX को उपयोग करने के लिए कहती है jsx JSX कोड को बदलने के लिए इमोशन लाइब्रेरी से कार्य करता है। JSX फ़ाइल में प्रगमा टिप्पणी जोड़कर, आप अपने घटकों में इमोशन लाइब्रेरी की CSS-in-JS सुविधाओं का उपयोग कर सकते हैं।
बटन घटक कुछ कस्टम स्टाइल वाले बटन को प्रस्तुत करता है। यहां ही सीएसएस प्रोप कस्टम स्टाइल को बटन तत्व में जोड़ता है।
सीएसएस प्रोप नेस्टेड स्टाइलिंग का भी समर्थन करता है। नेस्टेड स्टाइलिंग आपको उन शैलियों को लिखने की अनुमति देती है जो एक दूसरे के भीतर नेस्टेड हैं।
उदाहरण के लिए:
/** @jsxImportSource @भावना/प्रतिक्रिया */
आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {सीएसएस} से'@भावना/प्रतिक्रिया';समारोहअनुप्रयोग() {
वापस करना (
गद्दी: 0.5रेम 1रेम;
सीमा: कोई नहीं;
फ़ॉन्ट-परिवार: कर्सिव;
सीमा-त्रिज्या: 12पीएक्स;
रंग: #333333;
पृष्ठभूमि-रंग: उत्तराधिकारी;
मार्जिन-ब्लॉक-स्टार्ट: 2रेम;
मार्जिन-ब्लॉक-एंड: 2रेम;&: होवर {
रंग: #e2e2e2;
पृष्ठभूमि का रंग: #333333;
}
`}>
मुझे क्लिक करें
</button>
)
}
निर्यातगलती करना अनुप्रयोग;
इस उदाहरण में, होवर स्टाइल की घोषणा में नेस्टेड स्टाइलिंग सुविधा का उपयोग किया गया है सीएसएस सहारा। जब भी आप बटन पर होवर करेंगे तो उपरोक्त कोड ब्लॉक में पृष्ठभूमि और फ़ॉन्ट का रंग बदल जाएगा।
सीएसएस प्रोप को ऑब्जेक्ट स्टाइल पास करना
सीएसएस प्रोप नियमित जावास्क्रिप्ट ऑब्जेक्ट शैलियों को भी स्वीकार करता है। कई घटकों को स्टाइल करते समय, ऑब्जेक्ट शैलियों का उपयोग करने से आप अपने घटकों में शैलियों का पुन: उपयोग कर सकते हैं।
ऑब्जेक्ट शैलियों को पास करने के लिए सीएसएस प्रोप, शैलियों को जावास्क्रिप्ट ऑब्जेक्ट के रूप में परिभाषित करें और इसे प्रोप में पास करें:
कॉन्स्ट शैली = {
गद्दी: '0.5रेम 1रेम',
सीमा: 'कोई नहीं',
फुहारा परिवार: 'कर्सिव',
सीमात्रिज्या: '12 पीएक्स',
रंग: '#333333',
पृष्ठभूमि का रंग: 'विरासत',
मार्जिनब्लॉकस्टार्ट: '2रेम',
मार्जिनब्लॉकएंड: '2रेम','&: होवर': {
रंग: '#e2e2e2',
पृष्ठभूमि का रंग: '#333333',
}
}
वापस करना ("अनुप्रयोग">
ध्यान दें कि CSS प्रॉपर्टी के नाम हाइफ़न के बजाय ऊंट के रूप में हैं। ऐसा इसलिए है क्योंकि शैलियों को जावास्क्रिप्ट ऑब्जेक्ट्स के रूप में परिभाषित किया गया है, जो कैमलकेस नामकरण सम्मेलनों का उपयोग करते हैं।
स्टाइल किए गए घटकों का उपयोग करके स्टाइलिंग
रिएक्ट एप्लिकेशन को स्टाइल करते समय इमोशन लाइब्रेरी स्टाइल वाले घटकों का भी उपयोग करती है। स्टाइल वाले घटकों का उपयोग करना रिएक्ट घटकों के समान है, इस तथ्य के अलावा कि उनमें अलग-अलग शैलियाँ हैं। स्टाइल वाले घटकों को बनाने के लिए, आप इसका उपयोग करेंगे स्टाइल समारोह।
स्टाइल फ़ंक्शन आपको पुन: प्रयोज्य स्टाइल वाले घटकों को बनाने की अनुमति देता है। उपयोग करने के लिए स्टाइल समारोह, इसे से आयात करें भावना / स्टाइल पुस्तकालय।
पाने के लिए @ भावना/स्टाइल आपके आवेदन में पुस्तकालय, आप इसे अपने प्रोजेक्ट में स्थापित करेंगे। आप इसे अपने प्रोजेक्ट के टर्मिनल में निम्न आदेश चलाकर कर सकते हैं:
एनपीएम इंस्टॉल @ इमोशन/स्टाइल
इंस्टॉल करने के बाद @ भावना/स्टाइल पुस्तकालय, आयात करें स्टाइल कार्य करें और अपनी शैलियों को परिभाषित करें:
आयात स्टाइल से"@भावना/शैली";कॉन्स्ट बटन = स्टाइल.बटन ({
गद्दी: '0.5रेम 1रेम',
सीमा: 'कोई नहीं',
फुहारा परिवार: 'कर्सिव',
सीमात्रिज्या: '12 पीएक्स',
रंग: '#333333',
पृष्ठभूमि का रंग: 'विरासत',
मार्जिनब्लॉकस्टार्ट: '2रेम',
मार्जिनब्लॉकएंड: '2रेम','&: होवर': {
रंग: '#e2e2e2',
पृष्ठभूमि का रंग: '#333333',
}
})
निर्यातगलती करना बटन;
उपरोक्त कोड ब्लॉक में, एक स्टाइल वाला घटक बटन बनाया गया है। आप इस बटन का उपयोग अपने रिएक्ट एप्लिकेशन में किसी अन्य रिएक्ट घटक की तरह कर सकते हैं।
जैसे इतना:
आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात बटन से'।/बटन';समारोहअनुप्रयोग() {
वापस करना (
निर्यातगलती करना अनुप्रयोग;
प्रतिपादन कर रहा है अनुप्रयोग घटक में परिभाषित शैलियों के साथ एक बटन प्रदर्शित करेगा बटन आपकी स्क्रीन पर घटक।
स्टाइल फ़ंक्शन स्ट्रिंग शैलियों को भी स्वीकार करता है। यह वस्तु शैली के दृष्टिकोण से अलग दिखता है लेकिन समान रूप से कार्य करता है।
आयात स्टाइल से"@भावना/शैली";कॉन्स्ट बटन = स्टाइल.बटन`
गद्दी: 0.5रेम 1रेम;
सीमा: कोई नहीं;
फ़ॉन्ट-परिवार: कर्सिव;
सीमा-त्रिज्या: 12पीएक्स;
रंग: #333333;
पृष्ठभूमि-रंग: उत्तराधिकारी;
मार्जिन-ब्लॉक-स्टार्ट: 2रेम;
मार्जिन-ब्लॉक-एंड: 2रेम;&: होवर {
रंग: #e2e2e2;
पृष्ठभूमि का रंग: #333333;
}
`
निर्यातगलती करना बटन;
भावना के साथ कुशल स्टाइलिंग
इमोशन रिएक्ट घटकों को स्टाइल करने के लिए एक शक्तिशाली पुस्तकालय है जो आपकी शैलियों को प्रबंधित करने का एक सरल और कुशल तरीका प्रदान करता है। चाहे आप शुरुआती हों या अनुभवी डेवलपर, इमोशन आपके रिएक्ट एप्लिकेशन को स्टाइल करने की प्रक्रिया को आसान बनाने में मदद कर सकता है और आपके कोड को बनाए रखना और स्केल करना आसान बना सकता है।
इसलिए यदि आप अपने रिएक्ट घटकों को स्टाइल करने के लिए अधिक कुशल और लचीले तरीके की तलाश कर रहे हैं, तो इमोशन पर विचार करें।
