React đã trở thành một trong những thư viện JavaScript phổ biến nhất cho việc xây dựng giao diện người dùng hiệu quả và linh hoạt. Tuy nhiên, để tận dụng hết tiềm năng của React, việc sử dụng các thư viện bổ sung là không thể tránh khỏi. Trong bài viết này, hãy cùng VietnamWorks inTECH khám phá 10 thư viện quan trọng mà bạn nên biết nếu đang xây dựng ứng dụng bằng React. 

1. CopilotKit

Việc tích hợp các tính năng AI trong React rất khó, đó là lúc Copilot xuất hiện. Một giải pháp đơn giản và nhanh chóng để tích hợp Copilots vào bất kỳ sản phẩm nào của bạn!

Bạn có thể tích hợp các tính năng AI chính vào ứng dụng React bằng hai thành phần React. Họ cũng cung cấp các thành phần UX gốc Copilot tích hợp sẵn (có thể tùy chỉnh) như <CopilotKit />, <CopilotPopup />, <CopilotSidebar />, <CopilotTextarea />.

Khởi động chương trình với lệnh npm sau:

npm i @copilotkit/react-core @copilotkit/react-ui

Copilot Portal là một trong những thành phần được cung cấp với CopilotKit, đó là một chatbot trí tuệ nhân tạo tích hợp trong ứng dụng có thể nhìn thấy trạng thái hiện tại của ứng dụng và thực hiện hành động bên trong ứng dụng của bạn. Nó giao tiếp với frontend và backend của ứng dụng, cũng như các dịch vụ bên thứ ba thông qua các plugin.

Đây là cách bạn có thể tích hợp một Chatbot.

Một CopilotKit phải bao quanh tất cả các thành phần tương tác với CopilotKit. Bạn có thể bắt đầu với CopilotSidebar (sau này bạn có thể chuyển sang một nhà cung cấp UI khác).

"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css"; 

export default function RootLayout({children}) {
  return (
    <CopilotKit url="/path_to_copilotkit_endpoint/see_below">
      <CopilotSidebar>
        {children}
      </CopilotSidebar>
    </CopilotKit>
  );
}

Bạn có thể thiết lập endpoints Copilot Backend bằng cách sử dụng hướng dẫn nhanh này.

Sau đó, bạn có thể để Copilot thực hiện hành động. Bạn có thể đọc về cách cung cấp ngữ cảnh bên ngoài bằng cách sử dụng các hook react useMakeCopilotReadable và useMakeCopilotDocumentReadable.

Ngoài ra, có thể tích hợp Vercel AI SDK, OpenAI API, Langchain và các nhà cung cấp LLM khác một cách dễ dàng bằng cách làm theo hướng dẫn này.

2. Xyflow

XYFlow là thư viện mã nguồn mở mạnh mẽ để xây dựng giao diện người dùng dựa trên node bằng React hoặc Svelte. Đây là một kho lưu trữ đa dự án và cung cấp React Flow & Svelte Flow. Hãy cùng xem thêm về những gì chúng ta có thể làm với React Flow.

Một số tính năng chỉ có sẵn trong chế độ pro, nhưng những tính năng trong phiên bản miễn phí đã đủ để tạo ra một luồng tương tác rất đa dạng. React flow được viết bằng TypeScript và được test bằng Cypress.

Bắt đầu với lệnh npm sau đây.

npm install reactflow

Đây là cách bạn có thể tạo hai node Hello & World, được kết nối bằng một edge. Các node có vị trí ban đầu được xác định trước để tránh chồng chéo và chúng ta cũng đang áp dụng kiểu dáng để đảm bảo có đủ không gian để hiển thị biểu đồ.

import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

const edges = [{ id: '1-2', source: '1', target: '2' }];

const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];

function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;

Dưới đây là cách mà nó hiển thị. Bạn cũng có thể thêm nhãn, thay đổi loại và làm cho nó có tính tương tác.

Bạn có thể xem danh sách đầy đủ các tùy chọn trong tài liệu tham khảo API của React Flow cùng với các thành phần, hook và utils.

Phần tuyệt nhất là bạn cũng có thể thêm các node tùy chỉnh. Trong các node này, bạn có thể hiển thị mọi thứ bạn muốn, chẳng hạn như xác định nhiều điểm xử lý nguồn & đích và vẽ các đầu vào biểu mẫu hoặc biểu đồ. Bạn có thể kiểm tra codesandbox này để tham khảo thêm.

Hãy đọc tài liệu và xem ví dụ về ứng dụng React Flow để Tạo ứng dụng React, Next.js và Remix.

React Flow đi kèm với một số thành phần plugin bổ sung có thể giúp bạn tạo ra các ứng dụng nâng cao hơn với các thành phần Background, Minimap, Controls, Panel, NodeToolbar và NodeResizer.

Ví dụ: bạn có thể nhận thấy các dấu chấm trên nền trên nhiều trang web, để triển khai mẫu này, bạn chỉ cần sử dụng thành phần Background trong React Flow.

import { Background } from 'reactflow'; <Background color="#ccc" variant={'dots'} /> // this will be under React Flow component. Just an example.

3. Zod và React Hook Form

Đầu tiên chúng ta sẽ tìm hiểu về Zod, thư viện này được tạo ra nhằm hỗ trợ các lập trình viên trong việc giảm thiểu khai báo loại trùng lặp. Với Zod, bạn khai báo trình xác thực một lần và Zod sẽ tự động suy ra loại TypeScript tĩnh. Đây là một cách dễ dàng để kết hợp các kiểu đơn giản thành các cấu trúc dữ liệu phức tạp.

Hãy bắt đầu với lệnh npm sau đây.

npm install zod

Đây là cách bạn có thể tùy chỉnh một số thông báo lỗi phổ biến khi tạo một schema chuỗi.

const name = z.string({
  required_error: "Name is required",
  invalid_type_error: "Name must be a string",
});

// It does provide lots of options
// validations
z.string().min(5, { message: "Must be 5 or more characters long" });
z.string().max(5, { message: "Must be 5 or fewer characters long" });
z.string().length(5, { message: "Must be exactly 5 characters long" });
z.string().email({ message: "Invalid email address" });
z.string().url({ message: "Invalid url" });
z.string().emoji({ message: "Contains non-emoji characters" });
z.string().uuid({ message: "Invalid UUID" });
z.string().includes("tuna", { message: "Must include tuna" });
z.string().startsWith("https://", { message: "Must provide secure URL" });
z.string().endsWith(".com", { message: "Only .com domains allowed" });
z.string().datetime({ message: "Invalid datetime string! Must be UTC." });
z.string().ip({ message: "Invalid IP address" });

Để biết thêm thông tin về Zod, bạn có tham khảo thêm tài liệu này. Thư viện này có thể hoạt động trong Node.js và tất cả các trình duyệt hiện đại.

Hiện nay có rất nhiều tích hợp biểu mẫu có sẵn. Mặc dù Zod có thể xác thực các đối tượng nhưng nó sẽ không tác động đến ứng dụng khách và chương trình backend của bạn nếu không có logic tùy chỉnh. Do đó React-hook-form là một dự án tuyệt vời để bạn xác thực ứng dụng khách, chẳng hạn nó có thể hiển thị lỗi đầu vào.

Bạn có thể bắt đầu bằng lệnh

npm install react-hook-form

Đây là cách bạn có thể sử dụng React Hook Form.

import { useForm, SubmitHandler } from "react-hook-form"


type Inputs = {
  example: string
  exampleRequired: string
}


export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>()
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)


  console.log(watch("example")) // watch input value by passing the name of it


  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />


      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}


      <input type="submit" />
    </form>
  )
}

Bạn thậm chí có thể tách biệt các render lại để cải thiện hiệu suất tổng thể. 

4. React DND

React DND là một thư viện cho phép bạn tạo ra các ứng dụng kéo và thả trực quan trong React. "DND" là viết tắt của "Drag and Drop" - kéo và thả, thư viện này cung cấp các thành phần & API để bạn có thể dễ dàng tạo ra các tính năng kéo và thả trong ứng dụng React của mình.

Bạn có thể bắt đầu bằng lệnh:

npm install react-dnd react-dnd-html5-backend

Trừ khi bạn đang viết một backend tùy chỉnh, bạn có thể muốn sử dụng backend HTML5 đi kèm với React DnD.

Dưới đây là cách bạn có thể cài đặt react-dnd-html5-backend

import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

export default class YourApp {
  render() {
    return (
      <DndProvider backend={HTML5Backend}>
        /* Your Drag-and-Drop Application */
      </DndProvider>
    )
  }
}

Đây là cách bạn có thể thực hiện thao tác kéo và thả thẻ rất dễ dàng.

// Let's make <Card text='Write the docs' /> draggable!

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag(
    () => ({
      type: ItemTypes.CARD,
      item: { text },
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.5 : 1
      })
    }),
    []
  )
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}

Lưu ý backend HTML5 không hỗ trợ các hành động cảm ứng (chạm, vuốt, kéo và nhấn giữ vào màn hình). Vì vậy, nó sẽ không hoạt động trên thiết bị máy tính bảng và di động. Bạn có thể sử dụng react-dnd-touch-backend cho các thiết bị cảm ứng.

Bạn có thể xem các ví dụ về React DND.

Họ thậm chí còn có một tính năng rõ ràng để bạn có thể kiểm tra những gì đang diễn ra nội bộ với Redux.

Bạn có thể kích hoạt Redux DevTools bằng cách thêm debugModeprop vào nhà cung cấp của mình với giá trị là true.

5. Cypress

Những năm gần đây đã chứng minh sự quan trọng của việc kiểm thử, và các lựa chọn như Cypress làm cho quá trình này đơn giản đến không ngờ. Thư viện này hiện có hơn 1tr2 người sử dụng và có đến 475 người đóng góp.

Bạn có thể bắt đầu với lệnh npm sau:

npm install cypress -D

Nếu bạn không sử dụng Node hoặc trình quản lý gói trong dự án của mình hoặc bạn muốn dùng thử Cypress, bạn luôn có thể tải xuống Cypress trực tiếp từ CDN của họ.

Sau khi bạn cài đặt và mở. Bạn sẽ phải tạo một tệp spec có phần mở rộng .cy.js.

Bây giờ, bạn có thể viết và kiểm tra ứng dụng của mình.

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

Cypress cung cấp nhiều tùy chọn như cy.visit() hoặc cy.contains(). Bạn có thể khám phá thêm về nó trên tài liệu của nhà cung cấp.

6. Refine

Refine là một khung meta React cho phép phát triển nhanh chóng nhiều loại ứng dụng web.

Từ các công cụ nội bộ đến bảng quản trị, ứng dụng B2B và bảng thông tin, nó đóng vai trò là giải pháp toàn diện để xây dựng bất kỳ loại ứng dụng CRUD nào như bảng thông tin DevOps, nền tảng thương mại điện tử hoặc giải pháp CRM.

Bạn có thể thiết lập nó bằng một lệnh CLI trong vòng chưa đầy một phút.

Nó có các trình kết nối cho hơn 15 dịch vụ phụ trợ bao gồm Hasura, Appwrite, v.v. Bạn có thể xem thêm danh sách tích hợp có sẵn.

Nhưng phần tuyệt nhất là Refine headless by design, do đó nó mang đến rất nhiều tùy chọn vô hạn về kiểu dáng và tùy chỉnh.

Nhờ kiến ​​trúc này, bạn có thể sử dụng các framework CSS phổ biến như TailwindCSS hoặc tạo kiểu của riêng bạn từ đầu. Điều này sẽ rất có ích trong việc bạn không muốn bị ràng buộc với kiểu dáng để tương thích với các thư viện cụ thể, vì mỗi người đều có phong cách riêng và sử dụng các giao diện người dùng khác nhau.

Hãy bắt đầu với lệnh npm sau đây.

npm create refine-app@latest

Đây là cách dễ dàng để thêm thông tin đăng nhập bằng Refine.

import { useLogin } from "@refinedev/core";
const { login } = useLogin();

Tổng quan về cấu trúc cơ sở mã của bạn với Refine.

const App = () => (
  <Refine
    dataProvider={dataProvider}
    resources={[
      {
        name: "blog_posts",
        list: "/blog-posts",
        show: "/blog-posts/show/:id",
        create: "/blog-posts/create",
        edit: "/blog-posts/edit/:id",
      },
    ]}
  >
    /* ... */
  </Refine>
);

Refine còn cung cấp một loạt các template mà bạn có thể tùy chỉnh để phù hợp với dự án từ bảng quản trị đến CRM.

7. Tremor

Tremor cung cấp hơn 20 thành phần React mã nguồn mở để xây dựng biểu đồ và trang tổng quan dựa trên CSS Tailwind nhằm giúp việc hiển thị dữ liệu trở nên đơn giản.

Chạy lệnh sau để thiết lập chương trình

npm i @tremor/react

Đây là cách bạn có thể sử dụng Tremor để xây dựng mọi thứ một cách nhanh chóng.

import { Card, ProgressBar } from '@tremor/react';

export default function Example() {
  return (
    <Card className="mx-auto max-w-md">
      <h4 className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
        Sales
      </h4>
      <p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
        $71,465
      </p>
      <p className="mt-4 flex items-center justify-between text-tremor-default text-tremor-content dark:text-dark-tremor-content">
        <span>32% of annual target</span>
        <span>$225,000</span>
      </p>
      <ProgressBar value={32} className="mt-2" />
    </Card>
  );
}

Và đây là output từ ví dụ trên

Hãy tham khảo thêm tài liệu chính thức của Tremor để hiểu thêm về công cụ này.

8. Watermelon DB

Watermelon DB là một thư viện cơ sở dữ liệu dành cho ứng dụng di động và web, được thiết kế đặc biệt để làm việc tốt trên các thiết bị di động với dữ liệu lớn. Nó cung cấp một giao diện dễ sử dụng và hiệu suất cao cho việc thao tác dữ liệu cục bộ trong ứng dụng React Native và React.

Bạn có thể bắt đầu bằng lệnh:

npm install @nozbe/watermelondb

Điều đầu tiên bạn cần làm là tạo mô hình và sau đó thực hiện các bước cập nhật cơ sở dữ liệu.

import { appSchema, tableSchema } from '@nozbe/watermelondb'

export default appSchema({
  version: 1,
  tables: [
    // We'll add to tableSchemas here
  ]
})

Theo tài liệu, khi sử dụng WatermelonDB, bạn làm việc với các Model và Collection. Tuy nhiên, bên dưới Watermelon là một cơ sở dữ liệu cơ bản (SQLite hoặc LokiJS) sử dụng ngôn ngữ khác nhau: bảng và cột. Cả hai được gọi là một schema cơ sở dữ liệu.

Bạn có thể tham khảo nhiều thông tin khác về hoạt động CRUD.

9. Evergreen UI

Evergreen UI là một thư viện giao diện người dùng (UI) React được thiết kế để cung cấp các thành phần giao diện người dùng đẹp và linh hoạt. Các thành phần trong Evergreen UI được xây dựng để sử dụng trong các ứng dụng web hiện đại và có thể tùy chỉnh để phù hợp với nhu cầu cụ thể của dự án. 

Thư viện này cung cấp một loạt các thành phần như nút, bảng, hộp thoại, menu, và nhiều hơn nữa, giúp việc phát triển giao diện người dùng trở nên dễ dàng và nhanh chóng.

Bạn có thể bắt đầu bằng lệnh:

$ npm install evergreen-ui

Thư viện này cung cấp rất nhiều components và một số trong số đó có thể kể đến như Tag Input hoặc File Uploader.

10. React Spring

React Spring là một thư viện JavaScript dành cho React, nó sử dụng cơ chế chuyển đổi giá trị linh hoạt để tạo ra các hiệu ứng chuyển động, như di chuyển, xoay, co giãn và phản ứng theo các hoạt động như di chuột hoặc thay đổi trong trạng thái của ứng dụng. Điều này giúp tạo ra các trải nghiệm người dùng sinh động mà không cần phải sử dụng nhiều mã lập trình phức tạp.

Bạn có thể bắt đầu bằng lệnh:

npm i @react-spring/web

Đây là cách bạn có thể import một higher-order component để bọc các thành phần cho các hiệu ứng chuyển động.

import { animated } from '@react-spring/web'

// use it.
export default function MyComponent() {
  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        background: '#ff6d6d',
        borderRadius: 8,
      }}
    />
  )
}

Thư viện có rất nhiều ví dụ thú vị mà bạn có thể học hỏi.

Ngoài ra, nó còn cung cấp vô số tùy chọn, chẳng hạn như useScroll, cho phép bạn tạo các animation scroll-linked.

Lời kết

Trên đây là 10 thư viện quan trọng mà bạn nên biết nếu bạn đang xây dựng ứng dụng bằng React. Tất cả đều có tính ứng dụng cao và mang lại nhiều lợi ích cho quá trình phát triển ứng dụng của bạn. Tuy nhiên, không có một công cụ nào là hoàn hảo, vì vậy hãy tùy chỉnh và lựa chọn các thư viện phù hợp nhất với nhu cầu cụ thể của dự án  của bạn nhé. 

VietnamWorks inTECH