Bài 2. Chuẩn bị môi trường với Node và Vite

Cài Node.js và dùng Vite để tạo dự án React đầu tiên chạy trên máy trong vài phút.

25 phútCơ bản
Bạn sẽ học được
  • Cài Node.js và kiểm tra
  • Tạo dự án bằng Vite
  • Hiểu cấu trúc thư mục dự án
  • Chạy máy chủ phát triển và build sản phẩm
Thuật ngữ cần biết
Node.js
Môi trường chạy JavaScript ngoài trình duyệt, đi kèm npm.
Vite
Công cụ dựng dự án frontend, khởi động tức thì.
Máy chủ phát triển
Máy chủ cục bộ tự tải lại khi bạn sửa mã (HMR).
Build
Biên dịch và nén mã thành tệp tối ưu để đưa lên mạng.

Khái niệm và lý thuyết

Công cụ frontend hiện đại gồm nhiều lớp. Node.js cung cấp môi trường chạy JavaScript ngoài trình duyệt; npm tải thư viện; trình đóng gói (bundler) như Vite gom hàng trăm tệp mô-đun, biên dịch JSX/TypeScript và tối ưu thành vài tệp nhỏ cho trình duyệt.

Vite có hai chế độ: dev (máy chủ cục bộ, nạp mô-đun theo yêu cầu nên khởi động tức thì, và HMR cập nhật trang ngay khi lưu tệp mà không mất trạng thái) và build (tạo bản tối ưu trong dist/ để đưa lên máy chủ). Tệp package.json mô tả các lệnh dev, build, preview.

Hiểu vòng đời này giúp bạn xử lý lỗi thường gặp: lệnh không chạy (chưa npm install), cổng bị chiếm (đổi cổng), hoặc chạy được ở dev nhưng lỗi khi build (thường do lỗi kiểu hoặc import sai hoa thường).

Cài Node.js

node -v
npm -v

Tải bản LTS từ nodejs.org. Hai lệnh trên in ra phiên bản là thành công.

Tạo dự án

npm create vite@latest ung-dung -- --template react
cd ung-dung
npm install
npm run dev

Mở địa chỉ hiện trên terminal (thường http://localhost:5173). Sửa src/App.jsx và lưu: trình duyệt tự cập nhật.

Cấu trúc thư mục

Thư mục / tệpVai trò
index.htmlTrang gốc, có thẻ div#root
src/main.jsxĐiểm khởi chạy, gắn App vào root
src/App.jsxComponent gốc
public/Tệp tĩnh: favicon, ảnh
package.jsonDanh sách thư viện và lệnh
node_modules/Thư viện đã cài, không đưa lên Git

Các lệnh thường dùng

npm run dev       # chạy phát triển
npm run build     # tạo bản chạy thật trong dist/
npm run preview   # xem thử bản build
npm install axios # cài thêm thư viện
Tình huống: Tạo trang giới thiệu cá nhân

Sửa App.jsx thành tên, ảnh, ba kỹ năng. Chạy npm run build, thư mục dist là một website tĩnh hoàn chỉnh có thể đưa lên Netlify, Vercel.

Mẹo hay

Nếu gặp lỗi lạ sau khi kéo mã từ Git về, xóa node_modules và chạy lại npm install.

Lưu ý

Không cài Node ở đường dẫn có dấu tiếng Việt hoặc khoảng trắng; đặt dự án ở thư mục như D:\code.

Thực hành
  1. Cài Node và tạo dự án Vite + React.
  2. Đổi tiêu đề và thêm một đoạn văn trong App.jsx.
  3. Chạy build và mở thư mục dist.
Tóm tắt bài học
  • Node.js + npm là nền tảng công cụ.
  • npm create vite dựng dự án nhanh.
  • dev để làm, build để xuất bản.