Tworzenie dostępnych aplikacji React za pomocą komponentów React Aria
React Aria Components to biblioteka zawierająca kolekcję niestylizowanych komponentów zbudowanych w oparciu o haki React Aria.
Firma Adobe stała na czele rozwoju tej technologii w ramach swoich ciągłych wysiłków w ramach inicjatywy React Spectrum, ambitnego przedsięwzięcia mającego na celu zapewnienie programistom różnorodnych zasobów zaprojektowanych w celu ułatwienia tworzenia responsywnych, integracyjnych i odpornych interfejsów użytkownika.
Zrozumienie komponentów React Aria
Komponenty React Aria zapewniają dostępność, interakcje użytkownika i zachowanie zgodnie z najlepszymi praktykami WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). W przeciwieństwie do biblioteki React Aria, która wykorzystuje haki React do tworzenia komponentów.
Biblioteka React Aria Components przedstawia szereg wbudowanych elementów, takich jak przyciski, pola wyboru i suwaki, które nie są ozdobione żadną stylizacją, zapewniając w ten sposób programistom elastyczność w określaniu wyglądu i atmosfery ich oprogramowania zgodnie z preferowanymi specyfikacjami.
Korzyści płynące z korzystania z React Aria Components
Wykorzystanie biblioteki React Aria Components niesie ze sobą niezliczone korzyści, obejmujące m.in:
Komponenty React Aria są zgodne z wytycznymi WAI-ARIA dotyczącymi dostępności, umożliwiając pełną funkcjonalność i użyteczność aplikacji przez osoby korzystające z technologii wspomagających.
Komponenty React Aria są dostarczane w niestylizowanej formie, co pozwala na implementację niestandardowego systemu projektowania bez żadnych ograniczeń i restrykcji. Ta elastyczność umożliwia programistom włączenie unikalnych elementów wizualnych i interaktywnych do komponentów, co skutkuje dostosowanym doświadczeniem użytkownika, które jest zgodne z określonymi wymaganiami i preferencjami aplikacji.
React Aria oferuje kompleksowe podejście do zarządzania interakcjami użytkownika za pomocą różnych metod wprowadzania danych, takich jak klawiatury, myszy i urządzenia dotykowe.
React Aria oferuje kompleksową obsługę układów językowych od prawej do lewej (RTL), a także zaawansowane funkcje, takie jak formatowanie dat i liczb, które ułatwiają tworzenie międzykulturowych i wielojęzycznych aplikacji internetowych.
Tworzenie aplikacji React za pomocą komponentów React Aria
Aby zbudować podstawową aplikację React wykorzystującą komponenty React Aria, konieczne jest utworzenie projektu React jako fundamentu. Wdrożenie komponentów React Aria Components w aplikacji React można osiągnąć za pomocą Vite, który służy jako skuteczny środek do tworzenia takich projektów i zarządzania nimi.
Tworzenie aplikacji React
Aby utworzyć projekt React przy użyciu Vite, wykonaj następujące polecenie w interfejsie terminala:
npm init vite
Wykonanie podanego kodu zainicjuje sekwencję zapytań zaprojektowanych w celu ułatwienia utworzenia nowego projektu React.
Na przykład:
Aby kontynuować pracę nad projektem, konieczne jest zainstalowanie wymaganych zależności. Aby wykonać to zadanie, wykonaj powyższy kod w środowisku terminala:
cd react-aria-app
npm install
Proces ten polega na zmianie obecnego katalogu roboczego na folder projektu i zainstalowaniu wszelkich wymaganych zależności. Po utworzeniu aplikacji opartej na React można wprowadzić bibliotekę React Aria Components, która zapewnia ulepszenia dostępności dla aplikacji.
Instalacja React Aria Components
Aby zainstalować bibliotekę React Aria Components przy użyciu npm lub yarn, można wykonać określone polecenie w terminalu. W szczególności, aby to zrobić za pomocą npm, należy wpisać następującą instrukcję w terminalu:
npm install react-aria-components
Alternatywnie można zainstalować pakiet za pomocą Yarn, wykonując następujące polecenie w terminalu lub wierszu polecenia:
yarn add react-aria-components
W kontekście projektu rozwoju oprogramowania obejmującego integrację biblioteki React Aria Components, wykorzystanie funkcji tej biblioteki jest teraz możliwe.
Korzystanie z React Aria Components
Biblioteka React Aria Components zapewnia szereg wszechstronnych elementów, które usprawniają procedurę programowania i przyspieszają jej tempo. Aby wykorzystać te komponenty w swoim projekcie, wystarczy włączyć je do aplikacji i wyświetlić.
Na przykład:
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;
Powyższy blok kodu importuje kilka komponentów React, a mianowicie “Button”, “Popover”, “DialogTrigger” i “Dialog” z biblioteki “react-aria-components”. Komponenty te wspólnie tworzą prosty interfejs z przyciskiem, który po kliknięciu uruchamia wyświetlanie wyskakującego okienka.
Komponent DialogTrigger służy jako kontroler do określania widoczności okna dialogowego lub popovera, a jego działanie jest ułatwione dzięki osadzonemu w nim elementowi Button . Po aktywacji przycisk ten powoduje wyświetlenie odpowiednich elementów Popover i Dialog .
Komponent Popover służy jako kontener, który pojawia się nad pozostałą częścią interfejsu użytkownika i może być wywołany przez kliknięcie określonego elementu. Z drugiej strony, komponent Dialog prezentuje swoją zawartość w oddzielnej warstwie umieszczonej na wierzchu aplikacji. Wewnątrz komponentu Popover znajduje się zagnieżdżony komponent Dialog, który zawiera komunikat “You clicked the button.
Po kliknięciu określonego przycisku na ekranie urządzenia pojawi się wyskakujące powiadomienie z komunikatem “Udało Ci się wejść w interakcję z przyciskiem”, prezentujące estetykę przypominającą przedstawiony przykład wizualny.
W przedstawionej powyżej wizualnej reprezentacji można zaobserwować brak jakichkolwiek z góry ustalonych właściwości estetycznych w elementach składowych biblioteki, zapewniając w ten sposób użytkownikowi autonomię w wyborze preferowanych wyborów projektowych.
Stylizacja komponentów
Komponenty React Aria są dostarczane w stanie nieupiększonym, co pozwala na elastyczność w dostosowywaniu ich wyglądu poprzez wykorzystanie preferowanych technik stylizacji, takich jak stosowanie kaskadowych arkuszy stylów (CSS), wykorzystywanie mocy Tailwind CSS, włączanie stylizowanych komponentów lub wybieranie alternatywnych metod projektowania w celu uzyskania poprawy estetyki.
Wykorzystując niestandardowe nazwy klas, można zastosować różne oznaczenia do poszczególnych elementów w strukturze HTML. Jednocześnie można ustanowić charakterystyczne właściwości stylistyczne dla tych konkretnych klas w dokumencie CSS, umożliwiając w ten sposób dostosowanie wizualnych reprezentacji różnych komponentów.
Oto przykład:
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;
Jasne! Oto eleganckie przeformułowanie tego zdania: W tym przypadku przypisujemy niestandardową klasę do każdego z elementów Button, Popover i Dialog, wykorzystując atrybut className w naszym kodzie HTML. Umożliwia nam to zastosowanie technik stylizacji za pośrednictwem oddzielnego pliku CSS, zapewniając większą elastyczność w dostosowywaniu wyglądu tych komponentów zgodnie z naszymi preferencjami projektowymi.
.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;
}
Po ustanowieniu konwencji stylizacji dla elementów interfejsu użytkownika, takich jak przyciski i wyskakujące okienka, wizualna reprezentacja tych komponentów może przypominać poniższy przykład.
Jeśli zdecydujesz się nie określać indywidualnego atrybutu klasy dla swoich elementów we frameworku React Aria Components, możesz mieć pewność, że biblioteka zapewnia domyślne oznaczenie klasy dla każdego komponentu.Ta domyślna klasyfikacja ma format “react-aria- componentName “, w którym " “componentName” " oznacza nomenklaturę konkretnego elementu, który jest stylizowany.
Na przykład:
.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;
}
Należy pamiętać, że powyższy blok kodu CSS będzie miał zastosowanie do wszystkich instancji komponentów Button, Popover i Dialog wykorzystywanych w zakresie aplikacji.
Tworzenie dostępnych i interaktywnych aplikacji React
React Aria Components to wysoce efektywne narzędzie do tworzenia integracyjnych i dynamicznych aplikacji opartych na React, zgodnych ze standardami World Wide Web Consortium’s Accessible Rich Internet Applications (WAI-ARIA). Ta solidna biblioteka obejmuje szeroką gamę komponentów zaprojektowanych w celu dostosowania do różnorodnych interakcji użytkownika przy jednoczesnym zapewnieniu płynnej dostępności. Dla tych, którzy poszukują kompleksowego zestawu komponentów wraz z wszechstronnością w procesie programowania, React Aria Components stanowi doskonałą opcję.
Oprócz biblioteki React Aria Components, istnieje kilka nieszablonowych kolekcji komponentów, które umożliwiają tworzenie atrakcyjnych wizualnie aplikacji React. Wśród tych zbiorów znajduje się Radix UI, repozytorium nieupiększonych elementów zaprojektowane specjalnie do tworzenia najwyższej klasy projektów React. Jako odpowiedni zamiennik dla React Aria Components, stanowi on bardzo skuteczną opcję.