---
title: "Cách Thiết Lập Dự Án React Với Vite"
description: "Thông thường, bạn có thể tạo một dự án mới bằng Create React App, nhưng việc này có thể mất nhiều thời gian do phải cài đặt hơn 140 MB phụ thuộc. Vite là một công cụ nhẹ với kích thước phụ thuộc chỉ 31 MB, giúp tiết kiệm thời gian khi bắt đầu dự án mới. Vite cũng sử dụng các module ES (ECMAScript) gốc của trình duyệt để liên kết tới các file JavaScript, nhờ đó không phải xây dựng lại toàn bộ gói sau mỗi lần thay đổi file. Những điểm khác biệt này mang lại trải nghiệm nhanh hơn khi tạo, cập nhật và xây dựng ứng dụng React với Vite. Hướng dẫn này sẽ tạo một ứng dụng React mới sử dụng công cụ Vite. Bạn sẽ tạo một ứng dụng cơ bản với một thành phần mới, CSS và một file ảnh, đồng thời chuẩn bị một gói tối ưu để triển khai."
url: https://cloudfly.vn/cach-thiet-lap-du-an-react-voi-vite
image: https://media.cloudfly.vn/posts/cach-thiet-lap-du-an-react-voi-vite.png
---

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

![description image](https://media.cloudfly.vn/posts/cach-thiet-lap-du-an-react-voi-vite.png)
## 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:

```bash
yarn create vite
```

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

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

```bash
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:

```bash
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ộ:

```bash
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/`:

```bash
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:

```jsx
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`:

```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:

```bash
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.