Изградња приступачних Реацт апликација са Реацт Ариа компонентама

Реацт Ариа Цомпонентс је библиотека која садржи колекцију нестилизованих компоненти изграђених на Реацт Ариа кукицама.

Развио га је Адобе и део је пројекта Реацт Спецтрум, који има за циљ стварање свеобухватног збирка библиотека и алата који помажу програмерима да изграде прилагодљиве, приступачне и робусне кориснике искуства.

Разумевање Реацт Ариа компоненти

Реацт Ариа компоненте обезбеђује приступачност, интеракције корисника и понашање у складу са најбољим праксама ВАИ-АРИА (Веб Аццессибилити Инитиативе – Аццессибле Рицх Интернет Апплицатионс). За разлику од библиотеке Реацт Ариа, која користи Реацт куке да направите своје компоненте.

Реацт Ариа Цомпонентс библиотека нуди скуп унапред изграђених компоненти, укључујући дугмад, поља за потврду, клизаче итд. Ове компоненте нису стилизоване, што вам омогућава да дизајнирате изглед и осећај апликације како год желите.

Предности коришћења Реацт Ариа компоненти

Реацт Ариа Цомпонентс библиотека нуди многе предности, укључујући:

• Приступачност: Реацт Ариа компоненте прате ВАИ-АРИА најбоље праксе, осигуравајући да је ваша апликација доступна свим корисницима, укључујући и оне који користе помоћне технологије.
• Флексибилност: Реацт Ариа компоненте долазе без стила, што вам омогућава да имплементирате свој систем дизајна без ограничења.
• Интеракције корисника: Реацт Ариа пружа робусно руковање корисничким интеракцијама, укључујући интеракције тастатуре, миша и додира.
• Интернационализација: Реацт Ариа подржава језике који се пишу здесна налево, форматирање датума и бројева и још много тога, што олакшава прављење интернационализованих апликација.

Израда Реацт апликација са Реацт Ариа компонентама

Хајде да прођемо кроз изградњу једноставне Реацт апликације користећи Реацт Ариа компоненте. Пре коришћења библиотеке Реацт Ариа Цомпонентс у вашим Реацт апликацијама, морате да креирате Реацт пројекат. Вите је одличан начин да то урадите.

Креирање ваше Реацт апликације

Да бисте креирали своју Реацт апликацију користећи Вите, покрените следећи код у свом терминалу:

npm init vite

Покретање кода изнад ће покренути низ упита који ће вам помоћи да креирате свој нови Реацт пројекат.

На пример:

Након што креирате свој пројекат, мораћете да инсталирате потребне зависности. Да бисте то урадили, покрените следећи код у свом терминалу:

cd react-aria-app

npm install

Промениће ваш тренутни директоријум у директоријум пројекта, а затим ће инсталирати потребне зависности. Када направите своју Реацт апликацију, можете инсталирати библиотеку Реацт Ариа компоненти да бисте својој апликацији додали функције приступачности.

Инсталирање Реацт Ариа компоненти

Можете инсталирати Реацт Ариа Цомпонентс библиотеку користећи нпм или иарн. Да бисте га инсталирали преко нпм-а, покрените следећу команду у свом терминалу:

npm install react-aria-components

Алтернативно, да бисте инсталирали преко предива, покрените овај код:

yarn add 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;

Горњи блок кода увози Дугме, Скокнем, ДиалогТриггер, и Дијалог компоненте из реацт-ариа-цомпонентс модул. Све увезене компоненте креирају једноставно дугме које приказује искачући прозор када се кликне.

Тхе ДиалогТриггер компонента контролише видљивост дијалога или искачућег екрана. Унутар ДиалогТриггер, ту је Дугме саставни део. Ово дугме активира видљивост Скокнем и Дијалог.

Тхе Скокнем компонента је контејнер који се појављује преко остатка корисничког интерфејса, док је Дијалог компонента приказује садржај у слоју изнад апликације. Унутар Скокнем компонента је а Дијалог компонента са текстом „Кликнули сте на дугме."

Кликом на дугме приказаће се искачући прозор са текстом „Кликнули сте на дугме“ на екрану, дајући вашем интерфејсу сличан изглед као на слици испод.

Као што можете видети на горњој слици, компоненте библиотеке нису стилизоване тако да можете да изаберете жељени стил.

Обликовање ваших компоненти

Пошто компоненте Реацт Ариа долазе без стила, можете их стилизирати како год желите. Можете користити Каскадни листови стилова (ЦСС), Таилвинд ЦСС, стилед-цомпонентс или било који други метод стилизовања који више волите.

Можете проћи различите обичаје цлассНамес на компоненте, а затим дефинишите ЦСС класе у вашој ЦСС датотеци.

Ево примера:

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;

У овом примеру дефинишете а Назив класе за Дугме, Скокнем, и Дијалог компоненте. Сада можете да стилизујете компоненте у вашој ЦСС датотеци.

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

Имајте на уму да ће горњи блок ЦСС кода применити ове стилове на сваки Дугме, Скокнем, и Дијалог компоненту коју користите у својој апликацији.

Направите приступачне и интерактивне Реацт апликације

Реацт Ариа Цомпонентс је моћна библиотека за изградњу приступачних и интерактивних Реацт апликација. Обезбеђује компоненте које управљају интеракцијама корисника и приступачности у складу са најбољим праксама ВАИ-АРИА. Ако тражите библиотеку компоненти која нуди много компоненти и флексибилност, Реацт Ариа Цомпонентс је одличан избор.

Поред библиотеке Реацт Ариа Цомпонентс, постоје и друге библиотеке компоненти без стила које можете користити за прављење прелепих Реацт апликација. Једна од ових библиотека укључује Радик УИ. Радик УИ је библиотека компоненти без стила за прављење висококвалитетних Реацт апликација. То је одлична алтернатива компонентама Реацт Ариа.