8 component giúp bạn làm chủ React trong tích tắc

31/05/2024 | 329

React là một trong những thư viện JavaScript phổ biến nhất hiện nay, được sử dụng rộng rãi để xây dựng các ứng dụng web động và tương tác. Tuy nhiên, việc nắm bắt và làm chủ các khái niệm cũng như thành phần cơ bản của React có thể là thách thức đối với nhiều lập trình viên, đặc biệt là những người mới bắt đầu.

Để giúp bạn vượt qua khó khăn này, VietnamWorks inTECH sẽ giới thiệu 8 component cơ bản nhưng mạnh mẽ trong React, giúp bạn nhanh chóng làm chủ và nâng cao hiệu suất phát triển ứng dụng của mình.

1. Clickvote

Đây là một thành phần mã nguồn mở giúp tích hợp chức năng like, upvote và đánh giá vào ứng dụng của bạn. Bạn có thể sử dụng Clickvote để hiển thị cập nhật thời gian thực về các phản ứng mới, thực hiện A/B testing cho ứng dụng của mình và tìm hiểu về người dùng của bạn.

Bạn có thể hiển thị các hộp thích (likes boxes), hộp đánh giá (review boxes), và các thành phần phản ứng (reaction components) bằng mã React đơn giản này:

import { ClickVoteProvider } from '@clickvote/react';
import { ClickVoteComponent } from '@clickvote/react';
import { LikeStyle } from '@clickvote/react';

<ClickVoteProvider>
    <ClickVoteComponent id={CONTEXT} voteTo={ID}>
        {(props) => <LikeStyle {...props} />}
    </ClickVoteComponent>
</ClickVoteProvider>

2. Novu

Đây là một hạ tầng thông báo mã nguồn mở được xây dựng cho các nhóm kỹ thuật để giúp họ xây dựng trải nghiệm thông báo sản phẩm phong phú. Novu cung cấp các thư viện và thành phần để quản lý tất cả các kênh giao tiếp trong một nơi, mà không cần tạo và duy trì một hạ tầng thông báo. Một số điểm chính về Novu:

Web Component - Novu: Đây là một phần tử tùy chỉnh có thể được sử dụng trong bất kỳ ứng dụng web nào. Nó được xây dựng bằng cách bọc các thành phần React, bao gồm ba phần cốt lõi: NovuProvider, PopoverNotificationCenter và NotificationBell được kết hợp lại thành một.
React Component - Novu: Thư viện React của Novu cung cấp một trung tâm tiện ích thông báo đầy đủ các chức năng và có thể nhúng với các cập nhật thời gian thực vào ứng dụng React của bạn.
Web Component Library - Novu: Thư viện Web Component của Novu cung cấp một trung tâm tiện ích thông báo đầy đủ các chức năng và có thể nhúng vào bất kỳ ứng dụng web nào.

Bạn có thể thêm thông báo trong ứng dụng vào ứng dụng của mình bằng thành phần React này:

import {
  NovuProvider,
  PopoverNotificationCenter,
  NotificationBell,
  IMessage,
} from "@novu/notification-center";

<NovuProvider
  subscriberId={"SUBSCRIBER_ID"}
  applicationIdentifier={"APPLICATION_IDENTIFIER"}
>
    <PopoverNotificationCenter colorScheme="dark">
        {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
     </PopoverNotificationCenter>
</NovuProvider>

3. CopilotKit

Đây là một framework mã nguồn mở giúp bạn xây dựng các thành phần giao diện người dùng (UI components) cho ứng dụng của mình. CopilotKit hỗ trợ việc phát triển chatbot AI, agent AI trong ứng dụng, và vùng văn bản AI (AI Textareas). Dưới đây là một số thành phần quan trọng của CopilotKit:

<CopilotChat />: Đây là một thành phần chatbot AI có khả năng “nhìn thấy” trạng thái hiện tại của ứng dụng và thực hiện các hành động bên trong ứng dụng của bạn. Chatbot AI này có thể giao tiếp với phía frontend và backend của ứng dụng, cũng như với các dịch vụ bên thứ ba (như Salesforce, Dropbox) thông qua các plugin. Nó cũng hỗ trợ tạo giao diện người dùng tự động.
<CopilotTextarea />: Đây là một thay thế cho thành phần <textarea /> thông thường. Thành phần này hỗ trợ việc tạo văn bản tự động với sự hỗ trợ của trí tuệ nhân tạo. Bạn chỉ cần thay thế thành phần <textarea /> bằng <CopilotTextarea /> để sử dụng.
In-App Agents (được hỗ trợ bởi LangChain): Cho phép các agent truy cập vào ngữ cảnh ứng dụng thời gian thực và thực hiện các hành động bên trong ứng dụng.
Co-Agents (sẽ được hỗ trợ trong tương lai): Cho phép người dùng cuối quan sát và can thiệp vào hoạt động của agent trong ứng dụng. Người dùng có thể sửa lỗi trong các bước trung gian nếu có và khởi động lại hoạt động của agent từ điểm đó trở đi.

import { CopilotTextarea } from "@copilotkit/react-textarea";
import { CopilotProvider } from "@copilotkit/react-core";

<CopilotProvider>
    <CopilotTextarea/>
</CopilotProvider>

4. Tolgee

Tolgee là một hệ thống quản lý dịch thuật mã nguồn mở được thiết kế để giúp các nhóm phát triển dễ dàng dịch các ứng dụng của họ sang nhiều ngôn ngữ. Nó cung cấp một loạt các tính năng, bao gồm:

Dịch thuật tự động: Tolgee có thể tích hợp với các dịch vụ dịch thuật tự động như Google Translate và Amazon Translate để dịch nhanh chóng nội dung ứng dụng của bạn.
Dịch thuật cộng đồng: Bạn có thể cho phép người dùng đóng góp bản dịch cho ứng dụng của mình, giúp tiết kiệm thời gian và tiền bạc.
Quản lý bản dịch: Tolgee giúp bạn dễ dàng quản lý tất cả bản dịch của mình ở một nơi, bao gồm việc theo dõi tiến độ, phê duyệt bản dịch và giải quyết xung đột.
Tích hợp CI/CD: Tolgee có thể tích hợp với các hệ thống CI/CD để tự động dịch các bản cập nhật ứng dụng của bạn.
Hỗ trợ nhiều nền tảng: Tolgee hỗ trợ nhiều nền tảng phát triển phổ biến, bao gồm JavaScript, React, Angular, Vue.js, Node.js, Python, Java và C#.

import { TolgeeProvider, T } from "@tolgee/react";

<TolgeeProvider
  tolgee={tolgee}
  fallback="Loading..." // loading fallback
>
  <T keyName="translate_me">Translate me!</T>
</TolgeeProvider>

5. Hanko Authentication Component

Hanko Authentication Component là một thành phần web cung cấp cách thức xác thực người dùng an toàn và thân thiện với người dùng trong các ứng dụng web. Nó là một phần của hệ thống quản lý xác thực và người dùng mã nguồn mở Hanko, được thiết kế để giúp các nhà phát triển chuyển đổi từ mật khẩu sang các phương thức xác thực an toàn hơn, chẳng hạn như khóa mã thông báo và sinh trắc học.

Bạn có thể tích hợp Hanko vào ứng dụng của mình bằng cách sau:

import { register } from "@teamhanko/hanko-elements";

const hankoApi = process.env.HANKO_API_URL;

register(hankoApi);

<hanko-auth />;

6. React Email

Đây là một bộ sưu tập các thành phần chất lượng, chưa được thiết kế giao diện (unstyled components) cho việc viết email bằng React và TypeScript. Dưới đây là một số thông tin về React Email:

Một thư viện giao diện người dùng (UI) mã nguồn mở, bao gồm các thành phần được thiết kế để tạo mã HTML cho email.
Bạn có thể làm việc với định dạng bạn quen thuộc, JSX (giống như React), trong khi vẫn đảm bảo xây dựng trải nghiệm nhất quán (và hoạt động) trên các nền tảng email khác nhau.
React Email cũng cung cấp một hàm tiện ích để biên dịch mã JSX thành HTML thân thiện với email, hiển thị mượt mà trên tất cả các ứng dụng email phổ biến.

import { Button } from '@react-email/button';
import { Html } from '@react-email/html';

<Html lang="en" dir="ltr">
    <Button href="https://example.com">
        Click me
    </Button>
</Html>

7. React Flow

React Flow là một thư viện React cho việc xây dựng các ứng dụng dựa trên nút (node-based applications). Các ứng dụng này có thể là bất cứ thứ gì, từ các biểu đồ tĩnh đơn giản đến các biểu đồ trực quan hóa dữ liệu hoặc các trình biên tập phức tạp. Bạn có thể triển khai các loại nút và cạnh tùy chỉnh và React Flow đi kèm với các thành phần như bản đồ thu nhỏ (minimap) và điều khiển khung nhìn (viewport controls) sẵn có.

import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from 'reactflow';

<ReactFlow
    nodes={nodes}
    edges={edges}
    onNodesChange={onNodesChange}
    onEdgesChange={onEdgesChange}
    onConnect={onConnect}
>
    <MiniMap />
    <Controls />
    <Background />
</ReactFlow>

8. Novel

Novel WYSIWYG Editor là trình soạn thảo văn bản trực quan (WYSIWYG) được thiết kế để giúp người dùng dễ dàng tạo và chỉnh sửa nội dung web. Nó là một công cụ mạnh mẽ và linh hoạt có thể được sử dụng cho nhiều mục đích khác nhau, bao gồm: Viết bài đăng trên blog, Tạo trang web, Chỉnh sửa mã HTML và CSS, Viết email, Viết ghi chú.

Novel WYSIWYG Editor có nhiều tính năng khiến nó trở thành lựa chọn tuyệt vời cho cả người dùng mới bắt đầu và người dùng nâng cao, chẳng hạn như: giao diện trực quan, hỗ trợ nhiều định dạng (Markdown, HTML và rich text), Nhiều tính năng chỉnh sửa, . . .

import { Editor } from "novel";

<Editor />

Lời kết

VietnamWorks inTECH hy vọng, thông qua bài viết này các bạn đã bỏ túi được một vài component phù hợp, để từ đó bạn có thể tự tin hơn trong việc triển khai và quản lý các dự án React của mình. Đồng thời, bạn cũng sẽ tiết kiệm được nhiều thời gian và công sức, từ đó tập trung vào việc phát triển các tính năng sáng tạo và tối ưu hóa trải nghiệm người dùng.

VietnamWorks inTECH