React.js هي مكتبة JavaScript شائعة وفعالة لإنشاء واجهات المستخدم. يمكنك استخدامه لبناء تطبيقات ويب ديناميكية وتفاعلية وسريعة الاستجابة.
أحد المكونات الشائعة التي قد تستخدمها مع React.js هو الرف الدائري. من السهل القيام بذلك ، إما باستخدام ميزات React المضمنة أو باستخدام مكتبة جهة خارجية.
ما هي المكتبة وما هي استخداماتها؟
الرف الدائري هو أحد مكونات عرض الشرائح الذي يسمح لك بالتنقل بين الصور أو مقاطع الفيديو. يتم استخدامه بشكل شائع على مواقع الويب لعرض المنتجات أو الخدمات أو لعرض المحتوى المميز. هناك العديد من الفوائد لاستخدام الرف الدائري ، مثل:
- إنها طريقة فعالة لجذب الانتباه إلى المحتوى المهم.
- إنها طريقة رائعة لعرض صور ومقاطع فيديو متعددة.
- يساعد في الحفاظ على الصفحة منظمة وجذابة بصريًا.
- يمكنك استخدامه لإنشاء تجربة مستخدم تفاعلية.
كيفية إنشاء مكتبة في React.js
يعد إنشاء مكتبة في React.js أمرًا سهلاً نسبيًا وهناك مكتبتان شائعتان يمكنك استخدامهما. يمكنك أيضًا استخدام ميزات React المضمنة لإضافة دائرة.
استخدام الميزات المضمنة
الطريقة الأولى لإنشاء مكتبة في React.js هي الاستفادة من الميزات المضمنة. يوفر React طريقة فعالة لإنشاء دائرة باستخدام المكونات. أنت تستطيع استخدام خطافات React لإضافة دائرة عرض الصور والتحكم فيها.
يستورد رد فعل ، {useState} من 'تتفاعل'؛مقدار ثابت دائري = () => {
مقدار ثابت [index، setIndex] = useState (0);
مقدار ثابت الطول = 3;
مقدار ثابت السابق = () => {
مقدار ثابت newIndex = الفهرس - 1;
setIndex (newIndex < 0? الطول - 1: مؤشر جديد) ؛
};
مقدار ثابت handleNext = () => {
مقدار ثابت newIndex = الفهرس + 1;
setIndex (newIndex >= الطول؟ 0: newIndex) ؛
};
يعود (
<div className ="دائري">
<زر onClick = {handlePrevious}>سابق</button>
<زر onClick = {handleNext}>التالي</button>
<ص>{فِهرِس}</ ص>
</div>
);
};
يصدّرتقصير دائري.
يستخدم هذا الرمز الخطاف useState لإنشاء متغير حالة يسمى index. سيؤدي هذا إلى تتبع الموضع الحالي في الرف الدائري.
تهتم الدالتان handle Previous و handleNext بتحديثات قيمة الفهرس عندما ينقر المستخدم على ملف سابق و التالي أزرار.
أخيرًا ، تعرض العلامة قيمة الفهرس في علامة فقرة. يمكنك عرض الصور أو مقاطع الفيديو بدلاً من النص إذا كنت تريد ذلك. يمكنك أيضًا تصميم الشكل الدائري باستخدام CSS العادي أو باستخدام إطار عمل CSS مثل Tailwind CSS.
بدون أي تصميم رائع ، يجب أن ترى زوجًا أساسيًا من الأزرار ورقمًا يمثل الفهرس الحالي:
استخدام مكتبة نقية التفاعل الدائري
الطريقة الثانية لإنشاء مكتبة دائرية في React.js هي مكتبة نقية التفاعل الدائري. توفر هذه المكتبة طريقة فعالة لإنشاء دائرة باستخدام المكونات. لاستخدام المكتبة ، تحتاج أولاً إلى تثبيتها باستخدام الأمر:
npm ثَبَّتَ نقي-رد فعل-دائريبمجرد تثبيت المكتبة ، يمكنك استخدام المكون لإنشاء مكتبة. في ما يلي مثال على كيفية استخدام مكوِّن الرف الدائري:
يستورد تتفاعل من 'تتفاعل'؛
يستورد {CarouselProvider ، Slider ، Slide ، ButtonBack ، ButtonNext} من "نقي-رد فعل-دائري" ؛
يستورد 'نقي-رد فعل-دائري / dist / رد فعل carousel.es.css';مقدار ثابت دائري = () => {
يعود (
<مزود الرف الدائري
naturalSlideWidth = {100}
naturalSlideHeight = {120}
totalSlides = {3}
>
<المنزلق>
<فهرس الشرائح = {0}>شريحة 1</Slide>
<فهرس الشرائح = {1}>شريحة 2</Slide>
<فهرس الشرائح = {2}>شريحة 3</Slide>
</Slider>
<زر العودة>خلف</ButtonBack>
<زر>التالي</ButtonNext>
</CarouselProvider>
);
};
يصدّرتقصير دائري.
في هذا الرمز ، يمكنك أن ترى أن مكون CarouselProvider يحدد الإعدادات العامة للعرض الدائري مثل naturalSlideWidth و naturalSlideHeight و totalSlides.
يحتوي مكون Slider على العديد من مثيلات الشرائح. يحدد مكون الشرائح كل شريحة على حدة.
أخيرًا ، تتعامل مكونات ButtonBack و ButtonNext مع التنقل الدائري.
هناك العديد من الفوائد لاستخدام مكتبة Pure-React-carousel مثل:
- سهل الاستخدام: بينما تتطلب الطريقة المضمنة المزيد من التعليمات البرمجية لإنشاء دائرة ، توفر المكتبة طريقة أسهل لإنشاء دائرة في React.js.
- متجاوب: توفر المكتبة القدرة على إنشاء دوارات متجاوبة. باستخدام الطريقة المدمجة ، سيتعين عليك إنشاء دائرة منفصلة لأحجام الشاشات المختلفة.
- التخصيص: توفر المكتبة العديد من الميزات التي يمكنك استخدامها لتخصيص الرف الدائري مثل التشغيل التلقائي وأسهم التنقل وترقيم الصفحات والمزيد.
استخدام مكتبة المتفاعلة المستجيبة
الطريقة الأخيرة لإنشاء مكتبة دائرية في React.js هي مكتبة المتفاعلات المتجاوبة. باستخدام هذه المكتبة ، يمكنك إنشاء دائرة باستخدام المكونات. لاستخدام المكتبة ، تحتاج أولاً إلى تثبيتها باستخدام الأمر:
npm ثَبَّتَ تفاعل-مستجيب-دائريبمجرد تثبيت المكتبة ، يمكنك استخدام المكون لإنشاء مكتبة. فيما يلي مثال على كيفية استخدام مكوِّن الرف الدائري:
يستورد تتفاعل من 'تتفاعل'؛
يستورد {رف دائري} من "تفاعل-مستجيب-دائري" ؛
يستورد 'تفاعل-مستجيب-دائري / ليب / أنماط / carousel.min.css';مقدار ثابت CarouselPage = () => {
يعود (
<دائري>
<شعبة>
<img src ="https://placehold.co/100x100" />
<ص className ="أسطورة">أسطورة 1</ ص>
</div>
<شعبة>
<img src ="https://placehold.co/200x200" />
<ص className ="أسطورة">أسطورة 2</ ص>
</div>
<شعبة>
<img src ="https://placehold.co/300x300" />
<ص className ="أسطورة">أسطورة 3</ ص>
</div>
</Carousel>
);
};
يصدّرتقصير كاروسيلباج
في هذه الشفرة ، يمكنك أن ترى أن مكوِّن الرف الدائري يعرّف المكتبة. داخل مكوِّن الرف الدائري ، يحتوي div على كل شريحة فردية. يمكن أن تحتوي كل شريحة على صورة بالإضافة إلى وسيلة إيضاح لتلك الصورة. توفر المكتبة أيضًا مجموعة من الخيارات والإعدادات التي يمكنك استخدامها لتخصيص الرف الدائري.
هناك العديد من الفوائد لاستخدام مكتبة تفاعلية متجاوبة مع مكتبة دائرية مثل:
- من أشهر المكتبات: المكتبة هي واحدة من أكثر المكتبات شيوعًا لإنشاء الدوارات في React.js. لذلك ، إذا واجهتك مشكلة ، يمكنك بسهولة العثور على مساعدة من المجتمع.
- سهل الاستخدام: باستخدام بضعة أسطر فقط من التعليمات البرمجية ، يمكنك بسهولة إنشاء مكتبة.
- متجاوب: توفر المكتبة القدرة على إنشاء دوارات متجاوبة.
- التخصيص: توفر المكتبة أيضًا العديد من الميزات التي يمكنك استخدامها لتخصيص الدوارات وتصميمها.
تحسين تجربة المستخدم باستخدام الرف الدائري
باستخدام الرف الدائري ، يمكنك توفير المزيد من المعلومات للمستخدمين ومساعدتهم على التفاعل مع موقع الويب الخاص بك بسهولة أكبر. تساعد الدوارات أيضًا في الحفاظ على الصفحة منظمة وجذابة بصريًا. نتيجة لذلك ، إنها طريقة رائعة لتحسين تجربة المستخدم.
يمكنك أيضًا تتبع تفاعل المستخدم مع الدوارات الخاصة بك واستخدام البيانات لتحسين تجربة المستخدم. سيساعدك هذا على إنشاء تجربة مستخدم أفضل على موقع الويب الخاص بك. بعد ذلك ، يمكنك نشر تطبيق React الخاص بك مجانًا على منصات مثل صفحات Github وهو سهل وفعال من حيث التكلفة.
