Up next in 10
Sticky Navbar & NewsMonkey bug fixes _ Complete React Course in Hindi #40
208 views
Feb 11, 2024
In the 40th episode of the "Complete React Course in Hindi," the tutorial dives into two essential topics – implementing a sticky navbar and addressing bug fixes in the NewsMonkey React App. The video provides a comprehensive guide on creating a navbar that remains fixed at the top of the page, enhancing navigation for users. Additionally, the instructor walks viewers through the process of identifying and fixing bugs within the application, showcasing effective debugging techniques. Whether you're a React developer seeking to improve user interface elements or someone keen on refining your debugging skills, this tutorial offers practical insights and hands-on demonstrations to elevate your proficiency in building and troubleshooting React applications.
View Video Transcript
0:00
अपने विश्ले वीडियो में हम लोगों ने देखा कि किस तरह से हम लोग अपनी NewsMonkey application क�
0:05
refactor करेंगे और इसके जो class based components उनको function based components बनाएंग�
0:10
आज के इस वीडियो में हम लोग एक तो suggestion incorporate करेंगे अभिजीत सोना वाने क�
0:15
ने आरे एक बड़ी इच्छी सजेशन दी, ने कहा कि या नैव बार को स्टिकी कर दो, बिकोस अगर कोई बंदा स्क्रॉल करता है न्यूज में, और वो बहुत नीचे आ जाता है
0:21
तो उसको वापस से category change करने में time लगेगा that makes total sense इनके कहने का यहाँ पर मतलब यह ह�
0:27
कि यह जो application है news monkey इसको अगर मैं scroll करता हूँ तो देख�
0:31
navbar यहाँ पर चिपका हुआ नहीं अगर यह navbar को मैं किसी तरह से sticky बना दू�
0:34
यानि कि मैं इसको चिपका दूँ at the top और मैं स्क्रॉल करूँ तो यह नाव बार यहीं के यहीं रहेगा और यूजर को न्यूस क्रॉल होते हुए मिल जाएगी और एट एनी पॉइंट वह क्लिक कर सकता है वापस से नाव बार की किसी Insight गई मैं वोट एमीन बाय दिस इस कि अगर मुझे यहां पर नीचे से वापस �
1:06
बार डोट जेस के अंदर एक क्लास हैट करेंगे फिक्स टॉप अभी एक बूटस्ट्राइप की क्लास होती है और इसके अंदर क्या-क्य�
1:12
आता है भी मैं आपको बताऊंगा उससे पहले हम लोग इसका यूज देख लेते हैं इसको नवार ऊपर चिपका हुआ है तो य�
1:18
एक अच्छा ऑप्शन है कि अगर मैं आप पर टेकनोलॉजी पर क्लिक करूं या साइंस पर क्लिक करूं तो बड़े आराम से मै�
1:23
काम कर सकता हूं ठीक है मैं इसको रिलोड कर देता हूं दोबारा से और आप लोग देखो इसको मैं रिलोड करूंग�
1:28
तो यहां पर यह चिपका हुआ है बट अभी एक प्रॉब्लम यह आ रही है कि यह जो न्यूज बंग की है इस पर मुझ�
1:32
टॉप से थोड़ी सी मार्जिन ठीक करनी है तो मैं क्या करूँगा कि जो H1 है इसमें मार्जिन टॉप दूँग�
1:37
ठीक है तो मैं इसकी मार्जिन टॉप जो है वो भी सेट कर दूँगा और वो मैं कर दूँग�
1:42
लेटर से 45 पिक्सल 45 कम पढ़ रही है थोड़ी सी और बढ़ाते है�
1:46
I think 90 should be fine ठीक है round figure में रखता हूँ margin top को 90 pixel करना है यहाँ प�
1:51
H1 की ठीक है और वो है मेरी news component में if I am not wrong
1:55
ठीक है तो मुझे margin top करना है क्या हाँ मुझे पता ह�
1:59
मैं directly margin में भी इसको डाल सकता था immediately
2:36
time ले रहा है set होने में ये जो page है update होने में थोड़ा time ले रहा है क्यो�
2:41
क्योंकि ये जो set page है ये एक asynchronous function है तो मैं क्या करूँगा कि ये URL में यहाँ पर manually
2:46
लिख दूँगा page plus 1 और उसके बाद set page page plus 1 करूँग�
2:50
ठीक है ऐसा क्यों करना पड़ेगा क्योंकि यह set page कुछ time लेग�
2:54
वो बहुती कम milliseconds होंगे but time लेगा और उससे पहले यह मेरा URL जो ह�
3:00
यह बन जा रहा है यानि कि यह string resolve हो जा रही है और इसमें जो मेरा page ह�
3:04
वो पुराना page ही रह रहा है इसलिए बार बार मैं same data fetch कर रहा हू�
3:08
जब तक कि मेरा page update ना हो जाता है तो मैं क्या कर रहा हूँ यहाँ पर इसको नीचे करक�
3:12
यहाँ पर page plus 1 कर रहा हूँ और इसके बाद page को update कर रहा हूँ ठीक ह�
3:15
तो I hope कि यह चीज आप लोगों समझ में आ गई क्यों की गई यहाँ प�
3:19
और यही काम जो है यहाँ पर मुझे update news में नहीं करना है क्योंकि update news में तो यहाँ पर हम लोग pages equal to 1 हमारा initially है ही और उसी को हम लोग यहाँ पर change कर रहे हैं ठीक है तो यहाँ पर मैं आप लोग को दिखाता हूँ कि अगर मैं अभी reload करो इसको तो यह error चला जाएगा देखो मैं scroll
3:49
पर मुझे नहीं दिख रही है पहले मुझे जो पहला बैच था न्यूज का वह से मारा था ठीक है तो यह रम ने फिक्स क�
3:55
यहां पर ना बाड़ और जैसा न्यूज जैस में कुछ ऐसी चीज हैं जो कि हम यूज नहीं कर रहे हैं मैंने गिट में कमि�
4:01
लिए डाल दिए दोनों फंक्शन जिसको भी चाहिए वह गिट अप रिपोजिटरी से उठा सकता है अभी के लिए मैंन�
4:06
यहां से मिलता दूंगा ठीक है लेकिन यह हमारे वर्जन कंट्रोल में गिट में है यह तो कोई टेंशन वाली बा�
4:11
यह आप लोग यूज कर सकते हो इसको सेव मैं कर देता हूं और उसी के साथ से मैं यह जो कंपोनेंट है नाव बार क�
4:17
अंदर यहां से मैं कमा हटाऊंगा सेव करूंगा ठीक है और उसी के साथ साथ यहां भी मुझे कंपोनेंट जो है मेर�
4:26
नहीं हो रहा है तो यहाँ पर यह क्लास बेस्ट कंपोनेंट इसको भी मैं डीफाक्टर करूंगा वह अभी देख लेता हूं मैं क�
4:31
क्या अभी भी कोई ऐसी चीज है जो कि डिफाइन नहीं बट नॉट यू स्पिनर टॉट जेस ठीक है स्पिनर टॉट जेस के अंदर मुझ�
4:56
dead update kind of simulate ignore warning dismiss I think yes lent disable next line
5:11
डिसेबल लाइन ठीक है मैं देखता हूं क्या होता है तो यह इसलिए एक कमेंट आपको लगाना पड़ता है डिसेब�
5:17
नेक्स्ट लाइन यह यह इसलिए डिसेबल नेक्स्ट लाइन और यह आपको कहां पर लगाना पड़ेगा जहां पर यह एरर बन रह�
5:24
तो यहां पर आपको लगाना पड़ेगा यह और यह लेंगे लिखकर यहां से चला जाएगा अब इसको रिलोड करूंगा तो यह चल�
5:31
गई बॉन यहां से ठीक है तो यह काम आप कर सकते हो अपना कंसोल क्लीन चाहिए तो ठीक है यह चीज हो गई हमन�
5:37
अभी जीत सोनावाने की भी जो request थी, in fact suggestion थी, उसको incorporate किय�
5:43
और science में अगर मैं click करूँ, यहाँ पर sports में click करूँ, और इसके बार स्क्रॉल करू�
5:47
तो यह देखो मेरा जो navigation बार है, वो लटक रहा है तो कभी भी अब मुझे यहाँ से health में जाना ह�
5:52
तो मैं यहीं पर click करके चला जाओंगा, तो navigation थोड़ा सा simple हो गया है, ठीक है, एक आखरी काम जो मैं आपर करूँगा वो यह है
5:57
कि यह वाला जो class based component है, app.js का, उसको एक function component बनाना है
6:02
ठीक है, तो मैं करूँगा क्या, कि यहाँ पर, मैं इसको एकी line में करना चाहता हूँ या�
6:09
मुझे ये multiple line में जो imports हैं वो अच्छे नहीं लगते हैं बिल्कुल भी ठीक है ये चीज मैं prettier में set कर सकता थ�
6:15
but again मैंने prettier को set नहीं किया ये जो app है इसको मै�
6:19
एक function based component बनाऊंगा तो यह करने के लिए मैं क्या करूँगा मैं लिखूँगा const app is equal to एक arrow function
6:26
app is equal to एक arrow function ठीक है और page size is equal to 5 और यह सब चीज़े जो मैंने करी ह�
6:33
इसको मुझे कोई इस तरह से लिखना पड़ेगा const page size is equal to यह const api key is equal to य�
6:38
use state का इस्तेमाल करना पड़ेगा use state import करूँगा मैं यहाँ component की जगह use state
6:45
को import करूँगा और जहाँ मैं यह चीज लिख रहा हूँ मैं यहाँ प�
6:49
use state को use करूँगा और मैं यहाँ पर लिखूँगा progress set progress initial state
6:55
0 और इसको अटा दूँगा यहां से ठीक है और यहां पर सेट प्रोग्रेस मैंने बनाया हुआ एक फंक्शन जो कि प्रोग्रेस को सेट कर देता ह�
7:03
टू समथिंग यह मुझे नहीं चाहिए क्यों नहीं चाहिए क्योंकि मेरे जो सेट प्रोग्रेस है वह पर मैंने बना दिय�
7:09
तो रेंडर कहां पर खतम हो रहा है मेरा यह देखा जाएगा और इसको यहां से हटाकर रेंडर को टाइड क्योंक�
7:15
मैं ऑलडी से आप नाम के फंक्शन में हो जहां जहां दिस डॉट स्टेट में लिखा हुआ है वहां वहां से दॉट स्टे�
7:38
ठीक है अब यह चल गया ठीक है अब देखता हूं कि सब कुछ काम करेगा यह नोट करने डिफरेंट एक्सपोर्ट त�
7:43
एक्सपोर्ट डिफॉर्ट आप कर दूंगा एक्सपोर्ट डिफॉर्ट आप ठीक है और यह चल जाना चाहिए हाई चल गया ठीक ह�
7:52
अभी देखता हूं कि सब कुछ ठीक से काम कर रहा है कि नहीं बिजनेस हेडलाइन मुझे मिल रही है क्या भारती एरटे�
7:57
न्यूज मिली थी यहां पर पहली यहां बट सब्सक्राइब अगली न्यूज मिली ब्रेक्स माय हार्ट पर ली देखता हूं क�
8:03
अब रेक्स माय हार्ट ऑलरेडी है इस पेज पर एक बार है सिर्फ ठीक है बढ़िया तो कोई न्यूज रिपेटिव नही�
8:08
यह काम करता हूं पूरा नीचे तक आकर भी देख लेता हूं सब कुछ ठीक से चल रहा है कि नही�
8:12
क्या मैं पेज के एंड भी पहुंच पा रहा हूं कि नहीं पहुंच पा रहा हूं स्क्रॉल करते करते हाँ मैं पहुच पा रहा हूँ ठीक है बढ़िया है और यहाँ पर अगर मैं नीचे भी आ गया हूँ तो यही के यही मैं टेक्नोलॉजी पर क्लिक करके न्यूज को चेंज कर सकता हूँ तो यहाँ पर एक और चीज जो मैं करना चाहता हूँ वो यह है कि जो डॉक्यूमेंट �
8:46
टाइटल है वो अपडेट हो जाएगा ठीक है देखते हैं काम कर रहा है कि नहीं जनरल न्यूज मंकी एंडर्टेइनमें�
8:50
वर क्लिक किया एंडर्टेइनमेंट न्यूज मंकी स्पोर्ट्स पर क्लिक किया तो स्पोर्ट्स न्यूज मंकी ठीक है तो आप आ�
8:55
समझ गए कि इस तरह से हमने इसको refactor किया hooks मे�
8:59
और किस तरह से हमने ये सारे काम किये loading bar वगैरा सब कु�
9:03
मस्त चल रहा है, I hope आपको मज़ा आ रहा है इसको use करते हु�
9:06
अब यहाँ पर एक काम मैं करूँगा यह जो sample output.json है इसको मैं रखूँग�
9:11
अपनी repository के साथ क्योंकि यार इसको देख करना पता चलता है कि output कैसा आ रहा ह�
9:15
आपकी जो resulting json आने वाली है इस end point से वो कैसी दिखने वाली ह�
9:19
तो मैं इसको रख रहा हूँ ठीक है हमारा console भी एकदम clean ह�
9:23
कोई भी दिक्कत नहीं है I hope कि आपको मज़ा आ रहा है अगर आप लोगों ने भी लग एकसस नहीं कर दिये प्लेलिस तो जरूर कर लेना है या क्लिक करक�
9:29
इस प्लेलिस को सेव जरूर करना है या क्लिक करके बुकमार्क जरूर करना है अभी के लिए इस वीडियो में इतना है गै�
9:34
Thank you so much guys for watching this video And I will see you next time
#Computer Education
#Programming
#Technology News