Xây dựng ứng dụng React đầu tiên với Vite: Hướng dẫn từng bước

Hướng dẫn nhanh này sẽ chỉ cho bạn cách xây dựng ứng dụng React đầu tiên với Vite — từng bước rõ ràng, ví dụ minh họa dễ hiểu và phần tổng kết giúp bạn học nhanh và bắt đầu lập trình ngay!

Bước 1: Cài đặt Node.js và npm

-> Trước tiên, các ứng dụng React cần Node.js để chạy server phát triển và npm (hoặc pnpm/yarn) để quản lý các gói phụ thuộc.

🔹 Tải xuống và cài đặt Node.js từ nodejs.org.

🔎 Xác minh cài đặt:

node -v
npm -v

Bước 2: Tạo ứng dụng React mới với Vite

-> Thay vì sử dụng Create React App, chúng ta sẽ dùng Vite — nhanh hơn và trải nghiệm lập trình tốt hơn.

Chạy các lệnh sau:

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

Trình duyệt của bạn sẽ mở tại địa chỉ http://localhost:5173/ với trang mặc định của React + Vite — xin chúc mừng, ứng dụng của bạn đã chạy!

Bước 3: Hiểu cấu trúc dự án

-> Dự án Vite của bạn sẽ có cấu trúc như sau:

my-first-react-app/
├── node_modules/          📦 Các gói npm đã cài đặt
├── public/                🌐 Tài nguyên tĩnh
├── src/
│   ├── App.jsx            ⚛️ Component App chính
│   ├── App.css            🎨 Style cho App
│   ├── main.jsx           🚀 Điểm khởi đầu render <App /> lên DOM
│   └── assets/            🖼️ Ảnh và file tĩnh
├── index.html             📝 Template HTML chính
├── package.json           📦 Metadata dự án & dependencies
├── vite.config.js         ⚙️ File cấu hình Vite
└── README.md              📘 Tài liệu dự án

Giải thích các thư mục/file chính:

-> index.html – File HTML duy nhất React sẽ gắn kết (mount) vào.

-> src/ – Nơi bạn viết các component.

-> App.jsx – Component chính của bạn.

-> main.jsx – Render App vào DOM.

-> App.css – Style cho ứng dụng.

-> vite.config.js – Cấu hình Vite.

Bước 4: Chỉnh sửa Component đầu tiên

-> Mở src/App.jsx. Mặc định nó sẽ như sau:

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

function App() {
  return (
    <div className="App">
      <h1>Hello Vite + React! 🎨</h1>
    </div>
  );
}
export default App;

Bước 5: Thêm State với Hook useState

-> Hãy thêm một bộ đếm đơn giản để làm cho nó tương tác:

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

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

  return (
    <div className="App">
      <h1>Simple Counter 🚀</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

Giờ ứng dụng của bạn đã có:

• Một biến state (count) để lưu số đếm.
• Nút bấm để cập nhật state.
• Giao diện cập nhật ngay lập tức khi state thay đổi!

Bước 6: Thêm Style cho ứng dụng

-> Mở src/App.css và thêm style:

.App {
  text-align: center;
  margin-top: 50px;
}

button {
  font-size: 1.2rem;
  padding: 10px 20px;
  cursor: pointer;
}

Style sẽ tự động được áp dụng vì App.css đã được import trong App.jsx.

Bước 7: Build dự án cho Production

-> Để tạo bản build sẵn sàng triển khai, chạy lệnh:

npm run build

Đây là URL bạn có thể mở trong trình duyệt để xem build production trên máy: http://localhost:5173/ 🎉 Chỉ cần copy URL này và dán vào trình duyệt!

Tổng kết & kết luận

• Thiết lập ứng dụng React hiện đại bằng Vite.
• Chỉnh sửa component React đầu tiên.
• Thêm state với hook useState.
• Tạo style cho ứng dụng bằng CSS.
• Build ứng dụng để triển khai production.

Hoàn thành!

Xin chúc mừng — ứng dụng React + Vite đầu tiên của bạn đã chạy thành công!

Hãy tiếp tục lập trình, giữ tinh thần ham học hỏi và chúc bạn phát triển vui vẻ!