Bu modulda React bilan tanishildi: u nima, ish muhiti va loyiha ochishning uch usuli.
React nima
React — foydalanuvchi interfeysi (UI) qurish uchun JavaScript kutubxonasi. Asosiy g’oyasi ikkita:
- Komponentlar — interfeys mayda, qayta ishlatiladigan bo’laklardan yig’iladi (tugma, karta, menyu — har biri alohida komponent).
- Holatga bog’liq render — siz "ma’lumot o’zgarsa sahifa qanday ko’rinishi kerak"ligini yozasiz; DOM’ni yangilashni React o’zi qiladi. Vanilla JS’dagi qo’lda element topib o’zgartirishlar yo’qoladi.
Shu yondashuv bilan SPA (Single Page Application) quriladi — sahifa bir marta yuklanib, keyin qayta yuklanmasdan yangilanib boradigan ilova.
Kerakli dasturlar
React loyihasi uchun Node.js o’rnatiladi (nodejs.org) — bizga uning o’zi emas, birga keladigan npm (paket menejeri) va dev-server kerak. Tekshirish:
node --version
npm --version
Natija: ikkita versiya raqami (masalan v20.11.0 va 10.2.4).
Tipik xato. Terminalda npm "not recognized" bersa — Node.js o’rnatilmagan yoki terminal qayta ochilmagan.
Loyiha ochishning uch usuli
| Usul | Nima | Qachon |
|---|---|---|
| CDN | React’ni <script> bilan ulash |
Faqat tanishuv-tajriba uchun |
| Create React App | npx create-react-app nomi |
Klassik usul (kursda ko’rsatilgan) |
| Vite | npm create vite@latest |
Zamonaviy standart — juda tez |
CDN usuli React qanday ishlashini ko’rsatadi, lekin real loyihalar build vositasi bilan ochiladi. Vite bugungi tavsiya: o’rnatishi ham, dev-serveri ham CRA’dan sezilarli tez.
Ishga tushirish va struktura
npm install
npm run dev
Natija: terminal lokal manzil beradi (odatda http://localhost:5173) — brauzerda loyiha ochiladi va kod saqlanishi bilan o’zi yangilanadi.
Muhim fayllar: src/App.jsx — asosiy komponent (ishni deyarli doim shu yerdan boshlaysiz), src/main.jsx — ilovani sahifaga ulaydigan kirish nuqtasi, index.html — yagona HTML fayl. Rasm va uslublar ham src ichida turadi va import bilan chaqiriladi:
import "./App.css";
import logo from "./assets/logo.png";
Amaliyot
- Node.js o’rnatib, versiyalarni tekshiring.
- Vite bilan yangi loyiha oching,
npm run devqilib brauzerda ko’ring. App.jsxdagi matnni o’zgartirib saqlang — brauzer o’zi yangilanishini kuzating.srcga rasm qo’shib, import orqali sahifada ko’rsating.
Modul testini ishlang — keyingi modulda React’ning yuragi: komponent, JSX va state.