Bygga tillgängliga React-applikationer med React Aria-komponenter

React Aria Components är ett bibliotek som innehåller en samling av ostilade komponenter byggda ovanpå React Aria-krokar.

Det är utvecklat av Adobe och är en del av React Spectrum-projektet, som syftar till att skapa en heltäckande samling av bibliotek och verktyg som hjälper utvecklare att bygga anpassningsbara, tillgängliga och robusta användare upplevelser.

Förstå React Aria-komponenter

Reager Aria-komponenter ger tillgänglighet, användarinteraktioner och beteende enligt WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) bästa praxis. Till skillnad från React Aria-biblioteket, som använder React-krokar att bygga dina komponenter.

React Aria Components-biblioteket erbjuder en uppsättning förbyggda komponenter, inklusive knappar, kryssrutor, skjutreglage, etc. Dessa komponenter är inte utformade, vilket gör att du kan designa applikationens utseende och känsla hur du tänker.

Fördelar med att använda React Aria-komponenter

React Aria Components-biblioteket erbjuder många fördelar, inklusive:

• Tillgänglighet: React Aria-komponenter följer WAI-ARIAs bästa praxis, vilket säkerställer att din applikation är tillgänglig för alla användare, inklusive de som använder hjälpmedel.
• Flexibilitet: React Aria-komponenter kommer utan stil, vilket gör att du kan implementera ditt designsystem utan begränsningar.
• Användarinteraktioner: React Aria ger robust hantering av användarinteraktioner, inklusive tangentbords-, mus- och beröringsinteraktioner.
• Internationalisering: React Aria stöder höger-till-vänster-språk, datum- och nummerformatering med mera, vilket gör det lättare att bygga internationaliserade applikationer.

Bygga React-appar med React Aria-komponenter

Låt oss gå igenom att bygga en enkel React-applikation med hjälp av React Aria Components. Innan du använder React Aria Components-biblioteket i dina React-applikationer måste du skapa ett React-projekt. Vite är ett bra sätt att göra detta.

Skapa din React-applikation

För att skapa din React-applikation med Vite, kör följande kod i din terminal:

npm init vite

Att köra koden ovan kommer att starta en rad uppmaningar som hjälper dig att skapa ditt nya React-projekt.

Till exempel:

När du har skapat ditt projekt måste du installera nödvändiga beroenden. För att göra detta, kör följande kod i din terminal:

cd react-aria-app

npm install

Den kommer att ändra din nuvarande katalog till projektets katalog och sedan installera nödvändiga beroenden. När du har skapat din React-applikation kan du installera React Aria Components-biblioteket för att lägga till tillgänglighetsfunktioner till din applikation.

Installera React Aria-komponenter

Du kan installera React Aria Components-biblioteket med hjälp av npm eller garn. För att installera det via npm, kör följande kommando i din terminal:

npm install react-aria-components

Alternativt, för att installera via garn, kör den här koden:

yarn add react-aria-components

Nu när du har installerat React Aria Components-biblioteket kan du använda dess komponenter i din applikation.

Använda React Aria-komponenterna

React Aria Components-biblioteket erbjuder en mängd olika komponenter som gör utvecklingsprocessen enklare och snabbare. För att använda bibliotekets komponent, importera den till din applikation och rendera den.

Till exempel:

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;

Kodblocket ovan importerar Knapp, Popover, DialogTrigger, och Dialog komponenter från react-aria-komponenter modul. Alla importerade komponenter skapar en enkel knapp som visar en popover när du klickar på den.

De DialogTrigger komponent styr synligheten för en dialogruta eller popover. Inuti DialogTrigger, där är Knapp komponent. Den här knappen aktiverar synligheten av Popover och Dialog.

De Popover komponent är en behållare som dyker upp över resten av användargränssnittet, medan Dialog komponenten visar innehåll i ett lager ovanför appen. Inuti Popover komponenten är en Dialog komponent med texten "Du klickade på knappen."

Om du klickar på knappen visas en popover med texten "Du klickade på knappen" på din skärm, vilket ger ditt gränssnitt ett liknande utseende som bilden nedan.

Som du kan se på bilden ovan kommer bibliotekets komponenter osylerade så att du kan välja din favoritstil.

Styla dina komponenter

Eftersom React Aria-komponenterna kommer utan styling kan du styla dem hur du vill. Du kan använda Cascading Style Sheets (CSS), Tailwind CSS, stylade-komponenter eller någon annan stylingmetod du föredrar.

Du kan passera olika anpassade klassnamn till komponenterna och definiera sedan CSS-klasserna i din CSS-fil.

Här är ett exempel:

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 det här exemplet definierar du en klassnamn för Knapp, Popover, och Dialog komponenter. Du kan nu utforma komponenterna i din CSS-fil.

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

Efter att ha definierat stilarna för dina komponenter bör din knapp och popover se ut ungefär så här.

Om du inte vill definiera en anpassad klassnamn för dina komponenter innehåller React Aria Components-biblioteket en standard klassnamn för varje komponent. Standarden klassnamn är react-aria-componentName, var komponentnamn är namnet på den komponent du vill styla.

Till exempel:

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

Observera att CSS-kodblocket ovan kommer att tillämpa dessa stilar på alla Knapp, Popover, och Dialog komponent du använder i din applikation.

Bygg tillgängliga och interaktiva React-applikationer

React Aria Components är ett kraftfullt bibliotek för att bygga tillgängliga och interaktiva React-applikationer. Den tillhandahåller komponenter som hanterar användarinteraktioner och tillgänglighet enligt WAI-ARIAs bästa praxis. Om du letar efter ett komponentbibliotek som erbjuder många komponenter och flexibilitet är React Aria Components ett utmärkt val.

Vid sidan av React Aria Components-biblioteket finns det andra ostilade komponentbibliotek som du kan använda för att bygga vackra React-applikationer. Ett av dessa bibliotek inkluderar Radix UI. Radix UI är ett oformaterat komponentbibliotek för att bygga högkvalitativa React-appar. Det är ett utmärkt alternativ till React Aria-komponenter.