Các thư viện React thiết yếu cho năm 2025

 (robinwieruch.de)
52 điểm bởi xguru 2025-03-04 | 6 bình luận | Chia sẻ qua WhatsApp
  • React đã được sử dụng trong thời gian dài, hình thành nên một hệ sinh thái thư viện khổng lồ
  • Các nhà phát triển đến từ ngôn ngữ/framework khác có thể gặp khó khăn trong việc lựa chọn thư viện cần thiết để xây dựng ứng dụng React
  • Cốt lõi của React là một thư viện tập trung vào chức năng để xây dựng UI dựa trên component
    • Có thể quản lý state cục bộ, xử lý side effect và tối ưu hiệu năng bằng functional component và React Hooks
    • Cuối cùng, cả component và hook đều hoạt động theo cách sử dụng hàm để cấu thành UI
  • Bài viết giới thiệu các thư viện React thiết yếu cần thiết để phát triển ứng dụng quy mô lớn cho năm 2025

Bắt đầu dự án React

  • Vite : Công cụ phổ biến nhất để thiết lập dự án React. Cung cấp tốc độ build nhanh và hỗ trợ TypeScript thuận tiện
  • Next.js :
    • Meta-framework dựa trên React, hỗ trợ server-side rendering (SSR) và static site generation (SSG)
    • Cung cấp nhiều tính năng như file-based routing, API route, React Server Components (RSC)
  • TanStack Start (Beta) : Framework mới dựa trên React, dự kiến hỗ trợ React Server Components. Đang được phát triển như một lựa chọn thay thế cho Next.js
  • React Router : Thư viện tiêu biểu cho client-side routing của React. Hiện đang thay đổi dưới ảnh hưởng của Remix
  • Astro : Công cụ tạo static site không phụ thuộc framework. Có thể dùng cùng React và tối ưu hiệu năng bằng cách giảm thiểu JavaScript không cần thiết
  • Nitro , Redwood , Waku
    • Các framework và công cụ mới cho React
    • Waku là thư viện hỗ trợ React Server Components do nhà phát triển của Zustand tạo ra
  • Khuyến nghị:
    • Client-side rendering (CSR): Vite
    • Server-side rendering (SSR): Next.js
    • Static site generation (SSG): Astro

Trình quản lý gói cho React

  • npm : Trình quản lý gói mặc định của Node.js và được sử dụng rộng rãi nhất
  • Yarn : Cung cấp khả năng quản lý dependency tốt hơn và cải thiện tốc độ
  • pnpm : Hiệu năng rất tốt nhưng tương đối ít phổ biến hơn
  • Turborepo : Công cụ quản lý Monorepo, có thể quản lý hiệu quả nhiều dự án React
  • Khuyến nghị:
    • Quản lý gói thông thường: npm
    • Khi cần tối ưu hiệu năng: pnpm
    • Khi cần monorepo: Turborepo

Quản lý state trong React

  • useState, useReducer : Hook tích hợp sẵn của React để quản lý state trong component
  • useContext : Hook tích hợp sẵn của React để quản lý state toàn cục
  • Zustand : Thư viện cho phép quản lý state toàn cục với API đơn giản. Dễ dùng hơn Redux nên gần đây được nhiều nhà phát triển ưa chuộng
  • Redux : Thư viện quản lý state đã được sử dụng lâu năm. Gần đây, Redux Toolkit đã trở thành tiêu chuẩn
  • XState, Zag : Các thư viện quản lý state dựa trên state machine
  • Mobx , Jotai , Nano Stores : Các thư viện quản lý state có thể dùng thay thế cho Zustand và Redux
  • Khuyến nghị:
    • State cục bộ: useState / useReducer
    • State toàn cục nhỏ: useContext
    • State toàn cục lớn: Zustand

Lấy dữ liệu trong React

  • TanStack Query : Thư viện lấy dữ liệu cho các yêu cầu API REST và GraphQL. Cung cấp các tính năng như caching, đồng bộ hóa, optimistic update
  • Apollo Client : Thư viện quản lý dữ liệu được tối ưu cho GraphQL API
  • urql : GraphQL client gọn nhẹ
  • Relay : GraphQL client hiệu năng cao do Facebook phát triển
  • RTK Query : Công cụ giúp việc lấy dữ liệu trong môi trường Redux trở nên dễ dàng hơn
  • tRPC : Cung cấp giao tiếp API an toàn về kiểu giữa backend và frontend dựa trên TypeScript. Có thể dùng cùng TanStack Query
  • Khuyến nghị:
    • Lấy dữ liệu phía máy chủ: React Server Components / Functions (khi dùng meta-framework được hỗ trợ)
    • Lấy dữ liệu phía client: TanStack Query (REST, GraphQL)
    • Chuyên cho GraphQL: Apollo Client
    • Giao tiếp API an toàn về kiểu: tRPC

Định tuyến trong React

  • React Router : Thư viện được sử dụng rộng rãi nhất cho client-side routing
  • TanStack Router (Beta) : Thư viện routing mới với hỗ trợ TypeScript rất tốt
  • Khuyến nghị:
    • Định tuyến phía máy chủ: Next.js
    • Định tuyến phía client: React Router (được dùng nhiều nhất), TanStack Router (xu hướng mới nhất)
    Quảng cáo

CSS styling cho React

  • Tailwind CSS
    • Theo cách tiếp cận Utility-First CSS, có thể style nhanh bằng cách tận dụng các class được định nghĩa sẵn
    • Có thể duy trì hệ thống thiết kế một cách nhất quán, nhưng việc đặt tên class có thể trở nên phức tạp
  • CSS Modules
    • Có thể mô-đun hóa style theo từng component để tránh xung đột style toàn cục
    • Là cách tiếp cận được sử dụng rộng rãi nhất trong nhóm CSS-in-CSS
  • styled-components
    • Cách tiếp cận CSS-in-JS, định nghĩa CSS ngay trong mã JavaScript
    • Gần đây mức độ phổ biến đang giảm do các vấn đề về hiệu năng và trong môi trường server-side
  • Emotion : thư viện CSS-in-JS tương tự styled-components, có thể tối ưu hiệu năng và tận dụng utility class
  • clsx : thư viện tiện ích giúp thiết lập className có điều kiện một cách dễ dàng
  • StyleX : giải pháp CSS-in-JS mới do Facebook phát triển. Cung cấp kiểu styling utility-first với cơ chế biên dịch được tối ưu hóa
  • Các thư viện CSS khác: PandaCSS , linaria , vanilla-extract , nanocss , UnoCSS , Styled JSX
  • Khuyến nghị:
    • Cách phổ biến nhất: Tailwind CSS
    • Khi cần mô-đun hóa style: CSS Modules
    • Giải pháp CSS-in-JS hiện đại: StyleX

Thư viện UI cho React

  • Material UI (MUI) : thư viện UI vẫn được dùng nhiều trong các dự án freelancer. Dựa trên hệ thống Material Design của Google
  • Mantine UI : thư viện UI phổ biến nhất trong năm 2022. Hỗ trợ nhiều tính năng và style tùy biến
  • Chakra UI : thư viện UI phổ biến nhất trong năm 2021. Nổi bật về khả năng truy cập và sự tiện lợi trong styling
  • Hero UI : thư viện UI được đổi tên từ Next UI
  • Park UI : thư viện UI dựa trên Ark UI
  • PrimeReact : cung cấp nhiều component UI dựng sẵn (prebuilt)
  • Thư viện UI headless
  • Các thư viện UI ít được dùng hơn trước
  • Khuyến nghị:
    • Thư viện UI có kèm style: MUI, Mantine, Chakra UI
    • Thư viện UI headless không kèm style: shadcn/ui, Radix

Thư viện animation cho React

  • Motion : thư viện animation được khuyến nghị nhiều nhất (trước đây là Framer Motion)
  • react-spring : có thể triển khai animation dựa trên vật lý

Biểu đồ và trực quan hóa dữ liệu cho React

  • D3.js : thư viện biểu đồ cấp thấp, mạnh mẽ nhưng có độ khó học cao
  • Recharts : thư viện biểu đồ dễ dùng. Có thể tùy biến ở mức cơ bản
  • visx : hoạt động theo cách tương tự D3 nhưng thân thiện hơn với React
  • Các thư viện biểu đồ khác: Victory , nivo , react-chartjs
  • Khuyến nghị:
    • Biểu đồ đơn giản: Recharts
    • Tùy biến theo phong cách D3: visx
Quảng cáo

Thư viện form cho React

  • React Hook Form : thư viện form React được sử dụng rộng rãi nhất. Có thể kết hợp với zod để xác thực form mạnh mẽ
  • Conform : thư viện form mới nổi, dễ tích hợp với các ứng dụng full-stack
  • Formik , React Final Form : các thư viện form React truyền thống, vẫn còn được dùng trong một số dự án
  • Khuyến nghị:
    • Khi chọn thư viện form, nên dùng React Hook Form + zod

Code style và formatting cho React

  • ESLint : công cụ lint để duy trì code style. Có thể áp dụng các style guide phổ biến
  • Prettier : công cụ cung cấp định dạng mã nguồn nhất quán. Có thể dùng cùng ESLint
  • Biome : linter và code formatter all-in-one tốc độ cao, viết bằng Rust (trước đây là Rome). Đang được chú ý như một lựa chọn thay thế cho ESLint và Prettier
  • Khuyến nghị:
    • Dùng kết hợp ESLint + Prettier
    • Cân nhắc Biome như một lựa chọn thay thế mới

Xác thực (Authentication) trong React

  • Lucia : Giải pháp xác thực hỗ trợ OAuth và các tính năng mã hóa
  • Better Auth : Một trong những dịch vụ xác thực hiện đại
  • Auth.js : Thư viện xác thực có thể dùng dễ dàng với Next.js và nhiều framework khác
  • Dịch vụ xác thực trả phí: Clerk , Kinde
  • Xác thực dựa trên Firebase/Supabase: Supabase Auth
  • Các dịch vụ xác thực khác: AuthKit , Auth0 , AWS Cognito
  • Khuyến nghị:
    • Xác thực dễ triển khai: Auth.js, Supabase Auth
    • Tăng cường OAuth và tính năng bảo mật: Lucia, Better Auth

Backend cho React

  • Next.js : Cung cấp server-side rendering (SSR) và API route
  • Astro : Framework phù hợp để tạo website tĩnh
  • tRPC : Giải pháp cho giao tiếp API an toàn kiểu dữ liệu
  • Hono : Framework server siêu nhẹ, có thể dùng cùng React
  • Các framework backend Node.js truyền thống
    • Express : Framework backend Node.js phổ biến nhất
    • Fastify : Framework Node.js hiệu năng cao
    • NestJS : Phù hợp với ứng dụng quy mô lớn
    • Elysia : Backend hiện đại dựa trên TypeScript
  • Các framework backend khác
  • Khuyến nghị:
    • Phát triển React full-stack: Next.js, tRPC
    • Khi cần backend truyền thống: Express, Fastify

Cơ sở dữ liệu và ORM cho React

  • Prisma : ORM dựa trên TypeScript phổ biến nhất
  • Drizzle ORM : ORM đang được chú ý như một lựa chọn thay thế cho Prisma
  • Các ORM và query builder khác: Kysely , database-js : Dành riêng cho PlanetScale
  • Cơ sở dữ liệu serverless
  • Cơ sở dữ liệu dựa trên Firebase/Supabase
  • Khuyến nghị:
    • Khi cần ORM: Prisma, Drizzle ORM
    • Cơ sở dữ liệu serverless: PlanetScale, Neon
    Quảng cáo

Hosting cho React

Thư viện kiểm thử cho React

  • Vitest : Framework kiểm thử nhanh hơn Jest và được tối ưu cho các dự án React hiện đại. Cung cấp chạy test, assertion và tính năng mock
  • Jest : Framework kiểm thử vẫn được dùng nhiều trong các dự án cũ
  • React Testing Library (RTL)
    • Thư viện tiêu biểu để kiểm thử component React
    • Cung cấp khả năng render phần tử HTML và mô phỏng sự kiện
  • Playwright
    • Công cụ kiểm thử E2E (End-to-End) được khuyến nghị nhiều nhất
    • Có thể tự động hóa kiểm thử trên nhiều trình duyệt và môi trường thiết bị khác nhau
  • Cypress : Công cụ kiểm thử E2E cho frontend, đang cạnh tranh với Playwright
  • Khuyến nghị:
    • Kiểm thử unit/tích hợp: Vitest + React Testing Library
    • Kiểm thử E2E: Playwright (hoặc Cypress)
    • Tùy chọn kiểm thử snapshot: Vitest

React và cấu trúc dữ liệu bất biến

  • Immer :
    • Thư viện giúp xử lý cấu trúc dữ liệu bất biến dễ dàng hơn
    • Có thể triển khai logic thay đổi trạng thái phức tạp một cách ngắn gọn

Hỗ trợ đa ngôn ngữ (i18n) cho React

  • FormatJS : Thư viện i18n mạnh mẽ, bao gồm định dạng ngày, số, tiền tệ...
  • react-i18next : Thư viện hỗ trợ đa ngôn ngữ được dùng rộng rãi nhất trong React
  • Lingui : Cung cấp hỗ trợ đa ngôn ngữ mạnh mẽ với cấu hình tối thiểu
  • next-intl : Thư viện đa ngôn ngữ cho các dự án Next.js
  • Khuyến nghị:
    • Lựa chọn phổ biến nhất: react-i18next
    • Dự án dùng Next.js: next-intl
Quảng cáo

Trình soạn thảo văn bản phong phú cho React

  • TipTap : Trình soạn thảo văn bản phong phú hiện đại với khả năng mở rộng cao
  • Plate : Giải pháp trình soạn thảo mạnh mẽ dựa trên Slate.js
  • Lexical : Trình soạn thảo văn bản phong phú nhẹ do Facebook tạo ra
  • Slate : Framework trình soạn thảo văn bản phong phú có thể tùy biến
  • Khuyến nghị:
    • Khi cần khả năng mở rộng linh hoạt: TipTap
    • Trình soạn thảo nhẹ & tối ưu: Lexical

Hệ thống thanh toán cho React

  • PayPal : một trong những hệ thống thanh toán được sử dụng rộng rãi nhất
  • Stripe : cung cấp API thanh toán thân thiện với lập trình viên
  • Các giải pháp thanh toán khác
  • Khuyến nghị:
    • Giải pháp thanh toán đơn giản: Stripe
    • Nếu cần hỗ trợ PayPal: PayPal hoặc Braintree

Xử lý thời gian và ngày tháng trong React

  • date-fns : nhẹ nhưng cung cấp đa dạng hàm ngày/giờ
  • Day.js : giải pháp thay thế nhẹ cho Moment.js, với API tương tự
  • Khuyến nghị:
    • Thư viện nhẹ nhất: Day.js
    • Thư viện giàu tính năng: date-fns

Ứng dụng desktop React

  • Electron :
    • framework phát triển ứng dụng desktop đa nền tảng
    • có thể xây dựng ứng dụng cho Windows, macOS, Linux bằng công nghệ web (HTML, CSS, JS)
  • Tauri
    • giải pháp thay thế nhẹ hơn Electron, sử dụng backend dựa trên Rust
    • phù hợp với các dự án coi trọng bảo mật và hiệu năng
  • Khuyến nghị:
    • Tận dụng nguyên vẹn công nghệ web: Electron
    • Nhẹ & ưu tiên bảo mật: Tauri

Tải tệp lên trong React

  • react-dropzone : thư viện dựa trên React hook dành cho tải tệp lên. Hỗ trợ tính năng kéo và thả
Quảng cáo

Render email trong React

  • react-email (khuyến nghị) : cho phép tạo email HTML responsive bằng React component
  • mjml : ngôn ngữ đánh dấu giúp tạo email HTML dễ dàng
  • Mailing : hỗ trợ lập trình viên tạo và quản lý email dễ dàng
  • jsx-email : cho phép tạo mẫu email bằng cú pháp JSX
  • Nhà cung cấp dịch vụ email :
  • Khuyến nghị:
    • Tạo email theo phong cách React: react-email
    • Nếu cần dịch vụ email: SendGrid, Mailgun

Kéo và thả trong React

  • @hello-pangea/dnd : dự án kế nhiệm của react-beautiful-dnd, cung cấp cách sử dụng đơn giản
  • dnd kit : có độ linh hoạt và khả năng tùy biến cao, nhưng có đường cong học tập
  • Khuyến nghị:
    • Kéo và thả dễ dùng: @hello-pangea/dnd
    • Nếu cần tùy biến: dnd kit

Phát triển di động với React

  • React Native : framework phát triển ứng dụng di động đa nền tảng dựa trên React
  • Expo : bộ công cụ giúp việc phát triển React Native trở nên dễ dàng hơn
  • Tamagui : hỗ trợ sử dụng cùng một UI component trên web và di động
  • Khuyến nghị:
    • Phát triển di động: React Native + Expo
    • Hợp nhất UI web và di động: Tamagui

Phát triển VR/AR với React

  • react-three-fiber : thư viện render 3D dựa trên Three.js. Có các trường hợp hỗ trợ VR
  • react-360 (đã lưu trữ) : framework VR/AR do Facebook phát triển (hiện đã ngừng bảo trì)
  • aframe-react (không còn được bảo trì) : thư viện hỗ trợ sử dụng A-Frame trong React
  • Khuyến nghị:
    • Thư viện React 3D/VR hiện đại: react-three-fiber

Thiết kế nguyên mẫu trong React

  • Figma : công cụ phổ biến nhất cho thiết kế và tạo nguyên mẫu UI/UX
  • Excalidraw : có thể tạo wireframe và sơ đồ với phong cách vẽ tay
  • tldraw : công cụ phác thảo tương tự Excalidraw
  • Khuyến nghị:
    • Thiết kế UI/UX: Figma
    • Wireframe đơn giản: Excalidraw

Tài liệu hóa component React

  • Storybook : công cụ tiêu biểu để phát triển và tài liệu hóa UI component
  • Docusaurus : trình tạo trang tĩnh dành cho tài liệu kỹ thuật
  • Styleguidist : công cụ tài liệu hóa style guide tập trung vào React component
  • React Cosmos : cung cấp môi trường để phát triển và kiểm thử UI component một cách độc lập
  • Khuyến nghị:
    • Tài liệu hóa component: Storybook
    • Tạo tài liệu kỹ thuật: Docusaurus

Bài viết liên quan

6 bình luận

 
tmdeoans 2025-10-12

ssgoi.dev: thư viện chuyển trang cho React

Nếu có thể thêm cái này nữa thì cảm ơn ạ h..
 
clastneo 2025-03-04

Có lẽ nên xem Expo là framework của RN thì đúng hơn.
 
codemasterkimc 2025-03-04

Theo tìm kiếm trên Google Trends thì tôi biết là redux chiếm 90% còn zustand thậm chí chưa tới 10%, vậy mà zustand lại ở phía trên nhỉ haha
 
dooboo 2025-03-04

Sức mạnh của đồ cũ đó.

Nhân tiện, jQuery đang có thị phần 90%...
 
xguru 2025-03-04

React stack công nghệ 2025 cũng hãy tham khảo cùng
 
xguru 2025-03-04

Các thư viện được khuyến nghị khi phát triển ứng dụng bằng React tính đến năm 2022

Có vẻ bài này được cập nhật hằng năm, nhưng đã là sau 3 năm rồi. So sánh đối chiếu sẽ rất hữu ích.