Chapter 2 — Loyihani Sozlash

React nima ekanini bilasiz — endi uni real muhitda ishga tushirish vaqti keldi.

2.1 Vite bilan loyiha yaratish

Simple Explanation

Vite — zamonaviy, tez ishlaydigan build tool va development server.

Example

terminal.sh
BashNusxalash
01npm create vite@latest my-app -- --template react
02cd my-app
03npm install
04npm run dev

Why Does It Exist?

Brauzer to'g'ridan-to'g'ri JSX yoki zamonaviy JS modullarini tushunmaydi — Vite kodni compile qilib, tez development server va optimallashtirilgan production build beradi.

2.2 Papka strukturasi

Example

code.text
TEXTNusxalash
01src/
02├── components/
03├── pages/
04├── hooks/
05├── services/
06├── utils/
07├── App.jsx
08└── main.jsx

⚠️ Common Mistake
node_modules papkasini Git'ga qo'shish — buning o'rniga .gitignore ishlatiladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: O'zingizning birinchi Vite + React loyihangizni yarating va ishga tushiring.
Hint: npm create vite@latest buyrug'idan foydalaning.

📌 Chapter Summary

Vite — tez development server va build tool. Feature/tur asosidagi papka strukturasi loyihani o'sishga tayyorlaydi.

🎯 Key Takeaways

• Vite — zamonaviy React loyihalarini tez ishga tushirish vositasi
• Yaxshi papka strukturasi loyiha o'sganda muhim rol o'ynaydi
• node_modules Git'ga qo'shilmaydi

⚡ Quick Cheat Sheet

terminal.sh
BashNusxalash
01npm create vite@latest my-app -- --template react
02cd my-app && npm install
03npm run dev      # development server
04npm run build    # production build