React asoslari — konspekt

Bu modulda React’ning asosi o’rganildi: komponent, JSX, hodisalar, state va ro’yxatlar.

Komponent va JSX

React komponenti — JSX qaytaradigan oddiy funksiya:

function Salomlash() {
  const ism = "Aziza";
  return <h1>Salom, {ism}!</h1>;
}

Natija: sahifada "Salom, Aziza!" sarlavhasi.

JSX — JavaScript ichida HTML’ga o’xshab yoziladigan sintaksis. Qoidalari:

Komponent bitta ildiz element qaytaradi (kerak bo’lsa <div> yoki fragment bilan o’raladi);
class o’rniga className yoziladi (class — JS’ning band so’zi);
Jingalak qavs {} ichiga istalgan JS ifoda qo’yiladi: o’zgaruvchi, hisob, funksiya chaqiruvi;
Komponent nomi bosh harf bilan boshlanadi — kichik harfli teg oddiy HTML deb qabul qilinadi.

Events — hodisalar

function Tugma() {
  const bosildi = () => console.log("Bosildi!");
  return <button onClick={bosildi}>Bos</button>;
}

E’tibor: onClick={bosildi} — funksiyaning o’zi uzatiladi, onClick={bosildi()} emas (qavsli varianti render paytidayoq chaqirilib yuboradi).

State va useState

State — komponentning "xotirasi". Oddiy o’zgaruvchi o’zgarsa React sezmaydi; state o’zgarsa komponent qayta chiziladi:

import { useState } from "react";

function Hisoblagich() {
  const [son, setSon] = useState(0);
  return <button onClick={() => setSon(son + 1)}>Bosildi: {son}</button>;
}

Natija: har bosishda tugmadagi raqam bittaga oshadi.

useState(0) juftlik qaytaradi: joriy qiymat va uni yangilovchi funksiya (destructuring bilan olinadi).

Tipik xato. State’ni to’g’ridan-to’g’ri o’zgartirish: son++ yoki son = 5. Qiymat o’zgaradi-yu, React qayta chizmaydi — ekran eskiligicha qoladi. Yangilash faqat setSon(...) orqali.

Ro’yxatni chiqarish va o’chirish

Massiv map bilan JSX ro’yxatiga aylantiriladi; har elementga unikal key shart:

const [mevalar, setMevalar] = useState(["olma", "anor", "uzum"]);

<ul>
  {mevalar.map((meva) => (
    <li key={meva}>
      {meva}
      <button onClick={() => setMevalar(mevalar.filter((m) => m !== meva))}>
        x
      </button>
    </li>
  ))}
</ul>

Natija: uch elementli ro’yxat; x bosilganda o’sha element yo’qoladi.

O’chirish naqshiga e’tibor: massivdan splice bilan o’chirilmaydi — filter bilan yangi massiv yasab, state’ga beriladi. React’da mavjudni buzish emas, yangisini berish qoidasi ishlaydi.

Tipik xato. keyni unutish — konsolda "unique key prop" ogohlantirishi. Key React’ga qaysi element qaysi ekanini aytadi; usiz ro’yxat yangilanishlarida chalkashliklar bo’ladi.

Conditional Template — shartli ko’rsatish

{yuklanmoqda && <p>Yuklanmoqda...</p>}
{xato ? <p>Xatolik!</p> : <Royxat items={mevalar} />}

&& — shart bajarilsa ko’rsat; ternary — ikkidan birini tanla. JSX ichida if yozilmaydi, shu ikki shakl ishlatiladi.

Amaliyot

Ism va kasbingizni chiqaradigan komponent yozing — qiymatlar {} orqali o’zgaruvchidan kelsin.
Hisoblagich yasang: +1, -1 va Reset tugmalari bilan.
Vazifalar ro’yxatini map bilan chiqarib, har biriga o’chirish tugmasi qo’shing.
"Ro’yxat bo’sh" xabarini shartli ko’rsating: massiv bo’sh bo’lsagina chiqsin.

Modul testini ishlang — keyingi modul komponentlarni bo’lish va ular orasida ma’lumot uzatish.