كيفية إنشاء مكتبة تفاعلية في React.js

كيفية إنشاء مكتبة تفاعلية في React.js
القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

React.js هي مكتبة JavaScript شائعة وفعالة لإنشاء واجهات المستخدم. يمكنك استخدامه لبناء تطبيقات ويب ديناميكية وتفاعلية وسريعة الاستجابة.



أحد المكونات الشائعة التي قد تستخدمها مع React.js هو الرف الدائري. من السهل القيام بذلك ، إما باستخدام ميزات React المضمنة أو باستخدام مكتبة جهة خارجية.





اجعل فيديو اليوم

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





  • إنها طريقة فعالة لجذب الانتباه إلى المحتوى المهم.
  • إنها طريقة رائعة لعرض صور ومقاطع فيديو متعددة.
  • يساعد في الحفاظ على الصفحة منظمة وجذابة بصريًا.
  • يمكنك استخدامه لإنشاء تجربة مستخدم تفاعلية.

يعد إنشاء مكتبة في React.js أمرًا سهلاً نسبيًا وهناك مكتبتان شائعتان يمكنك استخدامهما. يمكنك أيضًا استخدام ميزات React المضمنة لإضافة دائرة.

استخدام الميزات المضمنة

الطريقة الأولى لإنشاء مكتبة في React.js هي الاستفادة من الميزات المضمنة. يوفر React طريقة فعالة لإنشاء دائرة باستخدام المكونات. تستطيع استخدام خطافات React لإضافة مكتبة دائرية والتحكم فيها.



import React, { useState } from 'react';

const Carousel = () => {
const [index, setIndex] = useState(0);
const length = 3;

const handlePrevious = () => {
const newIndex = index - 1;
setIndex(newIndex < 0 ? length - 1 : newIndex);
};

const handleNext = () => {
const newIndex = index + 1;
setIndex(newIndex >= length ? 0 : newIndex);
};

return (
<div className="carousel">
<button onClick={handlePrevious}>Previous</button>
<button onClick={handleNext}>Next</button>
<p>{index}</p>
</div>
);
};

export default Carousel;

يستخدم هذا الرمز الخطاف useState لإنشاء متغير حالة يسمى index. سيؤدي هذا إلى تتبع الموضع الحالي في الرف الدائري.

تهتم الدالتان handle Previous و handleNext بتحديثات قيمة الفهرس عندما ينقر المستخدم على ملف سابق و التالي أزرار.





أخيرًا ، تعرض العلامة قيمة الفهرس في علامة فقرة. يمكنك عرض الصور أو مقاطع الفيديو بدلاً من النص إذا كنت تريد ذلك. يمكنك أيضًا تصميم الشكل الدائري باستخدام CSS العادي أو باستخدام إطار عمل CSS مثل Tailwind CSS .

بدون أي تصميم رائع ، يجب أن ترى زوجًا أساسيًا من الأزرار ورقمًا يمثل الفهرس الحالي:





تطبيقات لإرسال الأموال إلى الأصدقاء
  تفاعل مع التطبيق باستخدام الدوارات باستخدام الميزات المضمنة

الطريقة الثانية لإنشاء مكتبة دائرية في React.js هي مكتبة نقية التفاعل الدائري. توفر هذه المكتبة طريقة فعالة لإنشاء دائرة باستخدام المكونات. لاستخدام المكتبة ، تحتاج أولاً إلى تثبيتها باستخدام الأمر:

npm install pure-react-carousel

بمجرد تثبيت المكتبة ، يمكنك استخدام المكون لإنشاء مكتبة. في ما يلي مثال على كيفية استخدام مكوِّن الرف الدائري:

import React from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';

const Carousel = () => {
return (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Slider>
<Slide index={0}>Slide 1</Slide>
<Slide index={1}>Slide 2</Slide>
<Slide index={2}>Slide 3</Slide>
</Slider>
<ButtonBack>Back</ButtonBack>
<ButtonNext>Next</ButtonNext>
</CarouselProvider>
);
};

export default Carousel;

في هذا الرمز ، يمكنك أن ترى أن مكون CarouselProvider يحدد الإعدادات العامة للعرض الدائري مثل naturalSlideWidth و naturalSlideHeight و totalSlides.

يحتوي مكون Slider على العديد من مثيلات الشرائح. يحدد مكون الشرائح كل شريحة على حدة.

أخيرًا ، تتعامل مكونات ButtonBack و ButtonNext مع التنقل الدائري.

  رد فعل التطبيق مع دوارات باستخدام الحزمة

هناك العديد من الفوائد لاستخدام مكتبة Pure-React-carousel مثل:

  • سهل الاستخدام: بينما تتطلب الطريقة المضمنة المزيد من التعليمات البرمجية لإنشاء دائرة ، توفر المكتبة طريقة أسهل لإنشاء دائرة في React.js.
  • متجاوب: توفر المكتبة القدرة على إنشاء دوارات متجاوبة. باستخدام الطريقة المدمجة ، سيتعين عليك إنشاء دائرة منفصلة لأحجام الشاشات المختلفة.
  • التخصيص: توفر المكتبة العديد من الميزات التي يمكنك استخدامها لتخصيص الرف الدائري مثل التشغيل التلقائي وأسهم التنقل وترقيم الصفحات والمزيد.

الطريقة الأخيرة لإنشاء مكتبة دائرية في React.js هي مكتبة المتفاعلات المتجاوبة. باستخدام هذه المكتبة ، يمكنك إنشاء دائرة باستخدام المكونات. لاستخدام المكتبة ، تحتاج أولاً إلى تثبيتها باستخدام الأمر:

npm install react-responsive-carousel

بمجرد تثبيت المكتبة ، يمكنك استخدام المكون لإنشاء مكتبة. فيما يلي مثال على كيفية استخدام مكوِّن الرف الدائري:

import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

const CarouselPage = () => {
return (
<Carousel>
<div>
<img src="https://placehold.co/100x100" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
};

export default CarouselPage;

في هذه الشفرة ، يمكنك أن ترى أن مكوِّن الرف الدائري يعرّف المكتبة. داخل مكوِّن الرف الدائري ، يحتوي div على كل شريحة فردية. يمكن أن تحتوي كل شريحة على صورة بالإضافة إلى وسيلة إيضاح لتلك الصورة. توفر المكتبة أيضًا مجموعة من الخيارات والإعدادات التي يمكنك استخدامها لتخصيص الرف الدائري.

كيفية عرض ملفات .dat
  رد فعل التطبيق مع دوارات باستخدام الحزمة

هناك العديد من الفوائد لاستخدام مكتبة تفاعلية متجاوبة مع مكتبة دائرية مثل:

  • من أشهر المكتبات: المكتبة هي واحدة من أكثر المكتبات شيوعًا لإنشاء الدوارات في React.js. لذلك ، إذا واجهتك مشكلة ، يمكنك بسهولة العثور على مساعدة من المجتمع.
  • سهل الاستخدام: باستخدام بضعة أسطر فقط من التعليمات البرمجية ، يمكنك بسهولة إنشاء مكتبة.
  • متجاوب: توفر المكتبة القدرة على إنشاء دوارات متجاوبة.
  • التخصيص: توفر المكتبة أيضًا العديد من الميزات التي يمكنك استخدامها لتخصيص الدوارات وتصميمها.

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

يمكنك أيضًا تتبع تفاعل المستخدم مع الدوارات الخاصة بك واستخدام البيانات لتحسين تجربة المستخدم. سيساعدك هذا على إنشاء تجربة مستخدم أفضل على موقع الويب الخاص بك. بعد ذلك ، يمكنك نشر تطبيق React الخاص بك مجانًا على منصات مثل صفحات Github وهو سهل وفعال من حيث التكلفة.