Cách thiết lập dự án React với Vite

Bạn có thể tạo dự án mới bằng Create React App nhưng bạn có thể mất nhiều thời gian để cài đặt hơn 140MB các phần phụ thuộc. Vite là một công cụ gọn nhẹ sẽ giúp bạn rút ngắn thời gian cho nhiệm vụ này.

Dưới đây là cách thiết lập React App mới bằng 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à file ảnh, đồng thời chuẩn bị một gói triển khai được tối ưu hóa.

Điều kiện cần thiết

• Node.js 12.2.0 trở lên được cài đặt trên máy tính.
• Trình quản lý đóng gói Yarn 1.22.0 trở lên và làm quen với quy trình làm việc của Yarn.
• Nắm được cách dùng HTML, CSS và JavaScript hiện đại.
• Nền tảng kiến thức cơ bản về React.
• Một smartphone kết nối với cùng mạng Wifi để xem trước ứng dụng

Bước 1- Tạo dự án Vite

Ở bước này, bạn sẽ tạo một dự án React mới với công cụ Vite bằng dòng lệnh. Bạn sẽ dùng trình quản lý gói yarn để cài đặt và chạy tập lệnh.

Chạy lệnh sau trong terminal để tạo dự án Vite mới.

yarn create vite

Lệnh này sẽ chạy Vite từ reposity npm từ xa. Nó sẽ cấu hình các công cụ cần thiết để tạo môi trường phát triển cục bộ. Cuối cùng, nó sẽ mở một menu dòng lệnh cho các cài đặt dự án và kiểu ngôn ngữ.

Sau khi tập lệnh hoàn tất, bạn sẽ được nhắc nhập tên dự án:

Output
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@2.9.0" with binaries:
      - create-vite
      - cva
? Project name: » vite-project

Nhập tên dự án:

digital-ocean-vite

Sau khi nhập tên dự án, Vite sẽ nhắc bạn chọn một framework

Output
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
    vue
>   react
    preact
    lit
    svelte

Vite cho phép bạn khởi động nhiều loại dự án, không chỉ React. Hiện tại, nó hỗ trợ các dự án React, Preact, Vue, Lit, Svelte, và vanilla JavaScript.

Dùng phím mũi tên để chọn react.

Sau khi chọn framework React, Vite sẽ nhắc bạn chọn kiểu ngôn ngữ. Bạn có thể dùng JavaScript hoặc TypeScript để hoạt động trên dự án.

Dùng các phím mũi tên để chọn react:

Output
? Select a variant: » - Use arrow-keys. Return to submit.
>   react
    react-ts

Sau khi thiết lập framework, bạn sẽ nhận được kết quả dự án đã được thiết lập. Vite sau đó sẽ hướng dẫn bạn cài đặt các phần phụ thuộc bằng Yarn:

Done:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

  cd digital-ocean-vite
  yarn
  yarn dev

Done in 129.89s.

Điều hướng tới thư mục dự án theo chỉ dẫn:

cd digital-ocean-vite

Sau đó, dùng lệnh yarn để cài đặt các phần phụ thuộc của dự án:

Yarn

Sau khi cài đặt tất cả các phần phụ thuộc, bạn sẽ thấy thời gian nó cài đặt các phần phụ thuộc:

Output
success Saved lockfile.
Done in 43.26s.

Giờ bạn đã thiết lập một dự án React mới bằng Vite và cài đặt các gói mà React và Vite yêu cầu.

Tiếp theo, bạn sẽ bắt đầu chạy server lập trình để thử nghiệm ứng dụng.

Bước 2: Khởi động server lập trình

Ở bước này, bạn sẽ khởi động server lập trình để xác thực rằng mọi thứ đang hoạt động.

Từ bên trong thư mục digital-ocean-vite, dùng lệnh sau để chạy server lập trình:

yarn run dev

Lệnh này là một bí danh của lệnh vite. Nó sẽ chạy dự án trong chế độ lập trình. Bạn sẽ thấy kết quả sau:

Output
 vite v2.9.1 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 910ms.

Tiếp theo, mở trình duyệt của bạn và truy cập: http://localhost:3000/.

Bạn sẽ thấy dự án React chuẩn chạy trên cổng 3000:

Khi thấy ứng dụng này chạy, bạn đã cài đặt thành công React với Vite. Tiếp theo, bạn sẽ xem trước ứng dụng trên điện thoại mobile.

Bước 3: Xem trước ứng dụng từ mobile

Vite mặc định không đưa ứng dụng phát triển vào mạng của bạn. Ở bước này, bạn sẽ tự tay đưa nó vào mạng cục bộ để xem trước nó trên mobile.

Để chạy ứng dụng trong mạng nội bộ, bạn phải dừng server hiện tại trước. Ở terminal của bạn, dùng CTRL+C để dừng máy chủ lập trình hiện đang chạy.

Tiếp theo, dùng lệnh sau để chạy dự án của bạn:

yarn run dev --host

Flag --host cho Vite hiển thị ứng dụng của bạn trên mạng cục bộ.

Bạn sẽ nhận được kết quả sau ở terminal:

Output
vite v2.9.1 dev server running at:
  > Network:  `http://ip_address:3000`
  > Network:  `http://ip_address:3000`
  > Local:    http://localhost:3000/
  > Network:  http://network_address:3000/
  ready in 477ms.

Chúng là những địa chỉ IP riêng dành cho mạng hoặc router máy tính.

Mở trình duyệt trên điện thoại mobile và nhập bất kỳ địa chỉ IP ở trên để xem trước app trên mobile.

Giờ bạn sẽ chạy app trong môi trường phát triển và xác thực rằng nó hoạt động.

Bước 4: Xóa mã soạn sẵn theo mặc định

Ở bước này, bạn sẽ loại bỏ file soạn sẵn của dự án Vite trong thư mục src/ mà cho phép bạn thiết lập ứng dụng mới. Bạn cũng sẽ làm quen với cấu trúc dự án mặc định của app hiện tại.

Dùng lệnh sau để xem nội dung của thư mục src/:

ls src/

Kết quả sẽ liệt kê tất cả file có sẵn:

Output
App.css
App.jsx
favicon.svg
index.css
logo.svg
main.jsx

Dùng lệnh rm để xóa một file:

rm src/App.css

Xóa tất cả file ngoại trừ main.jx từ thư mục src/.

Chạy lệnh ls src/ lần nữa để thấy các file còn lại:

ls src/

Giờ thư mục này sẽ chỉ chứa tệp main.jsx:

Output
main.jsx

Vì bạn đã loại bỏ tất cả file khác, giờ bạn cần loại bỏ một tham chiếu tới tệp CSS đã xóa trong main.jsx.

Mở main.jsx để chỉnh sửa bằng lệnh sau:

nano src/main.jsx

Loại bỏ dòng được highlight để bỏ link tham chiếu tới file CSS:

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import "./index.css"

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Lưu và đóng file main.jsx.

Tạo file mới mang tên App.jsx trong thư mục src/ với lệnh sau:

nano src/App.jsx

Thêm lệnh sau vào file App.jsx:

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

Code này tạo một thành phần React chức năng mới mang tên App. Tiền tố export default cho JavaScript biết cách xuất chức năng này là “export” mặc định. Phần body của hàm này chứa thẻ <div> với text “Hello World”.

Lưu và đóng file App.jsx.

Dùng lệnh sau để chạy server lập trình lần nữa:

yarn run dev --host

Giờ mở http://localhost:3000 trong trình duyệt để thấy một trang trống hiện text Hello World.

Ở bước này, bạn đã loại bỏ một số file mặc định từ dự án Vite. Tiếp theo, bạn sẽ xây dựng một app cơ bản với các thành phần mới, tệp CSS và file ảnh.

Tạo app cơ bản

Ở bước này, bạn sẽ tạo các thành phần, thêm file CSS và link tới ảnh bằng cách tạo một app cơ bản.

Tạo một thành phần

Tạo một thành phần mới bổ sung mô đun cho dự án. Bạn sẽ thêm tất cả các thành phần vào thư mục components để mọi thứ được sắp xếp gọn gàng.

Dùng lệnh sau để tạo dự án mới mang tên components trong src/:

mkdir src/components

Tiếp theo, tạo file mới mang tên welcom.jsx trong mục src/components/ bằng lệnh sau:

nano src/components/Welcome.jsx

Thêm code sau vào file 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>
</>
);
}

Code trên sẽ tạo một thành phần React chức năng mới mang tên Welcome. Tiền tố export default cho JavaScript biết chọn hàm này là lựa chọn xuất mặc định.

Thẻ div với class wrapper cho phép bạn nhắm mục tiêu phần này trong CSS. Thẻ h1 và p sẽ hiện thông báo trên màn hình.

Lưu và đóng file.

Tiếp theo, bạn sẽ tham chiếu thành phần mới này trong tệp App.jsx. Mở App.jsx bằng lệnh sau:

nano src/App.jsx

Cập nhật nội dung của App.jsx với code được highlighted:

import Welcome from "./components/Welcome"

export default function App() {
return (
<>
<Welcome />
</>
)
}

Dòng code này sẽ nhập Welcome.jsx vào app và liên kết thành phần mới vào phần nội dung hàm. Khi được hoàn thành, lưu và đóng file.

Ở phần phụ sau, bạn sẽ thêm một ảnh vào ứng dụng.

Thêm ảnh

Tạo thư mục img mới trong src/ với lệnh sau:

mkdir src/img

Điều hướng tới thư mục src/img với lệnh sau:

cd src/img

Bạn sẽ tải ảnh này của Sammy vào src/img:

Download ảnh này với wget:

wget https://html.sammy-codes.com/images/small-profile.jpeg

Đổi lại tên ảnh với lệnh sau:

mv small-profile.jpeg sammy.jpeg

Lệnh này đổi lại tên file ảnh từ small-profile.jpeg thành sammy/jpeg để dễ dàng tham chiếu sau:

Quay lại thư mục gốc bằng lệnh này:

cd ../../

Cập nhật Welcome.jsx để liên kết với ảnh này. Mở file sau:

nano src/components/Welcome.jsx

Cập nhật Welcome.jsx bằng cách thêm các dòng được highlight sau:

import Sammy from "../img/sammy.jpeg"

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>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

Dòng đầu tiên sẽ nhập ảnh vào React dưới dạng mô đun.

Dòng khác bên trong nội dung hàm sẽ tạo một thẻ <img> mới và link thuộc tính src tới thành phần ảnh bạn vừa nhập. Thuộc tính width và height sẽ thiết lập các thuộc tính ảnh tương ứng sang 200 pixel.

Lưu và đóng file Welcome.jsx.

Tiếp theo, bạn sẽ thêm CSS vào dự án, thay đổi tiêu đề và hoàn thiện sản phẩm.

Trên đây là cách cơ bản để thiết lập dự án React với Vite. Hi vọng bài viết hữu ích với các bạn.