Xây dựng ứng dụng React với Vite từ A-Z

08/06/2022 04:58

Vite là công cụ xây dựng front-end thế hệ tiếp theo cung cấp trải nghiệm phát triển nhanh hơn và gọn gàng hơn cho các dự án web hiện tại.

Vite là công cụ xây dựng front-end thế hệ tiếp theo cung cấp trải nghiệm phát triển nhanh hơn và gọn gàng hơn cho các dự án web hiện tại. Nó bao gồm hai phần chính:

Một máy chủ phát triển cung cấp các cải tiến về tính năng phong phú so với các mô-đun ES nguyên bản , chẳng hạn như Thay thế mô-đun nóng (HMR) cực nhanh .
Một lệnh xây dựng gói mã của bạn với Rollup , được định cấu hình trước để xuất các nội dung tĩnh được tối ưu hóa cao cho quá trình sản xuất.

Nó cũng hỗ trợ các bản dựng Rollup được định cấu hình sẵn với hỗ trợ nhiều trang và chế độ thư viện, giao diện plugin Rollup-superset được chia sẻ giữa các nhà phát triển và xây dựng các API lập trình linh hoạt với cách gõ TypeScript và phân phát tệp theo yêu cầu qua ESM gốc. Vite kiên quyết và đi kèm với các mặc định hợp lý, nhưng cũng có khả năng mở rộng cao thông qua API Plugin và API JavaScript của nó với hỗ trợ đánh máy đầy đủ.

Trong hướng dẫn này, bạn sẽ học cách xây dựng một ứng dụng React với Vite. chúng ta sẽ tạo một ứng dụng blog cho các cuộc biểu tình. Bạn cần cài đặt phiên bản Node.js > = 12.2.0. Tuy nhiên, một số mẫu yêu cầu phiên bản Node.js cao hơn để hoạt động.

Scaffold một ứng dụng Vite

Để bắt đầu, bạn cần tạo một dự án Vite bằng lệnh dưới đây:

npm create vite@latest

Lệnh trên sẽ nhắc bạn chọn tên dự án và khuôn khổ của bạn. chúng ta sẽ sử dụng tên mặc định để trình diễn bằng cách nhấn phím enter, chọn “react” làm khung và “react-ts” làm biến để kích hoạt hỗ trợ Typecript. Lựa chọn của bạn sẽ giống như ảnh chụp màn hình bên dưới:

Bây giờ chúng ta hãy nhìn vào cấu trúc dự án cho ứng dụng của chúng ta. Sau khi chạy lệnh create, Vite sẽ tạo ra cấu trúc thư mục sau như hình dưới đây:

vite-project

┣ src

┃ ┣ App.css

┃ ┣ App.tsx

┃ ┣ favicon.svg

┃ ┣ index.css

┃ ┣ logo.svg

┃ ┣ main.tsx

┃ ┗ vite-env.d.ts

┣ .gitignore

┣ index.html

┣ package.json

┣ tsconfig.json

┣ tsconfig.node.json

┗ vite.config.ts

Hãy xem xét các tệp thiết yếu có thể trông lạ lẫm đối với bạn.

index.htm: Đây là tệp trung tâm, thường nằm trong một publicthư mục trong một ứng dụng phản ứng điển hình.
main.tsx:Đây là nơi mã chịu trách nhiệm cho đầu ra của trình duyệt được hiển thị. Một ứng dụng React thường được đặt tên index.tshoặcindex.js.
vite.config.json: Đây là tệp cấu hình cho mọi dự án Vite. Nếu bạn mở tệp, bạn sẽ phát hiện ra rằng React đã được thêm vào dưới dạng một plugin trong mảng plugin.

Tạo blog Component

Bây giờ chúng ta hãy bắt đầu xây dựng ứng dụng blog của mình bằng cách tạo một thành phần blog. Tạo một componentthư mục trong srcthư mục và tạo một thư mục Blog.tsxsau đó thêm đoạn mã bên dưới:

import BlogList from "./BlogList";

export default function Blog() {

  return (

    <div className="container">

      <div className="content">

        <ul>

          <BlogList />

        </ul>

      </div>

    </div>

  );

}




}

Trong đoạn mã trên, chúng ta đã tạo blog và nhập BlogListthành phần mà chúng ta sẽ tạo trong phần tiếp theo để hiển thị danh sách tất cả các blog trong ứng dụng của chúng ta. Bây giờ, hãy cập nhật mã trong App.tsxtệp với các đoạn mã bên dưới:

import "./App.css";

import Blog from "./components/Blog";




function App() {

  return (

    <div className="App">

      <header className="App-header">

        <div className="main">

          <div className="search">

            <input type="text" placeholder="Search a blog"></input>

          </div>

          <button>Add New</button>

        </div>

      </header>

      <Blog />

    </div>

  );

}




export default App;

Tạo thành phần BlogList

Để hiển thị danh sách tất cả các blog do người dùng tạo, hãy tạo một BlogList.tsxtệp trong thư mục thành phần và thêm các đoạn mã bên dưới:

export default function BlogList() {

  return (

    <li>

      <div className="info">

        <h6>John Doe</h6>

        <small>May 3 2022</small>

      </div>

      <p>Build a REST API with Typescript and Node.js</p>

    </li>

  );

}

Bây giờ khởi động máy chủ bằng lệnh dưới đây:

npm run dev

Tạo thành phần chi tiết blog

Với thành phần Blogvà BlogListđược tạo, hãy tạo một thành phần khác để xem chi tiết mọi blog của chúng ta trong ứng dụng của chúng ta. Tạo một BlogDetails.tsxtệp trong thư mục thành phần và thêm đoạn mã bên dưới:

import { useParams } from "react-router-dom";

import { BlogData } from "./service/BlogData";




export default function BlogDetails() {

  const { id } = useParams();

  const data = BlogData.filter((data) => data.id === id);

  console.log(data);

  return (

    <div className="container">

      <div className="content">

        <ul>

          <li>

            <div className="info">

              <h6>{data[0].createdBy}</h6>

              <small>{data[0].dateCreated}</small>

            </div>




            <p>{data[0].title}</p>

            <img src={data[0].cover} />

            <p className="body">{data[0].body}</p>

          </li>

        </ul>

      </div>

    </div>

  );

}

Trong đoạn mã trên, chúng ta đã nhập BlogDatamảng và useParamsmóc từ react-router-domđó chúng ta sẽ thiết lập trong phần tiếp theo để lấy id của blog từ URL. Sau đó, chúng ta sử dụng bộ lọc Javascript để lấy blog được cung cấp từ URL của chúng ta và hiển thị chi tiết.

>>> Tham khảo: Khóa học lập trình tại T3H