Juurdepääsetavate React-rakenduste loomine React Aria komponentidega

React Aria Components on raamatukogu, mis sisaldab stiilita komponentide kogu, mis on ehitatud React Aria konksude peale.

Selle on välja töötanud Adobe ja see on osa React Spectrum projektist, mille eesmärk on luua kõikehõlmav teekide ja tööriistade kogu, mis aitab arendajatel luua kohanemisvõimelise, juurdepääsetava ja jõulise kasutaja kogemusi.

React Aria komponentide mõistmine

Reageerige Aria komponentidele pakub juurdepääsetavust, kasutajate suhtlust ja käitumist vastavalt WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) parimatele tavadele. Erinevalt React Aria raamatukogust, mis kasutab Reacti konkse oma komponentide ehitamiseks.

Teek React Aria Components pakub eelehitatud komponentide komplekti, sealhulgas nupud, märkeruudud, liugurid jne. Need komponendid ei ole kujundatud, mis võimaldab teil kujundada rakenduse välimust ja tunnet nii, nagu soovite.

React Aria komponentide kasutamise eelised

Teek React Aria Components pakub palju eeliseid, sealhulgas:

• Juurdepääsetavus: React Aria komponendid järgivad WAI-ARIA parimaid tavasid, tagades, et teie rakendus on juurdepääsetav kõigile kasutajatele, sealhulgas neile, kes kasutavad abitehnoloogiaid.
• Paindlikkus: React Aria komponendid on stiilita, mis võimaldab teil oma disainisüsteemi ilma piiranguteta rakendada.
• Kasutaja interaktsioonid: React Aria pakub kasutaja interaktsioonide, sealhulgas klaviatuuri, hiire ja puutetundlike interaktsioonide tugevat haldamist.
• Rahvusvahelistumine: React Aria toetab paremalt vasakule kirjutatavaid keeli, kuupäeva ja numbrite vormindamist ning palju muud, muutes rahvusvaheliste rakenduste loomise lihtsamaks.

Reacti rakenduste loomine React Aria komponentidega

Käime läbi lihtsa Reacti rakenduse loomise, kasutades React Aria komponente. Enne React Aria Components teegi kasutamist oma Reacti rakendustes peate looma Reacti projekti. Vite on selleks suurepärane viis.

Reacti rakenduse loomine

Reacti rakenduse loomiseks Vite abil käivitage terminalis järgmine kood:

npm init vite

Ülaltoodud koodi käivitamine käivitab rea viipasid, mis aitavad teil luua uue Reacti projekti.

Näiteks:

Pärast projekti loomist peate installima vajalikud sõltuvused. Selleks käivitage terminalis järgmine kood:

cd react-aria-app

npm install

See muudab teie praeguse kataloogi projekti kataloogiks ja installib seejärel vajalikud sõltuvused. Kui olete oma Reacti rakenduse loonud, saate installida teegi React Aria Components, et lisada oma rakendusele juurdepääsetavuse funktsioone.

React Aria komponentide installimine

Saate installida React Aria komponentide teegi, kasutades npm-i või lõnga. Selle installimiseks npm-i kaudu käivitage terminalis järgmine käsk:

npm install react-aria-components

Alternatiivina lõnga kaudu installimiseks käivitage see kood:

yarn add react-aria-components

Nüüd, kui olete installinud teegi React Aria Components, saate selle komponente oma rakenduses kasutada.

React Aria komponentide kasutamine

Teek React Aria Components pakub erinevaid komponente, mis muudavad arendusprotsessi lihtsamaks ja kiiremaks. Teegi komponendi kasutamiseks importige see oma rakendusse ja renderdage.

Näiteks:

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;

Ülaltoodud koodiplokk impordib Nupp, Läbi astuma, DialogTrigger, ja Dialoog komponendid react-aria-komponendid moodul. Kõik imporditud komponendid loovad lihtsa nupu, millel klõpsamisel kuvatakse hüpikaken.

The DialogTrigger komponent kontrollib dialoogi või hüpikakna nähtavust. Sees DialogTrigger, seal on Nupp komponent. See nupp käivitab nähtavuse Läbi astuma ja Dialoog.

The Läbi astuma komponent on konteiner, mis avaneb ülejäänud kasutajaliidese kohal, samas kui Dialoog komponent kuvab sisu rakenduse kohal olevas kihis. Sees Läbi astuma komponent on a Dialoog osa tekstiga "Sa vajutasid nuppu."

Nupule klõpsamisel kuvatakse tekstiga hüpikaken "Klõpsasite nuppu" ekraanil, andes liidesele allolevale pildile sarnase ilme.

Nagu näete ülaloleval pildil, on teegi komponendid stiilita, nii et saate valida oma eelistatud stiili.

Komponentide kujundamine

Kuna React Aria komponendid on stiilita, saate neid kujundada nii, nagu soovite. Sa võid kasutada Kaskaadstiilitabelid (CSS), Tailwind CSS, stiilitud komponendid või mõni muu eelistatud stiilimeetod.

Saate läbida erinevaid tavasid klassinimed komponentidele ja seejärel määrake oma CSS-failis CSS-i klassid.

Siin on näide:

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;

Selles näites määratlete a klassi nimi Selle eest Nupp, Läbi astuma, ja Dialoog komponendid. Nüüd saate oma CSS-failis olevaid komponente stiilida.

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

Pärast komponentide stiilide määratlemist peaksid teie nupp ja hüpikaken välja nägema umbes sellised.

Kui te ei soovi harjumust määratleda klassi nimi teie komponentide jaoks sisaldab React Aria komponentide teek vaikeseadet klassi nimi iga komponendi jaoks. Vaikimisi klassi nimi on react-aria-komponentNimi, kus komponendinimi on selle komponendi nimi, mida soovite stiilida.

Näiteks:

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

Pange tähele, et ülaltoodud CSS-koodiplokk rakendab neid stiile kõigile Nupp, Läbi astuma, ja Dialoog komponent, mida oma rakenduses kasutate.

Looge juurdepääsetavaid ja interaktiivseid reageerimisrakendusi

React Aria Components on võimas raamatukogu juurdepääsetavate ja interaktiivsete Reacti rakenduste loomiseks. See pakub komponente, mis haldavad kasutaja interaktsiooni ja juurdepääsetavust vastavalt WAI-ARIA parimatele tavadele. Kui otsite komponentide teeki, mis pakub palju komponente ja paindlikkust, on React Aria Components suurepärane valik.

Lisaks React Aria komponentide teegile on ka teisi stiilita komponentide teeke, mida saate kasutada kaunite Reacti rakenduste loomiseks. Üks neist teekidest sisaldab Radixi kasutajaliidest. Radix UI on stiilita komponentide teek kvaliteetsete Reacti rakenduste loomiseks. See on suurepärane alternatiiv React Aria Componentsile.