Cách Thiết Lập Dự Án React Với Vite

Yêu Cầu Đầu Vào

Để làm theo hướng dẫn này, bạn cần có:

• Node.js phiên bản 12.2.0 trở lên được cài trên máy.
• Trình quản lý gói Yarn phiên bản 1.22.0 trở lên được cài trên máy.
• Kiến thức cơ bản về HTML, CSS và JavaScript hiện đại.
• Hiểu biết nền tảng về React.
• Một điện thoại kết nối cùng mạng Wifi với máy tính để xem trước ứng dụng trên di động.

Bước 1 — Tạo Dự Án Vite

Tạo một dự án React mới bằng công cụ Vite thông qua dòng lệnh với trình quản lý gói yarn.

Chạy:

yarn create vite

Chọn tên dự án, framework React và biến thể JavaScript.

Cài đặt các phụ thuộc:

cd ten-du-an-cua-ban
yarn

Bước 2 — Khởi Động Máy Chủ Phát Triển

Chạy máy chủ phát triển:

yarn run dev

Mở trình duyệt tại http://localhost:5173/ để xem dự án React mặc định chạy.

Bước 3 — Xem Trước Ứng Dụng Trên Điện Thoại

Phát ứng dụng trên mạng cục bộ:

yarn run dev --host

Truy cập ứng dụng từ điện thoại bằng cách nhập địa chỉ IP máy tính với cổng 5173.

Bước 4 — Loại Bỏ Boilerplate Mặc Định

Xóa các file mặc định trong src/:

rm src/App.css src/App.jsx src/index.css
rm -r src/assets

Chỉnh sửa src/main.jsx để loại bỏ import CSS.

Tạo src/App.jsx với thành phần cơ bản:

export default function App() {
  return <div>Hello World</div>;
}

Chạy lại máy chủ phát triển với cờ host.

Bước 5 — Tạo Ứng Dụng Cơ Bản

Tạo thư mục components và thành phần Welcome.jsx:

export default function Welcome() {
  return (
    <div className="wrapper">
      <h1>Welcome To My App</h1>
      <p>This is going to be the coolest app in the world!</p>
    </div>
  );
}

Nhập và sử dụng Welcome trong App.jsx.

Thêm ảnh:

• Tạo thư mục src/img.
• Tải xuống và đổi tên ảnh thành sammy.jpeg.
• Import và sử dụng ảnh trong Welcome.jsx.

Tạo file CSS src/css/main.css để trang trí ứng dụng và import nó trong Welcome.jsx.

Đổi thẻ tiêu đề HTML trong index.html thành "My Cool App".

Bước 6 — Xây Dựng Cho Môi Trường Sản Xuất

Xây dựng gói ứng dụng tối ưu:

yarn run build

Lệnh này tạo thư mục dist chứa các file nguồn được rút gọn, sẵn sàng để triển khai.

Tùy Chỉnh vite.config.js Cho Ứng Dụng React

Ví dụ về cấu hình cơ bản, tiền xử lý CSS, cấu hình build và thiết lập nâng cao bao gồm hỗ trợ TypeScript.

Thêm Plugin Tăng Cường Trải Nghiệm Phát Triển

Ví dụ về các plugin hữu ích như React Refresh, ESLint và Prettier giúp cải thiện quy trình phát triển.

Câu Hỏi Thường Gặp

Trả lời câu hỏi về cách tạo dự án React với Vite, lợi ích, thêm TypeScript, sử dụng Tailwind CSS và cấu hình biến môi trường.

Kết Luận

Bạn đã tạo một ứng dụng React mới bằng Vite, loại bỏ boilerplate, tạo thành phần với ảnh và CSS, cập nhật thanh tiêu đề, và xây dựng gói tối ưu sẵn sàng triển khai.

Hãy khám phá thêm các hướng dẫn và tài nguyên React để nâng cao kiến thức của bạn.