React JS

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

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.

 Asosiy voqealar 

 2011 — React birinchi marta Facebook yangiliklar lentasida ishlatilgan.

 2012 — Instagramda joriy qilingan.

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

 2022-yil, mart — React 18 — Concurrent rendering, avtomatik batching, useTransition, useDeferredValue hooklari va Suspense yaxshilangan.

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

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

 Virtual DOM ning yangi versiyasini yaratadi.

 Yangi va eski Virtual DOMni solishtiradi (diffing algoritmi).

 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.

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

 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.

 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:

 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

 Adabiyot 





 Tashqi havolalar 

 Rasmiy veb-sayt

 GitHub repozitoriyasi

 React o'rganish qo'llanmasi

 Eslatmalar 

Turkum:Javascript
Turkum:JavaScript kutubxonalari
Turkum:Dasturlash