12 thư viện React không thể “làm ngơ” khi bắt đầu dự án

React có lẽ một cái tên không còn quá xa lạ với dân lập trình front end nói riêng và cộng đồng lập trình viên nói chung. Ngoài việc nó có nhiều tính năng mạnh mẽ giúp bạn xây dựng ứng dụng nhanh hơn, tốt hơn. Nó còn có một cộng đồng đông đảo, với kho thư viện hỗ trợ vô cùng phong phú, tha hồ cho bạn chọn lựa để “gửi vàng”.

Tại sao lại cần tới thư viện React?

Triết lý của việc xây dựng một phần mềm nói chung là càng tái sử dụng càng nhiều càng tốt. Do vậy, dự án web của bạn cũng có thể sẽ phải tạo những component để tải sử dụng ở khắp mọi nơi, component đó có thể là các Button, Dialog, Alert, Badge… Tất nhiên, những component trên nó quá phổ biến rồi, và hầu như mọi dự án đều sử dụng tới. Vậy tại sao bạn phải mất công xây dựng lại chúng?

Chúng ta cũng không cần phải mất quá nhiều nguồn lực vào việc viết lại các component UI phổ biến đó, thay vào đó, bạn nên tập trung vào xử lý các logic nghiệp vụ của ứng dụng.

Đây chính là lý do mà các thư viện React ra đời.

Mình sẽ không dài dòng làm mất thời gian của quý vị 😊 Dưới đây là tổng hợp 14 thư viện React giúp bạn tăng tốc độ xây dựng ứng dụng lên gấp x lần. Bạn không tin à? Vậy hãy đọc đến cuối bài viết này nhé.

1. chakra-ui

⭐ GitHub stars: 24k+

https://github.com/chakra-ui/chakra-ui

Chakra UI cung cấp cho bạn những component đẹp mắt, dễ sử dụng và độ tùy biến cao, giúp bạn xây dựng ứng dụng nhanh chóng và dễ dàng.

2. material-ui

⭐ GitHub stars: 76k+

https://github.com/mui-org/material-ui

Nghe tên thư viện đã thấy sự quen thuộc rồi. Thư viện này sẽ cung cấp các component UI theo triết lý thiết kế marerial mà Google đã áp dụng trên các sản phẩm của họ.

3. ant-design

⭐ GitHub stars: 78k+

https://github.com/ant-design/ant-design

Một thư viện UI xây dựng theo ngôn ngữ thiết kế phù hợp với các doanh nghiệp. Thư viện được viết bằng Typescript và có độ tùy biến rất cao.

4. semantic-ui-react

⭐ GitHub stars: 12k+

https://github.com/Semantic-Org/Semantic-UI-React

Đây là bộ thư viện UI rất nổi tiếng và đáng tin cậy, được sử dụng cho các dự án của nhiều “ông rất lơn” như Amazon, Netflix, Microsoft…

5. theme-ui

⭐ GitHub stars: 4k+

https://github.com/system-ui/theme-ui

Theme UI là một thư viện giúp xây dựng giao diện dựa trên triết lý  constraint-based, một kiểu triết lý UX giống như material design mà bạn hay nghe nói tới đấy.

6. react-bootstrap

⭐ GitHub stars: 20k+

https://github.com/react-bootstrap/react-bootstrap

Có lẽ trước đây bạn nghe nói tới Boostrap rất nhiều phải không? Một CSS framework gần như không thể thiếu cho mọi dự án web. Giờ đây, nó được viết lại để sử dụng riêng cho React. Các component sẽ được xây dựng lại để loại bỏ các dependencies không cần thiết như Jquery.

7. fluent-ui

⭐ GitHub stars: 13k+

https://github.com/microsoft/fluentui

Fluent là một triết lý thiết kế UI do Microsoft phát triển, và áp dụng lên bản window 11. Giờ đây, bạn có thể sử dụng triết lý UI này cho các ứng dụng web của mình thông qua thư viện fluent-ui.

8. blueprint

⭐ GitHub stars: 18k+

https://github.com/palantir/blueprint

Blueprint là bộ công cụ giao diện người dùng dựa trên React dùng cho các ứng dụng web. Nó được tối ưu hóa để xây dựng các ứng dụng phức tạp, hiển thị nhiều dữ liệu, chủ yếu là hiển thị trên  các máy tính PC. Các ứng dụng mà cần tối ưu cho mobile thì không nên sử dụng bộ thư viện này.

9. evergreen

⭐ GitHub stars: 11k+

https://github.com/segmentio/evergreen

Evergreen chứa một tập các React component được  tối ưu hóa để hoạt động hiệu quả hơn so bản gốc. Nó được xây dựng trên nền tảng React UI Primitive.

10. eui

⭐ GitHub stars: 3k+

https://github.com/elastic/eui

Elastic UI là một UI framework với đầy đủ React UI component giúp bạn nhanh chóng xây dựng ứng dụng. Mình không quá ấn tượng với framework này vì nó chưa phổ biến nhưng nó cũng đáng để bạn xem xét.

12. grommet

⭐ GitHub stars: 7k+

https://github.com/grommet/grommet

Một thư viện UI dựa trên React với khả năng tùy biến cao, module hóa, tối ưu responsive và được đóng gói trong một thư viện gọn nhẹ.

Trên đây là tuyển tập 12 thư viện UI dành cho React mà mình thấy rất tốt. Bạn có thể lựa chọn một trong số chúng để áp dụng cho dự án của mình.

Mình hi vọng bài viết này có ích cho bạn. Hẹn gặp lại ở bài viết tiếp theo nhé.

🔥 Đọc thêm:

• Học React qua 10 dự án thực tế (từ cơ bản – nâng cao)
• Cách tổ chức mã nguồn HTTP Client khoa học cho dự án VueJS
• [Tự học Javascript] Giải thích chi tiết về Event Loop