React'те CSS модулдары менен стилдөөнү үйрөнүүнүн башталышы

Бул жана кийинки сабактарда, биз React компоненттерин стилдөөнүн дагы бир заманбап жана натыйжалуу ыкмасын - CSS модулдарын колдонууну карап чыгабыз.

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 файлдарын биз, келишимге ылайык, төмөнкүдөй атайбыз: [аты].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 сөзүн колдонуу милдеттүү эмес, сиз аны өзүңүзгө ыңгайлуу болгондой атасаңыз болот.

Кийинки сабакта биз тиркемебизди аяктайбыз.

Бул сабактагы теорияга ылайык, React тиркемесиңизди inputs түзүңүз.

Сабакта келтирилген CSS modules ыкмасын колдонуңуз. inputs тиркемесинин src папкасында React компоненти Inputs үчүн Inputs.js файлын түзөлү, ал үч киргизүүнү (input) камтыйт. Inputs.modules.css файлына киргизүүлөр үчүн бир нече стил жазыңыз. Бул файлды Inputs.js файлына импорттоп, стилдерди колдонуңуз.