Bu modulda ilovani komponentlarga bo’lish va ular orasida ma’lumot uzatish o’rganildi.

Nega bir nechta komponent

Butun ilovani bitta App ichida yozish tez orada o’qib bo’lmas holga keladi. Qoida: ekranda ko’zga alohida bo’lak bo’lib ko’ringan narsa (karta, sarlavha paneli, ro’yxat elementi) — alohida komponentga ajratiladi. Har komponent o’z faylida turadi va export default qilinadi.

Props — otadan bolaga

Props — komponentga tashqaridan beriladigan qiymatlar; funksiya parametrlari kabi qabul qilinadi:

function KursKarta({ nom, daraja }) {
  return (
    <div className="karta">
      <h3>{nom}</h3>
      <span>{daraja}</span>
    </div>
  );
}

<KursKarta nom="ReactJS" daraja="O'rta" />
<KursKarta nom="HTML" daraja="Boshlang'ich" />

Natija: bitta komponentdan ikki xil karta.

Muhim qoida: props faqat o’qiladi. Bola komponent kelgan props’ni o’zgartirmaydi — ma’lumotning egasi ota, bola faqat ko’rsatadi.

Fragment

Komponent bitta ildiz qaytarishi kerak, lekin ortiqcha <div> DOM’ni ifloslaydi. Yechim — fragment:

return (
  <>
    <h2>Sarlavha</h2>
    <p>Matn</p>
  </>
);

<>...</> — sahifaga hech qanday teg qo’shmaydigan "ko’rinmas o’rov".

Children props

Ochuvchi va yopuvchi teg orasiga yozilgan hamma narsa komponentga children nomi bilan keladi:

function Modal({ children }) {
  return <div className="modal">{children}</div>;
}

<Modal>
  <h2>Diqqat!</h2>
  <p>Rostdan o'chirasizmi?</p>
</Modal>

Natija: modal ichida istalgan kontent — komponent universal "idish"ga aylanadi.

Function props — boladan otaga

Props pastga oqadi; bola otaga "xabar berishi" uchun ota funksiya uzatadi, bola uni chaqiradi:

function App() {
  const ochirish = (id) => console.log("O'chirildi:", id);
  return <Element id={7} onDelete={ochirish} />;
}

function Element({ id, onDelete }) {
  return <button onClick={() => onDelete(id)}>O'chirish</button>;
}

Natija: tugma bolada, lekin qaror otada — state qayerda bo’lsa, uni o’zgartiruvchi funksiya ham o’sha yerda.

Tipik xato. State’ni bolaga ko’chirib olishga urinish. Ro’yxat App’da tursa, o’chirish funksiyasi ham App’da yoziladi va props orqali tushiriladi — aks holda komponentlar bir-biridan bexabar qoladi.

React Portal

Portal komponentni DOM’ning boshqa joyiga (odatda body ostidagi alohida elementga) chizadi — modal va bildirishnomalar ota konteynerning overflow/z-index cheklovlaridan qutuladi. Yozilishi: createPortal(jsx, document.getElementById("modals")).

Amaliyot

1. Kurs kartasini alohida komponentga ajratib, uchta har xil props bilan chaqiring.
2. Card nomli universal idish yasang: children orqali istalgan kontent qabul qilsin.
3. Ro’yxat elementini alohida komponentga chiqaring: o’chirish tugmasi function props orqali otaga xabar bersin.
4. Fragment ishlatib, komponentdan ortiqcha div’larni olib tashlang — DevTools’da DOM tozalanganini ko’ring.

Modul testini ishlang — keyingi modul komponentlarga uslub berish yo’llari.