Kontent qismiga oʻtish

React JS

ZiyoSfera, erkin ensiklopediya

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.

Rivojlanish tarixi

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].

Asosiy voqealar

  • 2011 — React birinchi marta Facebook yangiliklar lentasida ishlatilgan.
  • 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].

Asosiy tushunchalar

Komponentlar

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

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!');

Virtual DOM

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.

Bir tomonlama ma'lumotlar oqimi

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

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

Asosiy hooklar

  • 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.

React 18+ yangi hooklar

  • useTransition — past ustuvorlikdagi yangilanishlarni belgilash.
  • useDeferredValue — qiymatni kechiktirilgan holda yangilash.
  • useId — server va mijoz tomonida izchil noyob identifikatorlar yaratish.

React 19 yangi hooklar

  • use() — promislar va kontekstlarni o'qish uchun yangi hook.
  • useFormStatus — forma holatini olish.
  • useActionState — forma amallari natijasini boshqarish.
  • useOptimistic — optimistik UI yangilanishlari uchun.

Server Componentlar

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.

Ekotizim

React atrofida keng ekotizim shakllangan:

Freymvorklar

  • 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.

Holat boshqaruvi

  • Redux — markazlashtirilgan holat boshqaruvi kutubxonasi.
  • Zustand — yengil holat boshqaruvi.
  • MobX — reaktiv holat boshqaruvi.
  • TanStack Query — server holati boshqaruvi.

Mobil dasturlash

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

UI kutubxonalar

  • Ant Design — korxona darajasidagi UI kutubxonasi.
  • Chakra UI — modulli va yoqimli UI kutubxonasi.
  • shadcn/ui — Radix UI va TailwindCSS asosidagi komponentlar.

Foydalanish misoli

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 ishlatadigan kompaniyalar

React dunyodagi eng yirik texnologik kompaniyalar tomonidan ishlatiladi:

  • Airbnb — turar joy ijarasi platformasi
  • Uber — transport xizmati

Adabiyot

Tashqi havolalar

Eslatmalar

  1. ↑ „React — The library for web and native user interfaces“. Qaraldi: 2026-yil 10-fevral.
  2. ↑ Krill, Paul „React: Making faster, smoother UIs for data-driven Web apps“. InfoWorld (2014-yil 15-may).
  3. ↑ „React (JS Library): How was the idea to develop React conceived?“. Quora.
  4. ↑ „Pete Hunt at TXJS“.
  5. ↑ „Facebook announces React Fiber“. TechCrunch (2017-yil 18-aprel).
  6. ↑ „React v16.8: The One With Hooks“ (2019-yil 6-fevral).
  7. ↑ „React v18.0“ (2022-yil 29-mart).
  8. ↑ „React v19“ (2024-yil 5-dekabr).
  9. ↑ „Writing Markup with JSX“. React dokumentatsiyasi.
  10. ↑ „Built-in React Hooks“. React dokumentatsiyasi.
  11. ↑ „Server Components“. React dokumentatsiyasi. 
"https://ziyosfera.uz/index.php?title=React_JS&oldid=730479" dan olindi