Создание доступных приложений 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. Прежде чем использовать библиотеку компонентов React Aria в своих приложениях React, вы должны создать проект React. Vite — отличный способ сделать это.

Создание вашего приложения React

Чтобы создать приложение React с использованием Vite, запустите следующий код в своем терминале:

npm init vite

Запуск приведенного выше кода запустит серию подсказок, которые помогут вам создать новый проект React.

Например:

После создания проекта вам необходимо будет установить необходимые зависимости. Для этого запустите в своем терминале следующий код:

cd react-aria-app

npm install

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

Установка компонентов React Aria

Вы можете установить библиотеку компонентов React Aria, используя 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;

Блок кода выше импортирует Кнопка, Трещать, Диалоговый триггер, и Диалог компоненты из реакция-ария-компоненты модуль. Все импортированные компоненты создают простую кнопку, при нажатии которой отображается всплывающее окно.

Диалоговый триггер Компонент управляет видимостью диалогового окна или всплывающего окна. Внутри Диалоговый триггер, Здесь Кнопка компонент. Эта кнопка включает видимость Трещать и Диалог.

Трещать Компонент — это контейнер, который появляется поверх остальной части пользовательского интерфейса, а компонент Диалог Компонент отображает контент на слое над приложением. Внутри Трещать компонент представляет собой Диалог компонент с текстом «Вы нажали кнопку."

При нажатии на кнопку появится всплывающее окно с текстом. «Вы нажали кнопку» на экране, придавая интерфейсу вид, аналогичный изображенному ниже.

Как вы можете видеть на изображении выше, компоненты библиотеки не имеют стилей, поэтому вы можете выбрать предпочтительный стиль.

Стилизация ваших компонентов

Поскольку компоненты React Aria не имеют стиля, вы можете стилизовать их по своему усмотрению. Вы можете использовать Каскадные таблицы стилей (CSS), Tailwind CSS, styled-comments или любой другой метод стилизации, который вы предпочитаете.

Вы можете передать разные пользовательские имена классов к компонентам, а затем определите классы 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;

В этом примере вы определяете имя класса для Кнопка, Трещать, и Диалог компоненты. Теперь вы можете стилизовать компоненты в своем 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;
}

После определения стилей для ваших компонентов ваша кнопка и всплывающее окно должны выглядеть примерно так.

Если вы не хотите определять пользовательские имя класса для ваших компонентов библиотека React Aria Components включает стандартный имя класса для каждого компонента. По умолчанию имя класса является реакция-ария-компонентИмя, где имя компонента — это имя компонента, который вы хотите стилизовать.

Например:

.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 будет применять эти стили ко всем Кнопка, Трещать, и Диалог компонент, который вы используете в своем приложении.

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

React Aria Components — это мощная библиотека для создания доступных и интерактивных приложений React. Он предоставляет компоненты, которые обеспечивают взаимодействие с пользователем и доступность в соответствии с лучшими практиками WAI-ARIA. Если вы ищете библиотеку компонентов, которая предлагает множество компонентов и гибкость, React Aria Components — отличный выбор.

Помимо библиотеки React Aria Components, существуют и другие библиотеки нестилизованных компонентов, которые вы можете использовать для создания красивых приложений React. Одна из этих библиотек включает Radix UI. Radix UI — это библиотека без стилей компонентов для создания высококачественных приложений React. Это отличная альтернатива компонентам React Aria.