DarslarWeb dasturlash

React bilan tanishuv — kirish va sozlash

React nima, nega kerak, npm bilan ishlash va birinchi «Hello world» komponentini yaratish.

55 daqiqa

React — Dars 1

Nega React?

Meta tomonidan yaratilgan va dunyoda eng ko'p ishlatiladigan frontend kutubxonasi. UI'ni komponentlardan qurish g'oyasi.

ReactcomponentnpmJSX

Dars rejasi

6 ta mavzu

01React nima va qayerda ishlatiladi?
02Package manager — npm
03Create React App
04Vite — zamonaviy muqobil
05Loyiha strukturasi
06Birinchi «Hello world»

1. React nima va qayerda ishlatiladi?

React — UI (foydalanuvchi interfeysi) quradigan JavaScript kutubxonasi. Butun sahifa emas, kichkina, qayta ishlatiladigan «komponentlar»dan tashkil topadi.

Komponent-asosli

Har bir tugma, karta, forma — alohida komponent. Qayta ishlatiladi va testlanadi.

Deklarativ

«Nima ko'rsatilsin» deb yozasiz, «qanday chizilsin»ni React hal qiladi.

Virtual DOM

React sahifani to'g'ridan-to'g'ri emas, samarali yangilaydi — tez va silliq.

2. Package manager — npm

npm (Node Package Manager) — JavaScript kutubxonalarini o'rnatish va boshqarish vositasi. Node.js o'rnatilganda birga keladi.

1# Node.js o'rnatilganini tekshirish
2node -v
3npm -v
4
5# Yangi loyihada init qilish
6npm init -y
7
8# Paket o'rnatish
9npm install react
10npm install react-dom
11
12# Qisqacha
13npm i react
14
15# Dev paket (faqat dasturlash uchun)
16npm install --save-dev vite
17
18# Barcha paketlarni o'rnatish (clone'dan keyin)
19npm install
20
21# Paketni o'chirish
22npm uninstall react
23
24# Global paket
25npm install -g create-react-app

package.json — loyiha pasporti

1{
2  "name": "birinchi-react",
3  "version": "0.1.0",
4  "scripts": {
5    "dev": "vite",
6    "build": "vite build",
7    "preview": "vite preview"
8  },
9  "dependencies": {
10    "react": "^18.2.0",
11    "react-dom": "^18.2.0"
12  },
13  "devDependencies": {
14    "vite": "^5.0.0",
15    "@vitejs/plugin-react": "^4.2.0"
16  }
17}

3. Create React App

Create React App (CRA) — rasmiy «old» usul. Hech narsa sozlamasdan to'liq React loyiha yaratadi. Hozir u eskirgan, lekin bilish foydali.

1# Yangi loyiha yaratish
2npx create-react-app birinchi-app
3
4# Ichkariga o'tish
5cd birinchi-app
6
7# Dev server ishga tushirish
8npm start
9
10# Brauzerda ochiladi: http://localhost:3000
11
12# Build qilish (production uchun)
13npm run build
14
15# Test
16npm test

4. Vite — zamonaviy muqobil

Vite (fransuzcha «tez» — /vit/) — CRA o'rniga tavsiya etiladigan zamonaviy vosita. Sekundlar ichida ishga tushadi.

1# Yangi React loyiha
2npm create vite@latest my-app
3
4# Shablon tanlang: React + JavaScript (yoki TypeScript)
5
6cd my-app
7npm install
8npm run dev
9
10# Ochiladi: http://localhost:5173

Vite — afzalliklar

Juda tez ishga tushadi, HMR (hot reload) darhol, zamonaviy ESM asosida.

CRA — kamchiliklar

Sekin, webpack eski, endi yangilanmaydi. Yangi loyiha uchun tanlamang.

5. Loyiha strukturasi

Vite + React loyiha

1my-app/
2├── node_modules/        # O'rnatilgan paketlar (qo'l tegilmaydi)
3├── public/              # Statik fayllar (rasm, favicon)
4│   └── vite.svg
5├── src/                 # Asosiy kod shu yerda
6│   ├── assets/          # Rasmlar
7│   ├── App.css
8│   ├── App.jsx          # Asosiy komponent
9│   ├── index.css
10│   └── main.jsx         # Kirish nuqtasi
11├── .gitignore
12├── index.html           # Yagona HTML (root div)
13├── package.json         # Paketlar ro'yxati
14├── package-lock.json    # Aniq versiyalar
15└── vite.config.js       # Vite sozlamalari

6. Birinchi «Hello world»

index.html

1<!DOCTYPE html>
2<html lang="uz">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Birinchi React</title>
6  </head>
7  <body>
8    <!-- React shu div ichiga chiziladi -->
9    <div id="root"></div>
10    <script type="module" src="/src/main.jsx"></script>
11  </body>
12</html>

src/main.jsx — kirish nuqtasi

1import React from "react";
2import ReactDOM from "react-dom/client";
3import App from "./App";
4import "./index.css";
5
6// root elementni topamiz va React'ni unga biriktiramiz
7ReactDOM.createRoot(document.getElementById("root")).render(
8  <React.StrictMode>
9    <App />
10  </React.StrictMode>
11);

src/App.jsx — birinchi komponent

1function App() {
2  return (
3    <div>
4      <h1>Salom, React!</h1>
5      <p>Bu mening birinchi React komponentim.</p>
6    </div>
7  );
8}
9
10export default App;

Hello World — jonli

HTML

Natijajonli

Loyihani ishga tushirish — qisqacha

1# 1. Loyiha yaratish
2npm create vite@latest birinchi-react
3
4# 2. Ichkariga kirish va paketlarni o'rnatish
5cd birinchi-react
6npm install
7
8# 3. Dev server
9npm run dev
10
11# 4. Brauzerda oching: http://localhost:5173

Kichik test

0 / 4

1.React nima?

2.React paketini o'rnatish uchun buyruq?

3.Zamonaviy React loyihasi uchun tavsiya etiladigan vosita?

4.Loyiha ildizida qaysi fayl barcha paketlarni ro'yxatlaydi?

Mustaqil ish

0 / 6