Početak učenja stilizacije sa CSS modulima u Reactu

U ovoj i narednim lekcijama, mi ćemo razmotriti još jedan savremeni i efikasan pristup stilizaciji React komponenti - upotrebu CSS modula.

CSS moduli u ovom pristupu su odvojeni kompajlirani CSS fajlovi, u kojima imena klasa i animacija se nalaze u lokalnom opsegu vidljivosti, što omogućava izbegavanje sukoba između imena klasa iz različitih komponenti.

Za početak kreirajmo i pokrenimo našu jednostavnu React aplikaciju buttons. Za ovo kreirajmo praznu fasciklu test, uđimo u nju i u terminalu napišimo sledeće komande:

npx create-react-app buttons
cd buttons
npm start

Ako imate novu verziju React-a, to jest ona podržava Create React App v2 i više, onda ne treba raditi nikakva dodatna podešavanja, pošto će u tom slučaju CSS moduli biti podržani automatski. Za proveru pogledajte u package.json, ako je zavisnost react-scripts verzije 2.x.x i više, onda je sve u redu. U suprotnom ažurirajte vaš React.

Naša aplikacija za stilizaciju načinom CSS modula će sadržati tri dugmeta.

CSS fajlove ćemo nazivati, pridržavajući se dogovora, na sledeći način: [name].module.css.

Hajde sada da kreiramo fasciklu components u src, a u nju dodajmo fajl Buttons.module.css sa CSS stilovima za naša dugmad:

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

Takođe u fascikli components, kreirajmo prazan fajl React komponente Buttons.js, pri čemu za sada ne dirajte generisani fajl App.js, bavićemo se njim kasnije!

U Buttons.js obavezno importujte fajl sa CSS stilovima, a takođe primenite te stilove na svako dugme pomoću atributa 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;

Inače, nije obavezno koristiti reč styles za naziv importovanog objekta sa stilovima, možete ga nazvati, kako vam je zgodno.

U sledećoj lekciji završićemo našu aplikaciju.

Prateći teoriju za ovu lekciju generišite React aplikaciju inputs.

Koristite pristup CSS modula, prikazan u lekciji. Kreirajte u src aplikacije inputs fajl Inputs.js za React komponentu Inputs, koji će sadržati tri polja za unos (inputa). Napišite par-tri stila u Inputs.modules.css za polja za unos. Importujte ovaj fajl u Inputs.js i primenite stilove.