ساخت برنامه‌های React در دسترس با کامپوننت‌های React Aria

اگر به دنبال کتابخانه React هستید تا به شما در ساخت اجزای قابل دسترسی کمک کند، در جای مناسبی هستید!

React Aria Components کتابخانه‌ای است که شامل مجموعه‌ای از مؤلفه‌های بدون استایل است که بر روی قلاب‌های React Aria ساخته شده‌اند.

این توسط Adobe توسعه یافته است و بخشی از پروژه React Spectrum است که هدف آن ایجاد مجموعه ای جامع از کتابخانه ها و ابزارهایی است که به توسعه دهندگان کمک می کند تا تجربیات کاربر سازگار، در دسترس و قوی ایجاد کنند.

آشنایی با اجزای React Aria

React Aria Components بر اساس بهترین شیوه های WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) قابلیت دسترسی، تعاملات کاربر و رفتار را فراهم می کند. برخلاف کتابخانه React Aria که از قلاب های React برای ساخت اجزای شما استفاده می کند.

کتابخانه React Aria Components مجموعه‌ای از اجزای از پیش ساخته شده، شامل دکمه‌ها، چک باکس‌ها، لغزنده‌ها و غیره را ارائه می‌دهد.

مزایای استفاده از React Aria Components

کتابخانه React Aria Components مزایای زیادی دارد، از جمله:

• دسترس‌پذیری: اجزای React Aria از بهترین شیوه‌های WAI-ARIA پیروی می‌کنند و اطمینان می‌دهند که برنامه شما برای همه کاربران، از جمله کاربرانی که از فناوری‌های کمکی استفاده می‌کنند، قابل دسترسی است.
• انعطاف‌پذیری: اجزای React Aria بدون استایل می‌آیند و به شما امکان می‌دهند سیستم طراحی خود را بدون محدودیت پیاده‌سازی کنید.
• تعاملات کاربر: React Aria مدیریت قوی تعاملات کاربر از جمله صفحه کلید، ماوس و تعاملات لمسی را ارائه می دهد.
• بین المللی سازی: React Aria از زبان های راست به چپ، قالب بندی تاریخ و اعداد و موارد دیگر پشتیبانی می کند و ساخت برنامه های بین المللی را آسان تر می کند.

ساخت اپلیکیشن های React با کامپوننت های React Aria

بیایید در ساخت یک برنامه ساده React با استفاده از React Aria Components قدم برداریم. قبل از استفاده از کتابخانه React Aria Components در برنامه های React خود، باید یک پروژه React ایجاد کنید. Vite یک راه عالی برای انجام این کار است.

ایجاد برنامه React شما

برای ایجاد برنامه React خود با استفاده از Vite، کد زیر را در ترمینال خود اجرا کنید:

npm init vite

اجرای کد بالا مجموعه ای از دستورات را راه اندازی می کند تا به شما در ایجاد پروژه React جدید خود کمک کند.

مثلا:

پس از ایجاد پروژه خود، باید وابستگی های لازم را نصب کنید. برای این کار کد زیر را در ترمینال خود اجرا کنید:

cd react-aria-app

npm install

دایرکتوری فعلی شما را به دایرکتوری پروژه تغییر می دهد و سپس وابستگی های لازم را نصب می کند. هنگامی که برنامه React خود را ایجاد کردید، می توانید کتابخانه React Aria Components را نصب کنید تا ویژگی های دسترسی را به برنامه خود اضافه کنید.

نصب React Aria Components

می توانید کتابخانه React Aria Components را با استفاده از npm یا yarn نصب کنید. برای نصب آن از طریق npm، دستور زیر را در ترمینال خود اجرا کنید:

npm install react-aria-components

همچنین، برای نصب از طریق yarn، این کد را اجرا کنید:

yarn add react-aria-components

اکنون که کتابخانه React Aria Components را نصب کرده اید، می توانید از اجزای آن در برنامه خود استفاده کنید.

استفاده از React Aria Components

کتابخانه React Aria Components مؤلفه‌های مختلفی را ارائه می‌کند که فرآیند توسعه را آسان‌تر و سریع‌تر می‌کند. برای استفاده از مؤلفه کتابخانه، آن را در برنامه خود وارد کرده و آن را رندر کنید.

مثلا:

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;

بلوک کد بالا مولفه های Button، Popover، DialogTrigger و Dialog را از ماژول react-aria-components وارد می کند. تمام اجزای وارد شده یک دکمه ساده ایجاد می کنند که با کلیک کردن، یک پاپاور نمایش می دهد.

مولفه DialogTrigger نمایان بودن یک گفتگو یا پاپاور را کنترل می کند. در داخل DialogTrigger، جزء Button وجود دارد. این دکمه نمایان شدن Popover و Dialog را فعال می کند.

کامپوننت Popover محفظه ای است که روی بقیه UI ظاهر می شود، در حالی که مولفه Dialog محتوا را در یک لایه بالای برنامه نمایش می دهد. داخل کامپوننت Popover یک کامپوننت Dialog با متن “شما روی دکمه کلیک کردید” وجود دارد.

با کلیک بر روی دکمه، یک پاپاور با متن “شما روی دکمه کلیک کردید” روی صفحه نمایش شما نمایش داده می شود که ظاهری شبیه به تصویر زیر به رابط شما می دهد.

همانطور که در تصویر بالا می بینید، اجزای کتابخانه بدون استایل قرار گرفته اند تا بتوانید استایل مورد نظر خود را انتخاب کنید.

سبک دادن به اجزای خود

از آنجایی که کامپوننت‌های React Aria بدون استایل ارائه می‌شوند، می‌توانید آن‌ها را هر طور که می‌خواهید استایل کنید. می توانید از Cascading Style Sheets (CSS)، Tailwind CSS، styled-components یا هر روش استایل دیگری که ترجیح می دهید استفاده کنید.

می‌توانید کلاس‌های سفارشی مختلف را به مؤلفه‌ها منتقل کنید و سپس کلاس‌های CSS را در فایل CSS خود تعریف کنید.

به عنوان مثال:

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;

در این مثال، شما یک className برای اجزای Button، Popover و Dialog تعریف می کنید. اکنون می توانید کامپوننت ها را در فایل CSS خود استایل دهید.

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

پس از تعریف سبک برای اجزای خود، دکمه و پاپاور شما باید چیزی شبیه به این باشد.

اگر نمی‌خواهید یک className سفارشی برای اجزای خود تعریف کنید، کتابخانه React Aria Components شامل یک className پیش‌فرض برای هر مؤلفه است. className پیش‌فرض، react-aria-componentName است، که در آن componentName نام مؤلفه‌ای است که می‌خواهید به آن استایل بدهید.

مثلا:

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

توجه داشته باشید که بلوک کد CSS بالا، این سبک‌ها را برای هر کامپوننت Button، Popover و Dialog که در برنامه خود استفاده می‌کنید اعمال می‌کند.

برنامه‌های React قابل دسترسی و تعاملی بسازید

React Aria Components یک کتابخانه قدرتمند برای ساخت برنامه های React در دسترس و تعاملی است. این مؤلفه‌ها را فراهم می‌کند که تعاملات و دسترسی کاربر را مطابق بهترین شیوه‌های WAI-ARIA مدیریت می‌کند. اگر به دنبال کتابخانه ای هستید که کامپوننت ها و انعطاف پذیری زیادی را ارائه دهد، React Aria Components یک انتخاب عالی است.

در کنار کتابخانه React Aria Components، کتابخانه های اجزای بدون استایل دیگری نیز وجود دارد که می توانید از آنها برای ساخت برنامه های زیبای React استفاده کنید. یکی از این کتابخانه ها شامل Radix UI است. Radix UI یک کتابخانه اجزای بدون استایل برای ساخت برنامه‌های React با کیفیت است. این یک جایگزین عالی برای React Aria Components است.

منبع مقاله