إنشاء تطبيقات React سهلة الوصول باستخدام مكونات React Aria

React Aria Components عبارة عن مكتبة تحتوي على مجموعة من المكونات غير النمطية المبنية فوق خطافات React Aria.

تم تطويره بواسطة Adobe وهو جزء من مشروع React Spectrum، الذي يهدف إلى إنشاء نظام شامل مجموعة من المكتبات والأدوات التي تساعد المطورين على بناء مستخدم قوي ومتكيف وسهل الوصول إليه خبرة.

فهم مكونات React Aria

رد فعل مكونات الأغنية يوفر إمكانية الوصول وتفاعلات المستخدم والسلوك وفقًا لأفضل ممارسات WAI-ARIA (مبادرة إمكانية الوصول إلى الويب - تطبيقات الإنترنت الغنية التي يمكن الوصول إليها). على عكس مكتبة React Aria، التي يستخدم خطافات رد الفعل لبناء المكونات الخاصة بك.

توفر مكتبة React Aria Components مجموعة من المكونات المعدة مسبقًا، بما في ذلك الأزرار ومربعات الاختيار وشرائح التمرير وما إلى ذلك. لم يتم تصميم هذه المكونات، مما يسمح لك بتصميم شكل التطبيق ومظهره بالطريقة التي تريدها.

فوائد استخدام مكونات React Aria

توفر مكتبة React Aria Components العديد من المزايا، بما في ذلك:

• إمكانية الوصول: تتبع مكونات React Aria أفضل ممارسات WAI-ARIA، مما يضمن إمكانية الوصول إلى تطبيقك لجميع المستخدمين، بما في ذلك أولئك الذين يستخدمون التقنيات المساعدة.
  instagram viewer
• المرونة: تأتي مكونات 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

يمكنك تثبيت مكتبة React Aria Components باستخدام npm أو الغزل. لتثبيته عبر npm، قم بتشغيل الأمر التالي في جهازك:

npm install react-aria-components

بدلا من ذلك، للتثبيت عبر الغزل، قم بتشغيل هذا الكود:

yarn add react-aria-components

الآن بعد أن قمت بتثبيت مكتبة React Aria Components، يمكنك استخدام مكوناتها في تطبيقك.

استخدام مكونات React Aria

توفر مكتبة React Aria Components مجموعة متنوعة من المكونات التي تجعل عملية التطوير أسهل وأسرع. لاستخدام مكون المكتبة، قم باستيراده إلى التطبيق الخاص بك وعرضه.

على سبيل المثال:

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;

تستورد كتلة التعليمات البرمجية أعلاه ملف زر, البوب, DialogTrigger، و الحوار المكونات من رد فعل الأغنية المكونات وحدة. تقوم جميع المكونات المستوردة بإنشاء زر بسيط يعرض نافذة منبثقة عند النقر عليه.

ال DialogTrigger يتحكم المكون في رؤية مربع حوار أو نافذة منبثقة. داخل DialogTrigger، هنالك ال زر عنصر. يؤدي هذا الزر إلى تشغيل رؤية البوب و الحوار.

ال البوب المكون عبارة عن حاوية تنبثق فوق بقية واجهة المستخدم، بينما الحوار يعرض المكون المحتوى في طبقة أعلى التطبيق. داخل البوب المكون هو الحوار المكون مع النص "لقد نقرت على الزر."

سيؤدي النقر فوق الزر إلى عرض نافذة منبثقة تحتوي على النص "لقد نقرت على الزر" على شاشتك، مما يمنح واجهتك مظهرًا مشابهًا للصورة أدناه.

كما ترون في الصورة أعلاه، فإن مكونات المكتبة تأتي بدون نمط بحيث يمكنك اختيار التصميم المفضل لديك.

تصميم مكوناتك

نظرًا لأن مكونات React Aria تأتي بدون نمط، يمكنك تصميمها كما تريد. يمكنك استخدام أوراق الأنماط المتتالية (CSS)أو Tailwind CSS أو المكونات المصممة أو أي طريقة تصميم أخرى تفضلها.

يمكنك تمرير مخصص مختلف أسماء الفئات إلى المكونات ثم قم بتحديد فئات CSS في ملف CSS الخاص بك.

هنا مثال:

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;

في هذا المثال، قمت بتعريف أ اسم الفئة ل زر, البوب، و الحوار عناصر. يمكنك الآن تصميم المكونات في ملف 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;
}

بعد تحديد أنماط المكونات الخاصة بك، يجب أن يبدو الزر والعنصر المنبثق على هذا النحو.

إذا كنت لا تريد تحديد العرف اسم الفئة بالنسبة لمكوناتك، تتضمن مكتبة React Aria Components إعدادًا افتراضيًا اسم الفئة لكل مكون. الافتراضي اسم الفئة يكون رد فعل الأغنية مكونName، أين اسم المكون هو اسم المكون الذي تريد تصميمه.

على سبيل المثال:

.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 أعلاه ستطبق هذه الأنماط على كل منها زر, البوب، و الحوار المكون الذي تستخدمه في التطبيق الخاص بك.

إنشاء تطبيقات تفاعلية وسهلة الوصول

React Aria Components هي مكتبة قوية لبناء تطبيقات React تفاعلية يسهل الوصول إليها. فهو يوفر مكونات تتعامل مع تفاعلات المستخدم وإمكانية الوصول وفقًا لأفضل ممارسات WAI-ARIA. إذا كنت تبحث عن مكتبة مكونات توفر الكثير من المكونات والمرونة، فإن React Aria Components هو خيار ممتاز.

إلى جانب مكتبة React Aria Components، توجد مكتبات مكونات أخرى غير نمطية يمكنك استخدامها لإنشاء تطبيقات React جميلة. تتضمن إحدى هذه المكتبات Radix UI. Radix UI عبارة عن مكتبة مكونات غير مصممة لإنشاء تطبيقات React عالية الجودة. إنه بديل رائع لمكونات React Aria.