React JS: Versiyalar orasidagi farq

React (ba'zan React.js yoki ReactJS deb ham ataladi) — foydalanuvchi interfeyslarini yaratish uchun mo'ljallangan ochiq manbali JavaScript kutubxonasi^[1]. U Meta Platforms (sobiq Facebook) va mustaqil ishlab chiquvchilar hamjamiyati tomonidan ishlab chiqiladi va qo'llab-quvvatlanadi^[2].

React komponentlarga asoslangan arxitektura va deklarativ yondashuv orqali murakkab foydalanuvchi interfeyslarini samarali yaratish imkonini beradi. Kutubxona Virtual DOM texnologiyasidan foydalanib, sahifani optimallashtirish orqali yuqori ishlash tezligini ta'minlaydi. React dunyo bo'ylab eng mashhur frontend kutubxonalaridan biri hisoblanadi va Facebook, Instagram, Netflix, Airbnb, WhatsApp kabi yirik platformalarda ishlatiladi.

React Facebookda dasturiy ta'minot muhandisi Jordan Valke tomonidan yaratilgan. Unga PHP uchun komponentga asoslangan HTML freymvorki bo'lgan XHP ta'sir ko'rsatgan^[3].

• 2011 — React birinchi marta Facebook yangiliklar lentasida ishlatilgan.

• 2012 — Instagramda joriy qilingan^[4].

• 2013-yil, may — «JSConf US» konferensiyasida ochiq manba sifatida e'lon qilingan.

• 2015-yil, mart — React Native ochiq manba sifatida chiqarilgan. Bu React yordamida Android va iOS uchun mobil ilovalar yaratish imkonini berdi.

• 2017-yil, aprel — React Fiber — React yadrosining to'liq qayta yozilgan versiyasi e'lon qilingan^[5]. Bu yangi arxitektura inkremental renderlash (incremental rendering) imkoniyatini taqdim etdi.

• 2019-yil, fevral — React 16.8 — Hooklar (Hooks) joriy qilingan. Bu React'da eng muhim o'zgarishlardan biri bo'lib, funksional komponentlarga holat (state) va hayotiy tsikl (lifecycle) imkoniyatlarini berdi^[6].

• 2022-yil, mart — React 18 — Concurrent rendering, avtomatik batching, useTransition, useDeferredValue hooklari va Suspense yaxshilangan^[7].

• 2024-yil, dekabr — React 19 — Server Componentlar, Server Actions, use() hooki, <form> uchun Actions, va yangilangan ref boshqaruvi joriy qilingan^[8].

React'da foydalanuvchi interfeysi mustaqil, qayta ishlatilishi mumkin bo'lgan komponentlarga bo'linadi. Har bir komponent o'zining mantiqiy va vizual qismini o'z ichiga oladi. Komponentlar ikki turda bo'ladi:

Funksional komponentlar (zamonaviy usul):

function Salomlash({ ism }) {

  return <h1>Salom, {ism}!</h1>;

}

Klass komponentlar (eski usul):

class Salomlash extends React.Component {

  render() {

    return <h1>Salom, {this.props.ism}!</h1>;

  }

}

React 16.8 dan boshlab funksional komponentlar hooklar bilan to'liq ishlash imkoniga ega bo'ldi va zamonaviy React ilovalarida asosiy yondashuv hisoblanadi.

JSX (JavaScript XML) — JavaScript sintaksisining kengaytmasi bo'lib, HTMLga o'xshash sintaksis yordamida interfeys tuzilishini tavsiflash imkonini beradi^[9]. JSX kompilyatsiya vaqtida oddiy JavaScript funksiya chaqiruvlariga aylantiriladi:

// JSX

const element = <h1 className="sarlavha">Salom dunyo!</h1>;

// Kompilyatsiyadan keyin

const element = React.createElement('h1', { className: 'sarlavha' }, 'Salom dunyo!');

React Virtual DOM texnologiyasidan foydalanadi. Bu haqiqiy DOM ning yengil JavaScript nusxasidir. Komponent holati o'zgarganda React:

1. Virtual DOM ning yangi versiyasini yaratadi.

1. Yangi va eski Virtual DOMni solishtiradi (diffing algoritmi).

1. Faqat o'zgargan qismlarni haqiqiy DOMga qo'llaydi (reconciliation).

Bu yondashuv to'g'ridan-to'g'ri DOM manipulyatsiyasiga qaraganda ancha samarali bo'lib, yuqori ishlash tezligini ta'minlaydi.

React'da ma'lumotlar faqat yuqoridan pastga — ota komponentdan bola komponentga props (xususiyatlar) orqali uzatiladi. Bola komponentlar props'larni o'zgartira olmaydi, lekin callback funksiyalar orqali ota komponentga o'zgarishlar haqida xabar berishi mumkin. Bu tamoyil «props pastga, hodisalar yuqoriga» deb ataladi.

Hooklar (Hooks) — React 16.8 dan boshlab joriy qilingan maxsus funksiyalar bo'lib, funksional komponentlarga holat va boshqa React imkoniyatlaridan foydalanish imkonini beradi^[10].

• useState — komponentga holat (state) qo'shadi:

const [hisoblagich, setHisoblagich] = useState(0);

• useEffect — yon ta'sirlarni (side effects) boshqaradi (API so'rovlari, obunalar va h.k.):

useEffect(() => {

  document.title = `${hisoblagich} marta bosildi`;

}, [hisoblagich]);

• useContext — kontekst (context) orqali ma'lumotlarni komponent daraxtidan o'tkazmasdan ulashadi.

• useRef — DOM elementlariga to'g'ridan-to'g'ri murojaat qilish yoki qiymatni rendersiz saqlash imkonini beradi.

• useMemo va useCallback — ishlash tezligini optimallashtirish uchun qiymatlar va funksiyalarni eslab qoladi (memoizatsiya).

• useReducer — murakkab holatlarni boshqarish uchun Redux ga o'xshash yondashuv.

• useTransition — past ustuvorlikdagi yangilanishlarni belgilash.

• useDeferredValue — qiymatni kechiktirilgan holda yangilash.

• useId — server va mijoz tomonida izchil noyob identifikatorlar yaratish.

• use() — promislar va kontekstlarni o'qish uchun yangi hook.

• useFormStatus — forma holatini olish.

• useActionState — forma amallari natijasini boshqarish.

• useOptimistic — optimistik UI yangilanishlari uchun.

React Server Componentlar (RSC) — React 19 da joriy qilingan yangi paradigma bo'lib, komponentlarni server tomonida renderlash imkonini beradi^[11]. Bu quyidagi afzalliklarga ega:

• JavaScript hajmi kamayadi — server komponentlar kodi mijozga yuborilmaydi.

• Ma'lumotlar bazasiga to'g'ridan-to'g'ri murojaat — server tomonida API so'rovsiz ma'lumotlarni olish mumkin.

• Yuklash vaqti tezlashadi — server tomonida renderlangan HTML darhol ko'rsatiladi.

React atrofida keng ekotizim shakllangan:

• Next.js — server tomonida renderlash (SSR), statik generatsiya (SSG) va app router.

• Remix — veb standartlarga asoslangan to'liq stek freymvork.

• Gatsby — statik saytlar uchun freymvork.

• Redux — markazlashtirilgan holat boshqaruvi kutubxonasi.

• Zustand — yengil holat boshqaruvi.

• MobX — reaktiv holat boshqaruvi.

• TanStack Query — server holati boshqaruvi.

• React Native — React yordamida iOS va Android uchun native mobil ilovalar yaratish imkonini beradi. 2015-yilda ochiq manba sifatida chiqarilgan.

• Material UI (MUI) — Googlening Material Designga asoslangan komponentlar.

• Ant Design — korxona darajasidagi UI kutubxonasi.

• Chakra UI — modulli va yoqimli UI kutubxonasi.

• shadcn/ui — Radix UI va TailwindCSS asosidagi komponentlar.

Zamonaviy React ilovasiga misol (funksional komponent va hooklar):

import { useState } from 'react';

function Hisoblagich() {

  const [son, setSon] = useState(0);

  return (

    <div>

      <p>Siz {son} marta bosdingiz</p>

      <button onClick={() => setSon(son + 1)}>

        Bosing

      </button>

    </div>

  );

}

export default Hisoblagich;

Natija: sahifada tugma va hisoblagich ko'rsatiladi. Tugma bosilganda raqam bittaga oshadi.

React dunyodagi eng yirik texnologik kompaniyalar tomonidan ishlatiladi:

• Meta — Facebook, Instagram, WhatsApp Web

• Netflix — streaming platformasi

• Airbnb — turar joy ijarasi platformasi

• Uber — transport xizmati

• Twitter (hozirgi X) — ijtimoiy tarmoq

• Discord — muloqot platformasi

• Shopify — elektron tijorat platformasi

• {{{title}}}. ISBN 978-5-4461-0952-4. 

• {{{title}}}. ISBN 978-5-4461-0668-4. 

• Rasmiy veb-sayt

• GitHub repozitoriyasi

• React o'rganish qo'llanmasi