Dasturlash kitobi/11-QISM — React40 daqiqa

11.3-bob: React loyiha tuzilishi va Vite

11-QISM — Frontend: React · 3-mavzu

1. Kirish va motivatsiya

11.2-bobda komponent, JSX va props'ni o'rgandik — lekin kodni faqat "havoda" yozdik. Endi savol: bu kod qayerda yashaydi va brauzer uni qanday ishlatadi? Axir biz aytdik — brauzer JSX'ni tushunmaydi (11.2: 2.4), u faqat oddiy HTML, CSS va JavaScript'ni biladi. Demak orada bir "tarjimon va yig'uvchi" kerak: JSX'ni oddiy JS'ga o'giradigan, o'nlab fayl va kutubxonani bitta optimal to'plamga jamlaydigan, va siz kod yozayotganda brauzerni darhol yangilab turadigan vosita. Bu vosita — build tool (qurish vositasi), va bugungi standart — Vite.

Vite (frantsuzcha "tez" — "vit" deb o'qiladi) — Evan You (Vue muallifi) yaratgan zamonaviy frontend build vositasi. U eski Create React App (CRA — endi rasman tavsiya etilmaydi) o'rnini egalladi, chunki ancha tez: dasturlash serveri bir soniyada ishga tushadi, fayl saqlasangiz o'zgarish darhol brauzerda ko'rinadi (Hot Module Replacement — HMR), va production build ham optimal. Vite ikki narsani qiladi: (1) dasturlash paytida — tez dev-server (ESM modullaridan to'g'ridan foydalanadi, hammasini oldindan bog'lamaydi), JSX/TS'ni esbuild/SWC bilan chaqmoqdek tez o'giradi; (2) production uchun — Rollup bilan kodni minifikatsiya, bo'lish (code splitting — 11.8), optimallashtirib bitta dist/ papkaga jamlaydi (10.7'da serverga shu chiqadi).

Bu bob — React'ni real loyiha sifatida ishga tushirish: build tool nima va nega kerak (JSX transpile, bundling, dev server, HMR — under the hood), Vite bilan loyiha yaratish (npm create vite), papka va fayl tuzilishi (index.html main.jsx App.jsx zanjiri), ilova qanday yuklanadi (#root createRoot render), komponentlarni fayllarga ajratish (import/export — 2.14), npm skriptlar (dev/build/preview), loyiha arxitekturasi (papkalar: components/, pages/, hooks/...), CSS va assetlarni ulash, muhit o'zgaruvchilari (Vite env, import.meta.env, VITE_ prefiksi — 10.11 bilan bog'liq), vite.configni chuqur sozlash (proxy, alias, base, define — 2.12), build ichki mexanizmi (chunk, manualChunks, code splitting — 2.13), TypeScript va path alias 2.15-bob, ESLint/Prettier (15.3, 2.16), hamda Vite'ning chegarasi — SSR/SSG qachon kerakligi (2.17, 13-QISM).

O'xshatish: Vite — bu zamonaviy oshxona kombaynati va yetkazib berish xizmati. Siz (oshpaz) retsept (JSX/komponentlar) yozasiz, lekin mehmon (brauzer) faqat tayyor taomni (oddiy HTML/JS) yeydi. Vite o'rtada turadi: dasturlash paytida — tezkor degustatsiya rejimi (taomning bir qismini o'zgartirsangiz, butun taomni qaytadan pishirmay, faqat o'sha qismni yangilaydi — HMR). Tayyor bo'lganda — qadoqlash sexi (build): hamma ingredientni optimal o'rab, eng kichik, eng tez yetkaziladigan paketga jamlaydi (dist/). Eski CRA — bu sekin, og'ir kombaynat edi (har o'zgarishda butun oshxona qayta ishga tushardi); Vite — chaqmoqdek tez.

Nega muhim?

Har React loyiha shu bilan boshlanadi — Vite setup'ni bilmasdan birorta real loyiha ham boshlay olmaysiz.
Tezlik = unumdorlik — HMR bilan ishlash CRA'dan o'nlab marta tez (kuningni tejaydi).
Arxitektura poydevori — papka tuzilishini to'g'ri qo'yish katta loyihada tartibni saqlaydi (9-QISM).
Deploy bilan ko'prik — npm run build dist/ 10.2 (Nginx), 10.7, 13.11 (Vercel).

2. Nazariya — chuqur tushuntirish

2.1. Build tool nima va nega kerak

text

  MUAMMO: brauzer JSX'ni, TS'ni, ko'p faylli importni "tabiiy" tushunmaydi/optimal yuklamaydi

  SEN YOZASAN:                          BRAUZER XOHLAYDI:
  - JSX (<App/>)                  ──►   - oddiy JS (createElement)
  - 50 ta fayl (import/export)    ──►   - kam, optimal to'plam (bundle)
  - node_modules (minglab fayl)   ──►   - faqat kerakli kod
  - zamonaviy JS (optional chaining)──► - keng qo'llab-quvvatlanadigan JS

  BUILD TOOL (Vite) BAJARADIGAN ISHLAR:
  1. TRANSPILE  — JSX/TS  oddiy JS (esbuild/SWC — juda tez)
  2. BUNDLE     — ko'p faylni bog'lab, optimal to'plamga jamlash (Rollup)
  3. DEV SERVER — lokal http server + tez yangilash (HMR — 2.5)
  4. OPTIMIZE   — minify, code splitting, tree-shaking (build — 2.6)

   Vite = dev'da tez server + transpile; build'da Rollup bilan optimal paket

Build tool (qurish vositasi) — siz yozgan zamonaviy, qulay kodni (JSX, TypeScript, ko'p faylli modullar) brauzer tushunadigan va tez yuklaydigan shaklga aylantiruvchi dastur. Muammo: brauzer JSX'ni tushunmaydi (11.2: 2.4), 50 ta alohida faylni birma-bir yuklash sekin, node_modules'dagi minglab fayldan faqat keraklisi olinishi kerak. Vite to'rt asosiy ish qiladi: (1) transpile — JSX/TS'ni oddiy JS'ga o'giradi (esbuild yoki SWC bilan — Go/Rust'da yozilgan, chaqmoqdek tez); (2) bundle — ko'p faylni bog'lab, optimal to'plamga jamlaydi (Rollup); (3) dev server — lokal HTTP server + tez yangilanish (HMR — 2.5); (4) optimize — production'da minify, code splitting 11.8-bob, tree-shaking (ishlatilmagan kodni tashlash). Vite'ning sirri — dasturlash paytida hamma narsani oldindan bog'lamaydi: u brauzerning native ES modullar imkoniyatidan foydalanib, faqat so'ralgan faylni o'sha zahoti transpile qiladi — shuning uchun loyiha qanchalik katta bo'lmasin, dev-server bir zumda ishga tushadi.

2.2. Vite bilan loyiha yaratish

text

  YARATISH (terminal — 0.3):
  npm create vite@latest my-app        # interaktiv: framework va variant so'raydi
  #  React tanlaydi  variant: JavaScript yoki TypeScript (11.14 — TS tavsiya)

  yoki bitta buyruqda (interaktivsiz):
  npm create vite@latest my-app -- --template react-ts   # React + TypeScript
  npm create vite@latest my-app -- --template react       # React + JavaScript

  KEYIN:
  cd my-app
  npm install                          # bog'liqliklarni o'rnatish (node_modules — 5.2)
  npm run dev                          # dev-server ishga tushadi  http://localhost:5173

  ┌─────────────────────────────────────────────────────────────┐
  │  VITE  http://localhost:5173 (default port)                 │
  │  Fayl saqlasang  brauzer DARHOL yangilanadi (HMR — 2.5)     │
  └─────────────────────────────────────────────────────────────┘

   create-react-app (CRA) endi tavsiya etilMAYDI  Vite (yoki Next.js — 13-QISM)

Loyiha yaratish — npm create vite@latest my-app buyrug'i interaktiv ravishda framework (React) va variant (JavaScript yoki TypeScript) so'raydi va tayyor shablon yaratadi. Yoki bir qatorda: npm create vite@latest my-app -- --template react-ts (React + TypeScript — yangi loyihalarda TypeScript tavsiya etiladi — 11.14). So'ng uch qadam: cd my-app npm install (bog'liqliklarni o'rnatish, node_modules yaratiladi — 5.2) npm run dev (dev-server ishga tushadi, odatda http://localhost:5173). Endi kod faylini saqlasangiz, brauzer darhol yangilanadi (HMR — 2.5). Eski Create React App (CRA) 2023-yildan rasman tavsiya etilmaydi (sekin, eskirgan) — yangi loyihalar uchun Vite (oddiy SPA) yoki Next.js (SSR/full-stack — 13-QISM) ishlatiladi. Bu — 2026 standarti.

2.3. Loyiha tuzilishi — fayllar va vazifalari

text

  my-app/
  ├── index.html             KIRISH NUQTASI (brauzer birinchi shuni yuklaydi) — 2.4
  ├── package.json           bog'liqliklar + skriptlar 5.2-bob
  ├── vite.config.js         Vite sozlamasi (plugin, alias, port)
  ├── public/                statik fayllar (rasmlar — o'zgarmasdan ko'chiriladi)
  │   └── favicon.svg
  └── src/                   SENING KODING (asosiy ish shu yerda)
      ├── main.jsx           ilova "ildizi" — React'ni DOM'ga ulaydi 2.4-bob
      ├── App.jsx            asosiy (ildiz) komponent
      ├── App.css            App stillari
      ├── index.css          global stillar
      ├── components/        qayta ishlatiladigan komponentlar 2.7-bob
      ├── pages/             sahifalar (routing — 11.9)
      ├── hooks/             custom hooklar 11.7-bob
      └── assets/            rasm, shrift (import qilinadigan)

   index.html — public'da EMAS, ildizda (Vite uni kirish deb biladi)
   src/ — sening hududing; public/ — o'zgarmas statik

Loyiha tuzilishi — Vite yaratgan papkalarning har biri aniq vazifaga ega. index.html — kirish nuqtasi (brauzer eng birinchi shuni yuklaydi — 2.4); diqqat: u ildizda turadi (eski CRA'da public/ ichida edi). package.json — bog'liqliklar va skriptlar 5.2-bob. vite.config.js — Vite sozlamasi (plugin, port, path alias). public/ — statik fayllar (o'zgarmasdan dist/ga ko'chiriladi — favicon, robots.txt). src/ — sizning koding (asosiy ish shu yerda): main.jsx (ilova ildizi — React'ni DOM'ga ulaydi — 2.4), App.jsx (asosiy komponent), CSS fayllar, va siz tashkil qiladigan papkalar — components/ (qayta ishlatiladigan bo'laklar), pages/ (sahifalar — 11.9), hooks/ (custom hooklar — 11.7), assets/ (import qilinadigan rasm/shrift). Asosiy bo'linish: src/ — sizning dinamik koding; public/ — o'zgarmas statik fayllar 2.8-bob. Bu tuzilish — kichik loyiha uchun; katta loyihada arxitekturani kengaytiramiz 2.9-bob.

2.4. Ilova qanday yuklanadi — bootstrap zanjiri

text

  YUKLANISH ZANJIRI (brauzer  React  ekran):

  1. index.html yuklanadi:
     <div id="root"></div>           BO'SH idish (React shu yerga chizadi)
     <script type="module" src="/src/main.jsx"></script>   main.jsx ni chaqiradi

  2. main.jsx ishlaydi — React'ni #root ga ulaydi:
     import { createRoot } from "react-dom/client";
     import App from "./App.jsx";
     createRoot(document.getElementById("root")).render(<App />);
     //          haqiqiy DOM'dagi idishni topadi     App komponentini chizadi

  3. App.jsx  komponentlar daraxti  JSX  Virtual DOM  haqiqiy DOM (11.2: 2.1)

  ┌──────────┐    ┌──────────┐    ┌─────────┐    ┌──────────────┐
  │index.html│──► │ main.jsx │──► │ App.jsx │──► │ komponentlar │──► ekran
  │ (#root)  │    │createRoot│    │ (ildiz) │    │   daraxti    │
  └──────────┘    └──────────┘    └─────────┘    └──────────────┘

   Bitta bo'sh <div id="root"> + React ichini to'ldiradi — bu "SPA" (2.10)

Bootstrap zanjiri — React ilovasi qanday ishga tushishini ko'rsatadi (uchta bo'g'in). (1) index.html — ichida bitta bo'sh <div id="root"></div> (React shu idishga butun ilovani chizadi) va <script type="module" src="/src/main.jsx"> (main.jsx'ni yuklaydi). (2) main.jsx — react-dom/client'dan createRoot'ni oladi, document.getElementById("root") bilan haqiqiy DOM'dagi idishni topadi, va .render(<App />) bilan App komponentini o'sha idishga chizadi (bu — React va haqiqiy DOM o'rtasidagi yagona ulanish nuqtasi). (3) App.jsx — asosiy komponent; undan komponentlar daraxti boshlanadi JSX Virtual DOM haqiqiy DOM (11.2: 2.1). Diqqat: butun ilova bitta bo'sh <div> ichiga, JavaScript orqali chiziladi — bu Single Page Application (SPA) modeli 2.10-bob: server bitta bo'sh HTML beradi, qolganini React brauzerda quradi. Bu — Vite/React'ning standart modeli (Next.js'da boshqacha — server ham chizadi — 13.3).

2.5. HMR — Hot Module Replacement (tez yangilanish)

text

  HMR — fayl saqlanganda, BUTUN sahifani qayta yuklamay, faqat O'ZGARGAN modulni almashtirish

  ODDIY (HMR'siz):  fayl saqla  BUTUN sahifa qayta yuklanadi  state YO'QOLADI 
  HMR bilan:        fayl saqla  faqat o'zgargan komponent yangilanadi  state SAQLANADI 

  Misol: forma to'ldirdingiz (3 maydon), keyin tugma rangini o'zgartirdingiz:
  - HMR'siz: sahifa qayta yuklandi  forma BO'SHADI (qaytadan to'ldirasiz )
  - HMR: faqat tugma yangilandi  forma to'ldirilgan QOLDI  (rang darhol o'zgardi)

  ┌────────────────────────────────────────────────────────────┐
  │ Vite dev-server  ◄──WebSocket──►  brauzer                   │
  │ fayl o'zgardi  faqat shu modulni yuboradi  joyida almashtir│
  └────────────────────────────────────────────────────────────┘

   HMR — Vite tezligining yuragi (CRA'da sekin edi); deyarli oniy (millisekund)

HMR (Hot Module Replacement — "issiq modul almashtirish") — Vite'ning eng yoqimli xususiyati: kod faylini saqlaganingda butun sahifani qayta yuklamasdan, faqat o'zgargan modulni joyida almashtiradi. Bu nima farq qiladi? HMR'siz — har saqlashda sahifa to'liq qayta yuklanadi va komponent statei (masalan forma to'ldirgan maydonlaringiz, ochiq modal) yo'qoladi; HMR bilan — faqat o'zgargan qism yangilanadi, state saqlanib qoladi. Misol: formani to'ldirdingiz, keyin tugma rangini sozladingiz — HMR'siz forma bo'shab ketardi, HMR bilan to'ldirilgan holda qoladi, faqat rang o'zgaradi. Texnik jihatdan: Vite dev-server brauzer bilan WebSocket orqali bog'lanib turadi 5.13-bob, fayl o'zgarganda faqat shu modulning yangi versiyasini yuboradi. HMR — Vite ish jarayonining (developer experience) yuragi: yangilanish deyarli oniy (millisekundlar). Aynan shu tezlik React bilan ishlashni zavqli qiladi.

2.6. npm skriptlar va production build

text

  package.json  "scripts" 5.2-bob:
  "dev":     "vite"            # dasturlash serveri (HMR) — kundalik ish
  "build":   "vite build"     # production paket  dist/ (deploy uchun)
  "preview": "vite preview"   # build natijasini lokal sinash (haqiqiy holatga yaqin)
  "lint":    "eslint ."       # kod tekshiruvi 15.3-bob

  npm run dev       http://localhost:5173 (ishlab chiqish)
  npm run build     dist/ papka (index.html + optimal JS/CSS — minify, hash)
  npm run preview   dist/ ni lokal serverda ko'rish (deploy'dan oldin tekshir)

  DIST/ NIMA (production paket):
  dist/
  ├── index.html
  └── assets/
      ├── index-a1b2c3.js      minify + content hash (cache uchun — 10.2)
      └── index-d4e5f6.css

   dist/ — 10.7 (serverga) yoki 13.11 (Vercel) ga yuklanadigan TAYYOR mahsulot

npm skriptlar — package.json'ning scripts qismida 5.2-bob: dev (vite — dasturlash serveri, HMR bilan — kundalik ish uchun), build (vite build — production paket yaratadi dist/ papka), preview (vite preview — build natijasini lokal serverda sinash — deploy'dan oldin haqiqiy holatni tekshirish), lint (ESLint — kod sifati — 15.3). Production build (npm run build) nima qiladi: kodni minifikatsiya (bo'sh joy/izohlarni olib tashlaydi), bo'lish (code splitting — 11.8), tree-shaking, va dist/ papkaga jamlaydi — ichida index.html va assets/ (fayllar content hash bilan: index-a1b2c3.js — bu cache boshqaruvi uchun, fayl o'zgarsa hash o'zgaradi, brauzer yangisini oladi — 10.2). dist/ — bu deploy qilinadigan tayyor mahsulot: uni Nginx serverga (10.2, 10.7), AWS S3'ga 10.6-bob, yoki Vercel'ga 13.11-bob yuklaysiz. dev server hech qachon production'da ishlatilmaydi (faqat ishlab chiqish uchun).

2.7. Komponentlarni fayllarga ajratish — import/export

text

  HAR KOMPONENT — o'z FAYLIDA (toza, topish oson, qayta ishlatiladigan — 2.14 modullar):

  // src/components/Button.jsx
  export default function Button({ text }) {     // default export (faylning asosiysi)
    return <button>{text}</button>;
  }

  // src/components/icons.jsx — bir nechta kichik (named export)
  export function HomeIcon() { return <svg>...</svg>; }
  export function UserIcon() { return <svg>...</svg>; }

  // src/App.jsx — import qilamiz:
  import Button from "./components/Button.jsx";       // default  istalgan nom, {} siz
  import { HomeIcon, UserIcon } from "./components/icons.jsx";  // named  aniq nom, {} bilan

  ┌────────────────────────────────────────────────────────────┐
  │ default export   bitta asosiy (import Nom from "...")      │
  │ named export     ko'p narsa (import { A, B } from "...")   │
  └────────────────────────────────────────────────────────────┘

   Konvensiya: bir fayl — bir asosiy komponent (fayl nomi = komponent nomi)

Komponentlarni fayllarga ajratish — toza loyihada har komponent o'z faylida yashaydi (2.14 — ES modullar): topish oson, qayta ishlatiladi, fayl katta bo'lib ketmaydi. Ikki eksport turi: default export (export default function Button) — faylning bitta asosiy narsasi, import'da istalgan nom va {}siz (import Button from "..."); named export (export function HomeIcon) — bir fayldan ko'p narsa, import'da aniq nom va {} bilan (import { HomeIcon, UserIcon } from "..."). Vite bilan kengaytmani (.jsx) yozsangiz ham, yozmasangiz ham ishlaydi (sozlamaga bog'liq), lekin izchillik uchun bitta uslubni tutgan ma'qul. Keng tarqalgan konvensiya: bir fayl — bir asosiy komponent, fayl nomi komponent nomi bilan bir xil (Button.jsx Button). Bu — modulli, kengaytiriladigan kod arxitekturasining asosi (9-QISM tamoyillari frontend'da ham amal qiladi).

2.8. CSS, rasm va assetlarni ulash

text

  CSS ULASH (uch xil yondashuv):
  1. Global CSS:        import "./index.css";          // butun ilovaga (main.jsx'da)
  2. Komponent CSS:     import "./Button.css";         // oddiy, lekin global ta'sir
  3. CSS Modules:       import s from "./Button.module.css";  // LOKAL (scoped)  s.title
     <div className={s.card}>                          // klass nomi avtomatik unikal
  4. (Tailwind — 1.7; CSS-in-JS, styled-components — alternativalar)

  RASM/ASSET:
  import logo from "./assets/logo.svg";   // import  Vite optimal yo'l beradi
  <img src={logo} />                       // build'da hash bilan ko'chiriladi
  // public/ dagi fayl: <img src="/favicon.svg" />   // to'g'ridan yo'l (import'siz)

   src/assets — import qilinadi (optimallashtiriladi); public/ — to'g'ridan yo'l (o'zgarmas)
   CSS Modules — klass to'qnashuvini (global ifloslanish) yo'qotadi (1.9 BEM muqobili)

CSS va assetlarni ulash — Vite'da bir necha yo'l. CSS: (1) global — import "./index.css" (odatda main.jsx'da — butun ilovaga ta'sir); (2) komponent CSS — import "./Button.css" (oddiy, lekin klasslar global, to'qnashishi mumkin); (3) CSS Modules — import s from "./Button.module.css" (.module.css kengaytmasi) klasslar lokal (scoped), s.title orqali ishlatiladi va Vite ularni avtomatik unikal nom bilan generatsiya qiladi (global to'qnashuv yo'q — 1.9 BEM muqobili); (4) Tailwind 1.7-bob yoki CSS-in-JS — keng tarqalgan alternativalar. Rasm/asset: src/'dagilarni import logo from "./assets/logo.svg" qilib olasiz (Vite build'da optimallashtirib, hash bilan ko'chiradi); public/'dagilarga to'g'ridan yo'l (/favicon.svg). Asosiy farq: src/assets — import qilinadi va optimallashtiriladi; public/ — o'zgarmasdan, to'g'ridan-to'g'ri yo'l bilan 2.3-bob. CSS Modules — kichik/o'rta loyihada klass to'qnashuvini yo'qotishning toza usuli.

2.9. Loyiha arxitekturasi — papkalarni tashkil qilish

text

  KICHIK LOYIHA (oddiy — turga qarab):
  src/
  ├── components/     qayta ishlatiladigan UI (Button, Card, Modal)
  ├── pages/          sahifalar (HomePage, ProfilePage — 11.9)
  ├── hooks/          custom hooklar (useAuth, useFetch — 11.7)
  ├── utils/          yordamchi funksiyalar (formatDate, helpers)
  ├── services/       API chaqiruvlari (axios — 2.18, 12.4)
  └── assets/         rasm, shrift

  KATTA LOYIHA (feature-based — xususiyatga qarab — kengayadi):
  src/
  ├── features/
  │   ├── auth/       components + hooks + api (auth'ga oid HAMMASI birga)
  │   ├── products/   products'ga oid hammasi
  │   └── cart/
  ├── shared/         umumiy (ui, hooks, utils)
  └── app/            global setup (store, router, providers)

   Kichik loyiha — turga qarab; katta loyiha — XUSUSIYATGA qarab (birga turuvchi narsalar birga)
   Mukammal tuzilish yo'q — izchillik (consistency) eng muhim (jamoa kelishuvi)

Loyiha arxitekturasi — papkalarni qanday tashkil qilish loyiha hajmiga bog'liq. Kichik/o'rta loyiha — turga qarab (type-based): components/ (UI bo'laklar), pages/ (sahifalar — 11.9), hooks/ (custom hooklar — 11.7), utils/ (yordamchilar), services/ (API — 12.4), assets/. Katta loyiha — xususiyatga qarab (feature-based): features/auth/, features/products/ — har feature'ning komponenti, hook'i, API'si birga turadi (bog'liq narsalar bir joyda — o'zgartirish va o'chirish oson), plus shared/ (umumiy) va app/ (global setup — store, router). Ikki muhim haqiqat: (1) feature-based yondashuv katta loyihada yaxshiroq masshtablanadi (9.3 Clean Architecture ruhi — bog'liqlik bo'yicha guruhlash); (2) "mukammal" tuzilish yo'q — eng muhimi izchillik (jamoa bir konvensiyaga kelishib, unga rioya qilsin). Boshida turga qarab boshlanadi, loyiha o'sganda feature-based'ga ko'chiriladi.

2.10. SPA modeli va muhit o'zgaruvchilari (qo'shimcha — muhim)

text

  SPA (Single Page Application) — bitta HTML, JS qolganini brauzerda quradi:
  - Server bo'sh index.html beradi (#root)  React ichini to'ldiradi 2.4-bob
  - Sahifalar almashishi JS bilan (sahifa qayta yuklanmaydi — tez — 11.9)
  -  tez, ilovaga o'xshash;  boshlang'ich yuk katta, SEO qiyin ( Next.js 13-QISM)

  MUHIT O'ZGARUVCHILARI (Vite — 10.11):
  .env fayl:        VITE_API_URL=https://api.example.com   # VITE_ prefiksi MAJBURIY
  kodda o'qish:     import.meta.env.VITE_API_URL           # process.env EMAS (5.8 dan farq)

   Faqat VITE_ bilan boshlangan o'zgaruvchilar BRAUZERGA chiqadi (ataylab — xavfsizlik)
   MAXFIY narsa (DB parol, secret key) FRONTEND env'ga YOZILMAYDI — brauzerda ko'rinadi! (10.11)
   .env ni .gitignore'ga qo'sh 10.11-bob; .env.example bilan namuna ber

SPA modeli — Vite/React standarti: Single Page Application (bir sahifali ilova). Server bitta bo'sh index.html beradi (#root), React esa butun UI'ni brauzerda quradi 2.4-bob; sahifalar almashishi ham JavaScript bilan bo'ladi (sahifa qayta yuklanmaydi — tez navigatsiya — 11.9). Afzalligi — tez, mobil ilovaga o'xshash tajriba; kamchiligi — boshlang'ich JavaScript yuki katta, SEO qiyinroq (qidiruv tizimlari bo'sh HTML ko'radi) — bu muammoni Next.js (server'da ham render — 13-QISM) hal qiladi. Muhit o'zgaruvchilari (env — 10.11): Vite'da .env faylda VITE_API_URL=... (diqqat: VITE_ prefiksi majburiy), kodda import.meta.env.VITE_API_URL (Node'dagi process.env emas — 5.8'dan farq). Eng muhim xavfsizlik qoidasi: faqat VITE_ bilan boshlangan o'zgaruvchilar brauzerga chiqariladi (ataylab) — shuning uchun maxfiy narsa (DB parol, secret key, to'lov kaliti) frontend env'ga hech qachon yozilmaydi (brauzerda har kim ko'radi — 10.11, 14-QISM). Maxfiy ishlar faqat backend'da.

2.11. Vite ichida qanday ishlaydi — dev vs production

Vite'ning "sirri" — ikki butunlay boshqacha rejim: dev (ishlab chiqish) va build (production). Bu ikkalasi ikki xil dvigatelda ishlaydi, va nega bunday qilingani — Vite tezligining asosiy sababi.

text

  DEV REJIMI (npm run dev) — NATIVE ESM + esbuild:
  ─────────────────────────────────────────────────
  • Bundling YO'Q. Vite kodni oldindan bitta paketga jamlamaydi.
  • Brauzer <script type="module"> orqali fayllarni TO'G'RIDAN so'raydi.
  • Vite har so'ralgan faylni O'SHA ZAHOTI (on-demand) esbuild bilan
    JS'ga o'giradi (esbuild — Go'da, Webpack'dan ~10–100x tez).
  • node_modules'dagi bog'liqliklar bir marta "pre-bundle" qilinadi
    (esbuild bilan) va cache'lanadi (.vite/deps)  keyingi start oniy.
   SHUNING UCHUN: loyiha 10 fayl bo'ladimi, 5000 fayl — dev-server
    baribir ~bir soniyada ishga tushadi (faqat kerakli fayl transpile).

  BUILD REJIMI (npm run build) — ROLLUP:
  ─────────────────────────────────────────────────
  • To'liq bundling: Rollup butun daraxtni bog'lab, optimallashtiradi.
  • Minify (terser/esbuild), tree-shaking, code splitting, hashli fayl.
  • Natija: dist/ — statik, optimal, brauzerga tayyor paket.
   Nega dev'da ham Rollup emas? Chunki to'liq bundling SEKIN —
    dev'da esa tezlik = hammasi. Prod'da esa optimallik = hammasi.

   Dev'da ko'ringan narsa build'da 100% aynan bo'lishi shart emas —
     shuning uchun DEPLOY'dan oldin `npm run build && npm run preview` (2.6)

Dev vs production — Vite dasturlash va production'da ikki xil dvigatel ishlatadi, va aynan shu uning tezligining siri. Dev rejimida (npm run dev) Vite kodni oldindan bir paketga jamlamaydi (bundling yo'q): brauzerning o'zi native ES modullar (<script type="module">) orqali fayllarni to'g'ridan-to'g'ri so'raydi, Vite esa har bir so'ralgan faylni o'sha zahoti (on-demand) esbuild bilan JS'ga o'giradi — esbuild Go tilida yozilgani uchun eski Webpack'dan o'nlab-yuzlab marta tez. node_modules'dagi og'ir bog'liqliklar bir marta "pre-bundle" qilinib cache'lanadi (.vite/deps), keyingi ishga tushishlar deyarli oniy bo'ladi. Natija: loyiha necha ming fayl bo'lishidan qat'i nazar, dev-server bir soniyada ochiladi (chunki faqat ekranda ko'ringan fayl transpile qilinadi). Build rejimida (npm run build) esa Rollup to'liq bundling qiladi: minify, tree-shaking, code splitting, hashlangan fayllar — production uchun optimal dist/. Muhim ogohlantirish: dev'da ko'rgan narsa build'da 100% aynan bo'lishiga kafolat yo'q (masalan tree-shaking faqat build'da), shuning uchun deploy'dan oldin npm run build va npm run preview bilan haqiqiy natijani tekshirish shart 2.6-bob.

2.12. `vite.config.ts` — sozlamaning yuragi

vite.config.ts — Vite'ning miya markazi: pluginlar, path alias, dev-server (port, proxy), production build, env prefiksi — hammasi shu yerda. Kichik loyihada u qisqa, katta loyihada esa jiddiy sozlanadi.

text

  vite.config.ts — asosiy bo'limlar:

  plugins:  [react()]            JSX/HMR (ba'zan svgr, tsconfigPaths, ...)
  resolve.alias: "@"  src/      qisqa import (Misol 8)
  server:
    port: 3000                   dev port (default 5173)
    proxy: { "/api": ... }       BACKEND ga so'rovni yo'naltirish (CORS'siz) 
    open: true                   start'da brauzerni ochish
  build:
    outDir: "dist"               chiqish papka (default dist)
    sourcemap: true              debug uchun (prod'da odatda false)
    rollupOptions.output.manualChunks   chunk bo'lishni sozlash 2.13-bob
  base: "/app/"                  sayt sub-papkada bo'lsa (deploy — Xato 6)
  define: { __VER__: '"1.0"' }   build vaqtida global konstantalar

   PROXY — eng ko'p ishlatiladigan: frontend :5173, backend :8080 bo'lsa,
     brauzer to'g'ridan :8080 ga so'rasa CORS xatosi 10.9-bob chiqadi.
     proxy bilan: fetch("/api/users")  Vite backend :8080 ga uzatadi.

vite.config.ts — Vite sozlamasining yuragi: bu yerda pluginlar, path alias, dev-server va production build boshqariladi. Eng muhim bo'limlar: plugins — react() (JSX va HMR uchun majburiy) va boshqa pluginlar 2.16-bob; resolve.alias — @ src/ kabi qisqa importlar (Misol 8); server — dev-server sozlamalari: port (default 5173), open (start'da brauzerni ochish), va eng muhimi proxy; build — production sozlamalari: outDir (chiqish papkasi), sourcemap (debug uchun manba xaritasi), rollupOptions (chunk boshqaruvi — 2.13); base — sayt sub-papkada joylashsa (masalan example.com/app/) asset yo'llari uchun (Xato 6); define — build vaqtida almashtiriladigan global konstantalar. Proxy — eng ko'p ishlatiladigan sozlama: frontend :5173, backend :8080 da bo'lsa, brauzer to'g'ridan backend'ga murojaat qilganda CORS xatosi chiqadi 10.9-bob; proxy bilan fetch("/api/users") so'rovini Vite dev-server orqasidan backend'ga uzatadi — brauzer nazarida hammasi bitta manzildan kelgandek bo'ladi, CORS muammosi yo'qoladi. Bu — lokal ishlab chiqishda backend bilan ulanishning standart usuli 12.4-bob.

2.13. Build chuqurroq — chunk, code splitting, manualChunks

npm run build shunchaki fayllarni qisqartirmaydi — u kodni bo'laklarga (chunk) ajratadi, shunda brauzer faqat kerakli qismni yuklaydi. Bu — katta ilovaning boshlang'ich yuklanishini tezlashtirishning kaliti.

text

  CODE SPLITTING (kodni bo'lish — 11.8 bilan bog'liq):

  Muammo: hamma kodni BITTA katta index.js'ga jamlasak (5 MB),
          foydalanuvchi bosh sahifa uchun ham 5 MB kutadi 

  Yechim 1 — AVTOMATIK (Rollup o'zi):
    • har entry va dinamik import() alohida chunk bo'ladi
    • React.lazy(() => import("./Page"))  alohida fayl 11.8-bob
       sahifa ochilganda YUKLANADI (kerak bo'lganda — lazy)

  Yechim 2 — MANUAL (rollupOptions.manualChunks):
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ["react", "react-dom"],   // kutubxonalar alohida chunk
          }
        }
      }
    }
     react-vendor-a1b2.js kam o'zgaradi  brauzer uzoq cache qiladi (10.2)

   MAQSAD: kichik boshlang'ich yuk + samarali cache (kam o'zgargan
     kod = uzoq cache; tez-tez o'zgargan kod = alohida chunk)

Build chuqurroq — production build faqat kodni qisqartirmaydi, balki uni chunklarga (bo'laklarga) ajratadi. Muammo: agar butun ilova kodi bitta katta index.js (masalan 5 MB) bo'lsa, foydalanuvchi hatto bosh sahifa uchun ham hammasini yuklab kutadi. Code splitting (kodni bo'lish) buni hal qiladi ikki yo'l bilan. (1) Avtomatik — Rollup har bir dinamik import()ni alohida chunk qiladi; React'da React.lazy(() => import("./ProfilePage")) yozilganda o'sha sahifa alohida faylga ajraladi va faqat kerak bo'lganda (foydalanuvchi o'sha sahifaga o'tganda) yuklanadi 11.8-bob. (2) Manual — rollupOptions.output.manualChunks bilan o'zi ajratasiz: masalan react va react-dom'ni alohida vendor chunk'ga chiqarish. Nega? Kutubxonalar kamdan-kam o'zgaradi, sizning kodingiz esa tez-tez — ularni ajratsa, foydalanuvchi brauzeri vendor faylni uzoq cache qiladi (har deploy'da qayta yuklamaydi — content hash bilan birga, 10.2). Umumiy maqsad: kichik boshlang'ich yuk va samarali cache — ilova qanchalik katta bo'lmasin, birinchi sahifa tez ochilsin.

2.14. Asset importning maxsus rejimlari — `?url`, `?raw`

Vite import'ni juda moslashuvchan qiladi: bir faylni turli shaklda olib kelish mumkin — optimal yo'l sifatida, xom matn sifatida, yoki inline. Bu suffikslar (?url, ?raw) ko'p vaqtni tejaydi.

text

  ASSET IMPORT REJIMLARI (Vite maxsus suffikslari):

  import logo from "./logo.svg"        optimal YO'L (hashli) — odatiy 2.8-bob
  import url  from "./logo.svg?url"    majburan YO'L (string sifatida)
  import raw  from "./data.txt?raw"    fayl MAZMUNI (xom string) 
  import Comp from "./icon.svg?react"  SVG'ni React komponent qilib (svgr plugin)

  MISOL — SQL/matn faylni xom o'qish:
  import shema from "./schema.sql?raw";   // shema = "CREATE TABLE ..."
  console.log(shema);                     // faylning butun matni string

  JSON — to'g'ridan import (suffiksisz):
  import data from "./config.json";       // avtomatik obyektga aylanadi

   ?raw — matn/shablon fayllarni kodga olib kirishning eng oson yo'li

Asset importning maxsus rejimlari — Vite'da bir faylni turli shaklda import qilish mumkin, maxsus suffikslar orqali. Odatda import logo from "./logo.svg" faylning optimal yo'lini (hashli URL) beradi 2.8-bob. Ammo: ?url suffiksi (import u from "./logo.svg?url") faylni majburan URL string sifatida oladi (inline emas); ?raw (import txt from "./data.txt?raw") faylning xom mazmunini string sifatida oladi — bu matn, shablon yoki SQL fayllarni kodga olib kirishning eng oson yo'li (masalan import schema from "./schema.sql?raw" — schema o'zgaruvchisi butun fayl matnini saqlaydi); ?react (svgr plugini bilan — 2.16) SVG'ni to'g'ridan React komponent qiladi. JSON esa suffikssiz shunchaki import data from "./config.json" — Vite uni avtomatik obyektga aylantiradi. Bu suffikslar Vite'ga xos qulaylik — ular fayllar bilan ishlashni juda moslashuvchan qiladi.

2.15. TypeScript, path alias va barrel export

Zamonaviy React loyiha odatda TypeScript'da 11.14-bob yoziladi. Vite TS'ni transpile qiladi, ammo tur tekshiruvi alohida ish — va alias'lar ikki joyda (Vite + TS) sozlanishi kerak.

text

  TS ALIAS — IKKI JOYDA sozlanadi (aks holda IDE yoki build sinadi):

  1) vite.config.ts — resolve.alias (Vite qanday QURADI — Misol 8)
  2) tsconfig.json  — compilerOptions.paths (TS/IDE qanday TEKSHIRADI):
     {
       "compilerOptions": {
         "baseUrl": ".",
         "paths": { "@/*": ["src/*"] }
       }
     }
   Ikkalasi mos bo'lsa: import { Button } from "@/components/Button"
    ham build'da, ham IDE avtokompletda ishlaydi.

  BARREL EXPORT — papka uchun bitta "kirish eshigi" (index.ts):
  // src/components/index.ts
  export { default as Button } from "./Button";
  export { default as Card }   from "./Card";
  // Endi: import { Button, Card } from "@/components";  (bitta qatordan)

   Vite = transpile (turlarni O'CHIRADI, tekshirMAYDI). Tur tekshiruvi
     alohida: `tsc --noEmit` yoki IDE (shu bois build'da `tsc && vite build`)

TypeScript, alias va barrel export — zamonaviy React loyiha odatda TypeScript'da yoziladi 11.14-bob. Muhim tushuncha: Vite TS'ni faqat transpile qiladi (turlarni olib tashlab JS'ga o'giradi) — u turlarni tekshirmaydi. Tur tekshiruvi alohida ish: tsc --noEmit buyrug'i yoki IDE (VS Code) qiladi; shuning uchun build skripti odatda tsc -b && vite build ko'rinishida bo'ladi (avval turlar tekshiriladi, keyin build). Path alias ikki joyda sozlanishi shart: vite.config.ts'dagi resolve.alias — Vite kodni qanday quradini aytadi (Misol 8); tsconfig.json'dagi compilerOptions.paths ("@/*": ["src/*"]) — TS va IDE aliasni qanday tushunadini aytadi. Ikkalasi mos bo'lmasa, yo build sinadi, yo IDE qizil chiziq chizadi. Barrel export — papka uchun bitta "kirish eshigi": src/components/index.ts faylida hamma komponentni re-export qilib, keyin import { Button, Card } from "@/components" deb bitta qatordan olish mumkin (ko'p qatorli import o'rniga toza). Ehtiyot: juda katta barrel fayllar ba'zan tree-shaking'ni murakkablashtiradi — kichik/o'rta loyihada foydali, juda katta loyihada o'lchab ishlatiladi.

2.16. ESLint, Prettier va Vite plugin ekotizimi

Toza loyiha faqat ishlaydigan kod emas — izchil va xatosiz kod. Buni ikki vosita ta'minlaydi: ESLint (mantiqiy xatolarni topadi) va Prettier (formatni bir xil qiladi). Vite esa plugin orqali kengayadi.

text

  ESLint vs Prettier — IKKI XIL ISH (birga ishlatiladi):
  ─────────────────────────────────────────────────────
  ESLint    MANTIQIY tekshiruv (ishlatilmagan o'zgaruvchi, xato hook
             qoidasi, xavfli pattern) — "kod TO'G'RImi?"
  Prettier  FORMAT (bo'sh joy, qator uzunligi, qavs uslubi)
             — "kod BIR XIL ko'rinadimi?"

  react-ts shabloni ESLint'ni tayyor beradi (eslint.config.js).
  Prettier qo'shish:  npm i -D prettier
  package.json: "format": "prettier --write ."

  VITE PLUGIN EKOTIZIMI (eng ko'p ishlatiladigan):
  @vitejs/plugin-react    JSX + HMR (majburiy — har React loyihada)
  vite-plugin-svgr        SVG'ni React komponent (?react — 2.14)
  vite-tsconfig-paths     tsconfig alias'ni avtomatik oladi 2.15-bob
  vite-plugin-pwa         PWA (offline, install) qo'shadi
  @vitejs/plugin-legacy   eski brauzerlar uchun qo'llab-quvvatlash

   ESLint = xato topadi; Prettier = format qiladi — ROLLARI boshqacha

ESLint, Prettier va plugin ekotizimi — toza loyihaning ikki ustuni. ESLint — kodning mantiqiy tekshiruvchisi: ishlatilmagan o'zgaruvchi, noto'g'ri ishlatilgan hook (11.7 qoidalari), xavfli patternlarni topadi — "kod to'g'rimi?" degan savolga javob beradi. Prettier — formatlash vositasi: bo'sh joy, qator uzunligi, qavs uslubini avtomatik bir xil qiladi — "kod bir xil ko'rinadimi?" degan savolga javob beradi. Ular ikki xil ish qiladi va birga ishlatiladi 15.3-bob. Vite'ning react-ts shabloni ESLint'ni tayyor konfiguratsiya bilan beradi (eslint.config.js); Prettier'ni qo'lda qo'shiladi (npm i -D prettier, package.json'ga "format": "prettier --write ." skripti). Vite plugin ekotizimi — Vite Rollup pluginlariga mos, keng: @vitejs/plugin-react (JSX+HMR, majburiy), vite-plugin-svgr (SVG React komponent), vite-tsconfig-paths (tsconfig alias'ni avtomatik oladi — 2.15 alias'ni ikki joyda takrorlamaslik uchun), vite-plugin-pwa (offline/o'rnatiladigan ilova), @vitejs/plugin-legacy (eski brauzerlar). Asosiy farqni yodda tuting: ESLint xato topadi, Prettier format qiladi — rollari boshqacha, shuning uchun ikkalasi ham kerak.

2.17. SSR, SSG va Vite'ning chegarasi

Vite standart holatda SPA quradi 2.10-bob — bu ko'p ilova uchun yetarli. Ammo boshlang'ich tezlik va SEO muhim bo'lganda, boshqa render usullari kerak bo'ladi.

text

  RENDER USULLARI — qayerda HTML tug'iladi:
  ─────────────────────────────────────────────
  SPA (CSR)   HTML brauzerda quriladi (Vite default — 2.10)
                bo'sh HTML  SEO qiyin, birinchi ko'rinish sekin
  SSR         HTML server'da har so'rovda quriladi  tayyor keladi
                SEO yaxshi, tez birinchi ko'rinish
  SSG         HTML build vaqtida oldindan quriladi (statik) — bloglar
                eng tez, eng arzon (CDN'dan tarqatiladi)

  Vite SSR'ni QO'LLAB-QUVVATLAYDI (ilg'or), lekin qo'lda sozlash qiyin.
  Amalda: to'liq SSR/SSG uchun FRAMEWORK ishlatiladi:
    • Next.js   React + SSR/SSG (Vite emas, o'z tizimi — 13-QISM)
    • Remix / TanStack Start  zamonaviy SSR
    • Astro     kontent saytlar (Vite ustida qurilgan)

   Oddiy dashboard/admin/ichki ilova  Vite SPA yetarli.
     Ommaviy, SEO muhim sayt (marketing, blog, do'kon)  SSR/SSG (13-QISM)

SSR, SSG va Vite chegarasi — Vite standart holatda SPA (Client-Side Rendering — CSR) quradi 2.10-bob: HTML brauzerda JavaScript bilan yaratiladi. Bu ko'p ichki ilova (dashboard, admin panel, ichki tizim) uchun mukammal. Ammo ikki holatda muammo: SEO (qidiruv tizimlari dastlab bo'sh HTML ko'radi) va birinchi ko'rinish tezligi (foydalanuvchi JS yuklanguncha bo'sh ekran ko'radi). Yechim — HTML'ni boshqa joyda qurish: SSR (Server-Side Rendering) — HTML har so'rovda serverda tayyorlanib, to'ldirilgan holda keladi (SEO va tezlik yaxshi); SSG (Static Site Generation) — HTML build vaqtida oldindan yaratiladi (bloglar, hujjatlar — eng tez, CDN'dan tarqatiladi). Vite SSR'ni texnik jihatdan qo'llab-quvvatlaydi (ilg'or API bor), lekin uni qo'lda sozlash murakkab; amalda to'liq SSR/SSG uchun framework ishlatiladi: Next.js (React uchun eng mashhur — o'z build tizimi bilan, Vite emas — 13-QISM), Remix/TanStack Start, yoki kontent saytlari uchun Astro (Vite ustiga qurilgan). Amaliy qoida: ichki/autentifikatsiya ortidagi ilova Vite SPA yetarli; ommaviy, SEO muhim sayt (marketing, blog, e-commerce) SSR/SSG framework (13-QISM).

3. Sintaksis — tez ma'lumotnoma

text

YARATISH 2.2-bob:   npm create vite@latest my-app -- --template react-ts
ISHGA TUSHIRISH:  cd my-app | npm install | npm run dev   # localhost:5173
SKRIPTLAR 2.6-bob:  npm run dev | npm run build | npm run preview | npm run lint
BOOTSTRAP 2.4-bob:  index.html(#root)  main.jsx(createRoot)  App.jsx
EXPORT 2.7-bob:     export default function X(){}   |   export function Y(){}
IMPORT 2.7-bob:     import X from "./X.jsx"   |   import { Y } from "./icons.jsx"
CSS 2.8-bob:        import "./index.css"   |   import s from "./X.module.css" (s.title)
ASSET 2.8-bob:      import logo from "./assets/logo.svg"  |  public: src="/favicon.svg"
ASSET SUF 2.14-bob: import raw from "./f.txt?raw"  |  import u from "./i.svg?url"
ENV 2.10-bob:       .env: VITE_API_URL=...   |   import.meta.env.VITE_API_URL
PROXY 2.12-bob:     server.proxy: { "/api": "http://localhost:8080" }
ALIAS 2.15-bob:     vite: resolve.alias  +  tsconfig: compilerOptions.paths
BARREL 2.15-bob:    index.ts: export { default as Button } from "./Button"
CHUNK 2.13-bob:     build.rollupOptions.output.manualChunks: { vendor:[...] }
BASE 2.12-bob:      base: "/sub-path/"   # sayt sub-papkada bo'lsa

4. Batafsil kod namunalari

Misol 1 — index.html (kirish nuqtasi — 2.4)

html

<!doctype html>
<html lang="uz">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mening React ilovam</title>
  </head>
  <body>
    <div id="root"></div>                              <!-- BO'SH idish — React shu yerga chizadi -->
    <script type="module" src="/src/main.jsx"></script> <!-- ilovani yuklaydi -->
  </body>
</html>
<!--  Bitta bo'sh div + bitta skript — qolganini React quradi (SPA — 2.10) -->

Misol 2 — main.jsx (React'ni DOM'ga ulash — 2.4)

jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";       // React 18+ yangi root API
import App from "./App.jsx";                          // asosiy komponent
import "./index.css";                                 // global stillar (2.8)

// Haqiqiy DOM'dagi #root idishini topib, React'ni unga ulaymiz
createRoot(document.getElementById("root")).render(
  <StrictMode>                                        {/* dev'da xatolarni erta topadi (11.2: 2.11) */}
    <App />                                            {/* butun ilova shu komponentdan boshlanadi */}
  </StrictMode>
);
//  Bu — React va haqiqiy DOM o'rtasidagi YAGONA ulanish nuqtasi

Misol 3 — App.jsx va komponentni import qilish (2.7)

jsx

import Header from "./components/Header.jsx";          // default import
import { ProductList } from "./components/ProductList.jsx";  // named import
import "./App.css";

function App() {
  return (
    <div className="app">
      <Header title="Onlayn do'kon" />                 {/* props bilan */}
      <main>
        <ProductList />
      </main>
    </div>
  );
}

export default App;                                    // default export (main.jsx import qiladi)

Misol 4 — Komponentni alohida faylga ajratish (2.7)

jsx

// src/components/Header.jsx
export default function Header({ title }) {            // default export
  return (
    <header className="header">
      <h1>{title}</h1>
      <nav>
        <a href="/">Bosh sahifa</a>
        <a href="/about">Biz haqimizda</a>
      </nav>
    </header>
  );
}
//  Fayl nomi (Header.jsx) = komponent nomi (Header) — konvensiya

Misol 5 — CSS Modules bilan lokal stillar (2.8)

jsx

// src/components/Card.module.css
//   .card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; }
//   .title { font-weight: 700; color: #333; }

import styles from "./Card.module.css";               // lokal (scoped) klasslar

export default function Card({ title, children }) {
  return (
    <div className={styles.card}>                      {/* styles.card  "Card_card_a1b2" (unikal) */}
      <h3 className={styles.title}>{title}</h3>
      {children}
    </div>
  );
}
//  Klass nomi avtomatik unikal  boshqa fayldagi .card bilan TO'QNASHMAYDI (2.8)

Misol 6 — Rasm/asset import qilish (2.8)

jsx

import logo from "../assets/logo.svg";                // import  Vite optimal yo'l beradi
import "./Navbar.css";

export default function Navbar() {
  return (
    <nav className="navbar">
      <img src={logo} alt="Logo" className="logo" />   {/* import qilingan rasm */}
      {/* public/ dagi fayl uchun to'g'ridan yo'l: <img src="/banner.png" /> */}
    </nav>
  );
}

Misol 7 — Muhit o'zgaruvchilari (env — 2.10)

jsx

// .env fayli (loyiha ildizida):
//   VITE_API_URL=https://api.mening-dokonim.uz
//   VITE_APP_NAME=Mening Do'konim

// src/services/api.js
const API_URL = import.meta.env.VITE_API_URL;          // VITE_ prefiksli  brauzerga chiqadi
//     process.env EMAS (Vite'da import.meta.env)

export async function getProducts() {
  const res = await fetch(`${API_URL}/products`);      // env'dan URL (kodda hardcode emas)
  return res.json();
}
//  MAXFIY kalit (to'lov secret) BU YERGA YOZILMAYDI — brauzerda ko'rinadi! (10.11)

Misol 8 — vite.config.js: path alias (qulaylik)

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";              // JSX/HMR plugini
import path from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),           // "@"  src/ (qisqa import)
    },
  },
  server: { port: 3000 },                              // dev port (default 5173)
});
// Endi: import Button from "@/components/Button.jsx"  (../../.. o'rniga — toza)

Misol 9 — Feature-based papka tuzilishi (katta loyiha — 2.9)

text

src/
├── features/
│   └── products/
│       ├── components/ProductCard.jsx      products UI
│       ├── hooks/useProducts.js            products mantiqi 11.7-bob
│       ├── services/productApi.js          products API 12.4-bob
│       └── types.ts                        products turlari 11.14-bob
├── shared/
│   ├── ui/Button.jsx                       umumiy UI
│   └── hooks/useDebounce.js                umumiy hooklar
└── app/
    ├── App.jsx
    └── router.jsx                           global routing 11.9-bob
//  products'ga oid HAMMA narsa BIR papkada  topish/o'zgartirish/o'chirish oson

Misol 10 — package.json (skriptlar va bog'liqliklar — 2.6)

json

{
  "name": "mening-dokonim",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview",
    "lint": "eslint .",
    "format": "prettier --write ."
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.0",
    "vite": "^6.0.0",
    "typescript": "^5.6.0",
    "eslint": "^9.0.0",
    "prettier": "^3.3.0"
  }
}

build skripti ikki bosqichli: avval tsc -b turlarni tekshiradi (Vite buni qilmaydi — 2.15), keyin vite build production paketni yig'adi. Shuning uchun tur xatosi build'ni to'xtatadi (bu — yaxshi).

Misol 11 — To'liq vite.config.ts (proxy, alias, build, define — 2.12, 2.13)

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { "@": path.resolve(__dirname, "./src") },   // qisqa import (2.15)
  },
  server: {
    port: 3000,                                          // dev port (default 5173)
    open: true,                                          // start'da brauzerni ochadi
    proxy: {
      // Frontend :3000, backend :8080 — CORS'siz ulanish (2.12, 10.9)
      "/api": {
        target: "http://localhost:8080",                // backend manzili
        changeOrigin: true,
        // fetch("/api/users")  http://localhost:8080/api/users ga uzatiladi
      },
    },
  },
  build: {
    outDir: "dist",                                      // chiqish papkasi
    sourcemap: false,                                    // prod'da odatda o'chirilgan
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],                // kutubxonalar alohida chunk (2.13)
        },
      },
    },
  },
  base: "/",                                             // sub-papkada bo'lsa "/app/" (Xato 6)
  define: {
    __APP_VERSION__: JSON.stringify("1.0.0"),            // build vaqtida global konstanta
  },
});
//  proxy — lokal ishlab chiqishning eng foydali sozlamasi (backend bilan CORS'siz)

Misol 12 — Muhit o'zgaruvchilari: `.env` fayllari va rejimlar (2.10)

text

# .env                 — hamma rejimda (dev + prod)
VITE_API_URL=http://localhost:8080

# .env.production       — faqat `npm run build` (production) da
VITE_API_URL=https://api.mening-dokonim.uz

# .env.development      — faqat `npm run dev` da
VITE_API_URL=http://localhost:8080

# .env.local            — MAXFIY, git'ga tushmaydigan (.gitignore'da bo'ladi)
# .env.example          — namuna (qiymatsiz) — git'ga tushadi, jamoaga yo'riqnoma

// TS'da env turlarini e'lon qilish (avtokomplet + tur xavfsizligi) — src/vite-env.d.ts
interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_APP_NAME: string;
}
// Endi import.meta.env.VITE_API_URL — string deb taniladi (typo'da IDE ogohlantiradi)
//  Fayllar ustuvorligi: .env.local > .env.[mode] > .env (aniqroq — kuchliroq)

Misol 13 — Asset importning maxsus rejimlari (?raw, ?url — 2.14)

import iconUrl from "./assets/icon.svg";          // optimal YO'L (hashli) — odatiy
import rawUrl  from "./assets/icon.svg?url";      // majburan URL string
import readme  from "./docs/readme.md?raw";       // fayl MAZMUNI (xom string)
import config  from "./config.json";              // JSON  obyekt (avtomatik)

console.log(readme);         // "# Readme\n\nSalom..." — butun fayl matni
console.log(config.version); // JSON obyektidan qiymat

// ?raw — SQL sxema, matn shablon, markdown kabi fayllarni kodga olib kirishga qulay

Misol 14 — Barrel export bilan toza importlar (2.15)

// src/components/index.ts — papka uchun "kirish eshigi"
export { default as Button } from "./Button";
export { default as Card } from "./Card";
export { default as Modal } from "./Modal";

// src/App.tsx — bitta qatordan hammasini olamiz (alias + barrel):
import { Button, Card, Modal } from "@/components";
//  Uch qatorli import o'rniga bitta — toza. Alias "@" tsconfig'da ham sozlangan (Misol 11 + 2.15)

Misol 15 — tsconfig.json: path alias (Vite bilan mos — 2.15)

json

{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

paths — TS va IDE @ni src/ deb tushunishi uchun; vite.config.ts'dagi resolve.alias bilan aynan mos bo'lishi shart 2.15-bob. strict: true va noUnusedLocals — build'ni qattiqroq qiladi (xatoni erta topadi — Xato 5).

Misol 16 — Tailwind bilan CSS setup (2.8 muqobili)

text

# O'rnatish (Tailwind v4 — Vite plugini bilan, 2026):
npm install tailwindcss @tailwindcss/vite

// vite.config.ts — plugin qo'shiladi
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

css

/* src/index.css — bitta qator */
@import "tailwindcss";

jsx

// Endi komponentda utility-klasslar (CSS fayl yozmasdan):
export default function Badge({ text }) {
  return <span className="rounded-full bg-blue-500 px-3 py-1 text-white">{text}</span>;
}
//  Tailwind — utility-first: stilni JSX'da klass bilan; CSS Modules'ga 2.8-bob muqobil (1.7)
// PostCSS va Sass ham Vite'da qo'llab-quvvatlanadi (.scss import shunchaki ishlaydi — sass o'rnatilsa)

5. To'g'ri va noto'g'ri holatlar

1) Loyiha boshlash

text

 npx create-react-app my-app  (CRA — eskirgan, sekin, tavsiya etilmaydi)
 npm create vite@latest my-app -- --template react-ts  (Vite — 2.2)

2) Maxfiy ma'lumot

text

 VITE_PAYMENT_SECRET=xxx  (.env'da — BRAUZERGA chiqadi, har kim ko'radi! — 2.10)
 maxfiy narsa faqat BACKEND'da; frontend env'da faqat public qiymat (URL, public key)

3) Komponent tashkili

text

 hammasini App.jsx'da (1000 qatorli fayl — topib bo'lmaydi)
 har komponent o'z faylida + papkalar bo'yicha (2.7, 2.9)

4) Env o'qish

text

 process.env.VITE_API_URL  (Vite'da undefined — bu Node sintaksisi — 5.8)
 import.meta.env.VITE_API_URL  (Vite — 2.10)

5) Deploy nima yuklash

text

 src/ yoki butun loyihani serverga (dev kod — ishlamaydi)
 npm run build  dist/ ni yukla (optimal production paket — 2.6, 10.7)

6) Statik fayl joyi

text

 import qilinmaydigan rasmni src/'da (yo'l topilmaydi)
 o'zgarmas statik  public/ (to'g'ridan /yo'l); import qilinadigan  src/assets (2.8)

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — Failed to resolve import "./Button"

Sababi: import yo'li yoki fayl nomi xato (katta-kichik harf ham muhim — Linux serverda — 10.1), yoki kengaytma yetishmaydi. Yechimi: yo'lni tekshirish; fayl nomini aniq yozish (Button.jsx); alias (@) sozlangan bo'lsa undan foydalanish (Misol 8).

Xato 2 — Brauzerda oq ekran, konsolda Target container is not a DOM element

Sababi: index.html'da <div id="root"> yo'q yoki id boshqacha. Yechimi: index.html'da id="root" borligini va main.jsx'dagi getElementById("root") mosligini tekshirish 2.4-bob.

Xato 3 — import.meta.env.VITE_X — undefined

Sababi: VITE_ prefiksi yo'q, yoki dev-serverni .env o'zgargandan keyin qayta ishga tushirilmagan. Yechimi: o'zgaruvchini VITE_ bilan boshlash; serverni npm run dev bilan qayta yuritish 2.10-bob.

Xato 4 — HMR ishlamaydi, har saqlashda to'liq qayta yuklanadi

Sababi: komponent default export emas yoki fayl tuzilishi HMR'ni buzadi (masalan komponent va oddiy funksiya aralash). Yechimi: komponentlarni alohida faylda, to'g'ri eksport bilan saqlash (Misol 4); @vitejs/plugin-react o'rnatilganini tekshirish.

Xato 5 — npm run build xato beradi, lekin dev ishlaydi

Sababi: TypeScript turi xatosi yoki ishlatilmagan o'zgaruvchi (build qattiqroq tekshiradi), yoki import yo'li (Linux build'da harf registri muhim). Yechimi: xato xabarini o'qib, turlarni/importlarni tuzatish; npm run build'ni deploy'dan oldin lokalda sinash (xato manbasi erta topiladi).

Xato 6 — dist/ ochilganda oq ekran (deploy'dan keyin)

Sababi: asset yo'llari noto'g'ri (sayt sub-papkada joylashgan), base sozlanmagan. Yechimi: vite.config.js'da base: "/sub-path/" sozlash; npm run preview bilan oldindan sinash 2.6-bob.

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

Komponent/JSX 11.2-bob: Vite JSX'ni transpile qiladi; main.jsx App'ni render qiladi.
JS modullar 2.14-bob: import/export — fayllarga ajratishning asosi.
Terminal/npm (0.3, 5.2): npm create, npm run — Vite buyruqlari.
Routing 11.9-bob: pages/ papka, SPA navigatsiya.
State boshqaruvi (12-QISM): services/, store/ — Redux/Query setup.
Deploy (10.2, 10.7, 13.11): npm run build dist/ Nginx/Vercel.
Secrets 10.11-bob: VITE_ env — faqat public; maxfiy backend'da.
TypeScript 11.14-bob: react-ts shabloni; .tsx fayllar; tsconfig alias 2.15-bob.
CORS/proxy (10.9, 12.4): dev'da server.proxy — backend bilan CORS'siz ulanish.
Code splitting 11.8-bob: React.lazy + import() alohida chunk 2.13-bob.
Caching 10.2-bob: content hash + manualChunks vendor — brauzer cache'i.
ESLint/Prettier 15.3-bob: kod sifati va format izchilligi.
SSR/SSG (13-QISM): Vite SPA chegarasi Next.js/framework.

8. Eng yaxshi amaliyotlar (best practices)

Vite (CRA emas) + TypeScript shablon yangi loyihada (2.2, 11.14).
Bir fayl — bir komponent + papkalarga ajratish (toza arxitektura — 2.7, 2.9).
Path alias (@) uzun ../../.. o'rniga (o'qish/ko'chirish oson — Misol 8).
CSS Modules yoki Tailwind (global klass to'qnashuvidan qochish — 2.8, 1.7).
VITE_ env faqat public (maxfiy hech qachon frontend'ga — 2.10, 10.11).
.env'ni .gitignore'ga + .env.example namuna 10.11-bob.
npm run build + preview'ni deploy'dan oldin sinash (xatoni erta topish — 2.6).
StrictMode'ni saqlab qolish (main.jsx'da — dev sifati — 11.2: 2.11).
Feature-based tuzilishga o'tish loyiha o'sganda 2.9-bob.
ESLint + Prettier sozlash (kod sifati izchil — 15.3, 2.16).
server.proxy dev'da backend bilan CORS'siz ishlash uchun 2.12-bob.
Alias'ni ikki joyda mos qo'yish: vite.config + tsconfig 2.15-bob.
manualChunks (vendor) katta loyihada cache samaradorligi uchun 2.13-bob.
Env fayllarni ajratish: .env, .env.production, .env.local (Misol 12).

9. Amaliy loyiha: "React loyihangni noldan qur"

Bu loyiha — keyingi boblar uchun ish maydoni. Maqsad — Vite bilan toza, tashkillangan React loyihasini noldan sozlash.

Maqsad

Vite bilan React (TypeScript) loyihasini yarat, uni mantiqiy papkalarga ajrat, bir nechta komponentni alohida fayllarda yoz va brauzerda jonli ishlat.

Talablar (requirements)

Loyiha: npm create vite bilan React + TypeScript loyihasi yarat va ishga tushir 2.2-bob.
Papka tuzilishi: components/, pages/, assets/, services/ papkalarini yarat 2.9-bob.
Komponentlar: kamida 4 ta komponent, har biri alohida faylda, to'g'ri export bilan 2.7-bob.
Bootstrap: main.jsx App komponentlar daraxti ishlasin 2.4-bob.
Default + named export: ikkalasini ham ishlat (Misol 3).
CSS: kamida bitta komponentda CSS Modules ishlat (2.8, Misol 5).
Asset: logo/rasmni src/assets'dan import qil (2.8, Misol 6).
Path alias: vite.config'da @ src sozla va ishlat (Misol 8).
Env: .env'da VITE_API_URL qo'y, komponentda ko'rsat; .env'ni .gitignore'ga 2.10-bob.
Build: npm run build + npm run preview ishlasin (xato bo'lmasin — 2.6).

Maslahatlar (hint)

Avval npm run dev ishlatilib, default sahifa ko'riladi; keyin App.jsx o'zingizniki bilan almashtiriladi.
HMR'ni his qilish uchun: bir komponentni o'zgartirib saqlasangiz, darhol yangilanganini ko'rasiz 2.5-bob.
Papka tuzilishini boshidan to'g'ri qo'yish kerak — keyin ko'chirish qiyin 2.9-bob.
VITE_ prefiksini unutmaslik kerak, aks holda env undefined bo'ladi (Xato 3).
npm run build'ni darrov sinab ko'rish tavsiya etiladi — keyin deploy'da kutilmagan xato chiqmaydi (Xato 5).

"Tayyor" mezonlari (acceptance criteria)

Vite + React + TS loyihasi ishga tushadi (npm run dev).
Papkalar mantiqiy tashkil etilgan.
Kamida 4 komponent alohida fayllarda, import/export to'g'ri.
Default va named export ikkalasi ishlatilgan.
CSS Modules kamida bitta komponentda.
Asset src/assets'dan import qilingan.
@ alias ishlaydi.
.env (VITE_) o'qiladi va .gitignore'da.
npm run build + preview xatosiz ishlaydi.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda React'ni real loyihaga aylantirdik:

Build tool (JSX transpile, bundle, dev server — nega kerak — 2.1); Vite bilan loyiha yaratish 2.2-bob; tuzilish (index.html, src/, public/ — 2.3).
Bootstrap zanjiri (index.html#root main.jsx createRoot App — 2.4); HMR (tez yangilanish — 2.5); npm skriptlar va dist/ build 2.6-bob.
Fayllarga ajratish (import/export — 2.7); CSS/asset ulash 2.8-bob; arxitektura (type/feature-based — 2.9); SPA va env (VITE_ — 2.10).

Endi sizning ish maydoning tayyor: tezkor, tashkillangan React loyihasi. Komponent yozasiz, saqlaysiz, brauzerda darhol ko'rasiz. Lekin ilovamiz hali ham jonsiz — foydalanuvchi tugmani bossa, matn yozsa, hech narsa o'zgarmaydi. UI hozircha props orqali kelgan statik ma'lumotni ko'rsatadi, xolos. Endi React'ning eng sehrli qismiga — statega — o'tamiz.

Keyingi bob — 11.4-bob: State, hodisalar, shartli render, ro'yxatlar va keys. Komponentga xotira beramiz: useState bilan o'zgaruvchan ma'lumotni saqlash, hodisalarga (onClick, onChange) javob berish, ma'lumot o'zgarganda UI'ning avtomatik yangilanishi (11.1: 2.9 dagi qo'lda render() chaqirish endi yo'qoladi!), shartli render (&&, ternary), va ro'yxatlarni key bilan to'g'ri chizish. Mana shu yerda UI = f(state) jonlanadi va vanilla DOM'ning butun og'rig'i yo'qoladi.

Foydalanilgan rasmiy/ishonchli manbalar

Vite rasmiy hujjati — "Getting Started", "Why Vite" (dev vs build, ESM, esbuild/Rollup), "Features" (asset ?url/?raw, JSON, CSS Modules, PostCSS)
Vite rasmiy hujjati — "Configuring Vite" (vite.config, resolve.alias, define, base), "Server Options" (proxy, port)
Vite rasmiy hujjati — "Env Variables and Modes" (VITE_ prefiks, import.meta.env, .env fayllari), "Building for Production" (rollupOptions, manualChunks, chunk splitting), "Server-Side Rendering"
React rasmiy hujjati — "Start a New React Project", "createRoot", "Add React to an Existing Project", "React.lazy" (code splitting)
Vite rasmiy hujjati — @vitejs/plugin-react, HMR API; React jamoasi tavsiyasi (Create React App eskirgan Vite/Next.js)
TypeScript rasmiy hujjati — tsconfig (paths, baseUrl, moduleResolution)
ESLint va Prettier rasmiy hujjatlari — konfiguratsiya va integratsiya (15.3)
Tailwind CSS rasmiy hujjati — Vite bilan o'rnatish (@tailwindcss/vite)
MDN — ES Modules (import/export), import.meta, dinamik import()

Izohlar (0)

Izoh yozish uchun kiring.

Hozircha izoh yo'q. Birinchi bo'ling!

11.3-bob: React loyiha tuzilishi va Vite

1. Kirish va motivatsiya

2. Nazariya — chuqur tushuntirish

2.1. Build tool nima va nega kerak

2.2. Vite bilan loyiha yaratish

2.3. Loyiha tuzilishi — fayllar va vazifalari

2.4. Ilova qanday yuklanadi — bootstrap zanjiri

2.5. HMR — Hot Module Replacement (tez yangilanish)

2.6. npm skriptlar va production build

2.7. Komponentlarni fayllarga ajratish — import/export

2.8. CSS, rasm va assetlarni ulash

2.9. Loyiha arxitekturasi — papkalarni tashkil qilish

2.10. SPA modeli va muhit o'zgaruvchilari (qo'shimcha — muhim)

2.11. Vite ichida qanday ishlaydi — dev vs production

2.12. vite.config.ts — sozlamaning yuragi

2.13. Build chuqurroq — chunk, code splitting, manualChunks

2.14. Asset importning maxsus rejimlari — ?url, ?raw

2.15. TypeScript, path alias va barrel export

2.16. ESLint, Prettier va Vite plugin ekotizimi

2.17. SSR, SSG va Vite'ning chegarasi

3. Sintaksis — tez ma'lumotnoma

4. Batafsil kod namunalari

Misol 1 — index.html (kirish nuqtasi — 2.4)

Misol 2 — main.jsx (React'ni DOM'ga ulash — 2.4)

Misol 3 — App.jsx va komponentni import qilish (2.7)

Misol 4 — Komponentni alohida faylga ajratish (2.7)

Misol 5 — CSS Modules bilan lokal stillar (2.8)

Misol 6 — Rasm/asset import qilish (2.8)

Misol 7 — Muhit o'zgaruvchilari (env — 2.10)

Misol 8 — vite.config.js: path alias (qulaylik)

Misol 9 — Feature-based papka tuzilishi (katta loyiha — 2.9)

Misol 10 — package.json (skriptlar va bog'liqliklar — 2.6)

Misol 11 — To'liq vite.config.ts (proxy, alias, build, define — 2.12, 2.13)

Misol 12 — Muhit o'zgaruvchilari: .env fayllari va rejimlar (2.10)

Misol 13 — Asset importning maxsus rejimlari (?raw, ?url — 2.14)

Misol 14 — Barrel export bilan toza importlar (2.15)

Misol 15 — tsconfig.json: path alias (Vite bilan mos — 2.15)

Misol 16 — Tailwind bilan CSS setup (2.8 muqobili)

5. To'g'ri va noto'g'ri holatlar

6. Keng tarqalgan xatolar va yechimlari

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

8. Eng yaxshi amaliyotlar (best practices)

9. Amaliy loyiha: "React loyihangni noldan qur"

Maqsad

Talablar (requirements)

Maslahatlar (hint)

"Tayyor" mezonlari (acceptance criteria)

10. Xulosa va keyingi bobga ko'prik

Foydalanilgan rasmiy/ishonchli manbalar

Izohlar (0)

2.12. `vite.config.ts` — sozlamaning yuragi

2.14. Asset importning maxsus rejimlari — `?url`, `?raw`

Misol 12 — Muhit o'zgaruvchilari: `.env` fayllari va rejimlar (2.10)