Membangun Aplikasi React yang Dapat Diakses Dengan Komponen React Aria

React Aria Components adalah perpustakaan yang berisi kumpulan komponen tanpa gaya yang dibangun di atas hook React Aria.

Ini dikembangkan oleh Adobe dan merupakan bagian dari proyek React Spectrum, yang bertujuan untuk membuat koleksi perpustakaan dan alat komprehensif yang membantu pengembang membangun pengalaman pengguna yang adaptif, mudah diakses, dan kuat.

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

Memahami Komponen React Aria

Bereaksi Komponen Aria menyediakan aksesibilitas, interaksi pengguna, dan perilaku sesuai dengan praktik terbaik WAI-ARIA (Inisiatif Aksesibilitas Web – Aplikasi Internet Kaya yang Dapat Diakses). Berbeda dengan perpustakaan React Aria, yang menggunakan kait React untuk membangun komponen Anda.

Pustaka React Aria Components menawarkan sekumpulan komponen yang telah dibuat sebelumnya, termasuk tombol, kotak centang, bilah geser, dll. Komponen-komponen ini tidak diberi gaya, sehingga Anda dapat mendesain tampilan dan nuansa aplikasi sesuai keinginan Anda.

Manfaat Menggunakan Komponen React Aria

Pustaka React Aria Components menawarkan banyak manfaat, termasuk:

• Aksesibilitas: Komponen React Aria mengikuti praktik terbaik WAI-ARIA, memastikan aplikasi Anda dapat diakses oleh semua pengguna, termasuk mereka yang menggunakan teknologi pendukung.
• Fleksibilitas: Komponen React Aria hadir tanpa gaya, memungkinkan Anda mengimplementasikan sistem desain Anda tanpa kendala.
• Interaksi Pengguna: React Aria memberikan penanganan interaksi pengguna yang kuat, termasuk interaksi keyboard, mouse, dan sentuhan.
• Penginternasionalan: React Aria mendukung bahasa kanan-ke-kiri, format tanggal dan angka, dan banyak lagi, sehingga memudahkan pembuatan aplikasi internasional.

Membangun Aplikasi React Dengan Komponen React Aria

Mari kita mulai membangun aplikasi React sederhana menggunakan React Aria Components. Sebelum menggunakan pustaka React Aria Components di aplikasi React Anda, Anda harus membuat proyek React. Vite adalah cara terbaik untuk melakukan ini.

Membuat Aplikasi React Anda

Untuk membuat aplikasi React Anda menggunakan Vite, jalankan kode berikut di terminal Anda:

 npm init vite
 

Menjalankan kode di atas akan meluncurkan serangkaian perintah untuk membantu Anda membuat proyek React baru Anda.

Misalnya:

Setelah membuat proyek, Anda perlu menginstal dependensi yang diperlukan. Untuk melakukan ini, jalankan kode berikut di terminal Anda:

 cd react-aria-app
 

 npm install
 

Ini akan mengubah direktori Anda saat ini ke direktori proyek dan kemudian menginstal dependensi yang diperlukan. Setelah Anda membuat aplikasi React, Anda dapat menginstal pustaka React Aria Components untuk menambahkan fitur aksesibilitas ke aplikasi Anda.

Menginstal Komponen React Aria

Anda dapat menginstal perpustakaan React Aria Components menggunakan npm atau benang. Untuk menginstalnya melalui npm, jalankan perintah berikut di terminal Anda:

 npm install react-aria-components
 

Alternatifnya, untuk menginstal melalui benang, jalankan kode ini:

 yarn add react-aria-components
 

Sekarang Anda telah menginstal pustaka React Aria Components, Anda dapat menggunakan komponen-komponennya dalam aplikasi Anda.

Menggunakan Komponen React Aria

Pustaka React Aria Components menawarkan berbagai komponen yang membuat proses pengembangan lebih mudah dan cepat. Untuk menggunakan komponen perpustakaan, impor ke aplikasi Anda dan render.

Misalnya:

 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;
 

Blok kode di atas mengimpor Tombol, Popover, Pemicu DialogDan Dialog komponen dari komponen reaksi-aria modul. Semua komponen yang diimpor membuat tombol sederhana yang menampilkan popover ketika diklik.

Itu Pemicu Dialog komponen mengontrol visibilitas dialog atau popover. Di dalam Pemicu Dialogada Tombol komponen. Tombol ini memicu visibilitas Popover Dan Dialog.

Itu Popover komponen adalah wadah yang muncul di seluruh UI, sedangkan Dialog komponen menampilkan konten pada lapisan di atas aplikasi. Di dalam Popover komponen adalah a Dialog komponen dengan teks “Kamu menekan tombolnya.“

Mengklik tombol akan menampilkan popover dengan teks “Kamu mengklik tombolnya” di layar Anda, memberikan antarmuka Anda tampilan yang mirip dengan gambar di bawah.

Seperti yang Anda lihat pada gambar di atas, komponen perpustakaan tidak diberi gaya sehingga Anda dapat memilih gaya yang Anda inginkan.

Menata Komponen Anda

Karena Komponen React Aria tidak diberi gaya, Anda dapat menatanya sesuka Anda. Anda dapat menggunakan Cascading Style Sheets (CSS), Tailwind CSS, komponen gaya, atau metode penataan gaya lainnya yang Anda sukai.

Anda dapat melewati kebiasaan yang berbeda nama kelas ke komponen dan kemudian tentukan kelas CSS di file CSS Anda.

Berikut ini contohnya:

 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;
 

Dalam contoh ini, Anda mendefinisikan a nama kelas Untuk Tombol, PopoverDan Dialog komponen. Anda sekarang dapat menata gaya komponen dalam file CSS Anda.

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

Setelah menentukan gaya untuk komponen Anda, tombol dan popover Anda akan terlihat seperti ini.

Jika Anda tidak ingin mendefinisikan kebiasaan nama kelas untuk komponen Anda, pustaka React Aria Components menyertakan default nama kelas untuk setiap komponen. Standarnya nama kelas adalah reaksi-aria-componentNameDi mana nama komponen adalah nama komponen yang ingin Anda gaya.

Misalnya:

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

Perhatikan bahwa blok kode CSS di atas akan menerapkan gaya ini ke semua Tombol, PopoverDan Dialog komponen yang Anda gunakan dalam aplikasi Anda.

Bangun Aplikasi React yang Mudah Diakses dan Interaktif

React Aria Components adalah perpustakaan yang kuat untuk membangun aplikasi React yang mudah diakses dan interaktif. Ini menyediakan komponen yang menangani interaksi dan aksesibilitas pengguna sesuai dengan praktik terbaik WAI-ARIA. Jika Anda mencari pustaka komponen yang menawarkan banyak komponen dan fleksibilitas, React Aria Components adalah pilihan yang sangat baik.

Selain pustaka React Aria Components, terdapat pustaka komponen tanpa gaya lainnya yang dapat Anda gunakan untuk membangun aplikasi React yang indah. Salah satu perpustakaan ini menyertakan Radix UI. Radix UI adalah pustaka komponen tanpa gaya untuk membangun aplikasi React berkualitas tinggi. Ini adalah alternatif yang bagus untuk React Aria Components.