Loyiha yaratish — Vite + React, tuzilishi, package.json

~15 daq · React · Kirish va Asoslar

Muammo: brauzer React ni tushunmaydi

Siz React yozmoqchisiz. Lekin bir muammo bor — brauzer React kodini to'g'ridan-to'g'ri o'qiy olmaydi.

Nima uchun? React da JSX degan narsa bor — HTML ga o'xshash sintaksis. Masalan:

const element = <h1>Salom</h1>;

Bu — oddiy JavaScript emas. Brauzer buni ko'rsa xato beradi, chunki <h1> ni o'zgaruvchiga tenglashtirish JavaScript da mavjud emas.

Bundan tashqari, React loyihasida onlab, yuzlab .js fayllar bo'ladi. Brauzerga ularni bittama-bitta yuklash ham samarasiz.

Demak, siz yozgan kod brauzerga yetib borishidan oldin ikki ish bajarilishi kerak:

1. JSX → oddiy JavaScript ga aylantirilsin
2. Ko'p fayl → bitta (yoki bir nechta) faylga yig'ilsin

Bu ishni build tool bajaradi.

Vite nima?

Vite — build tool. U sizning kodingizni brauzer tushunadigan holatga keltiradi.

Lekin Vite faqat shu emas. U shuningdek:

• Development server ishga tushiradi — siz kod yozasiz, brauzer darhol yangilanadi
• Hot Module Replacement (HMR) — sahifani to'liq qayta yuklamasdan, faqat o'zgargan qismni yangilaydi
• Production build — loyihani deploy qilish uchun optimallashtirilgan fayllar yaratadi

Ilgari nima ishlatilardi?

React chiqqanida Create React App (CRA) bor edi. Ko'p yillar davomida standart vosita edi. Lekin muammo bor edi — loyiha o'sganda development server ishga tushishi 30-60 soniya olardi. Har bir o'zgarishda ham sekin yangilanardi.

Vite boshqacha yondashuv ishlatadi. CRA barcha fayllarni oldin birlashtiradi, keyin serverga beradi. Vite esa serverga beradi, brauzer qaysi faylni so'rasa, o'shani o'sha zahoti o'zgartiradi. Shuning uchun loyiha qanchalik katta bo'lmasin — server 1-2 soniyada ishga tushadi.

Hozir CRA rasman eskirgan deb e'lon qilingan. Yangi loyihalarda Vite ishlatiladi.

Loyiha yaratish

Terminalda:

npm create vite@latest mening-loyiham -- --template react

Bu buyruq sizdan bir nechta savol so'rashi mumkin — framework va variant tanlash. React va JavaScript ni tanlang.

Keyin:

cd mening-loyiham
npm install
npm run dev

npm install — package.json da yozilgan barcha kutubxonalarni yuklab oladi. Bu bir marta bajariladi.

npm run dev — development server ishga tushadi. Terminalda shunday ko'rinadi:

  VITE v6.0.5  ready in 312 ms

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

Brauzerda http://localhost:5173 ni oching — React ilovasi ishlamoqda.

Papkalar tuzilishi

Loyiha yaratilgandan keyin quyidagi tuzilish hosil bo'ladi:

mening-loyiham/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js

Har bir narsa nima uchun kerak — birma-bir ko'ramiz.

index.html — hamma narsa shu yerdan boshlanadi

Brauzer birinchi navbatda shu faylni yuklaydi. Ichiga qarasangiz:

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

<div id="root"> — bo'sh div. React butun ilovasini shu div ichiga joylaydi. Sahifada boshqa hech narsa yo'q — hamma narsa JavaScript orqali yaratiladi.

<script type="module" src="/src/main.jsx"> — Vite shu fayldan boshlab ishga tushadi.

src/main.jsx — React ni sahifaga ulash

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>,
)

Bu fayl React ni #root elementiga "ulaydi". Vanilla JS da xuddi shu ish shunday bo'lardi:

const root = document.getElementById('root');
root.innerHTML = '<h1>Salom</h1>';

React da esa createRoot — React ning DOM ni o'z qo'liga olishi. Bundan keyin #root ichidagi hamma narsa React tomonidan boshqariladi. Siz endi document.getElementById yoki innerHTML ishlatmaysiz — React o'zi hal qiladi.

StrictMode haqida keyinroq alohida dars bo'ladi. Hozircha u development rejimida qo'shimcha tekshiruvlar qiladi, deb biling.

src/App.jsx — asosiy komponent

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>Vite + React</h1>
      <button onClick={() => setCount(count + 1)}>
        Bosimlar soni: {count}
      </button>
    </div>
  )
}

export default App

Bu — standart namuna. Keyingi darslarda buni o'chirib, o'zimiz yozamiz.

vite.config.js — Vite sozlamalari

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Hozircha bu faylga tegmaysiz. Keyinchalik path alias (@/components/... kabi qisqa import yo'llari), proxy sozlamalari shu yerga qo'shiladi.

public/ papkasi — statik fayllar

Bu papkadagi fayllar Vite tomonidan o'zgartirilmaydi — to'g'ridan-to'g'ri brauzerga beriladi. Favicon, rasmlar, fontlar shu yerga qo'yiladi.

public/logo.png → brauzerda /logo.png manzilida mavjud bo'ladi.

package.json — loyiha haqida ma'lumot

{
  "name": "mening-loyiham",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.4",
    "vite": "^6.0.5"
  }
}

dependencies va devDependencies farqi

dependencies — ilova ishlashi uchun kerak bo'lgan kutubxonalar. react va react-dom foydalanuvchi brauzerida ham ishlaydi, shuning uchun bu yerda.

devDependencies — faqat siz kod yozayotganda kerak. vite va eslint foydalanuvchi brauzerida ishlamaydi — ular faqat sizning kompyuteringizda, loyiha qurilayotganda kerak.

react va react-dom — nima uchun ikki alohida paket?

react — React ning o'zi: komponentlar, hooks, Virtual DOM mantiq. Bu qism platformadan mustaqil.

react-dom — React ni brauzer DOM ga ulash uchun. Agar React Native bilan mobil ilova yozsangiz, react-dom o'rniga react-native ishlatiladi. Ya'ni React ning o'zi bir xil — faqat "ulash" qismi o'zgaradi.

Skriptlar

Toza loyiha — keraksizlarni o'chirish

Standart loyihada namuna kodlar bor. Ularni o'chirib, toza boshlaymiz.

src/App.jsx ni shunday qilib almashtiramiz:

function App() {
  return (
    <div>
      <h1>Salom, React!</h1>
    </div>
  );
}

export default App;

src/App.css ni bo'shatamiz. src/assets/ papkasini o'chiramiz — hozircha kerak emas.

Saqlang — brauzer avtomatik yangilanadi va "Salom, React!" ko'rinadi. Sahifani qayta yuklamasdan yangilanishi — HMR ning ishi.

Tez-tez uchraydigan xatolar

npm run dev ishlamaydi:

Error: Cannot find module 'vite'

npm install ni ishga tushirmadingiz. node_modules/ papkasi yo'q. Har doim loyihani klonlagan yoki yaratgandan keyin npm install qilish kerak.

Port band:

Port 5173 is in use, trying another one...

Boshqa terminal da allaqachon npm run dev ishlamoqda. Bu xato emas — Vite avtomatik boshqa port tanlaydi (5174, 5175...).

Fayl nomi katta-kichik harf muammosi:

Failed to resolve import "./app" from "src/main.jsx"

App.jsx bor, lekin import App from './app' deb yozdingiz. Windows da ishlashi mumkin, lekin Linux serverda (production) xato beradi. Har doim fayl nomini to'g'ri yozing.

Xulosa

Vite — build tool va development server. U JSX ni oddiy JavaScript ga aylantiradi, fayllarni birlashtiradi, va kod o'zgarganda brauzerni avtomatik yangilaydi.

Loyiha tuzilishi:

• index.html — kirish nuqtasi, #root div bor
• src/main.jsx — React ni #root ga ulaydi
• src/App.jsx — asosiy komponent, shu yerdan boshlanadi
• public/ — statik fayllar (rasm, favicon)
• package.json — loyiha va kutubxonalar haqida ma'lumot

Keyingi dars

3-dars: JSX — nima, JavaScript dan farqi, qoidalar