Awesome React: Tài Nguyên Hệ Sinh Thái React
/awesome-react
Awesome React là một danh sách chỉ gồm liên kết dành cho hệ sinh thái React, được tổ chức theo danh mục thay vì viết thành hướng dẫn. Hãy dùng nó khi bạn đã biết mình đang chọn giữa các lựa chọn cụ thể, chẳng hạn Zustand, Redux, và Jotai, và muốn có một danh sách rút gọn thay vì tự tìm kiếm từng cái. Bỏ qua nó nếu bạn cần lời giải thích vì sao thư viện này tốt hơn thư viện kia.
Awesome React là gì?
Awesome React là một repository GitHub dạng danh sách được tuyển chọn, do enaqx duy trì, liên kết tới tài nguyên trong hệ sinh thái React thay vì chứa code của riêng nó. Danh sách chia thành hai mục chính, React và React Native, mỗi mục lại chia nhỏ theo chủ đề gồm framework, thư viện UI, quản lý state, styling, kiểm thử, routing, và nhiều hơn nữa, cùng một mục Contribution giải thích quy tắc và lịch sử của dự án.
Danh sách bao gồm những gì
- ✓Mục React liệt kê các framework như next, gatsby, remix, react-admin, refine, và vike, mỗi cái kèm một dòng mô tả ngắn gọn.
- ✓Các lựa chọn thư viện component trải dài từ shadcn-ui, ant-design, material-ui, chakra-ui, mantine, react-bootstrap, fluentui, đến headlessui, và nhiều cái khác.
- ✓Công cụ quản lý state và data-fetching gồm redux, mobx, zustand, tanstack-query, swr, apollo-client, relay, jotai, xstate, và rxdb.
- ✓Các mục riêng cho styling (styled-components, emotion, vanilla-extract), kiểm thử (jest, react-testing-library, cypress, playwright), và routing (react-router, tanstack-router).
- ✓Một mục React Native riêng với các mục con General Resources, Navigation, Awesome Components, và Libraries, liệt kê các công cụ như react-navigation và realm-js.
- ✓Mục Real Apps liên kết tới phần mềm thực tế được xây bằng React, gồm mattermost-server, kibana, webamp, và blog overreacted.io của Dan Abramov.
- ✓Phần lớn liên kết kèm một dòng mô tả ngắn lấy từ chính dự án được liên kết, chứ không phải bình luận riêng của người biên soạn.
Ai được lợi từ danh sách này
Awesome React phù hợp với những nhà phát triển đã biết khá rõ mình cần gì và muốn có một danh sách rút gọn nhanh chóng: ai đang chọn framework có thể lướt qua sáu lựa chọn trong mục React Frameworks (next, gatsby, remix, react-admin, refine, vike) trong chưa đầy một phút. Danh sách cũng phù hợp với nhà phát triển React Native, vì nó giữ một mục riêng cho React Native General Resources, Navigation, Awesome Components, và Libraries thay vì gộp công cụ mobile vào danh sách React chính. Người mới muốn học React từ đầu nên bắt đầu từ liên kết React Official Tutorial thay vì từ Awesome React, vì bản thân danh sách không dạy framework.
Điểm mạnh
- ✓Mọi mục đều liên kết thẳng tới repo GitHub hoặc trang chính thức của công cụ đó, chứ không phải một bài blog nói về nó.
- ✓Danh mục đủ cụ thể để hữu ích: có heading riêng cho quản lý state, styling, kiểm thử, routing, form, table và grid, bản đồ, và biểu đồ thay vì gộp hết vào một mục 'thư viện' chung chung.
- ✓React Native có mục riêng ở cấp cao nhất thay vì bị gộp qua loa vào danh sách React.
- ✓Mục Real Apps cho thấy React được dùng trong phần mềm đã phát hành thật, không chỉ ví dụ demo.
- ✓Ghi chú đóng góp yêu cầu rõ người tham gia không dùng danh sách để quảng cáo, giúp tránh spam từ nhà cung cấp.
Những điều cần cân nhắc khi dùng danh sách
- △Phần lớn mục chỉ có tên và liên kết, nhiều nhất là một dòng mô tả; không có gì trong README giải thích vì sao một framework hay thư viện được chọn thay vì một cái khác không có trong danh sách.
- △Các mục không ghi ngày kiểm tra gần nhất, nên chỉ nhìn vào danh sách thì không thể biết một dự án được liên kết còn được duy trì hay không.
- △Theo ghi chú của chính người duy trì, danh sách này khởi đầu như một tuyển tập cá nhân về những thứ họ thấy thú vị liên quan đến React, nên việc chọn đưa vào vẫn phản ánh đánh giá cá nhân chứ không phải một quy trình xét duyệt công khai.
- △Nội dung nghiêng hẳn về công cụ JavaScript và TypeScript; README không đề cập nội dung nào ngoài hệ sinh thái đó.
- △Danh sách không có bộ lọc hay tìm kiếm riêng. Đây chỉ là một trang Markdown dài chia theo heading, nên muốn tìm thứ cụ thể phải cuộn trang hoặc dùng tìm kiếm trong trang của GitHub.
Các danh sách tài nguyên React khác
Câu hỏi thường gặp
Awesome React liên kết tới framework, thư viện component, công cụ quản lý state và data-fetching, các lựa chọn styling, bộ icon, routing, công cụ kiểm thử, và package React Native, được tổ chức theo danh mục thay vì viết thành hướng dẫn.
Ghi chú đóng góp của Awesome React nói dự án tập trung chia sẻ tài nguyên hoàn toàn miễn phí, nên khoá học hay sản phẩm trả phí thường không nằm trong danh sách.
Ghi chú đóng góp của Awesome React mời đề xuất cập nhật cho các mục đã lỗi thời cũng như thêm mục hoàn toàn mới, và người duy trì nói ưu tiên liên kết dẫn tới GitHub hơn các nguồn khác.
Awesome React giữ một mục React Native riêng với các mục con General Resources, Navigation, Awesome Components, và Libraries, tách biệt khỏi mục React chính.
Người duy trì Awesome React nói rõ ưu tiên liên kết GitHub khi ai đó đề xuất mục mới hoặc cập nhật, thay vì liên kết tới các nơi lưu trữ khác.
Hướng dẫn đóng góp của Awesome React đề nghị mọi người không dùng danh sách như không gian quảng cáo hay nơi giới thiệu thử nghiệm cá nhân, nên các đề xuất mang tính quảng bá không được hoan nghênh.
Trường hợp sử dụng tốt nhất
- •Chọn giữa các công cụ quản lý state cụ thể như redux, zustand, jotai, mobx, và xstate trước khi bắt đầu dự án React mới.
- •Tìm thư viện component phù hợp với một phong cách cụ thể, từ phong cách doanh nghiệp của ant-design đến hướng tiếp cận Radix kết hợp Tailwind của shadcn-ui.
- •Dựng ứng dụng React Native và muốn có package navigation, thông tin thiết bị, và bản đồ ở cùng một chỗ thay vì tìm riêng lẻ trên npm.
- •Nghiên cứu các ứng dụng thực tế được xây bằng React, như kibana hay mattermost-server, để tham khảo cách tổ chức codebase lớn.
- •Chọn bộ công cụ kiểm thử (jest, react-testing-library, cypress, hoặc playwright) mà không phải so sánh qua năm bài blog khác nhau.
Repo liên quan
awesome-react có đáng để bạn bỏ thời gian?
ChatGPT, Claude và Perplexity đều đọc được trang này. Hỏi thử xem họ nghĩ gì về awesome-react.