Rakenna esteettömiä React-sovelluksia React Aria -komponenteilla

React Aria Components on kirjasto, joka sisältää kokoelman tyylittömiä komponentteja, jotka on rakennettu React Aria -koukkujen päälle.

MUO päivän video JATKA SISÄLLÖLLÄ VIERÄTÄ

Sen on kehittänyt Adobe, ja se on osa React Spectrum -projektia, jonka tavoitteena on luoda kattava kokoelma kirjastoja ja työkaluja, jotka auttavat kehittäjiä rakentamaan mukautuvia, helppokäyttöisiä ja kestäviä käyttökokemuksia.

React Aria -komponenttien ymmärtäminen

React Aria Components tarjoaa saavutettavuuden, käyttäjien vuorovaikutuksen ja käyttäytymisen WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) parhaiden käytäntöjen mukaisesti. Toisin kuin React Aria -kirjasto, joka käyttää React-koukkuja rakentaaksesi komponenttejasi.

React Aria Components -kirjasto tarjoaa joukon valmiita komponentteja, kuten painikkeita, valintaruutuja, liukusäätimiä jne. Näitä komponentteja ei ole muotoiltu, joten voit suunnitella sovelluksen ulkoasun ja tuntuman haluamallasi tavalla.

React Aria -komponenttien käytön edut

React Aria Components -kirjasto tarjoaa monia etuja, mukaan lukien:

Esteettömyys : React Aria -komponentit noudattavat WAI-ARIAn parhaita käytäntöjä ja varmistavat, että sovelluksesi on kaikkien käyttäjien saatavilla, mukaan lukien aputekniikoita käyttävät.
Joustavuus : React Aria -komponentit tulevat tyylittämättöminä, joten voit toteuttaa suunnittelujärjestelmäsi ilman rajoituksia.
Käyttäjien vuorovaikutukset : React Aria tarjoaa vankan käsittelyn käyttäjien vuorovaikutuksille, mukaan lukien näppäimistön, hiiren ja kosketustoiminnot.
Kansainvälistyminen : React Aria tukee oikealta vasemmalle luettavia kieliä, päivämäärän ja numeron muotoilua ja paljon muuta, mikä helpottaa kansainvälistyneiden sovellusten rakentamista.

Rakenna React-sovelluksia React Aria -komponenteilla

Käydään läpi yksinkertaisen React-sovelluksen rakentaminen React Aria Componentsin avulla. Ennen kuin käytät React Aria Components -kirjastoa React-sovelluksissasi, sinun on luotava React-projekti. Vite on loistava tapa tehdä tämä .

React-sovelluksen luominen

Luodaksesi React-sovelluksesi Viten avulla, suorita seuraava koodi päätteessäsi:

npm init vite

Yllä olevan koodin suorittaminen käynnistää joukon kehotteita, jotka auttavat sinua luomaan uuden React-projektin.

Esimerkiksi:

Projektin luomisen jälkeen sinun on asennettava tarvittavat riippuvuudet. Voit tehdä tämän suorittamalla seuraavan koodin päätteessäsi:

cd react-aria-app

npm install

Se muuttaa nykyisen hakemistosi projektin hakemistoksi ja asentaa sitten tarvittavat riippuvuudet. Kun olet luonut React-sovelluksen, voit asentaa React Aria Components -kirjaston lisätäksesi esteettömyysominaisuuksia sovellukseesi.

React Aria -komponenttien asentaminen

Voit asentaa React Aria Components -kirjaston npm:n tai langan avulla. Asenna se npm:n kautta suorittamalla seuraava komento päätteessäsi:

npm install react-aria-components

Vaihtoehtoisesti voit asentaa langan avulla suorittamalla tämän koodin:

yarn add react-aria-components

Nyt kun olet asentanut React Aria Components -kirjaston, voit käyttää sen komponentteja sovelluksessasi.

React Aria -komponenttien käyttäminen

React Aria Components -kirjasto tarjoaa erilaisia komponentteja, jotka helpottavat ja nopeuttavat kehitysprosessia. Jos haluat käyttää kirjaston komponenttia, tuo se sovellukseesi ja renderöi se.

Esimerkiksi:

import React from "react"; 
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components"; 
 
function App() { 
  return ( 
    <div> 
      <DialogTrigger> 
        <Button>Click Me</Button> 
        <Popover> 
          <Dialog>You clicked the button</Dialog> 
        </Popover> 
      </DialogTrigger> 
    </div> 
  ); 
} 
 
export default App;

Yllä oleva koodilohko tuo Painike , Popover , DialogTrigger , ja Dialogi komponentit react-aria-komponentit moduuli. Kaikki tuodut komponentit luovat yksinkertaisen painikkeen, joka näyttää ponnahdusikkunan, kun sitä napsautetaan.

The DialogTrigger komponentti ohjaa valintaikkunan tai ponnahdusikkunan näkyvyyttä. Sisällä DialogTrigger , siellä on Painike komponentti. Tämä painike käynnistää näkyvyyden Popover ja Dialogi .

The Popover komponentti on säilö, joka ponnahtaa esiin muun käyttöliittymän päälle, kun taas Dialogi komponentti näyttää sisällön sovelluksen yläpuolella olevassa kerroksessa. Sisällä Popover komponentti on a Dialogi komponentti tekstin kanssa 'Napsautit painiketta . '

Napsauttamalla painiketta näet ponnahdusikkunan, jossa on teksti 'Napsautit painiketta' näytölläsi, jolloin käyttöliittymäsi näyttää samanlaiselta kuin alla oleva kuva.

Kuten yllä olevasta kuvasta näet, kirjaston komponentit ovat tyylittämättömiä, jotta voit valita haluamasi tyylin.

Komponenttien muotoilu

Koska React Aria -komponentit ovat tyylittämättömiä, voit muotoilla ne haluamallasi tavalla. Voit käyttää CSS (Cascading Style Sheets) , Tailwind CSS, styled-komponentit tai jokin muu haluamasi tyylitapa.

Voit ohittaa erilaisia mukautuksia luokkien nimet komponentteihin ja määritä sitten CSS-luokat CSS-tiedostossasi.

Tässä on esimerkki:

import React from "react"; 
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components"; 
 
function App() { 
  return ( 
    <div> 
      <DialogTrigger> 
        <Button className="button">Click Me</Button> 
        <Popover className="popover"> 
          <Dialog className="dialog">You clicked the button</Dialog> 
        </Popover> 
      </DialogTrigger> 
    </div> 
  ); 
} 
 
export default App;

Tässä esimerkissä määrität a luokan nimi varten Painike , Popover , ja Dialogi komponentit. Voit nyt muokata CSS-tiedostosi komponenttien tyyliä.

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

Kun olet määrittänyt komponenttien tyylit, painikkeesi ja ponnahdusikkunasi pitäisi näyttää suunnilleen tältä.

verkkosivustoja, joilla voi ostaa halpoja asioita verkossa

Jos et halua määrittää mukautettua luokan nimi komponenteillesi React Aria Components -kirjasto sisältää oletusarvon luokan nimi jokaiselle komponentille. Oletusarvo luokan nimi On react-aria-komponentinnimi , missä komponentin nimi on sen komponentin nimi, jonka haluat tyylittää.

Esimerkiksi:

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

Huomaa, että yllä oleva CSS-koodilohko käyttää näitä tyylejä jokaisessa Painike , Popover , ja Dialogi sovelluksessasi käyttämäsi komponentti.

Rakenna helppokäyttöisiä ja interaktiivisia reagointisovelluksia

React Aria Components on tehokas kirjasto helppokäyttöisten ja interaktiivisten React-sovellusten rakentamiseen. Se tarjoaa komponentteja, jotka käsittelevät käyttäjien vuorovaikutusta ja saavutettavuutta WAI-ARIAn parhaiden käytäntöjen mukaisesti. Jos etsit komponenttikirjastoa, joka tarjoaa paljon komponentteja ja joustavuutta, React Aria Components on erinomainen valinta.

React Aria Components -kirjaston rinnalla on muita tyylittömiä komponenttikirjastoja, joiden avulla voit rakentaa kauniita React-sovelluksia. Yksi näistä kirjastoista sisältää Radix UI:n. Radix UI on tyylitön komponenttikirjasto korkealaatuisten React-sovellusten rakentamiseen. Se on loistava vaihtoehto React Aria Componentsille.