React.js यूजर इंटरफेस बनाने के लिए एक लोकप्रिय और शक्तिशाली जावास्क्रिप्ट लाइब्रेरी है। आप इसका उपयोग गतिशील, इंटरैक्टिव और उत्तरदायी वेब एप्लिकेशन बनाने के लिए कर सकते हैं।
React.js के साथ आप जिन सामान्य घटकों का उपयोग कर सकते हैं उनमें से एक हिंडोला है। यह करना आसान है, या तो बिल्ट-इन रिएक्ट सुविधाओं के साथ या तीसरे पक्ष के पुस्तकालय का उपयोग करके।
हिंडोला क्या है और इसके क्या उपयोग हैं?
हिंडोला एक स्लाइड शो घटक है जो आपको छवियों या वीडियो के माध्यम से साइकिल चलाने की अनुमति देता है। यह आमतौर पर वेबसाइटों पर उत्पादों या सेवाओं को प्रदर्शित करने या विशेष रुप से प्रदर्शित सामग्री दिखाने के लिए उपयोग किया जाता है। कैरोसल का उपयोग करने के कई लाभ हैं, जैसे:
- यह महत्वपूर्ण सामग्री पर ध्यान आकर्षित करने का एक प्रभावी तरीका है।
- यह कई छवियों और वीडियो को प्रदर्शित करने का एक शानदार तरीका है।
- यह पेज को व्यवस्थित और देखने में आकर्षक बनाए रखने में मदद करता है।
- आप इसका उपयोग इंटरैक्टिव उपयोगकर्ता अनुभव बनाने के लिए कर सकते हैं।
React.js में कैरोसेल कैसे बनाएं
React.js में एक हिंडोला बनाना अपेक्षाकृत आसान है और दो लोकप्रिय लाइब्रेरी हैं जिनका आप उपयोग कर सकते हैं। हिंडोला जोड़ने के लिए आप बिल्ट-इन रिएक्ट सुविधाओं का भी उपयोग कर सकते हैं।
अंतर्निहित सुविधाओं का उपयोग करना
React.js में हिंडोला बनाने का पहला तरीका अंतर्निहित सुविधाओं का उपयोग करना है। रिएक्ट घटकों का उपयोग करके हिंडोला बनाने का एक शक्तिशाली तरीका प्रदान करता है। तुम कर सकते हो रिएक्ट हुक का उपयोग करें एक हिंडोला जोड़ने और नियंत्रित करने के लिए।
आयात प्रतिक्रिया, {useState} से 'प्रतिक्रिया';कॉन्स्ट हिंडोला = () => {
कॉन्स्ट [इंडेक्स, सेटइंडेक्स] = यूज़स्टेट (0);
कॉन्स्ट लम्बाई = 3;
कॉन्स्ट संभाल पिछला = () => {
कॉन्स्ट न्यूइंडेक्स = इंडेक्स - 1;
सेटइंडेक्स (नया इंडेक्स < 0? लंबाई - 1: नया इंडेक्स);
};
कॉन्स्ट संभाल अगला = () => {
कॉन्स्ट न्यूइंडेक्स = इंडेक्स + 1;
सेटइंडेक्स (नया इंडेक्स >= लंबाई? 0: न्यूइंडेक्स);
};
वापस करना (
<डिव क्लासनाम ="हिंडोला">
<बटन ऑनक्लिक = {हैंडलपिछला}>पहले का</button>
<बटन ऑनक्लिक = {हैंडलनेक्स्ट}>अगला</button>
<पी>{अनुक्रमणिका}</पी>
</div>
);
};
निर्यातगलती करना हिंडोला;
यह कोड इंडेक्स नामक स्टेट वैरिएबल बनाने के लिए यूज़स्टेट हुक का उपयोग करता है। यह हिंडोला में वर्तमान स्थिति का ट्रैक रखेगा।
जब उपयोगकर्ता क्लिक करता है तो हैंडलप्रीवियस और हैंडलनेक्स्ट फ़ंक्शंस इंडेक्स वैल्यू के अपडेट का ख्याल रखते हैं पहले का और अगला बटन।
अंत में, मार्कअप एक पैराग्राफ टैग में इंडेक्स वैल्यू प्रदर्शित करता है। आप चाहें तो टेक्स्ट के बजाय चित्र या वीडियो प्रदर्शित कर सकते हैं। आप सामान्य CSS या का उपयोग करके हिंडोला को भी स्टाइल कर सकते हैं Tailwind CSS जैसे CSS फ्रेमवर्क का उपयोग करना.
किसी भी फैंसी स्टाइल के बिना, आपको बटनों की एक मूल जोड़ी और वर्तमान सूचकांक का प्रतिनिधित्व करने वाली संख्या देखनी चाहिए:
प्योर-रिएक्शन-हिंडोला लाइब्रेरी का उपयोग करना
React.js में हिंडोला बनाने का दूसरा तरीका प्योर-रिएक्शन-कैरोसेल लाइब्रेरी है। यह लाइब्रेरी घटकों का उपयोग करके कैरोसल बनाने का एक सशक्त तरीका प्रदान करती है. लाइब्रेरी का उपयोग करने के लिए, आपको पहले इसे कमांड का उपयोग करके इंस्टॉल करना होगा:
NPM स्थापित करना शुद्ध-प्रतिक्रिया-हिंडोलाएक बार जब आप लाइब्रेरी स्थापित कर लेते हैं, तो आप हिंडोला बनाने के लिए घटक का उपयोग कर सकते हैं। यहां कैरोसल घटक का उपयोग करने का एक उदाहरण दिया गया है:
आयात प्रतिक्रिया से 'प्रतिक्रिया';
आयात {कैरोसेलप्रोवाइडर, स्लाइडर, स्लाइड, बटनबैक, बटननेक्स्ट} से 'शुद्ध-प्रतिक्रिया-हिंडोला';
आयात 'शुद्ध-प्रतिक्रिया-हिंडोला/जिला/प्रतिक्रिया-carousel.es.css';कॉन्स्ट हिंडोला = () => {
वापस करना (
<हिंडोला प्रदाता
प्राकृतिकस्लाइडविड्थ={100}
प्राकृतिकस्लाइडहाइट={120}
कुलस्लाइड्स={3}
>
<स्लाइडर>
<स्लाइड अनुक्रमणिका ={0}>स्लाइड 1</Slide>
<स्लाइड अनुक्रमणिका ={1}>स्लाइड 2</Slide>
<स्लाइड इंडेक्स = {2}>स्लाइड 3</Slide>
</Slider>
<बटनबैक>पीछे</ButtonBack>
<बटन अगला>अगला</ButtonNext>
</CarouselProvider>
);
};
निर्यातगलती करना हिंडोला;
इस कोड में, आप देख सकते हैं कि CarouselProvider घटक हिंडोला के लिए सामान्य सेटिंग्स को परिभाषित करता है जैसे कि NaturalSlideWidth, NaturalSlideHeight, और TotalSlides।
स्लाइडर घटक में कई स्लाइड इंस्टेंस होते हैं। स्लाइड घटक प्रत्येक व्यक्तिगत स्लाइड को परिभाषित करता है।
अंत में, ButtonBack और ButtonNext घटक हिंडोला नेविगेशन को संभालते हैं।
शुद्ध-प्रतिक्रिया-हिंडोला पुस्तकालय का उपयोग करने के कई लाभ हैं जैसे:
- प्रयोग करने में आसान: जबकि बिल्ट-इन विधि को हिंडोला बनाने के लिए अधिक कोड की आवश्यकता होती है, लाइब्रेरी React.js में एक हिंडोला बनाने का एक आसान तरीका प्रदान करती है।
- उत्तरदायी: पुस्तकालय उत्तरदायी हिंडोला बनाने की क्षमता प्रदान करता है। बिल्ट-इन पद्धति के साथ, आपको अलग-अलग स्क्रीन आकारों के लिए एक अलग हिंडोला बनाना होगा।
- अनुकूलन: पुस्तकालय कई सुविधाएँ प्रदान करता है जिनका उपयोग आप हिंडोला को अनुकूलित करने के लिए कर सकते हैं जैसे कि ऑटोप्ले, नेविगेशन तीर, पेजिनेशन, और बहुत कुछ।
प्रतिक्रिया-उत्तरदायी-हिंडोला पुस्तकालय का उपयोग करना
React.js में हिंडोला बनाने की अंतिम विधि प्रतिक्रिया-उत्तरदायी-हिंडोला पुस्तकालय है। इस लाइब्रेरी के साथ, आप घटकों का उपयोग करके एक हिंडोला बना सकते हैं। लाइब्रेरी का उपयोग करने के लिए, आपको पहले इसे कमांड का उपयोग करके इंस्टॉल करना होगा:
NPM स्थापित करना प्रतिक्रिया-उत्तरदायी-हिंडोलाएक बार जब आप लाइब्रेरी स्थापित कर लेते हैं, तो आप हिंडोला बनाने के लिए घटक का उपयोग कर सकते हैं। यहां कैरोसल घटक का उपयोग करने का एक उदाहरण दिया गया है:
आयात प्रतिक्रिया से 'प्रतिक्रिया';
आयात {हिंडोला} से 'प्रतिक्रिया-उत्तरदायी-हिंडोला';
आयात 'प्रतिक्रिया-उत्तरदायी-हिंडोला/lib/styles/carousel.min.css';कॉन्स्ट कैरोसेलपेज = () => {
वापस करना (
<हिंडोला>
<डिव>
<आईएमजी एसआरसी ="https://placehold.co/100x100" />
<पी क्लासनाम ="दंतकथा">किंवदंती 1</पी>
</div>
<डिव>
<आईएमजी एसआरसी ="https://placehold.co/200x200" />
<पी क्लासनाम ="दंतकथा">किंवदंती 2</पी>
</div>
<डिव>
<आईएमजी एसआरसी ="https://placehold.co/300x300" />
<पी क्लासनाम ="दंतकथा">किंवदंती 3</पी>
</div>
</Carousel>
);
};
निर्यातगलती करना हिंडोला पृष्ठ;
इस कोड में, आप देख सकते हैं कि हिंडोला घटक हिंडोला को परिभाषित करता है। हिंडोला घटक के अंदर, एक div में प्रत्येक व्यक्तिगत स्लाइड होती है। प्रत्येक स्लाइड में एक छवि के साथ-साथ उस छवि के लिए एक किंवदंती भी हो सकती है। पुस्तकालय कई प्रकार के विकल्प और सेटिंग्स भी प्रदान करता है जिनका उपयोग आप हिंडोला को अनुकूलित करने के लिए कर सकते हैं।
प्रतिक्रिया-उत्तरदायी-हिंडोला पुस्तकालय का उपयोग करने के कई लाभ हैं जैसे:
- सबसे लोकप्रिय पुस्तकालयों में से एक: रिएक्ट.जेएस में हिंडोला बनाने के लिए पुस्तकालय सबसे लोकप्रिय पुस्तकालयों में से एक है। इसलिए, यदि आप फंस गए हैं, तो आप आसानी से समुदाय से सहायता प्राप्त कर सकते हैं।
- प्रयोग करने में आसान: कोड की केवल कुछ पंक्तियों के साथ, आप आसानी से एक हिंडोला बना सकते हैं।
- उत्तरदायी: पुस्तकालय उत्तरदायी हिंडोला बनाने की क्षमता प्रदान करता है।
- अनुकूलन: पुस्तकालय कई सुविधाएँ भी प्रदान करता है जिनका उपयोग आप हिंडोला को अनुकूलित और शैलीबद्ध करने के लिए कर सकते हैं।
हिंडोला के साथ उपयोगकर्ता अनुभव में सुधार करें
कैरोसल के साथ, आप उपयोगकर्ताओं को अधिक जानकारी प्रदान कर सकते हैं और आपकी वेबसाइट के साथ अधिक आसानी से इंटरैक्ट करने में उनकी सहायता कर सकते हैं। हिंडोला पेज को व्यवस्थित और देखने में आकर्षक बनाए रखने में भी मदद करता है। नतीजतन, यह उपयोगकर्ता अनुभव को बेहतर बनाने का एक शानदार तरीका है।
आप अपने हिंडोला के साथ उपयोगकर्ता की बातचीत को भी ट्रैक कर सकते हैं और उपयोगकर्ता अनुभव को अनुकूलित करने के लिए डेटा का उपयोग कर सकते हैं। इससे आपको अपनी वेबसाइट पर एक बेहतर उपयोगकर्ता अनुभव बनाने में मदद मिलेगी। उसके बाद, आप अपने रिएक्ट एप्लिकेशन को जीथब पेज जैसे प्लेटफॉर्म पर मुफ्त में तैनात कर सकते हैं जो आसान और लागत प्रभावी है।