React

React nima?

Agar siz JavaScript'ni yaxshi bilsangiz, React — sizning keyingi qadamingiz bo'lishi mumkin. React — bugungi kunda frontend dunyosining eng mashhur vositalaridan biri. U yordamida oddiy tugmadan tortib, butun boshli katta ilovagacha qurish mumkin. Ushbu bobda biz React'ni JavaScript bilgan kishi nuqtai nazaridan, nol darajadan boshlab o'rganamiz.

React nima va u nima uchun kerak?

React — bu Facebook (hozirgi Meta) tomonidan yaratilgan, foydalanuvchi interfeysini (User Interface, qisqacha UI) qurish uchun mo'ljallangan JavaScript kutubxonasi. Bu yerda "kutubxona" so'ziga e'tibor bering — React o'zini freymvork emas, aynan kutubxona deb ataydi.

Nima uchun bu ajratish muhim? Oddiy JavaScript va DOM bilan katta ilova yozganingizda, quyidagi muammoga duch kelasiz: interfeysning har bir bo'lagini qo'lda yangilashingiz kerak. Foydalanuvchi biror tugmani bosdi — siz document.querySelector orqali kerakli elementni topib, uning matnini o'zgartirasiz, boshqa element ko'rinishini yashirasiz, ro'yxatga yangi element qo'shasiz. Ilova o'sgani sari, bu qo'lda boshqaruv chalkash va xatolarga to'la bo'lib ketadi.

React ushbu muammoni tubdan boshqacha hal qiladi. Siz DOM'ni qo'lda o'zgartirmaysiz. Buning o'rniga, siz React'ga: "Ma'lumot shu holatda bo'lsa, ekran shunday ko'rinishi kerak" deb aytasiz. Qolganini React o'zi bajaradi.

Deklarativ yondashuv

React'ning asosiy g'oyasi — deklarativlik (declarative). Buni tushunish uchun ikki yondashuvni solishtiramiz:

Masalan, oddiy DOM'da hisoblagich tugmasini yozish imperativ ko'rinishga ega:

// Oddiy DOM — imperativ
let count = 0;
const tugma = document.querySelector("#tugma");
const matn = document.querySelector("#matn");

tugma.addEventListener("click", () => {
  count = count + 1;
  matn.textContent = count; // DOM'ni qo'lda yangilaymiz
});

React'da esa siz faqat "holat qanday bo'lsa, ekran shunday ko'rinadi" deb tasvirlaysiz. DOM'ni yangilashni butunlay React o'z zimmasiga oladi (bunga keyingi darslarda batafsil qaytamiz).

Deklarativlik — bu React falsafasining o'zagi. "Nima qilishni emas, nima ko'rinishini yozing" — bu jumlani esda saqlab qoling.

Komponentga asoslangan tuzilma

React'da butun interfeys komponentlardan (components) quriladi. Komponent — bu interfeysning mustaqil, qayta ishlatiladigan bo'lagi. Tugma, forma, navigatsiya paneli, izohlar ro'yxati — bularning har biri alohida komponent bo'lishi mumkin.

Katta ilova esa shu komponentlarning birlashmasidan iborat bo'ladi — xuddi Lego bo'laklaridan qurilgan konstruksiya kabi:

Masalan, oddiy ilova komponentlar daraxti sifatida tasavvur qilinadi:

App
 |- Header
 |    |- Logo
 |    |- Navbar
 |- Main
 |    |- PostList
 |         |- Post
 |         |- Post
 |- Footer
Komponent — bu shunchaki JavaScript funksiyasi. Agar siz funksiyalarni bilsangiz, komponentlarni ham tez tushunasiz. Bu haqda keyingi darsda batafsil gaplashamiz.

Virtual DOM

React'ning tezligi ortida Virtual DOM texnologiyasi turadi. Uni tushunish uchun avval muammoni ko'raylik: haqiqiy DOM (brauzerdagi HTML elementlar daraxti) bilan ishlash sekin. Har safar DOM'ni o'zgartirganda, brauzer sahifani qayta hisoblab, qayta chizishi kerak bo'ladi.

React esa hiyla ishlatadi. U xotirada haqiqiy DOM'ning yengil nusxasini — Virtual DOMni (oddiy JavaScript obyektlaridan iborat daraxt) saqlaydi. Jarayon shunday kechadi:

  1. Ma'lumot (holat) o'zgaradi;
  2. React yangi Virtual DOM daraxtini tuzadi;
  3. Uni eski Virtual DOM bilan solishtiradi — bu jarayon reconciliation (moslashtirish) deb ataladi;
  4. Faqat o'zgargan qismlarni aniqlaydi;
  5. Haqiqiy DOM'da faqat shu farqlarnigina yangilaydi — boshqa hech narsaga tegmaydi.

Natijada, siz butun ekranni qayta chizganingizda ham, React aslida haqiqiy DOM'ning faqat kerakli bo'lagini yangilaydi. Bu esa ilovani tez va samarali qiladi.

Siz Virtual DOM bilan to'g'ridan-to'g'ri ishlamaysiz — u "kaputning ostida" ishlaydi. Lekin nima uchun React tez ekanini bilish foydali.

SPA — bir sahifali ilova

React ko'pincha SPA (Single Page Application — bir sahifali ilova) qurish uchun ishlatiladi. Bu tushunchani an'anaviy saytlar bilan solishtiramiz:

React'ning deklarativ va komponentga asoslangan tabiati aynan SPA qurish uchun juda qulay. Shu sababli u web-ilovalar (Gmail, Facebook, Trello va shu kabilar) yaratishda keng qo'llaniladi.

Nega React shunchalik mashhur?

React frontend dunyosining eng mashhur vositasi bo'lib qolishining bir necha sabablari bor:

React'ni o'rnatish (Vite bilan)

React ilovasini noldan qo'lda sozlash murakkab. Shuning uchun tayyor asboblardan foydalanamiz. Bugungi kunda eng tez va zamonaviy vosita — Vite ("vit" deb o'qiladi). U yordamida yangi React loyihasini bir necha soniyada yaratish mumkin.

Loyihani yaratish uchun terminalda quyidagi buyruqni yozamiz (Node.js o'rnatilgan bo'lishi kerak):

npm create vite@latest my-app

Vite sizga bir necha savol beradi: qaysi freymvork (React'ni tanlaymiz) va qaysi variant (JavaScript yoki TypeScript). Tanlab bo'lgach, loyiha papkasiga kirib, bog'liqliklarni (dependencies) o'rnatamiz:

cd my-app
npm install
npm run dev

So'nggi buyruq mahalliy serverni ishga tushiradi (odatda http://localhost:5173 manzilida). Brauzerda ushbu manzilni ochsangiz, React ilovangiz ishlayotganini ko'rasiz.

Ilgari create-react-app vositasi mashhur edi, lekin u sekin va eskirgan hisoblanadi. Yangi loyihalarda Vite ishlatish tavsiya etiladi — u ancha tez.
Vite ishlab chiqish jarayonida HMR (Hot Module Replacement) beradi: kodni o'zgartirib saqlaganingizda, brauzer avtomatik yangilanadi — sahifani qo'lda qayta yuklash shart emas.

Xulosa