React-та CSS modules арқылы стильдеуді үйренуді бастау

Бұл және келесі сабақтарда біз React компоненттерін стильдеудің тағы бір заманауи және тиімді әдісін - CSS modules қолдануды қарастырамыз.

CSS модульдері бұл әдісте - бөлек компиляцияланған CSS файлдары, онда класс атаулары мен анимациялар жергілікті көру аясында болады, бұл әртүрлі компоненттердің класс атаулары арасындағы қақтығыстарды болдырмайды.

Бастау үшін біздің қарапайым React қолданбамызды buttons жасап, іске қосамыз. Ол үшін test бос бумасын жасап, оған кіріп, терминалда мына командаларды жазәміз:

npx create-react-app buttons
cd buttons
npm start

Егер сізде React-тің жаңа нұсқасы болса, яғни ол Create React App v2 және одан жоғарыны қолдаса, онда қосымша баптаулар жасаудың қажеті жоқ, себебі бұл жағдайда CSS модульдері автоматты түрде қолдау көрсетіледі. Тексеру үшін package.json файлына қараңыз, егер react-scripts тәуелділігі 2.x.x нұсқасы және одан жоғары болса, онда бәрі ретте. Әйтпесе React-ті жаңартыңыз.

CSS modules әдісімен стильделетін біздің қолданбамыз үш түймешені қамтиды.

Біз CSS файлдарын келесі келісім бойынша атаймыз: [name].module.css.

Қазір src ішінде components бумасын жасап, оған біздің түймешелерге арналған CSS стильдері бар Buttons.module.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 сөзін пайдалану міндетті емес, сіз оны өзіңізге ыңғайлы етіп атай аласыз.

Келесі сабақта біз қолданбамызды аяқтаймыз.

Осы сабақтың теориясына сәйкес inputs React қолданбасын генерациялаңыз.

Сабақта келтірілген CSS modules әдісін қолданыңыз. inputs қолданбасының src бумасында үш енгізу өрісін қамтитын React компоненті Inputs үшін Inputs.js файлын жасаңыз. Енгізу өрістеріне бірнеше стильдерді Inputs.modules.css файлында жазыңыз. Бұл файлды Inputs.js файлына импорттап, стильдерді қолданыңыз.