Gradnja dostopnih aplikacij React s komponentami React Aria

React Aria Components je knjižnica, ki vsebuje zbirko neslogovanih komponent, zgrajenih na vrhu kavljev React Aria.

Razvil ga je Adobe in je del projekta React Spectrum, katerega cilj je ustvariti celovito zbirka knjižnic in orodij, ki razvijalcem pomagajo zgraditi prilagodljivega, dostopnega in robustnega uporabnika izkušnje.

Razumevanje komponent React Aria

Komponente React Aria zagotavlja dostopnost, uporabniško interakcijo in vedenje v skladu z najboljšimi praksami WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications). Za razliko od knjižnice React Aria, ki uporablja kljuke React za izdelavo vaših komponent.

Knjižnica komponent React Aria ponuja nabor vnaprej izdelanih komponent, vključno z gumbi, potrditvenimi polji, drsniki itd. Te komponente niso oblikovane, kar vam omogoča, da oblikujete videz in občutek aplikacije, kakor koli želite.

Prednosti uporabe komponent React Aria

Knjižnica komponent React Aria ponuja številne prednosti, vključno z:

• Dostopnost: Komponente React Aria sledijo najboljšim praksam WAI-ARIA, kar zagotavlja, da je vaša aplikacija dostopna vsem uporabnikom, vključno s tistimi, ki uporabljajo podporne tehnologije.
• Prilagodljivost: Komponente React Aria so neobdelane, kar vam omogoča, da brez omejitev implementirate svoj sistem oblikovanja.
• Uporabniške interakcije: React Aria zagotavlja robustno upravljanje uporabniških interakcij, vključno s tipkovnico, miško in interakcijami z dotikom.
• Internacionalizacija: React Aria podpira jezike, ki se pišejo od desne proti levi, oblikovanje datuma in številk in še več, kar olajša izdelavo internacionaliziranih aplikacij.

Gradnja aplikacij React s komponentami React Aria

Sprehodimo se skozi izdelavo preproste aplikacije React z uporabo komponent React Aria. Preden uporabite knjižnico React Aria Components v svojih aplikacijah React, morate ustvariti projekt React. Vite je odličen način za to.

Ustvarjanje vaše aplikacije React

Če želite ustvariti svojo aplikacijo React z uporabo Vite, zaženite to kodo v svojem terminalu:

npm init vite

Če zaženete zgornjo kodo, se bo prikazal niz pozivov, ki vam bodo pomagali ustvariti nov projekt React.

Na primer:

Ko ustvarite svoj projekt, boste morali namestiti potrebne odvisnosti. Če želite to narediti, zaženite naslednjo kodo v svojem terminalu:

cd react-aria-app

npm install

Vaš trenutni imenik bo spremenil v imenik projekta in nato namestil potrebne odvisnosti. Ko ustvarite svojo aplikacijo React, lahko namestite knjižnico komponent React Aria, da svoji aplikaciji dodate funkcije dostopnosti.

Namestitev komponent React Aria

Knjižnico komponent React Aria lahko namestite z uporabo npm ali yarn. Če ga želite namestiti prek npm, zaženite naslednji ukaz v vašem terminalu:

npm install react-aria-components

Za namestitev prek preje pa zaženite to kodo:

yarn add react-aria-components

Zdaj, ko ste namestili knjižnico React Aria Components, lahko njene komponente uporabljate v svoji aplikaciji.

Uporaba komponent React Aria

Knjižnica komponent React Aria ponuja različne komponente, ki olajšajo in pospešijo razvojni proces. Če želite uporabiti komponento knjižnice, jo uvozite v svojo aplikacijo in jo upodobite.

Na primer:

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;

Zgornji blok kode uvozi Gumb, Popover, DialogTrigger, in Dialog komponente iz react-aria-components modul. Vse uvožene komponente ustvarijo preprost gumb, ki ob kliku prikaže popover.

The DialogTrigger komponenta nadzoruje vidnost pogovornega okna ali pojavnega okna. Znotraj DialogTrigger, tam je Gumb komponento. Ta gumb sproži vidnost Popover in Dialog.

The Popover komponenta je vsebnik, ki se pojavi nad preostalim uporabniškim vmesnikom, medtem ko Dialog prikaže vsebino v sloju nad aplikacijo. Znotraj Popover komponenta je a Dialog komponento z besedilom "Kliknili ste na gumb."

S klikom na gumb se prikaže pojavni okvir z besedilom "Kliknili ste na gumb" na vašem zaslonu, kar daje vašemu vmesniku podoben videz kot na spodnji sliki.

Kot lahko vidite na zgornji sliki, so komponente knjižnice neobdelane, tako da lahko izberete želeni slog.

Oblikovanje vaših komponent

Ker so komponente React Aria neobdelane, jih lahko stilizirate, kakor želite. Lahko uporabiš Kaskadni slogovni listi (CSS), Tailwind CSS, styled-components ali kateri koli drug način oblikovanja, ki vam je ljubši.

Prenesete lahko različne običaje classNames v komponente in nato definirajte razrede CSS v vaši datoteki CSS.

Tukaj je primer:

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 tem primeru definirate a className za Gumb, Popover, in Dialog komponente. Zdaj lahko oblikujete komponente v datoteki 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;
}

Ko določite sloge za svoje komponente, bi moral vaš gumb in pojavni element izgledati nekako takole.

Če ne želite določiti po meri className za vaše komponente knjižnica komponent React Aria vključuje privzeto className za vsako komponento. Privzeto className je react-aria-componentName, kje ime komponente je ime komponente, ki jo želite stilizirati.

Na primer:

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

Upoštevajte, da bo zgornji blok kode CSS uporabil te sloge za vse Gumb, Popover, in Dialog komponento, ki jo uporabljate v aplikaciji.

Zgradite dostopne in interaktivne aplikacije React

React Aria Components je zmogljiva knjižnica za izdelavo dostopnih in interaktivnih aplikacij React. Zagotavlja komponente, ki obravnavajo uporabniške interakcije in dostopnost v skladu z najboljšimi praksami WAI-ARIA. Če iščete knjižnico komponent, ki ponuja veliko komponent in prilagodljivost, je React Aria Components odlična izbira.

Poleg knjižnice komponent React Aria obstajajo druge knjižnice komponent brez sloga, ki jih lahko uporabite za izdelavo čudovitih aplikacij React. Ena od teh knjižnic vključuje Radix UI. Radix UI je knjižnica komponent brez sloga za izdelavo visokokakovostnih aplikacij React. Je odlična alternativa komponentam React Aria.