React o'rnatish va Vite bilan birinchi ilova

React nima darsida React kodi brauzerda to’g’ridan-to’g’ri ishlamasligini aytdik. Uni oddiy JavaScript’ga o’giradigan vosita kerak. Bu darsda Vite yordamida to’liq loyiha yaratamiz va brauzerda ochamiz.

Nima uchun alohida vosita kerak

Oldingi darsdagi kodni eslang:

<li key={task.id}>{task.title}</li>

Brauzer bu qatorni tushunmaydi — .js faylda <li> yozilsa, sintaksis xatosi chiqadi. Demak kod brauzerga yetib borishidan oldin oddiy JavaScript’ga aylantirilishi kerak.

Bundler darsida bu g’oyani ko’rgansiz. Vite — shu ishni bajaradigan zamonaviy vosita. Uni alohida o’rnatish shart emas: loyiha yaratish buyrug’i o’zi yuklab oladi.

Tayyorgarlik: Node.js

Vite Node.js ustida ishlaydi. Terminalda tekshiring:

node --version
npm --version

Kutilgan natija (raqamlar farq qilishi mumkin):

v24.14.1
11.11.0

Node.js o’rnatilmagan bo’lsa, nodejs.org saytidan LTS belgili versiyani oling va terminalni qayta oching.

1-qadam: loyihani yaratish

Loyiha yaratmoqchi bo’lgan papkaga o’ting va buyruqni bering:

npm create vite@latest my-app -- --template react

Buyruqni qismlarga ajratamiz:

Qism Ma’nosi
npm create vite@latest Vite loyiha yaratuvchisini ishga tushiradi
my-app Loyiha papkasi nomi
-- Keyingisi Vite’ga tegishli degan belgi
--template react React shabloni (JavaScript bilan)

Buyruq shunday javob beradi:

Scaffolding project in .../my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

2-qadam: bog’liqliklarni o’rnatish

Loyiha yaratildi, lekin node_modules papkasi hali yo’q. Papkaga kiring va o’rnating:

cd my-app
npm install

Natija:

added 24 packages, and audited 25 packages in 15s

found 0 vulnerabilities

3-qadam: ishga tushirish

npm run dev

Terminal shunday yozadi:

  VITE v8.3.0  ready in 1832 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Brauzerda http://localhost:5173 manzilini oching. Vite va React logotiplari bo’lgan sahifa va bosilganda raqami oshadigan tugma ko’rinadi. Tugma ishlasa — React ishlayapti.

Serverni to’xtatish uchun terminalda Ctrl+C bosing.

Loyiha tuzilishi

Papkani oching va asosiy fayllarni ko’ring:

my-app/
├── index.html          — kirish nuqtasi (HTML)
├── package.json        — loyiha ma'lumoti va buyruqlar
├── vite.config.js      — Vite sozlamalari
├── node_modules/       — o'rnatilgan bog'liqliklar
├── public/             — o'zgarmasdan ko'chiriladigan fayllar
└── src/
    ├── main.jsx        — React'ni ishga tushiradigan fayl
    ├── App.jsx         — asosiy komponent
    ├── App.css         — App uslublari
    ├── index.css       — umumiy uslublar
    └── assets/         — rasm va boshqa fayllar

Kundalik ishda siz asosan src/ ichida ishlaysiz. node_modules ga qo’l tegizilmaydi.

index.html — hamma narsa shu yerdan boshlanadi

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>my-app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Ikki muhim qator:

  • <div id="root"></div> — bo’sh idish. Butun ilova shu div ichiga chiziladi.
  • <script type="module" src="/src/main.jsx"> — JavaScript kirish nuqtasi.

HTML’da boshqa hech nima yo’q. Sahifadagi barcha tarkib React tomonidan hosil qilinadi.

main.jsx — ulanish nuqtasi

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Qatorma-qator:

  1. document.getElementById('root') — HTML’dagi bo’sh div topiladi.
  2. createRoot(...) — React o’sha divni o’z nazoratiga oladi.
  3. .render(<App />) — App komponenti shu ildizga chiziladi.

StrictMode — React’ning qo’shimcha tekshiruv rejimi. U faqat ishlab chiqish paytida ishlaydi va yig’ilgan saytga tushmaydi. Uning bitta kutilmagan ta’siri bor — useEffect darsida ko’rasiz.

App.jsx — sizning kodingiz

src/App.jsx da namunaviy sahifa turadi. Uni to’liq o’chirib, o’zingizni yozing:

function App() {
  return (
    <div>
      <h1>Salom, React!</h1>
      <p>Birinchi ilovam ishlayapti.</p>
    </div>
  );
}

export default App;

Faylni saqlang va brauzerga qarang. Sahifa o’zi yangilandi — siz F5 bosmadingiz.

App.jsx ni tozalaganingizda src/App.css ichidagi uslublar ortiqcha bo’lib qoladi. Uning tarkibini o’chirib, bo’sh fayl qoldiring yoki o’z uslublaringizni yozing.

npm run build — saytni yig’ish

Ishlab chiqish serveri faqat sizning kompyuteringiz uchun. Saytni internetga qo’yish uchun uni yig’ish kerak:

npm run build

Natija:

vite v8.3.0 building client environment for production...
✓ 20 modules transformed.
dist/index.html                   0.45 kB │ gzip:  0.29 kB
dist/assets/index-DykytF2W.css    4.10 kB │ gzip:  1.47 kB
dist/assets/index-C9t0fL5M.js   222.53 kB │ gzip: 69.28 kB

✓ built in 673ms

dist/ papkasi paydo bo’ladi — ichida oddiy HTML, CSS va JavaScript. Aynan shu papka serverga yuklanadi. Yig’ilgan natijani tekshirish uchun:

npm run preview

Kundalik buyruqlar

Buyruq Nima qiladi
npm install Bog’liqliklarni o’rnatadi
npm run dev Ishlab chiqish serverini yoqadi
npm run build dist/ papkasiga yig’adi
npm run preview Yig’ilgan natijani ko’rsatadi

Amaliy mashq

  1. my-app nomi bilan yangi Vite loyihasi yarating va npm install bajaring.
  2. npm run dev bering va brauzerda ochiladigan manzilni terminaldan o’qib oling.
  3. src/App.jsx dagi namunaviy tarkibni o’chirib, o’z sarlavhangiz va ikkita xatboshi yozing.
  4. Faylni saqlab, brauzerga qarang — sahifa o’zi yangilanganini kuzating.
  5. index.html dagi <title> ni o’zgartiring va brauzer yorlig’idagi yozuv o’zgarganini tekshiring.
  6. npm run build bajaring va dist/ papkasi ichida qanday fayllar paydo bo’lganini ko’ring.

4-qadam eng muhimi: HMR ishlamasa, keyingi darslardagi har o’zgarish uchun sahifani qo’lda yangilashga to’g’ri keladi.

Qisqacha xulosa

  • React kodi brauzerda to’g’ridan-to’g’ri ishlamaydi — build vositasi uni oddiy JavaScript’ga o’giradi.
  • npm create vite@latest my-app -- --template react loyihani yaratadi; -- belgisini tushirib qoldirmang.
  • index.html dagi <div id="root"> — butun ilova chiziladigan joy.
  • src/main.jsx React’ni shu divga ulaydi, src/App.jsx — sizning asosiy komponentingiz.
  • npm run dev ishlab chiqish uchun, npm run build saytni dist/ ga yig’ish uchun.
  • HMR tufayli fayl saqlanganda brauzer o’zi yangilanadi.

Keyingi darsda JSX sintaksisi — App.jsx ichidagi HTML’ga o’xshash yozuvning qoidalari.

Bu dars foydali bo'ldimi?

—
— marta ko'rildi