React में CSS modules के साथ स्टाइलिंग शुरू करना

इस और आगे के पाठों में, हम React कंपोनेंट्स की स्टाइलिंग के लिए एक और आधुनिक और प्रभावी दृष्टिकोण पर विचार करेंगे - CSS modules का उपयोग।

CSS मॉड्यूल इस दृष्टिकोण में - अलग-अलग संकलित CSS फ़ाइलें हैं, जिनमें क्लास नाम और एनिमेशन local scope में होते हैं, जो विभिन्न कंपोनेंट्स से क्लास नामों के बीच टकराव से बचने की अनुमति देता है।

शुरुआत करने के लिए हम अपना छोटा सा React एप्लिकेशन buttons बनाएंगे और चलाएंगे। इसके लिए खाली फ़ोल्डर test बनाएं, उसमें जाएं और टर्मिनल में निम्नलिखित कमांड्स लिखें:

npx create-react-app buttons
cd buttons
npm start

यदि आपके पास React का नया वर्जन है, यानी यह Create React App v2 और उससे ऊपर को सपोर्ट करता है, तो कोई अतिरिक्त सेटिंग्स करने की आवश्यकता नहीं है, क्योंकि इस स्थिति में CSS modules स्वचालित रूप से सपोर्ट किए जाएंगे। जांच के लिए package.json में देखें, यदि डिपेंडेंसी react-scripts का वर्जन 2.x.x और उससे ऊपर है, तो सब ठीक है। अन्यथा अपना React अपडेट करें।

CSS modules तरीके से स्टाइलिंग के लिए हमारा एप्लिकेशन तीन बटन शामिल करेगा।

हम CSS फ़ाइलों का नामकरण, कन्वेंशन का पालन करते हुए, निम्न प्रकार से करेंगे: [name].module.css।

चलिए अब src में components फ़ोल्डर बनाते हैं , और उसमें Buttons.module.css फ़ाइल जोड़ते हैं जिसमें हमारे बटनों के लिए CSS स्टाइल्स होंगी:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

साथ ही components फ़ोल्डर में, हम React कंपोनेंट Buttons.js की खाली फ़ाइल बनाएंगे, इस दौरान जेनरेट की गई App.js फ़ाइल को हाथ न लगाएं, हम उस पर बाद में काम करेंगे!

Buttons.js में CSS स्टाइल्स वाली फ़ाइल को अनिवार्य रूप से इम्पोर्ट करें, और साथ ही इन स्टाइल्स को हर बटन पर class एट्रिब्यूट का उपयोग करके लगाएं:

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

वैसे, स्टाइल्स के इम्पोर्ट किए गए ऑब्जेक्ट के नाम के लिए styles शब्द का उपयोग करना अनिवार्य नहीं है, आप इसे अपनी सुविधानुसार कोई भी नाम दे सकते हैं।

अगले पाठ में हम अपना एप्लिकेशन पूरा करेंगे।

इस पाठ के सिद्धांत के अनुसार React एप्लिकेशन inputs जनरेट करें।

पाठ में दिए गए CSS modules दृष्टिकोण का उपयोग करें। inputs एप्लिकेशन के src में React कंपोनेंट Inputs के लिए Inputs.js फ़ाइल बनाएं, जिसमें तीन इनपुट होंगे। इनपुट्स के लिए Inputs.modules.css में कुछ स्टाइल्स लिखें। इस फ़ाइल को Inputs.js में इम्पोर्ट करें और स्टाइल्स लागू करें।