Reactda CSS modullari bilan uslublashni o'rganishni boshlash

Ushbu va keyingi darslarda biz React komponentlarini uslublashning yana bir zamonaviy va samarali usulini - CSS modullaridan foydalanishni ko'rib chiqamiz.

CSS modullari bu usulda - alohida kompilyatsiya qilingan CSS fayllari bo'lib, ularda class va animatsiya nomlari alohida ko'rinish sohasida joylashgan, bu turli komponentlardan kelgan class nomlari o'rtasidagi ziddiyatlarning oldini oladi.

Boshlash uchun oddiy React ilovamiz buttonsni yaratamiz va ishga tushiramiz. Buning uchun bo'sh test papkasini yarating, unga kiring va terminalda quyidagi buyruqlarni yozing:

npx create-react-app buttons
cd buttons
npm start

Agar sizda Reactning yangi versiyasi bo'lsa, ya'ni u Create React App v2 va undan yuqori versiyalarni qo'llab-quvvatlasa, hech qanday qo'shimcha sozlash talab qilinmaydi, chunki bu holda CSS modullari avtomatik ravishda qo'llab-quvvatlanadi. Tekshirish uchun package.json fayliga qarang, agar react-scripts bog'liqligi versiyasi 2.x.x va undan yuqori bo'lsa, hamma narsa tartibda. Aks holda Reactni yangilang.

CSS modullari usuli bilan uslublash uchun bizning ilovamiz uchta tugmachani o'z ichiga oladi.

CSS fayllarini biz quyidagi kelishuvga amal qilib nomlaymiz: [name].module.css.

Keling, src ichida components papkasini yaratamiz, unga esa Buttons.module.css faylini qo'shamiz bizning tugmachalarimiz uchun CSS uslublari bilan:

.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;
}

Shuningdek, components papkasida, React komponenti uchun bo'sh Buttons.js faylini yarating, hozircha yaratilgan App.js faylini tegmang, biz keyinroq unga murojaat qilamiz!

Buttons.js faylida albatta CSS uslublari faylini import qiling, shuningdek, ushbu uslublarni har bir tugmachaga class atributi orqali qo'llang:

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;

Aytgancha, import qilingan uslublar ob'ekti uchun styles so'zini ishlatish shart emas, siz uni o'zingizga qulay tarzda nomlashingiz mumkin.

Keyingi darsda biz ilovamizni yakunlaymiz.

Ushbu dars nazariyasiga amal qilib, inputs React ilovasini yarating.

Darsda keltirilgan CSS modullari yondashuvidan foydalaning. inputs ilovasining src papkasida React komponenti Inputs uchun Inputs.js faylini yarating, unda uchta input bo'lsin. Inputlar uchun bir nechta uslubni Inputs.modules.css faylida yozing. Ushbu faylni Inputs.js fayliga import qiling va uslublarni qo'llang.