Izrada pristupačnih React aplikacija s React Aria komponentama

React Aria Components je biblioteka koja sadrži zbirku nestiliziranih komponenti izgrađenih na React Aria kukicama.

Razvio ga je Adobe i dio je projekta React Spectrum, čiji je cilj stvoriti sveobuhvatan zbirka biblioteka i alata koji programerima pomažu izgraditi prilagodljivog, pristupačnog i robusnog korisnika iskustva.

Razumijevanje React Aria komponenti

React Aria komponente pruža pristupačnost, korisničku interakciju i ponašanje u skladu s najboljom praksom WAI-ARIA (Inicijativa za web pristupačnost - pristupačne bogate internetske aplikacije). Za razliku od biblioteke React Aria, koja koristi React kuke za izgradnju vaših komponenti.

Biblioteka React Aria Components nudi skup unaprijed izgrađenih komponenti, uključujući gumbe, potvrdne okvire, klizače itd. Ove komponente nisu oblikovane, što vam omogućuje da dizajnirate izgled i dojam aplikacije kako god želite.

Prednosti korištenja komponenti React Aria

Biblioteka komponenti React Aria nudi mnoge prednosti, uključujući:

• Pristupačnost: React Aria komponente slijede najbolje prakse WAI-ARIA, osiguravajući da je vaša aplikacija dostupna svim korisnicima, uključujući one koji koriste pomoćne tehnologije.
• Fleksibilnost: Komponente React Aria dolaze bez stila, što vam omogućuje implementaciju vašeg sustava dizajna bez ograničenja.
• Korisničke interakcije: React Aria pruža robusno rukovanje korisničkim interakcijama, uključujući interakcije tipkovnice, miša i dodira.
• Internacionalizacija: React Aria podržava jezike koji se pišu zdesna nalijevo, formatiranje datuma i brojeva i više, što olakšava izradu internacionaliziranih aplikacija.

Izrada React aplikacija s React Aria komponentama

Prođimo kroz izgradnju jednostavne React aplikacije koristeći React Aria komponente. Prije korištenja biblioteke React Aria Components u vašim React aplikacijama, morate stvoriti React projekt. Vite je sjajan način za to.

Izrada vaše React aplikacije

Da biste kreirali svoju React aplikaciju koristeći Vite, pokrenite sljedeći kod na svom terminalu:

npm init vite

Pokretanje gornjeg koda pokrenut će niz upita koji će vam pomoći da stvorite svoj novi React projekt.

Na primjer:

Nakon što izradite svoj projekt, morat ćete instalirati potrebne ovisnosti. Da biste to učinili, pokrenite sljedeći kod na svom terminalu:

cd react-aria-app

npm install

Promijenit će vaš trenutni direktorij u direktorij projekta i zatim instalirati potrebne ovisnosti. Nakon što ste izradili svoju React aplikaciju, možete instalirati biblioteku React Aria Components kako biste svojoj aplikaciji dodali značajke pristupačnosti.

Instaliranje React Aria komponenti

Možete instalirati React Aria Components biblioteku koristeći npm ili yarn. Da biste ga instalirali putem npm-a, pokrenite sljedeću naredbu na svom terminalu:

npm install react-aria-components

Alternativno, za instalaciju putem pređe, pokrenite ovaj kod:

yarn add react-aria-components

Sada kada ste instalirali biblioteku React Aria Components, možete koristiti njezine komponente u svojoj aplikaciji.

Korištenje React Aria komponenti

React Aria Components biblioteka nudi razne komponente koje proces razvoja čine lakšim i bržim. Da biste koristili komponentu biblioteke, uvezite je u svoju aplikaciju i renderirajte.

Na primjer:

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;

Gornji blok koda uvozi Dugme, Popover, DialogTrigger, i Dijalog komponente iz react-aria-components modul. Sve uvezene komponente stvaraju jednostavan gumb koji prikazuje skočni prozor kada se klikne.

The DialogTrigger komponenta kontrolira vidljivost dijaloga ili skočnog prozora. Unutar DialogTrigger, tu je Dugme komponenta. Ovaj gumb aktivira vidljivost Popover i Dijalog.

The Popover komponenta je spremnik koji se pojavljuje iznad ostatka korisničkog sučelja, dok Dijalog komponenta prikazuje sadržaj u sloju iznad aplikacije. Unutar Popover komponenta je a Dijalog komponenta s tekstom „Kliknuli ste na gumb."

Klikom na gumb prikazat će se skočni prozor s tekstom "Kliknuli ste na gumb" na vašem zaslonu, dajući vašem sučelju sličan izgled kao na slici ispod.

Kao što možete vidjeti na gornjoj slici, komponente biblioteke dolaze bez stila tako da možete odabrati željeni stil.

Stilizirajte svoje komponente

Budući da React Aria komponente dolaze bez stila, možete ih stilizirati kako god želite. Možeš koristiti Kaskadni listovi stilova (CSS), Tailwind CSS, styled-components ili bilo koja druga metoda oblikovanja koju preferirate.

Možete proći različite običaje classNames na komponente, a zatim definirajte CSS klase u svojoj CSS datoteci.

Evo primjera:

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;

U ovom primjeru definirate a naziv klase za Dugme, Popover, i Dijalog komponente. Sada možete stilizirati komponente u svojoj CSS datoteci.

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

Nakon definiranja stilova za vaše komponente, vaš gumb i popover trebali bi izgledati otprilike ovako.

Ako ne želite definirati običaj naziv klase za vaše komponente React Aria Components biblioteka uključuje zadanu vrijednost naziv klase za svaku komponentu. Zadana vrijednost naziv klase je react-aria-componentName, gdje naziv komponente je naziv komponente koju želite stilizirati.

Na primjer:

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

Imajte na umu da će blok CSS koda iznad primijeniti ove stilove na svaki Dugme, Popover, i Dijalog komponentu koju koristite u svojoj aplikaciji.

Izradite pristupačne i interaktivne React aplikacije

React Aria Components moćna je biblioteka za izgradnju pristupačnih i interaktivnih React aplikacija. Pruža komponente koje upravljaju interakcijama korisnika i dostupnošću u skladu s najboljom praksom WAI-ARIA. Ako tražite biblioteku komponenti koja nudi mnogo komponenti i fleksibilnost, React Aria Components je izvrstan izbor.

Uz React Aria biblioteku komponenti, postoje i druge nestilizirane biblioteke komponenti koje možete koristiti za izradu prekrasnih React aplikacija. Jedna od tih biblioteka uključuje Radix UI. Radix UI je biblioteka komponenti bez stila za izradu visokokvalitetnih React aplikacija. To je izvrsna alternativa komponentama React Aria.