Xây dựng các ứng dụng React có thể truy cập được bằng các thành phần React Aria
React Aria Components là một thư viện chứa một tập hợp các thành phần chưa được định kiểu được xây dựng dựa trên các hook React Aria.
Adobe đã đi đầu trong việc phát triển công nghệ này như một phần trong những nỗ lực không ngừng của họ trong sáng kiến React Spectrum, một nỗ lực đầy tham vọng nhằm cung cấp cho các nhà phát triển nhiều nguồn tài nguyên đa dạng được thiết kế để hỗ trợ việc tạo ra các giao diện người dùng có tính phản hồi, toàn diện và linh hoạt.
Tìm hiểu các thành phần React Aria
Thành phần React Aria cung cấp khả năng truy cập, tương tác của người dùng và hành vi theo WAI-ARIA (Sáng kiến khả năng truy cập web-Phong phú có thể truy cập Ứng dụng Internet) các phương pháp hay nhất. Không giống như thư viện React Aria sử dụng React hook để xây dựng các thành phần của bạn.
Thư viện Thành phần React Aria trình bày một loạt các thành phần tích hợp sẵn như nút, hộp kiểm và thanh trượt không được trang trí theo bất kỳ kiểu dáng nào, do đó cho phép các nhà phát triển linh hoạt xác định giao diện trực quan và không gian của phần mềm theo thông số kỹ thuật ưa thích của họ.
Lợi ích của việc sử dụng React Aria Components
Việc sử dụng thư viện Thành phần React Aria mang lại vô số lợi ích, bao gồm:
Các thành phần React Aria tuân thủ các nguyên tắc WAI-ARIA về khả năng truy cập, cho phép các cá nhân sử dụng công nghệ hỗ trợ có đầy đủ chức năng và khả năng sử dụng ứng dụng.
Các thành phần React Aria được cung cấp ở dạng chưa được định kiểu, cho phép triển khai hệ thống thiết kế tùy chỉnh mà không có bất kỳ hạn chế hoặc hạn chế nào. Tính linh hoạt này cho phép các nhà phát triển kết hợp các yếu tố hình ảnh và tương tác độc đáo của họ vào trong các thành phần, mang lại trải nghiệm người dùng phù hợp, phù hợp với các yêu cầu và tùy chọn cụ thể của ứng dụng.
React Aria cung cấp một cách tiếp cận toàn diện để quản lý tương tác của người dùng thông qua nhiều phương thức nhập khác nhau như bàn phím, chuột và thiết bị cảm ứng.
React Aria cung cấp hỗ trợ toàn diện cho bố cục ngôn ngữ Từ phải sang trái (RTL), cũng như các tính năng nâng cao như định dạng ngày và số, tạo điều kiện thuận lợi cho việc phát triển các ứng dụng web đa văn hóa và đa ngôn ngữ.
Xây dựng ứng dụng React bằng các thành phần React Aria
Để xây dựng một ứng dụng React cơ bản sử dụng các Thành phần React Aria, cần thiết lập dự án React làm nền tảng. Việc triển khai các Thành phần React Aria trong ứng dụng React có thể đạt được bằng cách sử dụng Vite, đóng vai trò là phương tiện hiệu quả để tạo và quản lý các dự án đó.
Tạo ứng dụng React của bạn
Để thiết lập dự án React bằng Vite, hãy thực thi lệnh tiếp theo trong giao diện terminal của bạn:
npm init vite
Việc thực thi mã được cung cấp sẽ bắt đầu một chuỗi yêu cầu được thiết kế để tạo điều kiện thuận lợi cho việc thiết lập một dự án React mới.
Ví dụ:
Để tiếp tục dự án của bạn, điều cần thiết là phải cài đặt các phụ thuộc cần thiết. Để hoàn thành nhiệm vụ này, hãy thực thi mã nói trên trong môi trường đầu cuối của bạn:
cd react-aria-app
npm install
Quá trình này bao gồm việc thay đổi thư mục làm việc hiện tại thành thư mục của dự án và cài đặt mọi phụ thuộc cần thiết. Sau khi thiết lập ứng dụng dựa trên React, bạn có thể giới thiệu thư viện Thành phần React Aria cung cấp các cải tiến về khả năng truy cập cho ứng dụng của bạn.
Cài đặt các thành phần React Aria
Để cài đặt thư viện Thành phần React Aria bằng cách sử dụng npm hoặc sợi, người ta có thể thực thi một lệnh cụ thể trong thiết bị đầu cuối của họ. Cụ thể, để làm như vậy thông qua việc sử dụng npm, người ta sẽ nhập hướng dẫn sau vào terminal của họ:
npm install react-aria-components
Ngoài ra, bạn có thể chọn cài đặt gói bằng Yarn bằng cách thực hiện lệnh sau trong terminal hoặc dấu nhắc lệnh:
yarn add react-aria-components
Trong bối cảnh một dự án phát triển phần mềm liên quan đến việc tích hợp thư viện Thành phần React Aria, việc sử dụng các tính năng của thư viện nói trên hiện là khả thi.
Sử dụng các thành phần React Aria
Thư viện Thành phần React Aria cung cấp một loạt các phần tử linh hoạt giúp hợp lý hóa quy trình phát triển và đẩy nhanh tốc độ của nó. Để sử dụng các thành phần này trong dự án của bạn, chỉ cần kết hợp chúng vào ứng dụng của bạn và hiển thị chúng.
Ví dụ:
import React from "react";
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components";
function App() {
return (
<div>
<DialogTrigger>
<Button>Click Me</Button>
<Popover>
<Dialog>You clicked the button</Dialog>
</Popover>
</DialogTrigger>
</div>
);
}
export default App;
Khối mã ở trên nhập một số thành phần React, cụ thể là “Button”, “Popover”, “DialogTrigger” và “Dialog” từ thư viện “Reac-aria-thành phần”. Các thành phần này cùng nhau tạo thành một giao diện đơn giản với một nút mà khi được nhấp vào sẽ kích hoạt hiển thị cửa sổ bật lên.
Thành phần DialogTrigger đóng vai trò như một bộ điều khiển để xác định mức độ hiển thị của hộp thoại hoặc cửa sổ bật lên, với hoạt động của nó được hỗ trợ bởi phần tử Button được nhúng bên trong nó. Khi kích hoạt, nút này sẽ hiển thị Popover và Dialog tương ứng.
Thành phần Popover đóng vai trò là vùng chứa xuất hiện trên phần còn lại của giao diện người dùng và có thể được kích hoạt bằng cách nhấp vào một thành phần cụ thể. Mặt khác, thành phần Hộp thoại trình bày nội dung của nó trong một lớp riêng biệt được đặt phía trên ứng dụng. Trong giới hạn của thành phần Popover có một thành phần Hộp thoại lồng nhau bao gồm thông báo “Bạn đã nhấp vào nút.
Khi nhấp vào nút được chỉ định, một thông báo bật lên sẽ xuất hiện trên màn hình thiết bị của bạn, hiển thị thông báo “Bạn đã tương tác thành công với nút”, thể hiện tính thẩm mỹ gợi nhớ đến ví dụ trực quan được mô tả.
Trong cách trình bày trực quan được mô tả ở trên, người ta quan sát thấy sự thiếu vắng bất kỳ thuộc tính thẩm mỹ nào được thiết lập trước trong các thành phần cấu thành của thư viện, từ đó trao cho người dùng quyền tự chủ trong việc lựa chọn các lựa chọn thiết kế ưa thích của họ.
Tạo kiểu cho các thành phần của bạn
Các thành phần React Aria được cung cấp ở trạng thái tự nhiên, cho phép linh hoạt tùy chỉnh giao diện của chúng thông qua việc sử dụng các kỹ thuật tạo kiểu ưa thích như sử dụng Cascading Style Sheets (CSS), khai thác sức mạnh của Tailwind CSS, kết hợp các thành phần được tạo kiểu hoặc chọn thiết kế thay thế phương pháp nâng cao tính thẩm mỹ.
Bằng cách sử dụng tên lớp tùy chỉnh, bạn có thể áp dụng nhiều cách chỉ định khác nhau cho các thành phần riêng lẻ trong cấu trúc HTML của mình. Đồng thời, bạn có thể thiết lập các thuộc tính phong cách đặc biệt cho các lớp cụ thể này trong tài liệu CSS của mình, từ đó cho phép trình bày trực quan phù hợp trên các thành phần khác nhau.
Đây là một ví dụ:
import React from "react";
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components";
function App() {
return (
<div>
<DialogTrigger>
<Button className="button">Click Me</Button>
<Popover className="popover">
<Dialog className="dialog">You clicked the button</Dialog>
</Popover>
</DialogTrigger>
</div>
);
}
export default App;
Chắc chắn! Đây là cách diễn đạt lại câu đó một cách trang nhã: Trong trường hợp này, chúng tôi chỉ định một lớp tùy chỉnh cho từng phần tử Nút, Cửa sổ bật lên và Hộp thoại bằng cách sử dụng thuộc tính className trong mã HTML của chúng tôi. Điều này cho phép chúng tôi sử dụng các kỹ thuật tạo kiểu thông qua một tệp CSS riêng biệt, mang lại sự linh hoạt cao hơn trong việc điều chỉnh giao diện của các thành phần này theo sở thích thiết kế của chúng tôi.
.button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.dialog{
outline: none;
}
Sau khi thiết lập các quy ước về kiểu dáng cho các thành phần giao diện người dùng của bạn, chẳng hạn như nút và cửa sổ bật lên, cách trình bày trực quan của các thành phần này có thể giống với ví dụ được cung cấp bên dưới.
Nếu bạn chọn không chỉ định thuộc tính lớp riêng cho các thành phần của mình trong khung Thành phần React Aria, hãy yên tâm rằng thư viện cung cấp chỉ định lớp mặc định cho từng thành phần. Phân loại mặc định này có định dạng “Reac-aria-ComponentName”, trong đó ““ComponentName” ” biểu thị danh pháp của thành phần cụ thể đang được tạo kiểu.
Ví dụ:
.react-aria-Button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.react-aria-Popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.react-aria-Dialog{
outline: none;
}
Xin lưu ý rằng khối mã CSS nói trên sẽ có thể áp dụng cho tất cả các phiên bản của các thành phần Nút, Cửa sổ bật lên và Hộp thoại được sử dụng trong phạm vi ứng dụng của bạn.
Xây dựng các ứng dụng React có thể truy cập và tương tác
React Aria Components là một công cụ hiệu quả cao để tạo các ứng dụng dựa trên React toàn diện và năng động bằng cách tuân thủ các tiêu chuẩn Ứng dụng Internet phong phú có thể truy cập (WAI-ARIA) của World Wide Web Consortium. Thư viện mạnh mẽ này bao gồm nhiều thành phần được thiết kế để đáp ứng các tương tác đa dạng của người dùng trong khi vẫn đảm bảo khả năng truy cập liền mạch. Đối với những người đang tìm kiếm một bộ thành phần toàn diện cùng với tính linh hoạt trong quá trình phát triển của họ, React Aria Components là một lựa chọn ưu việt.
Ngoài thư viện Thành phần React Aria, còn tồn tại một số bộ sưu tập thành phần chưa được trang trí cho phép tạo ra các ứng dụng React hấp dẫn về mặt hình ảnh. Trong số các tập hợp này có Radix UI, một kho lưu trữ phần tử chưa được chỉnh sửa được thiết kế đặc biệt để tạo các dự án React hàng đầu. Là một sự thay thế phù hợp cho React Aria Components, nó là một lựa chọn có hiệu quả cao.