0.2. Muhit sozlash - Birinchi loyiha (Vite bilan)

Muhit sozlash

1. Node.js o'rnating (LTS versiya, 20+). Tekshirish:

   node -v
   npm -v
   

2. Code muharriri — VS Code. Quyidagi extension'larni o'rnating:
3. ES7+ React/Redux/React-Native snippets
4. Prettier (kod formatlash)
5. ESLint
6. Brauzer — Chrome + React Developer Tools extension.

Birinchi loyiha (Vite bilan)¶

⚠️ Create React App (CRA) o'lgan — 2025-yilda rasman deprecated qilingan. Yangi SPA loyihalar uchun Vite ishlatamiz (tez, yengil, zamonaviy). Katta production ilovalar uchun keyinroq Next.js'ni ko'ramiz.

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Brauzerda http://localhost:5173 ochiladi. Tabriklaymiz — bu sizning birinchi React ilovangiz.

Loyiha tuzilishi

my-app/
├── index.html        ← yagona HTML fayl (SPA)
├── package.json      ← bog'liqliklar (dependencies)
├── vite.config.js    ← Vite sozlamalari
└── src/
    ├── main.jsx       ← kirish nuqtasi (entry point)
    ├── App.jsx        ← ildiz komponent
    └── index.css

src/main.jsx — bu yerda React DOM'ga ulanadi:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

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

StrictMode — development'da xatolarni topishga yordam beradi (ba'zi narsalarni 2 marta chaqiradi — bu normal, qo'rqmang).