Bygge tilgjengelige React-applikasjoner med React Aria-komponenter

React Aria Components er et bibliotek som inneholder en samling ustilte komponenter bygget på toppen av React Aria-kroker.

Den er utviklet av Adobe og er en del av React Spectrum-prosjektet, som tar sikte på å skape en omfattende samling av biblioteker og verktøy som hjelper utviklere med å bygge tilpasningsdyktige, tilgjengelige og robuste brukere opplevelser.

Forstå React Aria-komponenter

Reager Aria-komponenter gir tilgjengelighet, brukerinteraksjoner og atferd i henhold til WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) beste praksis. I motsetning til React Aria-biblioteket, som bruker React kroker å bygge komponentene dine.

React Aria Components-biblioteket tilbyr et sett med forhåndsbygde komponenter, inkludert knapper, avmerkingsbokser, skyveknapper, etc. Disse komponentene er ikke stylet, slik at du kan designe applikasjonens utseende og preg slik du vil.

Fordeler med å bruke React Aria-komponenter

React Aria Components-biblioteket tilbyr mange fordeler, inkludert:

• tilgjengelighet: React Aria-komponenter følger WAI-ARIAs beste praksis, og sikrer at applikasjonen din er tilgjengelig for alle brukere, inkludert de som bruker hjelpeteknologier.
• Fleksibilitet: React Aria-komponenter kommer ustilte, slik at du kan implementere designsystemet ditt uten begrensninger.
• Brukerinteraksjoner: React Aria gir robust håndtering av brukerinteraksjoner, inkludert tastatur-, mus- og berøringsinteraksjoner.
• Internasjonalisering: React Aria støtter høyre-til-venstre-språk, dato- og tallformatering og mer, noe som gjør det enklere å bygge internasjonaliserte applikasjoner.

Bygg React-apper med React Aria-komponenter

La oss gå gjennom å bygge en enkel React-applikasjon ved hjelp av React Aria-komponenter. Før du bruker React Aria Components-biblioteket i dine React-applikasjoner, må du opprette et React-prosjekt. Vite er en fin måte å gjøre dette på.

Opprette din React-applikasjon

For å lage din React-applikasjon med Vite, kjør følgende kode i terminalen din:

npm init vite

Når du kjører koden ovenfor, vil du starte en rekke meldinger for å hjelpe deg med å lage ditt nye React-prosjekt.

For eksempel:

Etter å ha opprettet prosjektet ditt, må du installere de nødvendige avhengighetene. For å gjøre dette, kjør følgende kode i terminalen din:

cd react-aria-app

npm install

Den vil endre din nåværende katalog til prosjektets katalog og deretter installere de nødvendige avhengighetene. Når du har opprettet React-applikasjonen din, kan du installere React Aria Components-biblioteket for å legge til tilgjengelighetsfunksjoner til applikasjonen din.

Installere React Aria-komponenter

Du kan installere React Aria Components-biblioteket ved å bruke npm eller garn. For å installere den via npm, kjør følgende kommando i terminalen din:

npm install react-aria-components

Alternativt, for å installere via garn, kjør denne koden:

yarn add react-aria-components

Nå som du har installert React Aria Components-biblioteket, kan du bruke komponentene i applikasjonen din.

Bruke React Aria-komponentene

React Aria Components-biblioteket tilbyr en rekke komponenter som gjør utviklingsprosessen enklere og raskere. For å bruke bibliotekets komponent, importer den til applikasjonen din og gjengi den.

For eksempel:

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;

Kodeblokken ovenfor importerer Knapp, Stikke innom, DialogTrigger, og Dialog komponenter fra react-aria-komponenter modul. Alle de importerte komponentene lager en enkel knapp som viser en popover når den klikkes.

De DialogTrigger komponent kontrollerer synligheten til en dialogboks eller popover. Inne i DialogTrigger, det er Knapp komponent. Denne knappen utløser synligheten til Stikke innom og Dialog.

De Stikke innom komponent er en beholder som dukker opp over resten av brukergrensesnittet, mens Dialog komponenten viser innhold i et lag over appen. Inne i Stikke innom komponenten er en Dialog komponent med teksten "Du klikket på knappen."

Ved å klikke på knappen vises en popover med teksten "Du klikket på knappen" på skjermen, og gir grensesnittet ditt et lignende utseende som bildet nedenfor.

Som du kan se på bildet ovenfor, kommer bibliotekets komponenter ustilte slik at du kan velge din foretrukne styling.

Styling av komponentene dine

Siden React Aria-komponentene kommer ustilte, kan du style dem slik du vil. Du kan bruke Cascading Style Sheets (CSS), Tailwind CSS, stylede-komponenter eller en hvilken som helst annen stylingmetode du foretrekker.

Du kan passere forskjellige skikker klassenavn til komponentene og definer deretter CSS-klassene i CSS-filen din.

Her er et eksempel:

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;

I dette eksemplet definerer du en klassenavn for Knapp, Stikke innom, og Dialog komponenter. Du kan nå style komponentene i CSS-filen din.

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

Etter å ha definert stilene for komponentene dine, skal knappen og popover-en se omtrent slik ut.

Hvis du ikke vil definere en egendefinert klassenavn for komponentene dine inkluderer React Aria Components-biblioteket en standard klassenavn for hver komponent. Standaren klassenavn er react-aria-componentName, hvor komponentnavn er navnet på komponenten du vil style.

For eksempel:

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

Merk at CSS-kodeblokken ovenfor vil bruke disse stilene på alle Knapp, Stikke innom, og Dialog komponenten du bruker i applikasjonen.

Bygg tilgjengelige og interaktive React-applikasjoner

React Aria Components er et kraftig bibliotek for å bygge tilgjengelige og interaktive React-applikasjoner. Den gir komponenter som håndterer brukerinteraksjoner og tilgjengelighet i henhold til WAI-ARIAs beste praksis. Hvis du leter etter et komponentbibliotek som tilbyr mange komponenter og fleksibilitet, er React Aria Components et utmerket valg.

Ved siden av React Aria Components-biblioteket er det andre ustilte komponentbiblioteker du kan bruke til å bygge vakre React-applikasjoner. Ett av disse bibliotekene inkluderer Radix UI. Radix UI er et ustilt komponentbibliotek for å bygge høykvalitets React-apper. Det er et flott alternativ til React Aria-komponenter.