CSS მოდულებით სტილიზაციის შესწავლის დასაწყისი React-ში

ამ და მომდევნო გაკვეთილებში, ჩვენ განვიხილავთ კიდევ ერთ თანამედროვე და ეფექტურ მიდგომას 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 მოდულების მეთოდით სტილიზაციისთვის შეიცავს სამ ღილაკს.

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 მოდულების მიდგომა, რომელიც მოყვანილია გაკვეთილში. შექმენით src აპლიკაციაში inputs ფაილი Inputs.js React-ისთვის კომპონენტის Inputs, რომელიც შეიცავს სამ ინფუთს. დაწერეთ რამდენიმე სტილი Inputs.modules.css-ში ინფუთებისთვის. იმპორტირება ეს ფაილი Inputs.js-ში და გამოიყენეთ სტილები.