React nima va nega: deklarativ UI, UI = f(state) va komponent modeli

Qisqacha: React — interfeysni holatdan (state) yasaydigan JavaScript kutubxonasi. Siz har holat uchun ekran qanday ko'rinishini yozasiz, holat o'zgarganda DOM'ni React o'zi yangilaydi — faqat o'zgargan joyini. Bu g'oya qisqa yoziladi: UI = f(state). Bepul emas: bizning vazifalar ilovasida brauzer yuklaydigan kod 14.3 KB dan 83.2 KB ga (gzip) o'sdi, evaziga kod tartibli bo'ldi va bitta qator o'zgarganda ekran 2.4–4 marta tezroq yangilanadi.

Bu darsda

• "UI = f(state)" nimani anglatishini o'z render() funksiyangiz misolida tushuntira olasiz.
• Bitta kichik interfeysni vanilla JS va React'da yonma-yon o'qib, farqini ayta olasiz.
• Komponent nima ekanini va interfeys qanday komponentlar daraxtiga bo'linishini bilasiz.
• React nima beradi va nima oladi — o'lchangan raqamlar bilan aytib bera olasiz.
• React qachon kerak emasligini va 2026-yilda React atrofida qanday asboblar borligini bilasiz.

Oldin bilishingiz kerak: Holatdan UI chizish: state → render, FP g'oyalari va deklarativ uslub, Vite I: nega tez va loyiha yaratish, Web Components'ga kirish.

1. Nega bu kerak?

knip darsida 16-qism tugadi. vazifalar v6 — Vite, TypeScript, ESLint va 159 ta brauzer tekshiruvi bilan tayyor ilova. Uni siz o'zingiz, qadamma-qadam qurdingiz.

Endi src/render.ts faylini ochib ko'ring. Uning markazida mana bu funksiya turibdi:

export function render(): void {
  royxat.replaceChildren(...korinadiganlar().map(qatorYasa));
  boshXabarniYoz();
  qidiruvniYoz();
  filtrTugmalariniYoz();
  hisobniYoz();
  teglarniYoz();
  aloqaniYoz();
}

Har holat o'zgarishidan keyin shu chaqiriladi. Birinchi qator butun ro'yxatni o'chirib, qaytadan yasaydi. Qolgan oltitasi ekranning boshqa bo'laklarini qo'lda yangilaydi. Bitta vazifaning katagini belgilasangiz ham — 1 000 ta qator noldan quriladi.

Bu ishlaydi. Lekin ikki muammo bor va ikkalasini state → render darsida o'zingiz ko'rgansiz. Birinchisi — narx: qayta yasalgan qator fokusni va brauzer eslab turgan narsalarni yo'qotadi. Shuning uchun render.ts da fokusla(), tahrirMaydoni() kabi "tiklovchi" funksiyalar paydo bo'lgan. Ikkinchisi — tartib: yangi bo'lak qo'shsangiz, yana bitta ...niYoz() yozishni unutmaslik kerak.

Jasur aka «Bahor» uchun yangi buyurtma ekranini so'radi. Sardor uni React'da yozmoqchi. "Nega? Vanilla'da ham bo'ladi-ku," deydi Jasur aka. Bu dars — shu savolga halol javob: React nima beradi, nima oladi va qachon umuman kerak emas.

Hayotiy o'xshatish: oshxonadagi menyu taxtasi. Har kuni ertalab bo'r bilan narxlarni o'chirib qayta yozish mumkin (replaceChildren). Yoki elektron taxta: siz faqat jadvalni yangilaysiz, taxta qaysi raqam o'zgarganini o'zi topib, faqat o'shani almashtiradi. React — o'sha elektron taxta.

2. Siz buni allaqachon bilasiz: UI = f(state)

2.1 Formula

state → render darsidagi qoida: ma'lumot bitta joyda — holatda, ekran esa undan chiziladi. Matematikadagidek yozsak:

UI = f(state)
ekran = render(holat)

f — funksiya. Unga holat beriladi, u ekran qanday ko'rinishini qaytaradi. Bir xil holat — doim bir xil ekran. Bu toza funksiya g'oyasi: natija faqat kirishga bog'liq.

React'ning hamma narsasi shu formulaga qurilgan. Siz f ni yozasiz — u komponent deyiladi. Holat o'zgarganda React f ni yana chaqiradi va ekranni yangi natijaga moslaydi.

2.2 Holat o'zgaradi — ekran ergashadi

«Bahor»ning buyurtma ekrani: osh soni va jami narx. Holat — bitta son (soni). Mijoz "+" ni ikki marta, "−" ni bir marta bosdi:

E'tibor bering: "Jami" holatda yo'q. U har safar soni * 35000 dan hisoblanadi. "−" ning o'chiq-yoqiqligi ham holatdan kelib chiqadi (soni === 0). Holatda faqat haqiqatan o'zgaradigan narsa turadi, qolgani — undan hisoblanadi. Bu jadvalni bundan keyin har yangi React mavzusida chizamiz.

Tekshirib ko'ring: Jadvalga yana bir qator qo'shing: "−" yana bir marta bosildi. Ekranda nima bo'ladi?

3. Bitta UI — ikki usulda

3.1 Vanilla: holat va render()

Avval tanish yo'l. Quyidagi blok — oddiy JavaScript, React yo'q. 09-qismdagi qolip: holat obyekti, render() va tugmalarda "holatni o'zgartir → render()". «Ishga tushir» ni bosib, natija oynasida tugmalarni o'zingiz bosib ko'ring:

// Vanilla: holat + render() — 09-qismdagi qolip
const ildiz = document.getElementById("root");
const holat = { soni: 0 };

// 1) Elementlarni qo'lda yasaymiz
const sanoq = document.createElement("p");
const jami = document.createElement("p");
const minus = document.createElement("button");
const plus = document.createElement("button");
minus.textContent = "−";
plus.textContent = "+";

// 2) render() — har elementga QANDAY o'zgarishni aytamiz
function render() {
  sanoq.textContent = `Osh: ${holat.soni} ta`;
  jami.textContent = `Jami: ${holat.soni * 35000} so'm`;
  minus.disabled = holat.soni === 0;
}

// 3) Hodisa → holat → render()
minus.addEventListener("click", () => {
  holat.soni = holat.soni - 1;
  render();
});
plus.addEventListener("click", () => {
  holat.soni = holat.soni + 1;
  render();
});

const tugmalar = document.createElement("div");
tugmalar.append(minus, plus);
ildiz.append(sanoq, jami, tugmalar);
render();

"+" ikki marta bosilgandan keyin ekranda (ikki tugma matni yonma-yon — −+):

Osh: 2 ta
Jami: 70000 so'm
−+

Kod yaxshi. Lekin uch xil ish aralash: elementlarni yasash, ularni bog'lash (append) va har birini yangilash. render() ichida har element uchun alohida buyruq bor: "textContent ni shunga o'zgartir", "disabled ni bunga". Yangi element qo'shsangiz — uni uch joyda yozasiz.

3.2 React: ekran qanday ko'rinishini yozamiz

Endi o'sha UI React'da:

import { useState } from "react";

function App() {
  // Holat: soni — joriy qiymat, setSoni — uni o'zgartirish
  const [soni, setSoni] = useState(0);

  // Holatdan ekran: "shu holatda ekran MANA BUNDAY"
  return (
    <>
      <p>Osh: {soni} ta</p>
      <p>Jami: {soni * 35000} so'm</p>
      <div>
        <button
          disabled={soni === 0}
          onClick={() => setSoni(soni - 1)}
        >
          −
        </button>
        <button onClick={() => setSoni(soni + 1)}>+</button>
      </div>
    </>
  );
}

Ekranda — aynan o'sha:

Osh: 2 ta
Jami: 70000 so'm
−+

Bu yerda uchta yangi narsa bor. Hammasini keyingi darslarda chuqur o'rganamiz, hozir faqat o'qib tushunish yetarli:

• JSX — JavaScript ichidagi HTML'ga o'xshash yozuv: <p>Osh: {soni} ta</p>. Jingalak qavs {} ichida — oddiy JavaScript ifoda. Brauzer JSX'ni tushunmaydi — Vite uni oddiy funksiya chaqiruvlariga o'giradi (Transpilyatsiya darsidagi Oxc). Batafsil — JSX I.
• useState(0) — React'dan holat so'rash: boshlang'ich qiymat 0. U ikki narsa qaytaradi: joriy qiymat (soni) va uni o'zgartiradigan funksiya (setSoni). Batafsil — useState.
• onClick={...} — addEventListener("click", ...) ning React'dagi shakli (Hodisalar).

render() qayerda? Yo'q — uni React chaqiradi. setSoni(1) deganingizda React App funksiyasini yangi soni bilan qayta chaqiradi, natijani eskisi bilan solishtiradi va DOM'da faqat farqni o'zgartiradi.

3.3 Yonma-yon

Bu — imperativ va deklarativ uslub farqi. FP g'oyalari darsidagi taksi o'xshatishini eslang. Imperativ: "300 metr to'g'riga, svetofordan chapga" — ya'ni qanday qilish. Deklarativ: "Chilonzor, 9-kvartal" — ya'ni nima kerak. Vanilla render() — imperativ: "textContent ni o'zgartir, disabled ni o'zgartir". JSX — deklarativ: "soni 2 bo'lsa, ekran mana bunday". Yo'lni React o'zi topadi.

Tekshirib ko'ring: Vanilla variantda render() dagi minus.disabled = … qatorini o'chirsak nima bo'ladi? React variantida disabled={…} ni o'chirsak-chi?

4. React DOM'ni qanday yangilaydi

4.1 Butunlay emas — faqat farqini

«Bitta UI — ikki usulda» bo'limidagi vanilla render() aqlli edi: elementlarni bir marta yasab, faqat matnini o'zgartirdi. vazifalar dagi render() esa oddiyroq yo'l tutadi — har safar replaceChildren bilan hammasini qayta yasaydi. React qaysi yo'lni tutadi? Tekshirib ko'ramiz.

Avval vanilla, replaceChildren bilan. "+" bosilishidan oldin birinchi <p> ni eslab qolamiz, keyin "Tekshir" tugmasi u hali sahifadami (isConnected) — so'raydi:

const ildiz = document.getElementById("root");
const holat = { soni: 1 };
let eskiP = null;

const plus = document.createElement("button");
plus.textContent = "+";
const tekshir = document.createElement("button");
tekshir.textContent = "Tekshir";

function render() {
  const p = document.createElement("p"); // har safar YANGI
  p.textContent = `Osh: ${holat.soni} ta`;
  ildiz.replaceChildren(p, plus, tekshir);
}

plus.addEventListener("click", () => {
  eskiP = ildiz.querySelector("p"); // o'lchov uchun
  holat.soni = holat.soni + 1;
  render();
});
tekshir.addEventListener("click", () => {
  console.log("Eski <p> sahifadami?", eskiP.isConnected);
});
render();

Konsolda:

Eski <p> sahifadami? false

Eski <p> sahifadan chiqib ketdi — o'rniga yangisi yasaldi. Endi React:

import { useState } from "react";

let eskiP = null;

function App() {
  const [soni, setSoni] = useState(1);
  return (
    <>
      <p>Osh: {soni} ta</p>
      <button
        onClick={() => {
          eskiP = document.querySelector("p"); // o'lchov uchun
          setSoni(soni + 1);
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          console.log("Eski <p> sahifadami?", eskiP.isConnected);
        }}
      >
        Tekshir
      </button>
    </>
  );
}

Konsolda:

Eski <p> sahifadami? true

Biz JSX'da "hammasini qayta" yozdik. Lekin React o'sha <p> ni saqlab qoldi va faqat ichidagi matnni almashtirdi. Bu jarayon:

flowchart TD
  A["Hodisa: + bosildi"] --> B["setSoni(2)"]
  B --> C["React App() ni qayta chaqiradi"]
  C --> D["Yangi JSX: Osh: 2 ta"]
  D --> E{"Eski natija bilan solishtirish"}
  E -->|"farq: matn"| F["DOM: faqat matn o'zgaradi"]
  E -->|"farq yo'q"| G["DOM'ga tegilmaydi"]

Diagrammadan ikki narsani oling. Birinchisi: React komponentni chaqirish (chizish — render) va DOM'ni o'zgartirishni ajratadi. Ikkinchisi: solishtirish uchun u oldingi natijani xotirada saqlaydi. Bu xotiradagi daraxtni ko'pincha "Virtual DOM" deyishadi. Uning ichki ishlashini Reconciliation va Fiber darsida (18-qism) ko'ramiz — hozir bilish shart emas.

4.2 Nega bu muhim

Element saqlansa, u bilan birga brauzer eslab turgan hamma narsa ham saqlanadi: fokus, kursor joyi, inputga yozilgan matn, scroll, ochilgan yashirin bo'limlar. Vanilla'da bularni fokusla() kabi funksiyalar bilan qo'lda tiklagan edik. React'da bu ish o'z-o'zidan bo'ladi.

Tekshirib ko'ring: Siz qidiruv maydoniga "osh" deb yozyapsiz, har harfda ro'yxat qayta chiziladi. Vanilla'da qidiruv maydoni ham replaceChildren ichida bo'lsa, nima bo'lardi?

5. Komponent modeli

5.1 Komponent — UI bo'lagini qaytaradigan funksiya

Komponent (component) — JSX qaytaradigan oddiy JavaScript funksiya. Nomi katta harf bilan boshlanadi. Uni HTML teg kabi ishlatasiz: <MenuCard />. Xuddi LEGO bo'lagi: bir marta yasaysiz, xohlagancha joyga qo'yasiz.

«Bahor» menyusi — bitta karta, uch marta:

function MenuCard({ name, price }) {
  return (
    <li>
      {name} — {price} so'm
    </li>
  );
}

function App() {
  return (
    <section>
      <h2>«Bahor» menyusi</h2>
      <ul>
        <MenuCard name="Osh" price={35000} />
        <MenuCard name="Lag'mon" price={28000} />
        <MenuCard name="Manti" price={30000} />
      </ul>
    </section>
  );
}

Ekranda:

«Bahor» menyusi
Osh — 35000 so'm
Lag'mon — 28000 so'm
Manti — 30000 so'm

name="Osh" va price={35000} — props: komponentga tashqaridan beriladigan qiymatlar, funksiyaning argumentlari kabi. MenuCard ularni bitta obyekt qilib oladi — { name, price } parametrda destructuring bilan. Batafsil — Props.

5.2 Ekran — komponentlar daraxti

Katta ilova shunday kichik bo'laklardan yig'iladi. «Bahor»ning buyurtma sahifasini qog'ozda bo'laklarga ajratsak:

flowchart TD
  App --> Sarlavha
  App --> Menu
  App --> Savat
  Menu --> K1["MenuCard: Osh"]
  Menu --> K2["MenuCard: Lag'mon"]
  Menu --> K3["MenuCard: Manti"]
  Savat --> Q["SavatQatori"]
  Savat --> J["Jami"]

Har to'rtburchak — bitta funksiya, o'z faylida. Bu DOM daraxti ga o'xshaydi, lekin bir pog'ona yuqorida: bitta MenuCard ichida bir nechta DOM elementi bo'lishi mumkin.

Web Components darsida ham "o'z tegimni yasash" bor edi — <dish-card>. G'oya o'xshash: interfeys bo'laklari. Farqi: Web Component — brauzer standarti, DOM elementi; React komponenti — funksiya, DOM'ni esa React o'zi boshqaradi. Ular birga ham ishlaydi: React 19 custom elementlarni to'liq qo'llab-quvvatlaydi.

Tekshirib ko'ring: vazifalar ning ekranini komponentlarga bo'lsangiz, qaysi bo'laklar chiqadi? Kamida to'rttasini ayting.

6. Halol taqqoslash: React nima beradi, nima oladi

Bu qismda vazifalar ni React'ga asta-sekin ko'chiramiz. Ilova bitta ham kunga to'xtamaydi. Biz uni ko'chirib bo'lib, ikkala versiyani bir xil mashinada o'lchadik. Raqamlar — haqiqiy.

6.1 Hajm: React bepul emas

Brauzer yuklaydigan JavaScript va CSS (xom va gzip):

Gzip bilan 69 KB qo'shildi — deyarli 6 barobar. Bu qo'shimchaning 84% i bitta paket: react-dom (DOM'ni solishtirib yangilaydigan qism). Ilova funksiyasi o'zgarmadi — 159 ta brauzer tekshiruvi ikkala versiyada ham o'tadi.

Bu narx ilova kattaligiga bog'liq emas — bu React'ning o'zi. Buni Vite'ning ikki shablonida ko'rdik: ikkalasida ham sahifada bitta sanoq tugmasi bor. vanilla-ts build'i — 4.49 KB JS (gzip 2.02), react-ts niki — 222.44 KB (gzip 69.28). Ilova katta bo'lgani sari bu "kirish narxi" umumiy hajmda kichrayib boradi.

Sekin internetda bu sezilarli. Lighthouse (mobil, sekinlashtirilgan tarmoq) Performance bahosi: v6 — 100, v7 — 98–99. Kichik pasayish, lekin bor. Bundle hajmini Vite V: production build darsidagi npm run analiz bilan o'zingiz ko'rasiz.

6.2 Tezlik: qayerda tez, qayerda sekin

1 000 ta vazifali ro'yxatda ikki ishni o'lchadik (Chrome 154, har ilova 3 seriya, har seriyada 15 o'lchov medianasi; ustunda — o'rtadagi seriya, izohda — uchala seriya oralig'i). Ikkalasi ham "+layout": JavaScript va brauzerning joylashtirish ishi birga:

• Bitta katak belgilansa — vanilla 1 000 qatorni noldan yasaydi, React esa bitta qatorni o'zgartiradi. React 2.4–4 barobar tez.
• Qidiruv 1 000 qatorni 112 taga qisqartiradi — deyarli hamma narsa o'zgaradi. Bu yerda React biroz sekinroq: avval solishtiradi, keyin baribir ko'p o'zgartiradi. Faqat JavaScript qismi: vanilla 11–13 ms, React 16–19 ms.

Ikkalasi ham bitta kadrdan (16 ms) uzoq emas — foydalanuvchi farqni sezmaydi. Xulosa: "React tez" ham, "React sekin" ham — yolg'on. React kam o'zgarishda tejaydi, ko'p o'zgarishda biroz qo'shimcha ish qiladi. Asosiy foydasi — tezlik emas, tartib.

6.3 Kod: qisqarmadi, lekin tartibli

Kutilmagan raqam: interfeys kodi qisqarmadi. Vanilla UI — 1 237 qator, React — 1 711 qator (izohlar bilan; mini-ilova darsi holatida). React kodni kamaytirish uchun emas. U boshqa narsa beradi:

Tekshirib ko'ring: Sardor: "React ilovani tezlashtiradi, shuning uchun o'tamiz" dedi. Raqamlarga qarab, bu gap qayerda to'g'ri, qayerda noto'g'ri?

7. Qachon React kerak EMAS

React — bolg'a. Lekin hamma narsa mix emas. Quyidagi holatlarda u ortiqcha:

Va aksincha — React o'zini oqlaydigan joylar ham bor. Birinchisi: holati ko'p, ekrani tez-tez o'zgaradigan ilova (savat, panel, chat, CRM). Ikkinchisi: bitta interfeys ustida bir nechta dasturchi ishlaydigan jamoa. Uchinchisi: veb va mobil (React Native) uchun bir xil bilim kerak bo'lganda.

vazifalar qaysi tomonda? Chegarada. Holati ko'p: filtr, qidiruv, tahrir, sinxronlash. Lekin bitta odam yozgan va vanilla'da yaxshi ishlagan. Biz uni React'ga ko'chiramiz, chunki maqsad — o'rganish va solishtirish. Ish joyida bunday qaror jamoa bilan, raqamlar bilan qabul qilinadi.

Diqqat: "React bilmasang, ish topolmaysan" — to'g'ri. "Hamma narsani React'da yoz" — noto'g'ri. Yaxshi dasturchi ikkalasini ham biladi va tanlay oladi. Siz vanilla'ni 08–16-qismlarda chuqur o'rgandingiz — bu katta ustunlik.

8. Kutubxona yoki framework

8.1 Farqi nimada

Kutubxona (library) — siz chaqiradigan kod. Siz boshqarasiz: qachon va qayerda ishlatishni o'zingiz hal qilasiz. Framework — sizning kodingizni o'zi chaqiradigan karkas: papka tuzilmasi, sahifalar, ma'lumot olish — hammasi uning qoidasi bilan.

O'xshatish: kutubxona — oshxonadagi yaxshi pichoq. Framework — tayyor oshxona: plita, stol, kim qayerda turishi belgilangan.

React o'zini kutubxona deydi: u faqat interfeysni chizadi. Sahifalar orasida o'tish (routing), serverdan ma'lumot olish, build — React'ga kirmaydi. Ularni boshqa asboblar beradi. Shu sababli "React ilova" deganda doim "React + nimadir" tushuniladi.

8.2 2026-yildagi React xaritasi

SPA (single-page application) — bitta HTML sahifa, qolganini JavaScript chizadigan ilova. vazifalar — aynan SPA.

React'ning rasmiy sayti (react.dev, "Creating a React App") yangi loyiha uchun framework tavsiya qiladi: Next.js (App Router), React Router (v7) va mobil uchun Expo. Framework'siz, noldan boshlash ham alohida yozilgan — Vite, Parcel yoki Rsbuild bilan. Biz shu yo'ldan boramiz. Sabab: framework'lar React ustiga qurilgan. Avval poydevorni bilish kerak.

Eski kodda uchratasiz: Create React App (npx create-react-app) — yillar davomida standart edi. React jamoasi uni 2025-yil 14-fevralda rasman to'xtatdi ("Sunsetting Create React App"). Yangi loyihada ishlatmang. Routing — 19-qismda, Next.js — 23-qismda.

9. React 2026-yilda

Raqamlar, manbasi va sanasi bilan:

• Stack Overflow Developer Survey 2025: veb-freymvork va texnologiyalar ichida React'ni so'rovnoma qatnashchilarining 44.7% i ishlatadi (professionallarda 46.9%). Undan oldinda faqat Node.js (48.7%) — u esa umuman boshqa narsa, server muhiti. Vue.js — 17.6%, Angular — 18.2%.
• npm yuklanishlari (api.npmjs.org, 2026-10-05 … 10-11 haftasi):

Yuklanish soni — foydalanuvchi soni emas. Ko'p yuklanishni CI serverlar va boshqa paketlarning bog'liqligi beradi. Lekin farq o'n barobar — tendensiya aniq.

• Versiya: joriy barqaror — React 19.3.0 (2026-09-09). React 19 2024-yil 5-dekabrda chiqqan, 19.2 — 2025-yil 1-oktabrda. 19.3 da <ViewTransition> va Fragment ref'lar barqaror bo'ldi, Trusted Types qo'llab-quvvatlandi (XSS va Trusted Types — vazifalar da bor). Bu qismda 19.3.0 ishlatamiz.
• Kimniki: React'ni Meta (Facebook) 2013-yilda ochiq kodli qilgan. 2025-yil 7-oktabrda React Foundation e'lon qilindi, 2026-yil 24-fevraldan React Linux Foundation qoshidagi shu fondda. Ya'ni endi u bitta kompaniyaning emas.
• React Compiler 1.0 (2025-10-07) — kodni avtomatik optimallashtiradigan asbob. Uni 18-qismda ko'ramiz; bu qismda kompilyatorsiz yozamiz.

10. Ko'p uchraydigan xatolar

10.1 Komponent nomi kichik harf bilan

function menuCard() {
  return <p>Osh — 35000 so'm</p>;
}

function App() {
  return <menuCard />;
}

Konsolda:

<menuCard /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
The tag <menuCard> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Ekranda hech narsa yo'q. Tarjima: "<menuCard /> harflari noto'g'ri. React komponentlari uchun PascalCase (har so'z katta harf bilan), HTML elementlari uchun kichik harf ishlating." Ikkinchi xabar: "Bu brauzer <menuCard> tegini tanimaydi. React komponentini nazarda tutgan bo'lsangiz, nomini katta harf bilan boshlang." Nega: JSX'da kichik harfli teg — HTML teg (<p>, <li>), katta harfli — komponent. React menuCard ni brauzerga teg sifatida berdi. Tuzatish: MenuCard.

10.2 Holatni oddiy o'zgaruvchida saqlash

Vanilla odati bilan yozilgan kod:

function App() {
  let soni = 0; // ❌ oddiy o'zgaruvchi
  return (
    <>
      <p>Osh: {soni} ta</p>
      <button onClick={() => { soni = soni + 1; }}>+</button>
    </>
  );
}

Ikki marta bosilgandan keyin ham ekranda:

Osh: 0 ta
+

Xato xabari yo'q — shuning uchun xavfli. soni haqiqatan 2 bo'ldi, lekin React buni bilmaydi: u faqat setSoni kabi chaqiruvdan keyin qayta chizadi. Qayta chizganda ham let soni = 0 yana 0 bo'lardi. Qoida: ekranga ta'sir qiladigan qiymat — useState da (useState darsida chuqur).

10.3 React DOM'ini qo'lda o'zgartirish

React chizgan elementga textContent yoki append bilan tegish — vanilla odati. React o'z xotirasidagi daraxtni haqiqat deb hisoblaydi. Keyingi chizishda u siz qo'shganni o'chirib yuborishi yoki xato berishi mumkin. Qoida: React boshqaradigan joyda o'zgarish faqat holat orqali. DOM'ga to'g'ridan-to'g'ri kerak bo'lganda (fokus, o'lcham) — ref'lar bor.

10.4 "React — tez, demak hamma joyda"

«Halol taqqoslash» bo'limidagi raqamlarni eslang: +69 KB va qidiruvda sekinroq. Texnologiya muammoga qarab tanlanadi, modaga qarab emas.

11. Mashqlar

Mashqlar uchun hech narsa o'rnatish shart emas — kodni shu sahifadagi «Ishga tushir» bilan sinang.

1-mashq (oson): render jadvali

Choyxonada ko'k choy hisoblagichi bor: holat — choy (boshlanishi 0), ekranda "Ko'k choy: N ta" va "Jami: N × 5000 so'm". Mijoz "+" ni uch marta, "−" ni bir marta bosdi. Oxirgi qatorni to'ldiring:

2-mashq (o'rta): vanilla'dan React'ga

Quyidagi vanilla kodni React'ga ko'chiring. Yo'l-yo'riq: «React: ekran qanday ko'rinishini yozamiz» misolini namuna qiling — useState, JSX'da {…} ichida hisob, onClick.

const ildiz = document.getElementById("root");
const holat = { choy: 0 };
const matn = document.createElement("p");
const plus = document.createElement("button");
plus.textContent = "+";
function render() {
  matn.textContent =
    `Ko'k choy: ${holat.choy} ta — ${holat.choy * 5000} so'm`;
}
plus.addEventListener("click", () => {
  holat.choy = holat.choy + 1;
  render();
});
ildiz.append(matn, plus);
render();

"+" uch marta bosilgach ekranda:

Ko'k choy: 3 ta — 15000 so'm
+

import { useState } from "react";

function App() {
  const [choy, setChoy] = useState(0);
  return (
    <>
      <p>
        Ko'k choy: {choy} ta — {choy * 5000} so'm
      </p>
      <button onClick={() => setChoy(choy + 1)}>+</button>
    </>
  );
}

Ko'k choy: 3 ta — 15000 so'm
+

3-mashq (qiyin): ikki taom va umumiy hisob

Buyurtma ekrani: osh (35000) va ko'k choy (5000), har biriga o'z "+" tugmasi. Pastda — umumiy jami. Ikkita useState ishlating (bitta komponentda bir nechta useState bo'lishi mumkin). Tugmalarni farqlash uchun matni: "Osh +" va "Choy +". "Osh +" ikki marta, "Choy +" bir marta bosilsa, ekranda:

Osh: 2 ta
Ko'k choy: 1 ta
Jami: 75000 so'm
Osh +Choy +

Savol: "Jami" uchun uchinchi useState kerakmi?

import { useState } from "react";

function App() {
  const [osh, setOsh] = useState(0);
  const [choy, setChoy] = useState(0);
  // Hosilaviy qiymat — holat emas: har chizishda hisoblanadi
  const jami = osh * 35000 + choy * 5000;
  return (
    <>
      <p>Osh: {osh} ta</p>
      <p>Ko'k choy: {choy} ta</p>
      <p>Jami: {jami} so'm</p>
      <button onClick={() => setOsh(osh + 1)}>Osh +</button>
      <button onClick={() => setChoy(choy + 1)}>Choy +</button>
    </>
  );
}

Osh: 2 ta
Ko'k choy: 1 ta
Jami: 75000 so'm
Osh +Choy +

4-mashq: vazifalar ga nazar

Bugun vazifalar da kod o'zgarmaydi — birinchi React qadami keyingi darsda. Hozir src/render.ts ni oching va ikki savolga javob yozing: (1) qaysi funksiyalar React'da yo'qoladi? (2) qaysilari qoladi (masalan, holat.ts, saralash.ts)?

12. Real ishda

• Ish e'lonlari: O'zbekistonda ham, dunyoda ham frontend vakansiyalarining ko'pchiligida "React" talab qilinadi. Bu qism — shu talabning poydevori.
• Intervyu savollari: "React nima va nega kutubxona deyiladi?", "Deklarativ va imperativ farqi?", "Virtual DOM nima beradi?", "React'ni qachon ishlatmaslik kerak?". Oxirgisiga raqamlar bilan javob bergan nomzod ajralib turadi.
• Mavjud loyihalar: ko'p kompaniyada eski vanilla yoki jQuery sahifalar React'ga asta-sekin ko'chiriladi — bitta "orol"dan boshlab. Keyingi darsda vazifalar da aynan shunday boshlaymiz.
• Bilim ko'chadi: React Native (mobil), Next.js (server), Electron (desktop) — hammasi o'sha komponent modeli.

Xulosa

• UI = f(state): komponent — holatdan ekran yasaydigan funksiya; holat o'zgarsa, React uni qayta chaqiradi.
• Vanilla'da "qanday" yangilashni yozasiz (imperativ), React'da "nima" ko'rinishini (deklarativ).
• React DOM'ni butunlay qayta yasamaydi — eski natija bilan solishtirib, faqat farqni o'zgartiradi; elementlar, fokus va input matni saqlanadi.
• Komponent — katta harfli funksiya; ekran — komponentlar daraxti; props — komponentga beriladigan qiymatlar.
• Narxi: vazifalar da +69 KB gzip (14.3 → 83.2 KB). Bitta qator o'zgarsa React 2.4–4 barobar tez, ko'p qator o'zgarsa biroz sekin.
• React — kutubxona; atrofida Vite (SPA), Next.js, React Router, TanStack Start. Oddiy sahifaga React kerak emas.

Keyingi dars: Birinchi React loyiha: Vite shabloni ichida nima bor — npm create vite bilan React loyiha yaratamiz, har faylni o'qiymiz va vazifalar ga birinchi React "orolini" qo'shamiz.

Manbalar

• React hujjatlari: "Thinking in React", "Describing the UI", "Creating a React App", "Build a React app from Scratch" — react.dev/learn
• React blogi: "React 19.3" (2026-09-09), "Introducing the React Foundation" (2025-10-07), "The React Foundation: A New Home for React" (2026-02-24), "Sunsetting Create React App" (2025-02-14) — react.dev/blog
• Stack Overflow Developer Survey 2025, "Technology → Web frameworks and technologies" — survey.stackoverflow.co/2025
• npm yuklanish statistikasi — api.npmjs.org/downloads/point/last-week/react