Vytváranie prístupných aplikácií React s komponentmi React Aria

React Aria Components je knižnica obsahujúca kolekciu neštylizovaných komponentov postavených na háčikoch React Aria.

Je vyvinutý spoločnosťou Adobe a je súčasťou projektu React Spectrum, ktorého cieľom je vytvoriť komplexné zbierka knižníc a nástrojov, ktoré pomáhajú vývojárom vytvárať adaptívneho, prístupného a robustného používateľa skúsenosti.

Pochopenie komponentov React Aria

Reagovať Aria Components poskytuje dostupnosť, interakcie používateľov a správanie podľa osvedčených postupov WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications). Na rozdiel od knižnice React Aria, ktorá používa háky React na zostavenie vašich komponentov.

Knižnica React Aria Components ponúka sadu vopred vytvorených komponentov vrátane tlačidiel, začiarkavacích políčok, posuvníkov atď. Tieto komponenty nie sú štylizované, čo vám umožňuje navrhnúť vzhľad a dojem aplikácie podľa vašich predstáv.

Výhody používania komponentov React Aria

Knižnica React Aria Components ponúka mnoho výhod, vrátane:

• Prístupnosť: Komponenty React Aria sa riadia osvedčenými postupmi WAI-ARIA a zaisťujú, že vaša aplikácia je prístupná všetkým používateľom, vrátane tých, ktorí používajú asistenčné technológie.
• Flexibilita: Komponenty React Aria prichádzajú bez štýlu, čo vám umožňuje implementovať váš dizajnový systém bez obmedzení.
• Používateľské interakcie: React Aria poskytuje robustné spracovanie používateľských interakcií vrátane interakcií klávesnice, myši a dotyku.
• Internacionalizácia: React Aria podporuje jazyky písané sprava doľava, formátovanie dátumu a čísla a ďalšie, čo uľahčuje vytváranie internacionalizovaných aplikácií.

Vytváranie aplikácií React s komponentmi React Aria

Poďme si prejsť vytvorením jednoduchej aplikácie React pomocou komponentov React Aria. Pred použitím knižnice React Aria Components vo vašich aplikáciách React musíte vytvoriť projekt React. Vite je na to skvelý spôsob.

Vytvorenie vašej aplikácie React

Ak chcete vytvoriť aplikáciu React pomocou Vite, spustite vo svojom termináli nasledujúci kód:

npm init vite

Spustenie vyššie uvedeného kódu spustí sériu výziev, ktoré vám pomôžu vytvoriť nový projekt React.

Napríklad:

Po vytvorení projektu budete musieť nainštalovať potrebné závislosti. Ak to chcete urobiť, spustite vo svojom termináli nasledujúci kód:

cd react-aria-app

npm install

Zmení váš aktuálny adresár na adresár projektu a potom nainštaluje potrebné závislosti. Po vytvorení aplikácie React si môžete nainštalovať knižnicu React Aria Components a pridať do aplikácie funkcie zjednodušenia ovládania.

Inštalácia komponentov React Aria

Knižnicu React Aria Components môžete nainštalovať pomocou npm alebo yarn. Ak ho chcete nainštalovať cez npm, spustite v termináli nasledujúci príkaz:

npm install react-aria-components

Prípadne na inštaláciu cez priadzu spustite tento kód:

yarn add react-aria-components

Teraz, keď ste si nainštalovali knižnicu React Aria Components, môžete jej komponenty používať vo svojej aplikácii.

Používanie komponentov React Aria

Knižnica React Aria Components ponúka množstvo komponentov, ktoré uľahčujú a urýchľujú proces vývoja. Ak chcete použiť komponent knižnice, importujte ho do svojej aplikácie a vyrenderujte.

Napríklad:

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;

Vyššie uvedený blok kódu importuje súbor Tlačidlo, Popover, DialogTrigger, a Dialóg komponenty z reagovat-aria-komponenty modul. Všetky importované komponenty vytvárajú jednoduché tlačidlo, ktoré po kliknutí zobrazí kontextové okno.

The DialogTrigger komponent ovláda viditeľnosť dialógového okna alebo kontextového okna. Vnútri DialogTrigger, tam je Tlačidlo komponent. Toto tlačidlo spustí viditeľnosť Popover a Dialóg.

The Popover komponent je kontajner, ktorý sa objaví nad zvyškom používateľského rozhrania, zatiaľ čo komponent Dialóg komponent zobrazuje obsah vo vrstve nad aplikáciou. Vnútri Popover zložka je a Dialóg komponent s textom „Klikli ste na tlačidlo."

Kliknutím na tlačidlo sa zobrazí kontextové okno s textom "Klikli ste na tlačidlo" na obrazovke, vďaka čomu bude vaše rozhranie vyzerať podobne ako na obrázku nižšie.

Ako môžete vidieť na obrázku vyššie, komponenty knižnice sa dodávajú bez štýlu, takže si môžete vybrať svoj preferovaný štýl.

Štýl vašich komponentov

Keďže komponenty React Aria prichádzajú bez štýlu, môžete si ich upraviť akokoľvek chcete. Môžeš použiť kaskádové štýly (CSS), Tailwind CSS, štylizované komponenty alebo akýkoľvek iný spôsob úpravy, ktorý uprednostňujete.

Môžete prejsť rôznymi zvykmi classNames ku komponentom a potom definujte triedy CSS vo svojom súbore CSS.

Tu je príklad:

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;

V tomto príklade definujete a className pre Tlačidlo, Popover, a Dialóg komponentov. Teraz môžete upravovať štýl komponentov v súbore 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;
}

Po definovaní štýlov pre vaše komponenty by vaše tlačidlo a kontextové okno mali vyzerať približne takto.

Ak nechcete definovať zvyk className pre vaše komponenty knižnica React Aria Components obsahuje predvolenú hodnotu className pre každý komponent. Predvolená hodnota className je reagovat-aria-componentName, kde ComponentName je názov komponentu, ktorý chcete upraviť.

Napríklad:

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

Všimnite si, že vyššie uvedený blok kódu CSS použije tieto štýly na všetky Tlačidlo, Popover, a Dialóg komponent, ktorý používate vo svojej aplikácii.

Vytvárajte prístupné a interaktívne aplikácie React

React Aria Components je výkonná knižnica na vytváranie prístupných a interaktívnych aplikácií React. Poskytuje komponenty, ktoré zvládajú interakcie používateľov a dostupnosť podľa osvedčených postupov WAI-ARIA. Ak hľadáte knižnicu komponentov, ktorá ponúka veľa komponentov a flexibilitu, React Aria Components je vynikajúcou voľbou.

Popri knižnici React Aria Components existujú aj ďalšie neštylizované knižnice komponentov, ktoré môžete použiť na vytváranie krásnych aplikácií React. Jedna z týchto knižníc obsahuje Radix UI. Radix UI je neštylizovaná knižnica komponentov na vytváranie vysokokvalitných aplikácií React. Je to skvelá alternatíva k React Aria Components.