Component — nima, Function Component, nima uchun kichik bo'laklarga bo'lamiz

~15 daq · React · Kirish va Asoslar

Muammodan boshlaylik

Tasavvur qiling — e-commerce sayt yozyapsiz. Mahsulotlar sahifasi bor. Har bir mahsulotning rasmi, nomi, narxi, reytingi, "Savatga qo'shish" tugmasi bor. 50 ta mahsulot bor.

Komponentlarsiz bu shunday ko'rinadi:

function App() {
  return (
    <div>
      <div className="card">
        <img src="noutbuk.jpg" />
        <h3>Noutbuk</h3>
        <p>8 500 000 so'm</p>
        <div>⭐⭐⭐⭐⭐</div>
        <button>Savatga qo'shish</button>
      </div>

      <div className="card">
        <img src="telefon.jpg" />
        <h3>Telefon</h3>
        <p>3 200 000 so'm</p>
        <div>⭐⭐⭐⭐</div>
        <button>Savatga qo'shish</button>
      </div>

      {/* yana 48 ta shunday blok... */}
    </div>
  );
}

Muammolar:

  • Bir xil kod 50 marta takrorlanadi
  • Bitta joyni o'zgartirish kerak bo'lsa — 50 ta joyni o'zgartirish kerak
  • Fayl minglab qatorga yetadi, o'qib bo'lmaydi
  • Bir kishi "Savatga qo'shish" tugmasini o'zgartirsa, boshqasi boshqa joyni o'zgartirsa — conflict

Component nima?

Component — bu UI ning qayta ishlatiluvchi bo'lagi. Bir marta yozasiz, istalgan joyda ishlatasiz.

Yuqoridagi muammo komponent bilan:

function MahsulotKarta({ rasm, nom, narx, reyting }) {
  return (
    <div className="card">
      <img src={rasm} />
      <h3>{nom}</h3>
      <p>{narx.toLocaleString()} so'm</p>
      <div>{'⭐'.repeat(reyting)}</div>
      <button>Savatga qo'shish</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <MahsulotKarta rasm="noutbuk.jpg" nom="Noutbuk" narx={8500000} reyting={5} />
      <MahsulotKarta rasm="telefon.jpg" nom="Telefon" narx={3200000} reyting={4} />
      <MahsulotKarta rasm="quloqchin.jpg" nom="Quloqchin" narx={450000} reyting={4} />
    </div>
  );
}

Endi "Savatga qo'shish" tugmasini o'zgartirish kerak bo'lsa — faqat MahsulotKarta ichida bir joyni o'zgartirish yetarli. Hamma joyda avtomatik yangilanadi.

Function Component qanday yoziladi?

React da komponent — bu oddiy JavaScript funksiyasi. Ikkita qoidasi bor:

  1. Nomi katta harf bilan boshlanishi kerak
  2. JSX qaytarishi kerak
// ✅ To'g'ri — katta harf bilan boshlanadi
function Salom() {
  return <h1>Salom, dunyo!</h1>;
}

// ✅ Arrow function ham bo'ladi
const Salom = () => {
  return <h1>Salom, dunyo!</h1>;
};

// ✅ Qisqa yozuv — faqat bitta ifoda bo'lsa
const Salom = () => <h1>Salom, dunyo!</h1>;

// ❌ Xato — kichik harf bilan boshlanadi
function salom() {
  return <h1>Salom</h1>;
}
// React buni HTML tegi deb o'ylaydi, komponent sifatida ishlatmaydi

Nima uchun katta harf? React JSX da <div> va <Salom> ni farqlashi kerak. Kichik harf — HTML tegi, katta harf — React komponenti.

Komponentni ishlatish

Komponent yozilgandan keyin uni boshqa komponent ichida HTML tegi kabi ishlatiladi:

function Sarlavha() {
  return <h1>DevDocs</h1>;
}

function Tugma() {
  return <button>Bosing</button>;
}

function App() {
  return (
    <div>
      <Sarlavha />
      <Tugma />
      <Tugma />   {/* bir xil komponentni ko'p marta ishlatish mumkin */}
      <Tugma />
    </div>
  );
}

Nima uchun kichik bo'laklarga bo'lamiz?

Komponentlarni kichik qilish — bu faqat "tartib uchun" emas. Buning aniq sabablari bor.

1. Qayta ishlatish

Bir marta yozilgan komponent loyihaning istalgan joyida ishlatiladi. Tugma komponentini yozdingiz — uni forma ichida, modal ichida, navbar da ishlatasiz.

2. Mustaqil o'zgartirish

Katta komponentda biror narsani o'zgartirish — butun komponentni qayta chizishga olib keladi. Kichik komponentda faqat o'sha kichik qism qayta chiziladi.

3. Jamoa bilan ishlash

Bir kishi Navbar ni yozadi, boshqasi Sidebar ni, uchinchisi MahsulotKarta ni — bir vaqtda, bir-biriga tegmay.

4. Test qilish osonligi

Kichik komponentni alohida test qilish mumkin. Katta komponentni test qilish qiyin.

Qanday bo'laklarga bo'lish kerak?

Qoida oddiy: bitta komponent — bitta vazifa.

❌ Yomon — hamma narsa bitta komponentda
App
└── (navbar, sidebar, mahsulotlar, footer — hammasi)

✅ Yaxshi — har biri alohida
App
├── Navbar
├── Sidebar
├── MahsulotlarRoyxati
│   └── MahsulotKarta (har bir mahsulot uchun)
└── Footer

Komponentni bo'lish vaqti keldi degan belgilar:

  • Bir xil kod ikki joyda takrorlanmoqda → alohida komponent
  • Komponent 100 qatordan oshdi → bo'lish vaqti
  • Komponent ichida aniq ajraladigan qismlar bor → bo'lish mumkin

Fayl tuzilishi

Har bir komponent odatda alohida faylda bo'ladi:

src/
├── components/
│   ├── Navbar.jsx
│   ├── Sidebar.jsx
│   ├── MahsulotKarta.jsx
│   └── Tugma.jsx
├── pages/
│   ├── Bosh.jsx
│   └── Mahsulotlar.jsx
└── App.jsx

// src/components/MahsulotKarta.jsx
function MahsulotKarta({ rasm, nom, narx }) {
  return (
    <div className="card">
      <img src={rasm} alt={nom} />
      <h3>{nom}</h3>
      <p>{narx.toLocaleString()} so'm</p>
    </div>
  );
}

export default MahsulotKarta;

// src/pages/Mahsulotlar.jsx
import MahsulotKarta from '../components/MahsulotKarta';

function Mahsulotlar() {
  return (
    <div>
      <MahsulotKarta nom="Noutbuk" narx={8500000} />
    </div>
  );
}

export default Mahsulotlar;

Xulosa

Component — UI ning qayta ishlatiluvchi bo'lagi. Bir marta yoziladi, ko'p joyda ishlatiladi.

  • Funksiya nomi katta harf bilan boshlanadi
  • JSX qaytaradi
  • Kichik bo'laklarga bo'lish: qayta ishlatish, mustaqil o'zgartirish, jamoa bilan ishlash uchun
  • Bitta komponent — bitta vazifa

Keyingi dars

6-dars: Props — yuborish, qabul qilish, default qiymat, children