React nima va nega kerak

DOM’ni o’zgartirish va element yaratish darslarida sahifani qo’lda boshqardingiz. Kichik sahifada bu ishlaydi. Lekin ilova o’sganda qo’lda boshqarish sekin-asta boshqarib bo’lmaydigan holga keladi. React aynan shu muammoni hal qilish uchun yaratilgan.

Muammo: ekran ma’lumotdan ajralib qoladi

Vazifalar ro’yxatini olaylik. Ma’lumot massivda turadi, ekranda <ul> ichida ko’rinadi. Sarlavhada esa “Bajarilmagan: 3” yozuvi bor.

const tasks = [
  { id: 1, title: "Non olish", isDone: false },
  { id: 2, title: "Kitob o'qish", isDone: false },
];

Endi foydalanuvchi yangi vazifa qo’shsa, siz uchta joyni qo’lda yangilashingiz kerak:

// 1. Ma'lumotni yangilash
tasks.push({ id: 3, title: "Xat yozish", isDone: false });

// 2. Ekranga yangi element qo'shish
const item = document.createElement("li");
item.textContent = "Xat yozish";
document.querySelector("#taskList").append(item);

// 3. Hisoblagichni yangilash
const activeCount = tasks.filter((task) => !task.isDone).length;
document.querySelector("#counter").textContent = `Bajarilmagan: ${activeCount}`;

Uchinchi qatorni yozishni unutsangiz, ekranda “Bajarilmagan: 2” turaveradi — ro’yxatda esa uchta vazifa. Ekran ma’lumotdan ajralib qoladi.

Vazifani o’chirish, bajarilgan deb belgilash, filtrlash qo’shilsa, har amal uchun shu uch qadam qayta yoziladi. Bitta unutilgan yangilanish — bitta xato.

Yechim: qanday emas, qanday ko’rinishini yozish

React’da siz DOM’ga buyruq bermaysiz. Uning o’rniga natija qanday ko’rinishini tasvirlaysiz:

function TaskList({ tasks }) {
  const activeCount = tasks.filter((task) => !task.isDone).length;

  return (
    <div>
      <p>Bajarilmagan: {activeCount}</p>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
}

Bu kodda createElement, append, textContent yo’q. Siz faqat “tasks shunday bo’lsa, ekran mana shunday ko’rinadi” deb yozdingiz.

tasks o’zgarganda React o’zi ishga tushadi: yangi ko’rinishni hisoblaydi, eskisi bilan solishtiradi va DOM’da faqat farqni o’zgartiradi. Hisoblagich activeCount dan hisoblanadi, demak uni yangilashni unutish imkonsiz.

Farqni jadvalda ko’ring:

Savol	Qo’lda DOM	React
Ekranni kim yangilaydi	Siz	React
Nechta joyni o’zgartirasiz	Har bog’liq joyni	Faqat ma’lumotni
Yangilashni unutish mumkinmi	Ha	Yo’q
Ma’lumot va ekran mosligi	Siz kafolatlaysiz	React kafolatlaydi
Kod hajmi (katta ilovada)	Ko’p	Kam

Komponent — qayta ishlatiladigan bo’lak

React’ning ikkinchi asosiy g’oyasi — komponent. Sahifani bitta katta HTML sifatida emas, mustaqil bo’laklardan yig’ilgan tuzilma sifatida ko’rasiz.

Vazifalar ilovasi shunday bo’linadi:

App
├── TaskForm      — yangi vazifa qo'shish formasi
├── Filter        — hammasi / faol / bajarilgan
└── TaskList      — ro'yxat
    └── TaskItem  — bitta vazifa qatori

Har bo’lak alohida faylda turadi va mustaqil tushunarli. TaskItem da xato bo’lsa, siz o’sha bitta faylni ochasiz — 500 qatorli fayl bo’ylab qidirmaysiz.

Bu modullar darsidagi g’oyaning ko’rinish tomoniga tarqatilishi: funksiyani fayllarga bo’lganingiz kabi, endi interfeysni ham bo’laklarga bo’lasiz.

React kutubxonami yoki framework

Qisqa javob: kutubxona. React faqat bitta ishni bajaradi — ma’lumotdan ko’rinish hosil qiladi.

React quyidagilarni o’z ichiga olmaydi:

• sahifalar orasida o’tish (routing);
• serverga so’rov yuborish qoidalari;
• forma tekshirish;
• loyiha papkalari tuzilishi.

Bularning har biri uchun alohida yechim tanlanadi. Erkinlik ko’p, lekin qaror ham ko’p — boshlovchini chalkashtiradigan joy aynan shu.

React sizga nima beradi

Amalda uch narsa:

1. Ma’lumot va ekran doim mos — bitta manba, avtomatik yangilanish.
2. Kod bo’laklarga bo’linadi — har komponent alohida o’qiladi va qayta ishlatiladi.
3. JavaScript bilimi kifoya — map, filter, destructuring, arrow funksiya. Yangi til emas, siz bilgan JavaScript.

massiv metodlari va ES6 sintaksis darslarini yaxshi bilsangiz, React’ning yarmini allaqachon bilasiz.

Bu bo’limda kod qanday beriladi

React kodi brauzerda to’g’ridan-to’g’ri ishlamaydi — uni avval oddiy JavaScript’ga o’girish kerak. Shuning uchun bu bo’limda saytda kod ishga tushiradigan tugma bo’lmaydi.

Uning o’rniga har namunadan keyin ekranda nima ko’rinishi yoziladi. Kodni o’z loyihangizga ko’chirib, brauzerda tekshirasiz — loyihani keyingi darsda yaratasiz.

Amaliy mashq

Kod yozilmaydi, hozircha muammoni his qilish muhim:

1. JavaScript yakuniy loyihasi darsidagi vazifalar ilovasini oching va DOM’ni o’zgartiradigan qatorlarni sanang.
2. O’sha kodda “ma’lumot o’zgardi, endi ekranni yangilash kerak” degan joylarni belgilang — nechta ekan?
3. Tasavvur qiling: ilovaga “tanlanganlarni o’chirish” tugmasi qo’shilyapti. Qaysi joylarni qo’lda yangilash kerak bo’ladi?
4. Sevimli saytingizni oching va uni komponentlarga bo’ling: sarlavha, qidiruv, kartochka, pastki qism. Kamida beshta bo’lak toping.
5. Bitta kartochkani tanlang va unga qanday ma’lumot kirishini yozing (rasm, nom, narx). Bu keyingi darslardagi props ga tayyorgarlik.
6. Node.js o’rnatilganini tekshiring: terminalda node --version bering, raqam chiqishi kerak.

1-va 2-qadamlar eng muhimi: React nimani hal qilishini o’z kodingizda ko’rmasangiz, uning foydasi mavhum bo’lib qoladi.

Qisqacha xulosa

• Qo’lda DOM boshqarishda ma’lumot o’zgarganda bog’liq joylarning hammasini yangilash kerak — bitta unutilgan joy xatoga olib keladi.
• React deklarativ: siz natija qanday ko’rinishini yozasiz, DOM’ni yangilashni React bajaradi.
• Ma’lumot yagona manba — ekran har doim undan hisoblanadi, shuning uchun ular bir-biridan ajralmaydi.
• Komponent — ko’rinish bo’lagini qaytaradigan funksiya; ilova ichma-ich joylashgan komponentlardan yig’iladi.
• React — kutubxona, framework emas: routing, so’rov va forma tekshirish uning ichida yo’q.
• React yangi til emas — map, filter, arrow funksiya va destructuring bilimingiz to’g’ridan-to’g’ri ishlaydi.

Keyingi darsda React o’rnatish va Vite bilan birinchi ilova — loyihani yaratib, brauzerda ishga tushirasiz.