React-এ CSS modules এর সাথে স্টাইলিং শেখা শুরু করা

এই এবং পরবর্তী পাঠগুলোতে, আমরা React কম্পোনেন্ট স্টাইল করার আরও একটি আধুনিক এবং কার্যকরী পদ্ধতি বিবেচনা করব - CSS modules ব্যবহার।

CSS modules এই পদ্ধতিতে - আলাদাভাবে কম্পাইল করা CSS ফাইল, যেখানে ক্লাস এবং অ্যানিমেশনের নামগুলি local scope-এ থাকে, যা বিভিন্ন কম্পোনেন্ট থেকে ক্লাস নামের মধ্যে conflict এড়াতে সাহায্য করে।

শুরুতে আমাদের ছোট্ট 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-এ Inputs.js ফাইল তৈরি করুন React কম্পোনেন্ট Inputs-এর জন্য, যেটিতে তিনটি ইনপুট থাকবে। ইনপুটগুলিতে কিছু স্টাইল Inputs.modules.css-এ লিখুন। এই ফাইলটি Inputs.js-এ ইম্পোর্ট করুন এবং স্টাইলগুলি প্রয়োগ করুন।