Toegankelijke React-applicaties bouwen met React Aria-componenten

React Aria Components is een bibliotheek met een verzameling ongestylede componenten die bovenop React Aria-haken zijn gebouwd.

Het is ontwikkeld door Adobe en maakt deel uit van het React Spectrum-project, dat tot doel heeft een alomvattend geheel te creëren verzameling bibliotheken en tools waarmee ontwikkelaars een adaptieve, toegankelijke en robuuste gebruiker kunnen bouwen ervaringen.

React Aria-componenten begrijpen

Reageer op Aria-componenten biedt toegankelijkheid, gebruikersinteracties en gedrag volgens de best practices van WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). In tegenstelling tot de React Aria-bibliotheek, die maakt gebruik van React-haken om uw componenten te bouwen.

De React Aria Components-bibliotheek biedt een reeks vooraf gebouwde componenten, waaronder knoppen, selectievakjes, schuifregelaars, enz. Deze componenten hebben geen stijl, waardoor u de look en feel van de applicatie kunt ontwerpen zoals u dat wilt.

Voordelen van het gebruik van React Aria-componenten

De React Aria Components-bibliotheek biedt vele voordelen, waaronder:

• Toegankelijkheid: React Aria-componenten volgen de best practices van WAI-ARIA en zorgen ervoor dat uw applicatie toegankelijk is voor alle gebruikers, inclusief gebruikers die ondersteunende technologieën gebruiken.
• Flexibiliteit: React Aria-componenten worden ongestyled geleverd, zodat u uw ontwerpsysteem zonder beperkingen kunt implementeren.
• Gebruikersinteracties: React Aria biedt robuuste afhandeling van gebruikersinteracties, inclusief toetsenbord-, muis- en aanraakinteracties.
• Internationalisering: React Aria ondersteunt talen van rechts naar links, datum- en getalopmaak en meer, waardoor het eenvoudiger wordt om geïnternationaliseerde applicaties te bouwen.

React-apps bouwen met React Aria-componenten

Laten we eens kijken naar het bouwen van een eenvoudige React-applicatie met behulp van React Aria Components. Voordat u de React Aria Components-bibliotheek in uw React-toepassingen gebruikt, moet u een React-project maken. Vite is een geweldige manier om dit te doen.

Uw Reageer-applicatie maken

Om uw React-applicatie te maken met Vite, voert u de volgende code uit in uw terminal:

npm init vite

Als u de bovenstaande code uitvoert, wordt een reeks aanwijzingen gestart om u te helpen bij het maken van uw nieuwe React-project.

Bijvoorbeeld:

Nadat u uw project hebt gemaakt, moet u de benodigde afhankelijkheden installeren. Om dit te doen, voert u de volgende code uit in uw terminal:

cd react-aria-app

npm install

Het zal uw huidige map wijzigen in de map van het project en vervolgens de benodigde afhankelijkheden installeren. Nadat u uw React-applicatie hebt gemaakt, kunt u de React Aria Components-bibliotheek installeren om toegankelijkheidsfuncties aan uw applicatie toe te voegen.

React Aria-componenten installeren

U kunt de React Aria Components-bibliotheek installeren met npm of garen. Om het via npm te installeren, voert u de volgende opdracht uit in uw terminal:

npm install react-aria-components

Als alternatief kunt u deze code uitvoeren om via garen te installeren:

yarn add react-aria-components

Nu u de React Aria Components-bibliotheek hebt geïnstalleerd, kunt u de componenten ervan in uw toepassing gebruiken.

De React Aria-componenten gebruiken

De React Aria Components-bibliotheek biedt een verscheidenheid aan componenten die het ontwikkelingsproces eenvoudiger en sneller maken. Om de component van de bibliotheek te gebruiken, importeert u deze in uw toepassing en rendert u deze.

Bijvoorbeeld:

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;

Het bovenstaande codeblok importeert de Knop, Pop-over, Dialoogtrigger, En Dialoog componenten uit de react-aria-componenten module. Alle geïmporteerde componenten creëren een eenvoudige knop die een popover weergeeft wanneer erop wordt geklikt.

De Dialoogtrigger component bepaalt de zichtbaarheid van een dialoogvenster of popover. Binnen in de Dialoogtrigger, daar is de Knop bestanddeel. Deze knop activeert de zichtbaarheid van de Pop-over En Dialoog.

De Pop-over component is een container die over de rest van de gebruikersinterface verschijnt, terwijl de Dialoog component geeft inhoud weer in een laag boven de app. Binnen in de Pop-over onderdeel is een Dialoog onderdeel met de tekst ‘Je hebt op de knop geklikt."

Als u op de knop klikt, wordt een popover met de tekst weergegeven "Je hebt op de knop geklikt" op uw scherm, waardoor uw interface er ongeveer hetzelfde uitziet als de onderstaande afbeelding.

Zoals u in de afbeelding hierboven kunt zien, zijn de componenten van de bibliotheek ongestyled, zodat u de stijl van uw voorkeur kunt kiezen.

Het stylen van uw componenten

Omdat de React Aria-componenten ongestyled zijn, kun je ze stylen zoals je wilt. Je kunt gebruiken Trapsgewijze stijlbladen (CSS), Tailwind CSS, styled-components of een andere stijlmethode die u verkiest.

U kunt verschillende gewoonten doorgeven klasseNamen toe aan de componenten en definieer vervolgens de CSS-klassen in uw CSS-bestand.

Hier is een voorbeeld:

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;

In dit voorbeeld definieert u a naam van de klasse voor de Knop, Pop-over, En Dialoog componenten. U kunt nu de componenten in uw CSS-bestand opmaken.

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

Nadat u de stijlen voor uw componenten hebt gedefinieerd, zouden uw knop en popover er ongeveer zo uit moeten zien.

Als u geen custom naam van de klasse voor uw componenten bevat de React Aria Components-bibliotheek een standaard naam van de klasse voor elk onderdeel. De standaard naam van de klasse is reactie-aria-componentNaam, waar componentNaam is de naam van de component die u wilt opmaken.

Bijvoorbeeld:

.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 op dat het bovenstaande CSS-codeblok deze stijlen op alle stijlen zal toepassen Knop, Pop-over, En Dialoog component die u in uw toepassing gebruikt.

Bouw toegankelijke en interactieve React-applicaties

React Aria Components is een krachtige bibliotheek voor het bouwen van toegankelijke en interactieve React-applicaties. Het biedt componenten die gebruikersinteracties en toegankelijkheid afhandelen volgens de best practices van WAI-ARIA. Als u op zoek bent naar een componentenbibliotheek die veel componenten en flexibiliteit biedt, dan is React Aria Components een uitstekende keuze.

Naast de React Aria Components-bibliotheek zijn er nog andere niet-gestileerde componentenbibliotheken die u kunt gebruiken om prachtige React-applicaties te bouwen. Een van deze bibliotheken bevat Radix UI. Radix UI is een ongestylede componentenbibliotheek voor het bouwen van hoogwaardige React-apps. Het is een geweldig alternatief voor React Aria Components.