6 khung UI dựa trên ReactJS tốt nhất

Được xuất bản lần đầu trên Blog ZeoLearn

React (ReactJS) một thư viện không cần bất kỳ lời giới thiệu nào hôm nay cho bất kỳ ai đang làm việc trong không gian phát triển phía trước. Tuy nhiên, chi tiết hơn về phản ứng js có thể được tìm thấy ở đây. Trong bài viết này, chúng tôi sẽ khám phá các khung UI hàng đầu cho các ứng dụng Reactjs. Các thư viện thành phần React UI này đã triển khai các thực hành khung CSS tương ứng như các thành phần phản ứng đã sẵn sàng để sử dụng, giúp cho sự phát triển của bạn dễ dàng và hiệu quả hơn.

Bắt đầu nào…

1. UI vật liệu

MaterialUI là một bộ các Thành phần Phản ứng thực hiện Nguyên tắc Thiết kế Vật liệu Google Google. Khi nói đến các thành phần được xác định trước, đặc biệt là UI, một điều quan trọng chúng ta cần tìm là có bao nhiêu widget UI có sẵn và liệu chúng có thể được tùy chỉnh với cấu hình hay không. Material-UI có tất cả các thành phần mà bạn cần và nó rất có thể cấu hình với bảng màu được xác định trước và thành phần cho phép bạn xác định chủ đề màu tùy chỉnh cho ứng dụng của mình.

Trong số hàng trăm khung giao diện người dùng ngoài kia, UI UI là một trong những khung UI dựa trên Reactjs tốt nhất có triển khai Thiết kế Vật liệu tinh tế nhất. Với 678 người đóng góp và 35K sao GitHub, đây là một trong những thư viện phổ biến nhất và được duy trì tích cực.

Tôi đã thiết lập ứng dụng mẫu được cung cấp trong các ví dụ về dự án vật liệu-ui để stackblitz cho bản demo nhanh. Tham khảo mã ở đây.

Cá nhân tôi cảm thấy nó không phải là một ví dụ tuyệt vời để chỉ ra trường hợp khả năng của vật liệu là gì nhưng chắc chắn là một khởi đầu đơn giản. Trang web chính thức cũng có tài liệu tốt và bản demo cho mỗi thành phần là nguồn thông tin tốt.

2. Phản ứng Bootstrap

Bootstrap là một trong những khung CSS phổ biến và được sử dụng rộng rãi nhất. Không có gì ngạc nhiên khi có bộ đôi React và Bootstrap. React Bootstrap là một tập hợp các thành phần React thực hiện khung Bootstrap. React-Bootstrap hiện nhắm vào Bootstrap v3 và nhóm đang tích cực làm việc trên Bootstrap v4.

Với 204 người đóng góp và 12 sao github, đây là một trong những thư viện phổ biến và được duy trì tích cực.

Unfortunatley Reac-bootstrap không cung cấp bất kỳ ví dụ dự án làm việc nào nhưng có những ví dụ cho mọi thành phần có thể tìm thấy ở đây.

Tôi đã thiết lập một ứng dụng mẫu trên stackblitz bằng cách biên dịch 2 ví dụ độc lập từ tài liệu. Tham khảo mã ở đây.

3. Giao diện người dùng ngữ nghĩa

Semantic UI là một khung phát triển giúp tạo ra các bố cục đẹp, đáp ứng bằng HTML thân thiện với con người. Khung này chịu ảnh hưởng nhiều hơn với phong cách ngữ nghĩa của HTML có ý nghĩa đối với mọi lớp css. UI giao diện người dùng coi các từ và lớp là các khái niệm có thể trao đổi. Các lớp sử dụng cú pháp từ ngôn ngữ tự nhiên như mối quan hệ danh từ / bổ nghĩa, số nhiều, trật tự từ để có một liên kết giữa các khái niệm bằng trực giác. Semantic cũng sử dụng các cụm từ đơn giản được gọi là hành vi kích hoạt chức năng.

Semantic UI React là tích hợp React chính thức cho Semantic UI

Với 175 người đóng góp và 6K sao github, đây là một trong những thư viện phổ biến và được duy trì tích cực.

Unfortunatley phản ứng ngữ nghĩa không cung cấp bất kỳ ví dụ dự án làm việc nào nhưng có những ví dụ cho mọi thành phần có thể tìm thấy ở đây.

Một ứng dụng mẫu chứng minh thành phần thẻ có thể được khám phá ở đây

4. Hộp công cụ phản ứng

Một chiếc lông vũ khác trong thư viện dựa trên Google Material Design. React Toolbox là một thư viện UI theo các khái niệm về Thiết kế Vật liệu Google Google và được xây dựng dựa trên một số đề xuất hợp thời nhất như Mô-đun CSS (được viết bằng SASS), Webpack và ES6. Thư viện tích hợp hài hòa với quy trình làm việc Webpack của bạn và nó có thể dễ dàng tùy chỉnh và rất linh hoạt.

Với 219 người đóng góp và 7k sao GitHub, đây là một trong những thư viện phổ biến và được duy trì tích cực.

Trang web chính thức lưu trữ các ví dụ cho tất cả các thành phần có thể được khám phá ở đây. Điều tuyệt vời bạn thấy ở đây là tải tính năng sân chơi giúp bạn khám phá các tính năng và khả năng ngay tại đó và không cần bất kỳ thiết lập bổ sung nào.

5. Thiết kế kiến

Một ngôn ngữ thiết kế giao diện người dùng cấp doanh nghiệp và triển khai dựa trên React. Thiết kế Ant được thiết lập các thành phần React chất lượng cao ra khỏi hộp được viết bằng TypeScript. Nó hỗ trợ trình duyệt, kết xuất phía máy chủ và môi trường Electron, có nhiều thành phần và thậm chí là một hướng dẫn với ứng dụng Tạo phản ứng

Với 443 người đóng góp và 24k sao GitHub, đây là một trong những thư viện phổ biến và được duy trì tích cực.

Bạn có thể tham khảo các bản demo ở đây

6. Nền tảng phản ứng

Giống như bootstrap, CSS framework Foundation là một khung CSS phổ biến khác. Foundation từ Zurb là một thư viện rất giàu tính năng và dễ dàng tùy chỉnh. React Foundation là một thư viện được triển khai Foundation dưới dạng các thành phần React.

React Foundation về cơ bản là gói các Foundation Foundation mỗi phần thành các thành phần React có thể sử dụng lại theo các cách thực hành tốt nhất của framework. Mục tiêu chính của việc phát triển React Foundation là dễ sử dụng và mở rộng.

Không giống như các thư viện UI khác để phát triển ứng dụng Reactjs mà chúng tôi đã khám phá ở trên React Foundation có những người đóng góp rất hạn chế và phát triển hoạt động rất thấp.

Bạn có thể tham khảo các bản demo ở đây