Up next in 10
Adding loading spinner & variable pageSize to NewsMonkey _ Complete React Course in Hindi #29
32 views
Feb 10, 2024
The video "Adding loading spinner & variable pageSize to NewsMonkey _ Complete React Course in Hindi #29" likely showcases how to improve the user experience of a React application called NewsMonkey by adding a loading spinner and implementing a variable page size feature. In this tutorial presented in Hindi, viewers are guided through the process of integrating a loading spinner to indicate to users that content is being fetched. Additionally, the instructor may demonstrate how to implement a variable page size functionality, allowing users to customize the number of news items displayed per page. Through step-by-step instructions and practical demonstrations, viewers can learn how to enhance the NewsMonkey React application with improved feedback mechanisms and customizable user preferences. This video aims to empower Hindi-speaking audiences with the skills needed to create more polished and user-friendly React applications.
View Video Transcript
0:00
So guys, पिछले वीडियो में हम लोगों ने अपनी News API App को, News Monkey App को बहुत अच्छी तरही के से बनाय�
0:05
और इसमें हमने काफी जीज़ आड़ करी हैं, हमने Fetch API का इस्तेमाल करकर हम अक्शुल में सर्वर से डेटा लेकर आ पा रहे थ�
0:12
और हमने वहाँ पर यह भी देखा कि किस तरह से हम लोग patch API use करक�
0:15
अपनी API की use करके hit कर सकते हैं जो news API का endpoint जो हमें मिला है यानि कि news API के servers को ठीक ह�
0:22
अब हम लोग यहाँ पर क्या करेंगे कि कुछ चीज़े fix करेंगे यहाँ पर एक चीज जो मुझे सही नहीं लग रही है यहाँ पर वो यह है कि जो हमारी application है यानि कि जो react application है इसमें शायद अगर यह मैं center कर देता तो यह थोड़ा सा अच्छा लगता है in my opinion तो मैं क्या करूँगा कि जो मेरा news.js है जहाँ पर मैंने यह h1 लिखा हुआ है यहाँ पर मैं �
0:55
यहां पर जो हैडलाइन लिखी हुई है और इसको यहां पर डाल दूंगा ठीक है तो मैं इसको यहां पर कुछ इस तरह स�
1:01
करूंगा तो यह सेंटर हो जाएगी और यह सेंटर हो जानी चाहिए थी हो गई सेंटर अब देखो यह डाइटर जैसे ही लो�
1:05
है वैसे ही यहां पर आप लोग देखो कि प्रीवियस आ गया यहां पर नेक्स्ट पर मैं क्लिक कर रहा हूं तो य�
1:10
नेक्स्ट वाला जो मेरा जो न्यूज है वह लोड होना शुरू हो जाएंगी फिर वापस से मैं नेक्स्ट करूंगा तो नेक्स्�
1:17
की news load नहीं हो रही है, तो यह कुछ ऐसा लग रहा है कि यहाँ मेरी app अटक गई, हैंग हो गई, थोड़ा एक अच्छी feeling नहीं दे रही ह�
1:23
app, ठीक है, तो मुझे यहाँ पर करना क्या है, कि कुल मिला कर इसको disable करना है
1:28
अगर next available नहीं है तो तो instead of saying कि यहाँ प�
1:32
अगर click करो तो ऐसा हो जाए मैं क्या करूँगा यह वाला जो logic है मेर�
1:36
क्योंकि state तो मैं कई से भी use कर सकता हूँ मैं यह कहूँगा कि अगर कुछ ऐसा ह�
1:40
अगर कुछ ऐसा है this.state.page plus 1 कुछ इस तरह से हो रहा है तो मैं क्या करूँगा क�
1:46
button को इस डिसेबल कर दूँगा तो मैं यहाँ पर disabled is equal to करूँग�
1:50
जैसे मैंने यहाँ पर disabled is equal to किया हुआ है disabled is equal to
1:55
मैं यह कर दूँगा ठीक है is equal to कुछ इस तरह से कर दूँगा तो अगर मेरा this.state.page
2:01
प्लस 1 जो है वो बड़ा होगा यानि कि जितने भी page मेरे होने चाहिए उसस�
2:07
जादा बड़ा है मेरा next page तो मैं क्या करूँगा अगर ऐसा true ह�
2:11
तो मैं disable कर दूँगा ठीक है तो मैं अगर इसको अभी save करके और आप लोगो�
2:15
यहाँ पर दिखाऊं तो आप लोग यहाँ पर देखो कि ये next आ रहा है फिर मैं वापस से next करूँगा तो मैं एक बार next गया लेकिन अब मैं next नहीं जा सकता क्योंकि इसके बाद कोई page है ही नहीं ठीक है ये मेरा last page है तो अब मैं previous हाँ तो मैं previous आ सकता हूँ ठीक है previous मैं आ सकता हूँ एक page previous आ सकता हूँ तो दो page में सारा data �
2:47
कि props के तौर पर मैं data वेजूँगा, जो मेरा news component है, ठीक है, उसके अंदर बहुत सारी ऐसी information है
2:53
जो मेरे हिसाब से हम change करना चाहेंगे, for example, एक information जो हम change करना चाहेंगे
2:58
वो है कि कितने हमारे यहाँ पर, यह news items display हो रहे हैं, ठीक है, यह, यह मैं change करना चाह सकता हूँ
3:05
योजी पर पेज मैं कितनी news display करूँ, हो सकता है कि मैं सिर्फ 4 news display करूँ
3:09
हो सकता है कि मैं 10 news display करूँ, वो मेरा यहाँ पर, अपना
3:13
मेरी app to app depend करेगा, मेरी requirement के साथ से depend करेगा, तो यह चीज मैं variable रखना चाहता हूँ
3:19
उसी के साथ साथ, और भी कुछ चीज़ें जो कि मैं variable रखना चाहूँगा और उन सारी की सारी चीज़ों क�
3:25
मैं pass करना चाहूँगा as props क्योंकि अगर कहीं भी इस पूरी news app में मैं 10-12
3:30
page बनाओं हो सकता है मैं categorize कर दूँ अपनी सारी news को जैसे कि मैं आप लोगो�
3:34
दिखाता हूँ कोई भी news website आप देखोगे तो यहाँ पर categories होती है sports news अलग होती ह�
3:39
weather news अलग होती है येसी news अलग होती है किसी और type की news अलग होती है और maybe य�
3:45
category हो सकती है news की travel travel से related जो news है और और भी बहुत सारी categories
3:50
सकते हैं news की ठीक है तो उन सारी categories पर अगर कोई भी click करेगा तो सिर्फ उस category की news
3:56
fetch होनी चाहिए तो क्या मैं उसके लिए अलग-अलग components बनाऊंगा obviously not मैं उसके लिए अलग-अलग components
4:00
नहीं बनाऊंगा मैं वो news components से ही achieve कर लूँगा अगर मैंने सही props pass कर दिये तो तो मैं सह�
4:20
20 20 items per page page size page size 20 page 20 items component amount
4:29
यहाँ बैक टिक्स यूज करता हूँ बैक टिक्स क्यों यूज कर रहा हूँ बैक टिक्स इसलिए यूज कर रहा हूँ मैं क्योंकि मैं इसको वैरीबल बना सकता हूँ ठीक है तो मैं यहाँ पर डॉलर लिखूँगा यहाँ पर डॉलर लिखूँगा बाय देवा मुझे एक ड�
4:59
component did mount पर किया मैंने previous click पर किया यहाँ पर भी करूँगा ठीक है यह जो काम मैंने किया and page size is equal to this variable इसको मैं यहाँ पर भी करूँगा ठीक ह�
5:07
तो मैं इसको यहाँ पर paste कर दूँगा, दो बार लगा दिया, M%, कोई बात नहीं, save किया
5:11
अब क्या करूँगा मैं, यहाँ पर क्या लेकर आउँगा, यहाँ पर मैं props लेकर आउँगा
5:15
अभी news component को कोई props नहीं मिल रहे हैं, लेकिन मैं क्या करूँगा यहाँ पर, प्रॉप्स लेकर आऊंगा, पहला प्रॉप्स लेकर आऊंगा, page size, ठीक है
5:22
तो page size is equal to, let us say मैंने यहाँ पर 2 कर दिया, ठीक है, page size is equal to 2 कर दिया, यहाँ 2 तो थोड़ा कम हो गया यार
5:29
मैं 5 कर देता हूँ, ठीक है, page size मैं 5 करूँगा, और यहाँ पर मैं क्या करूँगा कि जो मेरे props हैं जो मेरे props हैं उनको मैं this.props करके access कर सकता हू�
5:39
तो मैं यहाँ पर लिख सकता हूँ this.props.page size ठीक है और यही काम मैं यहाँ पर भी कर सकता हू�
5:44
तो यह जो this.props.pageSize है वो मैं यहाँ पर paste कर सकता हूँ यहाँ पर paste कर सकता हू�
5:49
यहाँ पर भी paste कर सकता हूँ this.props.pageSize बट यहाँ पर आप लोगों को एक चीज दिखाओंग�
5:56
यह जो 20 है इसको भी मुझे replace करना पड़ेगा this.props.pageSize से और क्या कहीं और 20 मैंने use किया हुआ ह�
6:01
हाँ यार एक जगह और दिख रहा है मुझे 20 ये देखो ये दिख रहा है यहाँ पर this.props.pagesize
6:05
तो मैं this.props.pagesize करूँगा इसको मैंने save किया और यहाँ पर देख�
6:10
मैंने कितनी news डाली थी 5 डाली थी नहीं बट इतनी सारी आ गई तो लेट मी सी वॉट द प्रॉब्लम इस यार मैंने जब पेज साइस को पांच दिया तब यहा�
6:18
पर इतने सारे क्यों आए मेरी न्यूज लोड होकर यह मुझे देखना पड़ेगा लगता है मैं इसको सेव नहीं किया भी पे�
6:25
पाइज इग्ल्ड फाइब को सेव नहीं किया था मैंने अभी यहां पर सिर्फ पांच नहीं जानी चाहिए थी पर लेट्�
6:29
सीवर द इश्योस ठीक है तो यहां पर हम लोग देखते हैं कितनी नहीं जा रही है 20 आर्टिकल से आ रहे हैं प�
6:35
पेज पांच नहीं आ रहा है क्या मेरी रिक्वेस्ट में मैंने लिखा हुआ यह पेज साइज इगल्ट फाइब वाले रिक्वेस्ट जा रह�
6:40
है तो मैं देखत Amelia को कौन से रिक्वेस्ट जा रही है तो यह चीज हम डिबट करेंगे यहां पर मैं काम करूंगा यहा�
6:45
news लिखूंगा, अब यहाँ पर देखो आप, मेरी API की जा रही है, page size भी जा रहा है
6:50
page is equal to 1 के बाद देखो, and नहीं लगाया, मैंने यहाँ पर कुछ गड़बड करी है कहीं ना कहीं
6:53
इन पेज साइज नहीं लगा यहां पर देखो मैंने गड़बड़ कर दी एंड पेज साइज नहीं लगाए अब मैं सेव करूंगा तो आप आ जानी चाहिए 5 मेरी न्यू�
7:01
तो ये जो request है ये सही है तो देखो 5 आ गई यहाँ पर 1, 2, 3, 4, 5
7:05
let's see कि जो next next है ये सही से काम कर रहा है कि नहीं कर रहा है मैंने एक बार next क्लिक किया अगली 5 आ गई फिर से next क्लिक किया अगली 5 आ ग�
7:12
फिर से next क्लिक किया अगली 5 आ गई so I can keep on doing this
7:17
until सारी की सारी मैं fetch ना करूँ, तो मैं ये काम करूँग�
7:20
मुझे बता है मैं API hit कर रहा हूँ बार बार तो exhaust हो सकती ह�
7:25
अब देखो ये last page आ गया, तो यहाँ पर next मेरा blur हो गया, अब मैं previous भ�
7:29
जाओंगा अगर, तो अगर मैं पहले पेज पर आ गया, मैं directly इसको reload करूँगा
7:33
ताकि मैं सीधे पहले पेज पर land करूँ, तो मैं यहाँ पर previous पर click नहीं कर सकता, ठीक है
7:38
तो यह चीज हमको यहाँ पर design करनी थी, और बहुत successfully हमने यह चीज कर लिये
7:42
अब एक और चीज जो मैं करना चाहूंगा यहां पर वह क्या है देखो या जब अपने एक्सप्रिकली कर रहे थोड़ा टाइम लग रहा है एपीआईस इनफॉर्मेशल नाने में तो मैं चाहूंगा कि एक स्पिनर कंपोनेंट बनाऊं जो कि स्पिन करें और यूजर को एक अ�
8:12
मुझे याद आ गया तो यहां पर मैं क्या करूंगा कि ट्रांसपेडेंट बैकग्राउंड कर दूंगा और इसी के सा�
8:17
से इन में से मैं कोई चीज सेलेक्ट कर लूंगा तो मुझे यहां पर एक अच्छा सा स्पीनर अगर मिल गया तो मै�
8:23
यूज करना शुरू कर दूंगा मैं वह भी एक बेसिक स्पिनर डाउनलोड कर लूंगा यार आप लोग फिर इसको चेंज कर लेन�
8:27
मैं यह वाला डाउनलोड कर लेता हूं ठीक है तो मैंने इसको चेंज किया जनरेट पर क्लिक किया और यहां पर देख�
8:33
show in folder folder copy copy news app src loading save spinner component
9:09
यहाँ पर class based component इस्तेमाल करूँगा तो मैं यहाँ पर क्या करूँगा import करूँगा सबसे पहले तो मैं spinner from dot spinner नहीं मुझे component नहीं करना है मुझे actually यह वाला image जो है loading.gif को मुझे import करना है मैं लिखूँगा import loading from dot slash और loading.gif ठीक है और मैं यहाँ पर क्या करूँगा लिखूँग�
9:39
और Alt is equal to loading, ठीक है, तो देखते हैं कि अगर मैं इसको यहाँ पर use करने की कोशिश करता हूँ
9:45
spinner component को, तो क्या मैं कर पा रहा हूँ कि नहीं कर पा रहा हूँ, तो मैं क्या करूँगा, NewsMonkey जहाँ मैंने लिखा हुआ है
9:51
just इसके बाद मैं यहाँ पर, spinner component को use करने क�
9:54
कोशिश करूँगा, ठीक है, तो मैंने यहाँ पर spinner लिख दिया कुछ इस तरह से, तो य�
9:58
spinner यहाँ पर आ रहा है, अगर यह center हो जाता तो कितना मज़ा आता न, center हो जाता त�
10:02
मज़ा आ जाता, तो इसको center करने के लिए हम लोग क्या करेंगे, spinner.js
10:07
पर जाएंगे और यहाँ पर हम क्या करेंगे class name is equal to डालेंगे text center ठीक है तो मैंने text center डाल दिया और यहाँ पर देखो इस center हो गया ठीक है तो अभी यहाँ पर यह center में घूम रहा है बट मैं spinner component तभी दिखाना चाहता हूँ जब actual में loading चल रही हो अगर आप लोगों को याद हो �
10:37
ये है कि अगर मेरा loading true है तब आप क्या करें spinner को दिखाए�
10:42
वरना spinner को ना दिखाएं ठीक है मैं इसको कई तरीकों से कर सकता हू�
10:46
या तो मैं कुछ ऐसे कर सकता हूँ देखो इसको पूरा select करके एक curly packet में डालक�
10:51
मैं कह सकता हूँ this.state.loading अगर ये true होगा तब आप spinner को दिखाए वरना ना दिखा�
10:59
तो यह जो syntax यह कह रहा है कि this.state.loading true है तब आप spinner को दिखाए वरना ना दिखा�
11:04
तो यह syntax कुछ इस तरह की बात कहता है जावास्क्रिप्ट में अब मैं क्या करूँगा क�
11:09
जब जब मेरी request जा रही है या नहीं कि मैं next पर click कर रहा हूँ या फिर मैं कुछ भी ऐसा काम कर रहा हू�
11:13
तो मैं क्या करूँगा अब देखो ये if else है इसको भी मैं refactor करूँगा थोड़ा स�
11:17
ये जो if else है इसको मैं change कर दूँगा if not of
11:22
ये जो मैंने पूरा logic लिखा हुआ है इसको मैं लिख दूँगा not of अगर ऐस�
11:26
नहीं होता है तब ठीक है तो वैसे मुझे ये रखने की जरूर�
11:30
भी नहीं है क्योंकि मैंने already disable कर दिया बटन नीचे तो कोई भी इ�
11:34
function के अंदर आएगा ही नहीं अगर next page up, उपलब्द नहीं है तो, but again
11:38
उसके बाद भी मैंने इस logic को यहाँ पर लिख दिया और अब हम लोग क्या करेंग�
11:42
यह करने के बाद, loading को true कर देंगे, जब loading चल रही है, तो loading
11:46
कब तक चलेगी, loading तब तक चलेगी, जब तक जब जब यह URL जो है, hit करेग�
11:50
तो जैसे ही आप data is equal to abate fetch करेंगे यानि कि यहाँ पर this.set state मैं कर सकता हू�
11:56
loading true ठीक है तो मैं यहाँ पर loading को true कर दूँगा ठीक ह�
12:01
और उसके बाद जैसे ही data आ जाएगा ल 마음에 loading को false कर दूँगा immediately ठीक ह�
12:05
तो यहाँ पर मैं loading को false कर देता हूँ जहाँ पर मैंने console.log pass data किया है मुझे console.log pass data नहीं करना है ठीक ह�
12:10
तो मैं loading को false कर दूँगा in fact मैं इसको इसी के साथ club कर सकता हू�
12:14
loading false ठीक है और same काम मैं उपर भी करना चाहूँगा ठीक ह�
12:20
तो यहाँ पर आप लोगों को दिखाता हूँ this.set state loading true कर देता हू�
12:36
लोडिंग फॉल्स आ जाएगा से बड़ता है यह लाल मुझे दिखा ही पड़ रहा है कहां पर आ रहा है तो यहां पर य�
12:42
रेंडर में अर्डिकार है लगता है मैंने कुछ ब्राकेट वगैरह बंद करने में गलती कर दी हां मैंने एक ब्राके�
12:47
एडिशनल डिलीट कर दिया रखता है गलती से कोई बात नहीं ठीक है अभी मैंने इसको फिक्स कर दिया है अभी बिल्कु�
12:53
सही से चल रहा है तो अभी जो है लोडिंग ट्रू फॉर्स ठीक से हो रहा है बट एक चीज यहां पर और करनी है कि ytical
13:40
ठीक है तो मैं क्या करूंगा फिर से वही सेंटेक्स का इस्तेमाल करूंगा जो कि मैंने करा है तो मैं क्या करूंगा यहाँ पर यह जो मैं आप एडिस्ट ऑट आर्टिकल्स डॉट मैप कर रहा हूं यहाँ पर मैं लिख दूंगा कि यार देखो अगर दिस डॉट स्टेड ड�
14:10
कर रही है अब मैं next पर click करूँगा तो देखो ये चीज नहीं दिख रही है फिर से next पर click करूँगा देखो ये चीज नहीं दिख रही ह�
14:15
तो ये थोड़ा सा अच्छी feel दे रहा है application को वरना ऐसा लग रहा है कि hang हो ग�
14:19
तो अगर मैं आप लोग को एक चीज और सिखाता हूँ पहली बात तो यह कि already news API थोड़ा सा delayed response दे दिय�
14:27
थोड़ा slow response दे दिये लेकिन कभी-कभी APIs इतनी fast होती हैं कि क्या बताओं आप लोगों क�
14:31
तो उस case में आप क्या कर सकते हैं network throttling कर सकते हैं यानि कि आप यहाँ पर network में जा�
14:36
no throttling की जगह slow 3G कर लें इसको और slow 3G करेंगे आप लो�
14:40
तो आपका जो net है वो slowly काम करेगा तो यहाँ पर देखो मैं next पर click करूँग�
14:44
अगर लगता है यह throttling है वो no throttling कर दी मैंन�
14:48
मैं slow 3G करूँगा ठीक है मैंने इसको slow 3G कर दिया, इसको मैं minimize करूँगा
14:52
अब next पर मैं click करूँगा, तो देखोई slow 3G, मैंने कर दिया, जिसकी वज़े से network slow है
14:58
ठीक है, और ये जो सारी की सारी APIs हैं, ये 2-2 second ले रही हैं आने में, आप इसको custom भी कर सकते हो, और slow कर सकते हो connection को
15:03
तो आप इसको use कर सकते हो अगर आपको 3G connection को simulate करना ह�
15:07
एक टाइम पर 3G को बहुत fast माना जाता है तो आप 3G को slow माना जाता है तो slow 3G आप करोगे त�
15:12
थोड़ा आपको slow connection simulate करने को मिलेगा fast 3G भी slow ही होता ह�
15:17
to be honest comparatively मैं कह रहा हूँ जो हम use कर रहे हैं उसस�
15:20
बट मेरे कहने का point यहाँ पर यह है कि आप यहाँ से network को slow कर सकते हूँ ठीक ह�
15:24
तो यह करके आप लोग बड़े आराम से जो है अपनी application को test वगैरा कर सकते हु�
15:30
कभी कभी ऐसा होता है कि एकदम चुटकी में हो जाता है जो होना होता है और बिल्कुल भी टाइम नहीं मिलता है आप लोगों क�
15:35
next दबाने का, या फिर मतलब, देखने का कि next दबागी क्या हो रहा है
15:39
तो, यहाँ पर देखो, मैं अलग-अलग pages में जा पा रहा हूँ
15:43
और यार, बढ़िया बन गई यार app, मदा आया कि नहीं आया, नीचे बताओ, कॉमेंट करके जल्दी से, और अगले वीडियो में हम लोग क्या करेंग�
15:49
अलग अलग categories बनाएंगे news की और उसी के साथ साथ यहाँ पर क्या करेंग�
15:52
यह देखेंगे कि क्या कोई और चीज़े भी है जो कि हम as props भेज सकते है�
15:56
जैसे कि एक category अगर मैं as props भेज दू तो मैं सारी URLs को category
16:00
यूज करने के लिए बोल सकता हूँ अगर मैं कंट्री भेज दूं तो मैं कंट्री सेंड कर सकता हूँ कंट्री को यहां पर सेंड कर सकता हूँ और इस लिंक में यूज कर सकता हूँ तो अगर मुझे अपनी वेबसाइट को इंडियन कंटेंट ना दिखाकर यूज कंटेंट �
16:30
application की तो आप हर line पर थोड़े ना change करोगे उसको, आप as a prop पास कर दोगे API key को
16:35
और उसको आप use करना चाहोगे, तो ये सारे के सारी काम हम लोग जो है, आने वाले videos में करने वाले हैं
16:40
I hope कि अभी सब को समझ में आ गया, logic से लेके सब कुछ, अगर logic समझ में नहीं आया या�
16:44
देखो ये सब चीज़े basic mathematics हैं जो कि मैंने आपको mat.seal करके बताय�
16:49
तो इसको यार थोड़ा सा time लेके समझो पेन, पेपर लो एक दो Google search मार�
16:53
समझ में आजाएगा कि मैंने क्या करा है ठीक है so I hope कि आप लोगों सब समझ में आ गय�
17:13
कर द�
#News
#Other
#Technology News