Bu modulda React komponentlariga uslub berishning besh yo’li o’rganildi.

Usullar xaritasi

Global va component styles

CSS fayl komponentga import qilinadi — lekin oddiy .css import butun ilovaga amal qiladi: ikki komponentda bir xil class nomi to’qnashadi. Shu sabab komponent fayli bo’lsa ham, class nomlarini ehtiyot tanlash kerak.

Inline va dynamic

Inline uslub JSX’da object sifatida yoziladi — qo’sh jingalak qavsning sababi shu (tashqisi JSX ifodasi, ichkisi object):

<p style={{ color: "green", fontSize: "18px" }}>Matn</p>

E’tibor: xossa nomlari camelCase (fontSize, backgroundColor). Dinamik holat — qiymat state’ga bog’lansa:

const [faol, setFaol] = useState(false);

<button
  className={faol ? "btn faol" : "btn"}
  onClick={() => setFaol(!faol)}
>
  {faol ? "Yoqilgan" : "O'chiq"}
</button>

Natija: har bosishda tugma class’i (va matni) almashadi — ko’rinish state ortidan yuradi.

Module CSS

Fayl nomi Nomi.module.css bo’lsa, class’lar shu komponentgagina tegishli bo’ladi:

import styles from "./Card.module.css";

<div className={styles.karta}>...</div>

Build vositasi class nomiga unikal qo’shimcha beradi (karta_x7f2a) — boshqa komponentdagi karta bilan hech qachon to’qnashmaydi. O’rta va katta loyihalarda asosiy tanlov shu.

Tipik xato. Module CSS’da className="karta" deb oddiy string yozish — fayl import qilingan bo’lsa ham uslub tushmaydi; class styles obyekti orqali olinishi shart.

TailwindCSS

Tailwind — utility-first freymvork: uslub tayyor mayda class’lardan JSX ichida yig’iladi:

<button className="bg-emerald-600 text-white px-4 py-2 rounded-lg">
  Saqlash
</button>

Natija: yashil, oq matnli, yumaloq burchakli tugma — CSS fayl umuman ochilmadi.

Bootstrap’dan farqi: tayyor "komponent" yo’q, hamma narsa shu mayda g’ishtlardan quriladi. React bilan juda yaxshi kelishadi: komponent bir marta yoziladi, class’lari o’zi bilan yuradi.

Amaliyot

1. Bitta kartani uch usulda uslublang: global CSS, inline, module CSS — farqni his qiling.
2. "Faol/o’chiq" holatli tugma yasang: class ham, matn ham state’dan kelsin.
3. Ikki komponentda ataylab bir xil class nomini oddiy CSS bilan yozib to’qnashuvni ko’ring, keyin module CSS bilan tuzating.
4. Tailwind o’rnatib, bitta komponentni faqat utility class’lar bilan bezang.

Modul testini ishlang — keyingi modul formalar va ular bilan bog’liq hook’lar.