Up next in 10
Adding React Toastify to Codeswear.com _ NextJs Tutorial for Beginners #52
7 views
Feb 13, 2024
"Adding React Toastify to Codeswear.com" is the 52nd tutorial in the "NextJs Tutorial for Beginners" series. In this video, viewers will learn how to enhance user experience on the Codeswear.com website by integrating React Toastify, a popular notification library. The tutorial focuses on frontend development techniques within Next.js, emphasizing the implementation of toast notifications to provide feedback to users during various interactions. It may cover topics such as installation and setup of React Toastify, customization of notification messages, and triggering notifications in response to user actions, such as adding items to the cart or completing a purchase. Additionally, the tutorial might explore advanced features of React Toastify, such as positioning, animation, and handling different types of notifications. By following along with this tutorial, beginners can gain practical experience in improving usability and engagement in their Next.js applications through the use of toast notifications.
View Video Transcript
0:00
अपनी e-commerce website में हमें बहुत बार user को alert देना होग��
0:03
हमें बताना होगा कि उनका pin code serviceable नहीं है हमें बताना होगा कि उनके login credentials सही नहीं ह��
0:08
कभी-कभी हमें बताना होगा कि जो उनकी cart value है वो change हो चुकी है क्योंकि कुछ prices items के change हो गए ह��
0:14
यह सारा का सारा काम कराने के लिए हम लोग यूज़ करने वाले हैं ए��
0:22
यूज करते हैं तो ये लाइब्रेरी काफी काम की है क्योंकि सिम्पल से सेट अप है और आपको भी देखकर इसको बहुत मज़ा आने वाला है क्योंकि दो लाइन्स आफ कोड है बस एक तो आप कंटेनर डालते हैं और उसके बाद इनवोक करते हैं उस कंटेनर को और बाकी सार��
0:52
लेट्स गेट स्टार्टेड लुट लोग यान डेब लिखकर सबसे पहले क्विक प्रॉग्रेस चेक कर लेते हैं कहां तक हम लो��
1:07
पहुंचे कहां तक पहुंचे कोड्स डॉट को अगर आप लोगों ने नेक्स्ट जीएस की प्ले लिस्ट एक्सेस नहीं करिए सबसे पहल��
1:22
आप लोग टीशर्ट पेज हमारा ऐसे है, हम किसी भी टीशर्ट को ऐसे व्यू कर सकते हैं, साइज चेंज कर सकते हैं
1:26
बहुत बढ़िया, एक चीज मैं करना चाहूँगा, अगर मान लो, मैं यहाँ पर add to cart करता हूँ
1:31
ठीक है, तो मैं यह चाहूँगा, कि मेरा एक notification आया और वो लिखकर ये आये कि item added to cart ठीक है कुछ इस तरह से लिखकर आया और उसके लिए एक बहुत ही लाजवाब बहतरी library है उसका नाम है react toastify ठीक है तो मैं यहाँ पर react toastify को search करूँगा और बहुत ही simple से installation है इसका copy paste installation है यार इसका मैं यहाँ पर इसको copy करू��
2:03
और यह जो है एड हो जाएगी मेरी डिएट टोस्ट फाइड और आप लोगों यहां पर में जल्दी से दिखा दूं कि यह का��
2:09
करते ही क्या होगा कि यह हो रिएंस्टॉल अभी अ जब तक इंस्टॉल हो रही है मैं आपको जल्दी से दिखाता हूं क��
2:16
इस्तेमाल किस तरह से करना है तो basically हमें करना क्या है सबसे पहले एक बहुत ही basic स��
2:21
usage देखेंगे इसका मैं यह दोनों imports को लगाऊंगा और जो मेरा slug वाला page है slug.js मैं उसके अंद��
2:28
करूंगा? मैं ऊपर आता हूँ और यहाँ पर स्लग डॉट जेस में ये दोनों चीजे मैंने पेस्ट कर द��
2:33
हैं. अब जल्दी से यान डेब रन करके ये देख लेता हूँ कि कही कोई एरर तो नहीं आ रहा आ रहा है मैं अपने पेज को bedelec पा रहा हूं ना कोई दिक्कत तो ऐसी नहीं आ रही है तो मैंने पेज को लो��
2:41
किया तो इमेज का गया मैंने होकर तो यहां पर क्या था कि जो इमेज है इस कलर की वह शायद मैंने ठीक से नही��
2:48
error fix notification
3:02
एक टोस्ट दूंगा ठीक है तो मैं इसको कॉपी करता हूं और यहां पर डिग्री यहीं पर मुझे बताइए यह बहुत ह��
3:08
घटिया तरीका है टोस्ट दिखाने का पर सीधा यहीं पर मैं इसको पेश करूंगा वाओ सो इजी और इसको मैं रिलोड करूंग��
3:15
तो कहीं ना कहीं टोस्ट आना चाहिए और नहीं आया what is the reason कि यह नहीं आय��
3:19
यहाँ पर यह कह रहा है कि cannot read properties of null reading title
3:25
यह क्या दिक्कत आ रही है मैंने इसको reload किया cannot read properties of null title
3:32
तो यह जो product है slug से product मिल नहीं रहा है इसको शायद यह दिक्कत ह��
3:36
ऐसा हो क्यों रहा है पहले मुझे देखना होगा तो मैं कोड से पर होम पेज पर आ गया टीशर्ट पेज पर आया यहा��
3:42
पर आया और अगर मैं यह एम पर जाऊं और इसको एड टू काट करूं तो यह एमरेड एड भी हो जा रही है बट यहां प��
3:50
दिखा रहा है यह क्या रख कि वन थर्टी फन फिटी थ्री फिटी टू पर अ 153 पर एक एरर है वेडिंट्स एग्जूल टू त��
3:59
यह कहा रहा है कि कैनोट रिपोर्टीस टाइटल का और कोई प्रोडक्ट है ही नहीं ऐसा कुछ बता रहा है तो यह थोड़��
4:05
बगभागी के बाद मैं समझ गया दिक्कत क्यों आ रही है अगर मैं यहां पर इमेज ठीक कर दूंगा तो यह सही हो जाएगा और उसक��
4:09
रीजन में बताता हूं क्या है उसका रीजन यह है कि जब मैं इस इमेज को फेच करने की कोशिश कर रहा हूं तो यह बत��
4:15
इस विकल्प को इसको कॉपी करूंगा और कॉपी करने के बाद मुझे क्या करना है सिंपली अपने मांगो में ठी��
4:35
कर दे रहा है इस चीज को ठीक है तो जहां जहां मैंने फालतु लिंक्स डाले हुए हैं वहां पर मुझे अपडेट करन��
4:40
आप यह नहीं आएगा आई गैरेंटी यू नहीं आएगा ठीक है वह गैरेंटी किसी चीज की नहीं होती वह यह वेरियं��
4:46
अड़ा देता हूं तो अर्न नहीं आया ठीक है सेव किया मैंने रिलोड किया यह क्या हुआ वेजेंस नोट डिफाइन य��
4:52
बैक स्पेस सेव ठीक है अब हो जाएगा डिफाइन वेरियंट में रिलोड करूंगा तो हां ठीक है तो अब मैं चाहत��
4:59
हूं मैं इसको रिलोड करूं तो यहां पर मुझे टोस्ट देखने को मिले तो मैं यूज एफेक्ट के अंदर दिखाऊंग��
5:03
जरिसली ऐसे मैं शायद नहीं कर सकता इसको टोस्ट कंटेनर टोस्ट होगे तो मुझे टोस्ट कंटेनर भी डालन��
5:10
पड़ेगा ठीक है तो मैं यूज एज को ठीक से देख लेता हूं कहां पर आएगा टोस्ट भी मुझे बताना पड़ेगा तो मै��
5:16
पोस्ट कंटेनर भी डालना होगा मैं काम करता हूं सेक्शन के अंदर डालता हूं यहां पर ठीक है और अब देखत��
5:23
हूं यहां पर पर रिलोड करूं तो यह देखो वाउस तो ईजी चार बार आ रहा है चार बार यह आ रहा है यह चार बार क्यो��
5:30
रहा है वह सो इजी ओके तो यह चार बार आ रहा है में भी बिकॉज यह जो हमारा टू वाला फंक्शन है यह इसक��
5:39
चार बार दिखा रहा है तो चार बार आ रहा है तो मैं क्या करूंगा इसको चेक सर्विसेबिलिटी फंक्शन के लिए डाल दूंगा grandmother
6:00
यार यह चीज बहुत बढ़िया आप देख सकते हो फेचिंग और पिन कोट और चला जाएगा ऑटोमेटिकली ठीक है और मैं इसक��
6:07
कस्टमाइज कर सकता हूं टीएक्ट टोस्टी फाइड में दिखाता हूं यहां पर डेमो इस वर्ड थाउसेंड वर्ड्स गिटफ़ प��
6:13
देखो यहाँ पर एक बहुत बढ़ी ऐड्स का डैमो पेज दिया हुआ जो कि मुझे बहुत बढ़ीया लग रहा है ठीक है अब देखो इसमें दो पार्ट्स है एक है टोस्ट कंटेनर एक है टोस्ट एमिटर ठीक है टोस्ट कंटेनर जो है वो किस तरह से दिखाया जाएगा ��
6:43
इसको कर दूंगा तो यह ऐसा दिखेगा देखो तो मैं इसको लाइट रहने दूंगा और डिलेज शायद मैं सिर्��
6:48
दीन सेकंड का रखूं मुझे पांच सेकंड थोड़े ज्यादा लगते हैं ठीक है तो यह इस तरह से आ जाएगा अग��
6:53
इसको बॉटम सेंटर करूंगा तो यह कुछ ऐसे दिखेगा ठीक है ऐसा फ्लिप कार्ड पर आता है अच्छी लिए ठीक है त��
7:00
मैं काम करूंगा कि इसको टोस्ट कंटेनर को यहां पर इस तरह से कॉपी करूंगा ठीक है और यहां पर मैं फैचिं��
7:09
पिन कोड की जगह लिखूंगा कि आपका पिन कोड सर्वेसेबल है की नहीं है ठीक है तो जो मेरा टोस्ट कंटेनर है वो यहां पर आ जाएगा ठीक है इसको मैं राइटली करके फॉरमेट डॉक्यूमेंट कर लूंगा और यहां पर 3000 और बागी सब चीजें जो है मैंने वैसे ��
7:39
इसको पेस्ट कर दूंगा ठीक है और यहां पर बाव सो इजी की जगह पर मैं लिखूंगा यॉर पिन कोड इस सर्विसेबल ठी��
7:49
है और यहां पर मैं लिख दूंगा नीचे सॉरी और पिन कोड इस टॉट सर्विसेबल और यह पर टोट सक्सेस की जगह मे��
7:55
टोस टॉट एरर को यूज करूंगा सॉरी भी कह दूंगा यहां से कि माफी चाहता हूं सॉरी यॉर पिन कोड इस नॉ��
8:03
रिसर्वेसेबल टोस टॉट एरर सेव किया अमार्डो मैं यहां पर डालता हूं 45 पिन कोड चेक करूंगा सॉरी पि��
8:11
पिन कोट नॉट सर्वेसेबल ठीक है पिन कोट नॉट सर्वेसेबल ठीक है रिलोड करूंगा कुछ भी लिखकर चेक करूंग��
8:26
सॉरी पिन को डॉट सर्वेसेबल अब एक सर्वेसेबल पिन को डाल देता हूं 721302 शायद यह सर्वेसेबल थ��
8:32
आज यह पिंपल सर्विसेबल ठीक है तो यह इस तरह के टोस्ट वगैरह दिखा रहा है अब देखो डिपेंडिंग अपन��
9:19
लाइट कर सकता हूं कुछ इस तरह से ठीक है तो जून कर सकता हूं यह कुछ इस तरह से आएगा फिर ठीक है फ्लि��
9:25
कर सकता हूं फ्लिप में इस तरह से आएगा यह ठीक है और बाउंस में कुछ इस तरह से आएगा ठीक है और अगर मैं इसक��
9:32
बॉटम लेफ्ट करता हूं तो यह कुछ इस तरह से आएगा ठीक है तो इसकी पोजीशन में कई भी लगा सकता हूं मै��
9:37
चेंज भी कर सकता हूं कोट्सवेयर पर इस चीज को ठीक है जिसमें आपको बताना चाहता है यह काम मैं कैसे क��
9:41
तो मैंने चेक किया तो यह कह रहा है sorry pin code not serviceable ठीक है और इस तरह की चीज़ें हम लोग ऐसे दिखा सकते हैं I hope आप लोग को समझ में आई है चीज़ और किस तरह से अगर मैं यहाँ पर लिख दूँ 721302 success दिखेगा यह भी आप लोग को समझ में आग़े अब मैं क्या करूँ��
10:11
इसे बहुत सुबह इजी इस तरह से चाहिए बॉटम राइट से चाहिए मालो बॉटम राइट पर चाहिए और पर अपने आप प्रोग्रे��
10:16
वगैरह सब चीजें करने के बाद मैं ऐसे कर लूंगा ठीक है तो यहां पर प्रॉब्लमेंस पेंडिंग देखो लिखकर ��
10:22
जैसे प्रॉमिस रिजॉल्व हो जाएगा यह ऐसे हो जाएगा ठीक है तो बहुत अच्छी चीजें इसमें अगर मैंने यहां प��
10:28
इसको मैं बन करता हूं अब गेट पर क्लिक करता हूं तो अगर पर कुछ क्यों नहीं हो रहा है अब गेट पर कुछ क्यो��
10:33
अब देख रहे हैं तो यह तो यहां पर मैं ज्यादा टेंशन ना लेते हुए इसको सिर्फ इतना ही रखूंगा अभी औ��
10:55
अब बाद में हम लोग जो है यह इसको अपने हिसाब से चेंज कर देंगे इसकी फॉर्ट वगैरह चेंज की जा सकती है तो कोई उतन��
11:02
जरह टेंशन है नहीं ठीक है तो अब मैं क्या करूंगा आने वाले वीडियोस में आप लोगों को दिखाऊंगा कि इस तरह स��
11:07
पेजेस पढ़े हुए ऐसे के ऐसे ही डमी पेजेस इनको भी डेटाविस्ट से कनेक्ट करेंगे हम लोग आने वाल��
11:12
वीडियोस में तो यह नेक्स्ट जीएस की फ्लेलिस अगर आप लोगों ने एक्सेस नहीं करी है तो जरूर से कर लेना अभ��
11:16
इस वीडियो में इतना है गाइस थैंक यू सो मज़ गाइस वॉचिंग इस वीडियो एंड आवल सी यू नेक्स्ट टाइम ��