Vite + React суулгах ба тохиргоо

React апп эхлүүлэх хамгийн хурдан арга бол Vite ашиглах явдал юм. Vite бол орчин үеийн frontend build хэрэгсэл бөгөөд маш хурдан hot reload, цэвэр файлын бүтэц бүхий React проект үүсгэж өгдөг. Энэ хичээлд компьютер дээрээ React орчноо тохируулж, анхны аппаа ажиллуулна.

Node.js суулгаж шалгах

Vite ажиллахын тулд Node.js компьютерт суусан байх шаардлагатай. Эхлээд шалгацгаая:

node --version
npm --version

Хэрэв v18.0.0 буюу түүнээс дээш хувилбар харагдвал болно. Суугаагүй бол nodejs.org сайтаас LTS хувилбарыг татаж суулгаарай.

Vite ашиглан React проект үүсгэх

Terminal (Windows-д Command Prompt эсвэл PowerShell) нээгээд дараах командыг ажиллуулна:

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

Хөтчөөр http://localhost:5173 хаяг руу орвол React-н угтвар хуудас гарч ирнэ. Тийм бол амжилттай суулгасан гэсэн үг — баяр хүргэе!

Файлын бүтцийг танилцах

Проект үүсгэсний дараа дараах бүтэц бий болно:

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

Хамгийн чухал файлууд:

• index.html — хөтч ачаалдаг эх файл. React энд холбогдоно.
• src/main.jsx — React аппыг эхлүүлдэг файл. ReactDOM.createRoot энд дуудагдана.
• src/App.jsx — аппын үндсэн component. Та эндээс эхлэн код бичнэ.

src/main.jsx файлыг нээвэл дараах кодыг харна:

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

createRoot нь index.html дахь id="root" элемент дээр React аппыг "суулгадаг". StrictMode бол хөгжүүлэлтийн явцад нэмэлт анхааруулга харуулдаг туслах wrapper юм.

App.jsx цэвэрлэж эхлэх

Угтвар кодыг устгаж цэвэр хуудасаас эхэлцгээе. src/App.jsx файлыг нээж дараах кодоор бүрэн солино:

function App() {
  return (
    <div>
      <h1>Сайн уу, React!</h1>
      <p>Миний анхны апп эхэллээ.</p>
    </div>
  );
}

export default App;

Файлаа хадгалмагц хөтөч автоматаар шинэчлэгдэнэ — энэ бол Vite-н hot reload функц юм. Код өөрчлөх бүрт хуудсаа гараар дахин ачаалах шаардлагагүй.

package.json-г ойлгох

package.json файл нь проектийн мэдээлэл болон суусан сан (library)-уудын жагсаалтыг агуулдаг:

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "vite": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

• npm run dev — хөгжүүлэлтийн сервер эхлүүлнэ
• npm run build — продакшн хувилбар бэлдэнэ
• react болон react-dom — React-н үндсэн сангууд

Дараагийн хичээлд:

JSX гэж яг юу болох, яагаад JavaScript дотор HTML бичиж болдог талаар гүнзгийрч судална. JSX-н дүрэм, илэрхийлэл бичих арга, нийтлэг алдаануудтай танилцана.