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ẻ!