Sử dụng các thư viện phù hợp để tối ưu hóa quy trình làm việc của dự án
1.react-select
Một sự thay thế tuyệt vời cho Component Chọn trong React.js.
Trình bày một cách hoàn toàn mới để phát triển các thành phần React.js mạnh mẽ, vừa hoạt động hiệu quả vừa có thể tùy chỉnh hoàn toàn.
Các tính năng nổi bật
- Cách tiếp cận dữ liệu linh hoạt, với các chức năng có thể tùy chỉnh.
- API tạo kiểu có thể mở rộng với Emotion ( Một thư viện javascript được thiết kế cho kiểu CSS viết ).
- API chèn thành phần để kiểm soát hoàn toàn đối với hành vi giao diện người dùng.
- Nhóm tùy chọn, hỗ trợ cổng thông tin, hoạt ảnh và hơn thế nữa.
Để cài đặt:
npm i react-select
2. react-dnd
Drap and Drop for React
Một tập hợp các tiện ích React để giúp bạn xây dựng các giao diện kéo và thả phức tạp trong khi vẫn tách rời các thành phần.
Các tính năng nổi bật
- Hoàn hảo cho các ứng dụng như Trello và Storify, nơi kéo chịu trách nhiệm chuyển dữ liệu giữa các phần khác nhau của ứng dụng.
- Được xây dựng dựa trên API kéo và thả HTML5.
- React DnD sử dụng dữ liệu chứ không phải xem quảng cáo là nguồn sự thật.
Để cài đặt:
npm i react-dnd
3. react-content-loader
Thành phần được hỗ trợ SVG để dễ dàng tạo thẻ loadings (như tải thẻ của Facebook).
Các tính năng nổi bật
- Plug and play: Đi kèm với nhiều cài đặt trước để sử dụng.
- DIY: bạn có thể sử dụng trình tải tạo nội dung để tạo trình tải nội dung của riêng mình một cách dễ dàng.
- React Native support: Cùng một API với các tính năng mạnh mẽ như nhau.
- Lightweight: Ít hơn 2KB và 0 phụ thuộc cho phiên bản web.
Để cài đặt:
npm i react-content-loader
4. antd
Một ngôn ngữ thiết kế UI cấp doanh nghiệp và thư viện React UI.
Các tính năng nổi bật
- Được viết bằng TypeScript với các kiểu tĩnh có thể dự đoán được.
- Một gói toàn bộ tài nguyên thiết kế và công cụ phát triển.
- Tùy biến chủ đề mạnh mẽ đến từng chi tiết.
Để cài đặt:
npm i antd
5. gatsby-image
Xây dựng các ứng dụng và trang web hiện đại, nhanh chóng với React
Các tính năng nổi bật
- Host at scale for pennies: Các trang web của Gatsby không yêu cầu máy chủ, do đó bạn có thể lưu trữ toàn bộ trang web trên CDN với chi phí nhỏ so với trang web do máy chủ hiển thị.
- Locate data from anywhere: Lấy dữ liệu từ bất kỳ nguồn dữ liệu nào (tệp Markdown, CMS không đầu như Contentful hoặc WordPress & API REST).
- Go beyond static sites: Lợi ích của các trang web tĩnh không có giới hạn.
Để cài đặt:
npm i gatsby-image
6. react-helmet
Thành phần React có thể tái sử dụng sẽ quản lý tất cả các thay đổi của bạn đối với phần đầu tài liệu. Sử dụng các thẻ HTML đơn giản và xuất các thẻ HTML thuần túy, rất đơn giản và thân thiện với React.
Các tính năng nổi bật
- Hỗ trợ tất cả các thẻ hợp lệ: tiêu đề, cơ sở, meta, liên kết, v.v.
- Hỗ trợ kết xuất phía máy chủ.
- Các thành phần lồng nhau ghi đè các thay đổi phần đầu trùng lặp.
Để cài đặt:
npm i react-helmet
7. react-virtualized
Điều này cung cấp một thành phần React để hiển thị danh sách lớn và dữ liệu dạng bảng một cách hiệu quả, bao gồm 5 thành phần chính- (Grid, List, Table, Masonry, Collection).
Các tính năng nổi bật
- Cải thiện hiệu suất vì nó giới hạn số lượng cuộc gọi hiển thị.
- Đi kèm với các thành phần HOC như (AutoSizer, MultiGrid, v.v.)
Để cài đặt:
npm i react-virtualized
8. react-threesixty
React 360 giúp tạo ra trải nghiệm VR 360 đầy mê hoặc bằng React, trải nghiệm này mở rộng cho máy tính để bàn, điện thoại di động và thiết bị VR.
Các tính năng nổi bật
- Đơn giản hóa việc tạo các giao diện người dùng 360 và VR phức tạp.
Để cài đặt:
npm i react-threesixty
Tham khảo khóa học:
Web Frontend + React dành cho người mới bắt đầu - tại đây.
Hay khóa ReactJs 16 buổi - ở đây nhé.
Bài viết gốc tại đây.
Bình luận