Оғози омӯзиши услуббахошӣ бо CSS modules дар React

Дар ин ва дарсҳои оянда, мо як равиши дигари муосир ва самаранокро барои услуббахӯии компонентҳои React баррасӣ мекунем - истифодаи CSS modules.

CSS module-ҳо дар ин равиш - ин файлҳои CSS-и ҷудошудаи алоҳида мебошанд, ки дар онҳо номҳои синфҳо ва аниматсияҳо дар майдони намоиши маҳаллӣ қарор доранд, ки аз баҳсузӣ дар байни номҳои синфҳо аз компонентҳои гуногун пешгирӣ мекунад.

Барои оғоз, барномаи оддии React-и худро buttons эҷод ва ба кор меандозем. Барои ин, папкаи холӣ test эҷод мекунем, ба он дохил мешавем ва дар терминал фармонҳои зеринро нависем:

npx create-react-app buttons
cd buttons
npm start

Агар шумо версияи нави React дошта бошед, яъне он Create React App v2 ва болотарро дастгирӣ мекунад, пас ҳеҷ танзимоти иловагӣ кардан лозим нест, зеро дар ин ҳолат CSS module-ҳо ба таври худкор дастгирӣ карда мешаванд. Барои санҷиш ба package.json назар кунед, агар вобастагии react-scripts версияи 2.x.x ва болотар бошад, пас ҳама чиз хуб аст. Вагарна, React-и худро навсозӣ кунед.

Барномаи мо барои услуббахӯӣ бо усули CSS modules се тугмачаро дар бар хоҳад гирифт.

Файлҳои CSS-ро мо бо риояи конвенсия, ба тариқи зерин номгузорӣ мекунем: [name].module.css.

Биёед ҳоло папкаи components эҷод кунем дар src, ва ба он файли 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-ро, ки дар дарс оварда шудааст, истифода баред. Дар src барномаи inputs файли Inputs.js барои компоненти React-и Inputs эҷод кунед, ки се дохилкуниро дар бар гирад. Чанд услуб дар Inputs.modules.css барои дохилкуниҳо нависед. Ин файлро дар Inputs.js импорт кунед ва услубҳоро истифода баред.