App React đầu tiên với Vite

Xem này: dựng dự án

Vite (đọc là “veet,” tiếng Pháp nghĩa là “nhanh”) là công cụ chuẩn bị khung dự án React sẵn. Mở terminal và vào chỗ bạn muốn đặt dự án (như Desktop):

cd Desktop
npm create vite@latest my-react-web -- --template react

Vite có thể hỏi gì đó – xác nhận bằng Enter. Rồi:

cd my-react-web
npm install
npm run dev -- --port 3901

• npm install tải mọi thứ dự án cần (mất chút thời gian – React và phụ trợ vào thư mục node_modules).
• npm run dev -- --port 3901 chạy server phát triển. Terminal hiện địa chỉ http://localhost:3901. Mở trong trình duyệt.

Bạn thấy logo quay và tiêu đề “Vite + React”? Chúc mừng – app React đầu tiên đang chạy! 🎉

Tham quan dự án

Mở thư mục my-react-web trong VS Code (File → Open Folder). Nhiều file, nhưng chỉ ba cái quan trọng bây giờ:

Bỏ qua phần còn lại (không mở hoặc xóa node_modules, package.json là danh sách package).

Thay đổi code đầu tiên

Mở src/App.jsx. Xóa hết và viết:

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

Lưu – trang trong trình duyệt tự đổi. Bạn đang nhìn:

• Component App là function trả về HTML (ký hiệu này gọi JSX).
• {name} – ngoặc nhọn chèn JavaScript vào HTML. Cái gì cũng được: biến, tính {2 + 3}, cả điều kiện.
• export default App – “tôi cho file khác dùng component này” (main.jsx là file lấy nó).

JSX có hai quirk bạn sẽ quen: thay class viết className (class là từ khóa trong JavaScript), và component phải trả về một phần tử bọc (nên có <div> quanh hết).

Đến lượt bạn 💪

1. Dựng dự án theo hướng dẫn và chạy được.
2. Sửa App.jsx: tiêu đề tên bạn, đoạn về dự án đang làm, và biến age hiển thị trong câu I am {age} years old.
3. Cố ý xóa thẻ đóng và xem lỗi trông thế nào – Vite hiện ngay trong trình duyệt, kèm số dòng. Rồi sửa.
4. Dừng server (Ctrl+C trong terminal) và chạy lại (npm run dev -- --port 3901) – làm quen cả vòng lặp.

Điều cần nhớ từ bài học này

• npm create vite@latest dựng dự án, npm install tải package, npm run dev chạy localhost.
• Code viết trong src/App.jsx: component là function trả JSX, {} chèn JavaScript vào HTML.
• Trong JSX: className thay class, luôn một phần tử bọc.

© 2026 Ing. Martin Polak / AlgoRhino · Điều khoản sử dụng nội dung