Изграждане на достъпни React приложения с React Aria компоненти

React Aria Components е библиотека, съдържаща колекция от нестилизирани компоненти, изградени върху React Aria кукички.

Той е разработен от Adobe и е част от проекта React Spectrum, който има за цел да създаде цялостен колекция от библиотеки и инструменти, които помагат на разработчиците да изградят адаптивен, достъпен и стабилен потребител преживявания.

Разбиране на компонентите на React Aria

Компоненти на React Aria осигурява достъпност, потребителски взаимодействия и поведение в съответствие с най-добрите практики на WAI-ARIA (Инициатива за уеб достъпност - Достъпни богати интернет приложения). За разлика от библиотеката React Aria, която използва куки React за изграждане на вашите компоненти.

Библиотеката React Aria Components предлага набор от предварително изградени компоненти, включително бутони, квадратчета за отметка, плъзгачи и др. Тези компоненти не са стилизирани, което ви позволява да проектирате външния вид и усещането на приложението, както възнамерявате.

Ползи от използването на компоненти на React Aria

Библиотеката React Aria Components предлага много предимства, включително:

• Достъпност: Компонентите на React Aria следват най-добрите практики на WAI-ARIA, като гарантират, че вашето приложение е достъпно за всички потребители, включително тези, които използват помощни технологии.
• Гъвкавост: Компонентите на React Aria идват без стил, което ви позволява да внедрите вашата система за проектиране без ограничения.
• Потребителски взаимодействия: React Aria осигурява стабилно управление на потребителските взаимодействия, включително взаимодействия с клавиатура, мишка и докосване.
• Интернационализация: React Aria поддържа езици отдясно наляво, форматиране на дата и число и други, което улеснява създаването на интернационализирани приложения.

Изграждане на React приложения с React Aria компоненти

Нека преминем през изграждането на просто React приложение с помощта на React Aria Components. Преди да използвате библиотеката React Aria Components във вашите React приложения, трябва да създадете React проект. Vite е чудесен начин да направите това.

Създаване на вашето приложение React

За да създадете вашето React приложение с помощта на Vite, изпълнете следния код във вашия терминал:

npm init vite

Изпълнението на кода по-горе ще стартира серия от подкани, които да ви помогнат да създадете своя нов проект в React.

Например:

След като създадете своя проект, ще трябва да инсталирате необходимите зависимости. За да направите това, изпълнете следния код във вашия терминал:

cd react-aria-app

npm install

Той ще промени текущата ви директория в директорията на проекта и след това ще инсталира необходимите зависимости. След като създадете вашето React приложение, можете да инсталирате React Aria Components библиотека, за да добавите функции за достъпност към вашето приложение.

Инсталиране на React Aria компоненти

Можете да инсталирате библиотеката на React Aria Components, като използвате npm или yarn. За да го инсталирате чрез npm, изпълнете следната команда във вашия терминал:

npm install react-aria-components

Като алтернатива, за да инсталирате чрез прежда, изпълнете този код:

yarn add react-aria-components

Сега, след като сте инсталирали библиотеката React Aria Components, можете да използвате нейните компоненти във вашето приложение.

Използване на компонентите на React Aria

Библиотеката React Aria Components предлага разнообразие от компоненти, които правят процеса на разработка по-лесен и по-бърз. За да използвате компонента на библиотеката, импортирайте го в приложението си и го изобразете.

Например:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (




Click Me</Button>

You clicked the button</Dialog>
 </Popover>
 </DialogTrigger>
 </div>
 );
}
exportdefault App;

Кодовият блок по-горе импортира Бутон, Popover, DialogTrigger, и Диалог компоненти от react-aria-components модул. Всички импортирани компоненти създават прост бутон, който показва изскачащ прозорец при щракване.

The DialogTrigger компонент контролира видимостта на диалогов прозорец или изскачащ прозорец. Вътре в DialogTrigger, има Бутон компонент. Този бутон задейства видимостта на Popover и Диалог.

The Popover е контейнер, който изскача върху останалата част от потребителския интерфейс, докато Диалог показва съдържание в слой над приложението. Вътре в Popover компонент е a Диалог компонент с текста „Щракнахте върху бутона."

Щракването върху бутона ще покаже изскачащ прозорец с текста „Щракнахте върху бутона“ на вашия екран, придавайки на интерфейса ви подобен вид на изображението по-долу.

Както можете да видите на изображението по-горе, компонентите на библиотеката идват без стил, така че можете да изберете предпочитания от вас стил.

Оформяне на вашите компоненти

Тъй като компонентите на React Aria идват без стил, можете да ги стилизирате както искате. Можеш да използваш Каскадни стилови таблици (CSS), Tailwind CSS, styled-components или всеки друг метод за стилизиране, който предпочитате.

Можете да преминете различни обичаи имена на класове към компонентите и след това дефинирайте CSS класовете във вашия CSS файл.

Ето един пример:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (




"button">Click Me</Button>
"popover">
"dialog">You clicked the button</Dialog>
 </Popover>
 </DialogTrigger>
 </div>
 );
}
exportdefault App;

В този пример вие дефинирате a className за Бутон, Popover, и Диалог компоненти. Вече можете да стилизирате компонентите във вашия CSS файл.

.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;
}

След дефиниране на стиловете за вашите компоненти, вашият бутон и popover трябва да изглеждат по следния начин.

Ако не искате да дефинирате персонализиран className за вашите компоненти библиотеката React Aria Components включва по подразбиране className за всеки компонент. По подразбиране className е реагиране-ария-componentName, където име на компонент е името на компонента, който искате да стилизирате.

Например:

.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;
}

Имайте предвид, че блокът CSS код по-горе ще приложи тези стилове към всеки Бутон, Popover, и Диалог компонент, който използвате във вашето приложение.

Създавайте достъпни и интерактивни приложения за React

React Aria Components е мощна библиотека за изграждане на достъпни и интерактивни React приложения. Той предоставя компоненти, които обработват потребителските взаимодействия и достъпността според най-добрите практики на WAI-ARIA. Ако търсите библиотека с компоненти, която предлага много компоненти и гъвкавост, React Aria Components е отличен избор.

Наред с библиотеката на React Aria Components, има и други нестилизирани библиотеки с компоненти, които можете да използвате за изграждане на красиви React приложения. Една от тези библиотеки включва Radix UI. Radix UI е нестилизирана библиотека с компоненти за изграждане на висококачествени React приложения. Това е чудесна алтернатива на React Aria Components.