Những thư viện thành phần chưa được định kiểu để xây dựng app React có thể tùy biến
Những thư viện tiện ích này có thể là lựa chọn hoàn hảo cho việc xây dựng và tùy chỉnh app React dễ dàng. Dưới đây là hướng dẫn chi tiết.
Bạn có thể dùng các thư viện thành phần cung cấp các phần tử đã được tạo kiểu trước nhằm đơn giản hóa quá trình phát triển app React. Những thư viện này có thể tiết kiệm cho bạn rất nhiều thời gian và công sức, nhưng chúng cũng có thể hạn chế quyền tạo kiểu app. Nếu cần tinh chỉnh app React thoải mái hơn, hãy cân nhắc dùng thư viện thành phần chưa tạo kiểu.
Thư viện thành phần chưa tạo kiểu là gì?
Thư viện thành phần chưa tạo kiểu thường được dùng để phát triển ứng dụng React dễ truy cập. Chúng là những bộ sưu tập thành phần UI có thể tái sử dụng mà không cần các kiểu xác định trước. Chúng cung cấp cho bạn cấu trúc thành phần UI cơ bản mà không phải tạo kiểu. Điều này cho bạn quyền kiểm soát hoàn toàn hình ảnh và cảm nhận các thành phần.
Lợi ích của việc sử dụng các thư viện thành phần chưa tạo kiểu:
- Kiểm soát hoàn toàn việc tạo kiểu.
- Tăng tốc độ phát triển.
- Dễ bảo trì.
- 0
1. Radix UI
Radix UI là một thư viện thành phần chưa tạo kiểu, tập trung vào khả năng truy cập. Nó cung cấp một tập hợp các thành phần giao diện được thiết kế để tất cả người dùng có thể truy cập được. Bạn có thể xây dựng các ứng dụng React đẹp mắt bằng Radix UI.
Khi làm việc với Radix UI, bạn có thể cài đặt từng thành phần cần thiết thay vì toàn bộ thư viện. Điều này đảm bảo bạn giữ cho ứng dụng luôn gọn nhẹ.
Ví dụ, nếu chỉ cần một thành phần accordion, bạn có thể cài đặt nó trong ứng dụng bằng cách chạy lệnh:
npm install @radix-ui/react-accordion
Sau khi cài đặt thành phần accordion, bạn có thể tạo chúng trong app React.
Ví dụ về cách dùng thành phần accordion:
import React from "react" import * as Accordion from "@radix-ui/react-accordion" export default function App() { return ( <div> <Accordion.Root type="single" defaultValue="item-1" collapsible> <Accordion.Item value="item-1"> <Accordion.Trigger>Is this accordion unstyled?</Accordion.Trigger> <Accordion.Content>Yes. It is unstyled.</Accordion.Content> </Accordion.Item> </Accordion.Root> </div> ) }
Khối code trên thiết lập thành phần accordion chưa được tạo kiểu bằng thư viện @radix-ui/react-accordion, cho phép thu gọn các mục với nội dung có thể tùy biến.
Code này sẽ tạo một accordion như sau: - 0
2. React Aria
Thư viện React Aria là một nhóm hook xây dựng giao diện người dùng trong React. Thư viện này khiến việc tạo ứng dụng web có thể truy cập dễ hơn bằng cách cung cấp một bộ sưu tập thành phần tuân thủ những phương pháp hay nhất về khả năng truy cập.
Adobe đã phát triển và duy trì thư viện React Aria. Thư viện này là một phần của Adobe Spectrum Design System mở rộng hơn, cung cấp một tập hướng dẫn thiết kế toàn diện và tài nguyên cho việc xây dựng giao diện người dùng dễ truy cập. Các thành phần này được cung cấp bởi thư viện React Aria chưa được tạo kiểu, cho phép bạn tùy biến các thành phần theo nhu cầu.
Để dùng React Aria trong ứng dụng React, cài đặt nó bằng cách chạy lệnh sau:
npm install react-aria
Đây là ví dụ về cách tạo một thành phần nút bấm bằng hook useButton:
import React from 'react' import {useButton} from 'react-aria'; function Button(props: any) { let ref = React.useRef(null); let { buttonProps } = useButton(props, ref); return ( <button {...buttonProps} ref={ref}> {props.children} </button> ); } export default Button;
Giờ bạn có thể nhập và hiện thành phần button ở bất kỳ thành phần khác đã chọn.
Ví dụ:
import React from 'react' import Button from './Button'; function App() { return ( <Button>Click Me</Button> ); } export default App;
Khi hiện khối code trên, nó sẽ tạo một nút bấm đơn giản trông giống như thế này:
Nếu dùng React Aria không thoải mái do hook, thay vào đó, hãy dùng React Aria Components. Thư viện này cung cấp các thành phần được tạo trước mà mặc định có thể truy cập. Nó là một layer mỏng nằm ở phía trên thư viện React Aria. Các thành phần được cung cấp chưa được tạo kiểu, vì thế hai thư viện này tương tự nhau.
- 0
3. Base UI
Base UI là một thư viện React UI chưa được tạo kiểu. Đội Material UI đã tạo Base UI với một nhóm thành phần cơ bản mà bạn có thể dùng để xây dựng ứng dụng React tùy chỉnh riêng. Họ xây dựng thư viện Base UI dựa trên kỹ thuật mạnh mẽ giống như của Material UI, nhưng Base UI không triển khai Material Design.
Bạn có thể cài đặt Base UI trong ứng dụng React bằng lệnh này:
npm install @mui/base
Base UI cung cấp các thành phần nhanh chóng, nghĩa là bạn có thể trực tiếp nhập và sử dụng các thành phần từ thư viện. Nó cũng cung cấp hook mà bạn có thể dùng để tạo & cấu hình các thành phần.
Đây là ví dụ về cách dùng các thành phần Base UI:
import React from "react"; import Button from "@mui/base/Button"; export default function App() { return ( <div> <Button>Click Me</Button> </div> ); }
Code này tạo một nút bấm đơn giản bằng thành phần Button của thư viện Base UI. Bạn cũng có thể dùng hook useButton để triển khai cùng nhiệm vụ này.
import React from "react"; import useButton from "@mui/base/useButton"; export default function App() { const { getRootProps } = useButton(); return ( <div> <button {...getRootProps()}>Click Me</button> </div> ); }
Hook useButton và Button sẽ tạo một nút bấm chưa được tạo kiểu như ảnh ở hình bên dưới.
- 0
4. Headless UI
Thư viện khác mà bạn có thể khám phá là Headless UI, cung cấp các thành phần UI chưa được tạo kiểu, cho bạn thoải mái tùy biến giao diện và hành vi của các thành phần UI như ý muốn.
Bạn có thể cài đặt thư viện này bằng lệnh sau:
npm install @headlessui/react
Sau khi cài đặt thư viện này, bạn có thể dùng một số thành phần mà thư viện cung cấp trong ứng dụng React.
Ví dụ:
import React from "react"; import { Popover } from "@headlessui/react"; export default function App() { return ( <div> <Popover> <Popover.Button>Popover</Popover.Button> <Popover.Panel> <p>This is a Popover</p> </Popover.Panel> </Popover> </div> ); }
Ở ví dụ này, bạn tạo một cửa sổ bật lên bằng thành phần Popover từ thư viện Headless UI. Khối code trên sẽ tạo một popover như sau:
Hi vọng bài viết có lựa chọn phù hợp với bạn!
Bạn nên đọc
-
Python editor online
-
Công thức tính diện tích hình quạt tròn
-
Cách thêm infinite scroll trong React.js
-
React Portal: Mọi điều bạn cần biết
-
Cách tính diện tích hình tròn và chu vi hình tròn
-
Công thức tính diện tích xung quanh hình nón cụt, diện tích toàn phần hình nón cụt, thể tích hình nón cụt
-
Xây dựng ứng dụng React dễ truy cập bằng các thành phần React Aria
-
Cách gỡ cài đặt SQL Server hoàn toàn
-
Cách tích hợp Contentful CMS với React
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Cũ vẫn chất
-
Chuyển từ cơ số 10 sang cơ số 16
Hôm qua -
Lệnh DELETE trong SQL Server
Hôm qua -
Thử thách nhìn emoji đoán ca dao, tục ngữ, mời tham gia
Hôm qua 13 -
Tình yêu là gì? 26 định nghĩa tình yêu chuẩn nhất
Hôm qua 12 -
Cách sửa lỗi "No Speaker or Headphones are Plugged In" trên Windows
Hôm qua -
Số thực là gì?
Hôm qua -
Cách quay màn hình máy tính Win 10 nhanh chóng
Hôm qua -
Các toán tử so sánh trong SQL Server
Hôm qua -
Cách chèn link liên kết trong văn bản Google Docs
Hôm qua 1 -
Cách thay đổi hệ thống ngôn ngữ trong Windows 10
Hôm qua 1