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** — **[[React JS#Hooklar|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 **komponentlar**ga bo'linadi. Har bir komponent o'zining mantiqiy va vizual qismini o'z ichiga oladi. Komponentlar ikki turda bo'ladi:

**Funksional komponentlar** (zamonaviy usul):
```javascript
function Salomlash({ ism }) {

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

}
```
**Klass komponentlar** (eski usul):
```javascript
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:
```javascript
// 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

* **<code>useState</code>** — komponentga holat (state) qo'shadi:

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


* **<code>useEffect</code>** — yon ta'sirlarni (side effects) boshqaradi (API so'rovlari, obunalar va h.k.):

```javascript
useEffect(() => {

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

}, [hisoblagich]);
```


* **<code>useContext</code>** — kontekst (context) orqali ma'lumotlarni komponent daraxtidan o'tkazmasdan ulashadi.

* **<code>useRef</code>** — DOM elementlariga to'g'ridan-to'g'ri murojaat qilish yoki qiymatni rendersiz saqlash imkonini beradi.

* **<code>useMemo</code>** va **<code>useCallback</code>** — ishlash tezligini optimallashtirish uchun qiymatlar va funksiyalarni eslab qoladi (memoizatsiya).

* **<code>useReducer</code>** — murakkab holatlarni boshqarish uchun Redux ga o'xshash yondashuv.

### React 18+ yangi hooklar

* **<code>useTransition</code>** — past ustuvorlikdagi yangilanishlarni belgilash.

* **<code>useDeferredValue</code>** — qiymatni kechiktirilgan holda yangilash.

* **<code>useId</code>** — server va mijoz tomonida izchil noyob identifikatorlar yaratish.

### React 19 yangi hooklar

* **<code>use()</code>** — promislar va kontekstlarni o'qish uchun yangi hook.

* **<code>useFormStatus</code>** — forma holatini olish.

* **<code>useActionState</code>** — forma amallari natijasini boshqarish.

* **<code>useOptimistic</code>** — 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):
```javascript
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 Platforms|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