React.js में इंटरएक्टिव हिंडोला कैसे बनाएं

React.js में इंटरएक्टिव हिंडोला कैसे बनाएं
आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। अधिक पढ़ें।

React.js यूजर इंटरफेस बनाने के लिए एक लोकप्रिय और शक्तिशाली जावास्क्रिप्ट लाइब्रेरी है। आप इसका उपयोग गतिशील, इंटरैक्टिव और उत्तरदायी वेब एप्लिकेशन बनाने के लिए कर सकते हैं।





React.js के साथ आप जिन सामान्य घटकों का उपयोग कर सकते हैं उनमें से एक हिंडोला है। यह करना आसान है, या तो बिल्ट-इन रिएक्ट सुविधाओं के साथ या तीसरे पक्ष के पुस्तकालय का उपयोग करके।



दिन का वीडियो

हिंडोला एक स्लाइड शो घटक है जो आपको छवियों या वीडियो के माध्यम से साइकिल चलाने की अनुमति देता है। यह आमतौर पर वेबसाइटों पर उत्पादों या सेवाओं को प्रदर्शित करने या विशेष रुप से प्रदर्शित सामग्री दिखाने के लिए उपयोग किया जाता है। कैरोसल का उपयोग करने के कई लाभ हैं, जैसे:





  • यह महत्वपूर्ण सामग्री पर ध्यान आकर्षित करने का एक प्रभावी तरीका है।
  • यह कई छवियों और वीडियो को प्रदर्शित करने का एक शानदार तरीका है।
  • यह पेज को व्यवस्थित और देखने में आकर्षक बनाए रखने में मदद करता है।
  • आप इसका उपयोग इंटरैक्टिव उपयोगकर्ता अनुभव बनाने के लिए कर सकते हैं।

React.js में एक हिंडोला बनाना अपेक्षाकृत आसान है और दो लोकप्रिय लाइब्रेरी हैं जिनका आप उपयोग कर सकते हैं। हिंडोला जोड़ने के लिए आप बिल्ट-इन रिएक्ट सुविधाओं का भी उपयोग कर सकते हैं।

अंतर्निहित सुविधाओं का उपयोग करना

React.js में हिंडोला बनाने का पहला तरीका अंतर्निहित सुविधाओं का उपयोग करना है। रिएक्ट घटकों का उपयोग करके हिंडोला बनाने का एक शक्तिशाली तरीका प्रदान करता है। तुम कर सकते हो रिएक्ट हुक का उपयोग करें एक हिंडोला जोड़ने और नियंत्रित करने के लिए।



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;

यह कोड इंडेक्स नामक स्टेट वैरिएबल बनाने के लिए यूज़स्टेट हुक का उपयोग करता है। यह हिंडोला में वर्तमान स्थिति का ट्रैक रखेगा।

जब उपयोगकर्ता क्लिक करता है तो हैंडलप्रीवियस और हैंडलनेक्स्ट फ़ंक्शंस इंडेक्स वैल्यू के अपडेट का ख्याल रखते हैं पिछला तथा अगला बटन।



मेरे पास कुत्ते कहाँ से खरीदें

अंत में, मार्कअप एक पैराग्राफ टैग में इंडेक्स वैल्यू प्रदर्शित करता है। आप चाहें तो टेक्स्ट के बजाय चित्र या वीडियो प्रदर्शित कर सकते हैं। आप सामान्य CSS या का उपयोग करके हिंडोला को भी स्टाइल कर सकते हैं Tailwind CSS जैसे 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।

स्लाइडर घटक में कई स्लाइड इंस्टेंस होते हैं। स्लाइड घटक प्रत्येक व्यक्तिगत स्लाइड को परिभाषित करता है।

अंत में, ButtonBack और ButtonNext घटक हिंडोला नेविगेशन को संभालते हैं।

पैकेज का उपयोग करके हिंडोला के साथ प्रतिक्रिया ऐप

शुद्ध-प्रतिक्रिया-हिंडोला पुस्तकालय का उपयोग करने के कई लाभ हैं जैसे:

  • प्रयोग करने में आसान: जबकि बिल्ट-इन विधि को हिंडोला बनाने के लिए अधिक कोड की आवश्यकता होती है, लाइब्रेरी 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 में प्रत्येक व्यक्तिगत स्लाइड होती है। प्रत्येक स्लाइड में एक छवि के साथ-साथ उस छवि के लिए एक किंवदंती भी हो सकती है। पुस्तकालय कई प्रकार के विकल्प और सेटिंग्स भी प्रदान करता है जिनका उपयोग आप हिंडोला को अनुकूलित करने के लिए कर सकते हैं।

पैकेज का उपयोग करके हिंडोला के साथ प्रतिक्रिया ऐप

प्रतिक्रिया-उत्तरदायी-हिंडोला पुस्तकालय का उपयोग करने के कई लाभ हैं जैसे:

  • सबसे लोकप्रिय पुस्तकालयों में से एक: रिएक्ट.जेएस में हिंडोला बनाने के लिए पुस्तकालय सबसे लोकप्रिय पुस्तकालयों में से एक है। इसलिए, यदि आप फंस गए हैं, तो आप आसानी से समुदाय से सहायता प्राप्त कर सकते हैं।
  • प्रयोग करने में आसान: कोड की केवल कुछ पंक्तियों के साथ, आप आसानी से एक हिंडोला बना सकते हैं।
  • उत्तरदायी: पुस्तकालय उत्तरदायी हिंडोला बनाने की क्षमता प्रदान करता है।
  • अनुकूलन: पुस्तकालय कई सुविधाएँ भी प्रदान करता है जिनका उपयोग आप हिंडोला को अनुकूलित और शैलीबद्ध करने के लिए कर सकते हैं।

कैरोसल के साथ, आप उपयोगकर्ताओं को अधिक जानकारी प्रदान कर सकते हैं और आपकी वेबसाइट के साथ अधिक आसानी से इंटरैक्ट करने में उनकी सहायता कर सकते हैं। हिंडोला पेज को व्यवस्थित और देखने में आकर्षक बनाए रखने में भी मदद करता है। नतीजतन, यह उपयोगकर्ता अनुभव को बेहतर बनाने का एक शानदार तरीका है।

आप अपने हिंडोला के साथ उपयोगकर्ता की बातचीत को भी ट्रैक कर सकते हैं और उपयोगकर्ता अनुभव को अनुकूलित करने के लिए डेटा का उपयोग कर सकते हैं। इससे आपको अपनी वेबसाइट पर एक बेहतर उपयोगकर्ता अनुभव बनाने में मदद मिलेगी। उसके बाद, आप अपने रिएक्ट एप्लिकेशन को जीथब पेज जैसे प्लेटफॉर्म पर मुफ्त में तैनात कर सकते हैं जो आसान और लागत प्रभावी है।