Up next in 10
Adding a top loading bar to NewsMonkey _ Complete React Course in Hindi #36
999 views
Feb 11, 2024
In the 36th episode of the "Complete React Course in Hindi," the tutorial focuses on further enhancing the user interface of the NewsMonkey React App by introducing a top loading bar. This video guides viewers through the step-by-step process of implementing a visually appealing loading bar that appears at the top of the application, providing a seamless and engaging user experience. The instructor shares insights into incorporating this feature, offering practical knowledge on managing asynchronous operations and improving the overall aesthetics of a React application. Whether you're a React enthusiast or a web developer looking to refine your UI design skills, this tutorial empowers you to elevate the user interface of your NewsMonkey React App with the addition of a top loading bar.
View Video Transcript
0:00
So guys मैंने यहां पर NPM run start लिख कर अपनी application को चला लिया है और आज के इस
0:03
video में हम लोग बात करने वाले हैं कि जो top loading bar होता है वो किस
0:07
तरह से react में हम लोग ला सकते हैं। top loading bar अगर आप लोगों को नहीं
0:10
पता तो मैं आप लोगों को top loading bar दिखाई देता हूं जैसे कि मैं अभी youtube पर हूं अगर
0:14
मैं code with diary पर click करूंगा तो आप देखना यहां पर एक red colour का bar चलेगा। ये
0:18
देखो red colour का bar दिखा ऊपर चलता हुआ दिखा आपको तो ये एक बहुत ही अच्छी look
0:21
and feel देता है क्योंकि modern application जो होती हैं वो सब इसको इस्तेमाल करती
0:25
हैं, देखो page तो reload होता नहीं है तो progress को दिखाने का एक बहुत अच्छा तरीका
0:29
होता है कि भाई इतना load हो गया and finish but most of
0:32
the single page application जो होती हैं वो बहुत ही fast होती हैं ठीक है, और इसका
0:36
ये जो illusion होता है जो ऐसे करके जाता है ये ये सा satisfaction देती
0:40
है user को ठीक है। तो अगर आप लोगों ने इस इस तरह की apps चलाई है तो आप लोगों
0:43
को पता होगा कि यार ये किस तरह का satisfaction देती है, हम news monk की
0:47
application में इसी video में डालने वाले हैं ये loading bar हमने
0:50
infinite scroll तो डाल ही दिया था ये वाला but अब हम loading bar डालने वाले हैं ठीक है
0:54
infinite scroll आपको कैसा लगा मुझे जरूर बताना entertainment की कुछ खबरें लेते
0:58
हैं और एक नई tab खोल के हम लोग लिखेंगे react top
1:03
loading bar तो ये जो top loading bar होता है ये इसका नाम होता है। और
1:07
एक NPM का package है, बहुत ही मजेदार सा package है, और react
1:11
top loading bar करके नाम है इसका और बहुत ही easy to use package है, मुझे सबसे
1:14
अच्छी बात इस package की यही लगती है कि ये बहुत ही easy to use है। तो
1:18
इसको अपनी ah node modules का हिस्सा बना लेते हैं, ठीक है
1:22
यानी कि हम लोग इसको NPM install कर लेते हैं, ये install हो जाएगा और इसको install करने
1:26
के बाद हम इसको बहुत आराम से use कर पाएंगे, ठीक है। तो ये मैं use
1:29
करता हूं। मैंने recently कुछ react apps बनाई है जिसमें मैंने इसको use किया है तो मुझे इसको
1:33
use करना आता है बहुत ही अच्छी तरह से but let me tell you something
1:37
कि अगर आप मान लो ये use करना नहीं भी आता है तब भी इन्होंने यहां पर जो
1:40
है इसको use करना बहुत simple बनाया हुआ है। अब इसको दो तरह से
1:44
use किया जा सकता है। एक तो आप लोग इसको refs की सहायता से use
1:47
कर सकते हो, एक state की सहायता से use कर सकते हो। हम लोग state की सहायता से इसको इस्तेमाल करेंगे
1:51
basically अगर हम लोग ये जो loading bar है, सबसे पहले तो इसको import करना
1:55
है, ठीक है। ये मैं copy करूंगा obviously import करना करूंगा import
2:00
इसको अपनी app JS में ठीक है, और यहां पर मैं इसको import
2:04
करूंगा और nav bar के बाद इसको लगा दूंगा ठीक है। तो nav bar के बाद
2:07
इसको लगाने के लिए मैं क्या करूंगा ये जो loading bar है इसको copy करूंगा, तो मैं ये copy कर रहा
2:11
हूं और यहां पर paste कर दूंगा, nav bar के just बाद हमको दिखाई अगर आप लोगों
2:14
को nav bar के ऊपर रखना है तो nav bar के ऊपर भी रख सकते हैं। Usually
2:18
इसको यहां पर at the top रखा जाता है na bar के भी ऊपर but na bar के
2:21
नीचे भी रख सकते हो, आप ऊपर भी रख सकते हो that is your choice। अब यहां
2:25
पर देखो कुछ functions इन्होंने दिए हुए हैं, एक तो ये colour दिया हुआ है, ये I think red colour है if I
2:28
am not wrong but देख लेंगे, progress is equal to progress यानी
2:32
कि initial progress क्या होनी चाहिए, इसको मैं एक बार के लिए ten बनाता हूं, ठीक है, save
2:36
करता हूं और ये on loader finish है, एक बार loading finish हो गई तब आपको
2:39
क्या करना है, तो मैं ये भी हटा देता हूं function ठीक है। मैं अभी के लिए ये
2:43
क्या किया मैंने okay तो मुझे bracket भी हटाना है। अभी हो जाएगा ठीक, ठीक है
2:47
तो अब मैं अगर आप लोग को यहां पर दिखाऊं तो आप लोग देखो ये red colour का दिख रहा है आपको, ये चल रहा
2:51
है ऊपर इतना चला हुआ है बस। तो मैं चाहता हूं कि चले जब जब मैं click
2:54
करूं अपने components में और यहां पर sorry नया bar के links
2:59
में components नए load करूं तो ये मैं चाहता हूं चले। but मैं नहीं चाहता कि
3:02
ये चले अगर मैं scroll करूंगी, मैं scroll करूंगा तो वैसे भी नहीं दिखेगा। तो तब
3:06
मैं इसको नहीं चलाना चाहता। ठीक है। तो मैं क्या करूंगा यहां पर, आप लोग
3:09
को दिखाता हूं कि किस तरह से इसको use किया जा सकता है। तो यहां पर आप लोग देखो
3:13
कि color progress और on loader finished। इसके अलावा इसमें और भी
3:18
properties है, मैं यहां पर आह इसका demo तो नहीं लेकिन इसको get
3:22
up पर जरूर खोलना चाहूंगा। तो मैं यहां click करके इसकी get up repository पर चला
3:25
जाऊंगा और यहां पर सी अच्छी documentation लिखी हुई है। देखो इसमें built in methods
3:29
हैं जो कि आप use कर सकते हो और कुछ properties हैं जो कि आप लोग use कर सकते हो
3:33
but यहां पर मैं क्या करूंगा कि ज्यादा complicate नहीं करूंगा चीजों को
3:36
एक बहुत ही basic सा loading bar मुझे चाहिए तो वो मैं यहां पर इस्तेमाल करना चाहता
3:40
हूं अपनी application का हिस्सा बनाना चाहता हूं loading bar को। तो मैं
3:43
क्योंकि class task based component use कर रहा हूं, इसलिए मेरे पास set progress नाम का कोई method
3:47
नहीं है। तो मैं क्या करूंगा कि एक method बनाऊंगा और मैं
3:51
यहां पर set progress नाम से एक method लिखूंगा और इस method
3:55
के अंदर क्या होगा? इस method के अंदर simply मैं progress को change करूंगा
3:59
तो मैं लिखूंगा this dot set state मैं state भी बनाऊंगा अभी तक मैंने state
4:02
नहीं बनाई है और मैं progress को, ये वाला progress करूंगा जो
4:07
भी इसके अंदर। variable दिया गया है और उसी के साथ साथ एक state
4:10
भी मुझे बनाना तो मैं state भी बनाऊंगा, state एक object होगा
4:15
और उसके अंदर progress होगा, progress will be zero initially ठीक है
4:19
तो, initially progress zero होगी और उसके बाद मैं set progress use
4:23
करके इसकी progress को change कर सकता हूं। अगर आप लोग function based component
4:27
में होते तो बहुत ही आसान हो जाता काम आपका but again हमने लिख लिया है function कोई बात
4:31
नहीं और एक बात और बोलना चाहूंगा यार इसको implement आप किसी भी तरीके से कर
4:34
सकते हो। मैं जो बता रहा हूं वो एक तरीका implement करने का, आप इसको और
4:38
अपने तरीके से भी implement कर सकते हो, ऐसा कुछ नहीं है कि जैसे जैसे मैं कर रहा हूं वैसे वैसे ही
4:41
आपको पास करना है सब कुछ। मैं क्या करूंगा ये set progress method जो है। ये
4:46
news component को pass कर दूंगा, क्यों करूंगा pass ये भी समझो। यहां पर
4:50
मैं इसलिए pass करूंगा ताकि मैं news component से progress को set कर पाऊं, ठीक
4:53
है, तो ये आप लोगों को यहां पर पता होनी चाहिए। अभी progress यहां पर मैं
4:57
ten नहीं मैं यहां पर progress this dot state dot progress करूंगा, this
5:01
dot state dot progress ठीक है। और उसी के साथ साथ ये जो
5:05
news है इसको मैं refactor करूंगा और इसको replace करूंगा news space
5:10
और यहां पर मैं लिखूंगा change progress। is equal to या फिर
5:15
set progress is equal to set progress कर देता हूं, set progress is
5:20
equal to set progress ठीक है और एक space भी दूंगा यहां पर
5:23
ठीक है, और मैं replace कर दूंगा तो मैंने सबको replace कर
5:27
दिया अब यहां पर set progress is equal to set progress news component में उपलब्ध
5:31
है। तो मैं इसको save करूंगा news component के अंदर आऊंगा news component
5:34
में अब मेरे पास एक function है जो कि मेरी इस loading
5:38
bar की state को change कर सकता है। और उस function का नाम है set progress
5:41
तो मैं यहां से progress को set कर सकता हूं, तो मैं अपने news component
5:45
से क्या करूंगा जब पहली बार data fetch किया जा रहा है, तब मैं क्या करूंगा जैसे
5:48
update news यहां पर है, मैं सबसे पहले तो यहां पर जो
5:52
मेरा this dot props है इससे मैं ले सकता हूं अपना ये
5:56
वाला prop मैं set progress को as a prop pass कर रहा हूं। progress
6:01
और मैं सबसे पहले तो इसकी progress को zero set कर दूंगा यहां पर, ठीक है, और
6:05
उसके बाद मैं क्या करूंगा यहां पर जब ये await होके fetch
6:09
हो जाएगा और JSON वगैरह सब pars हो जाएगी, सब कुछ हो जाएगा, तब मैं set progress
6:13
hundred कर दूंगा। अब मुझे कैसे पता hundred करनी है set progress देखो यार इन्होंने
6:16
बता रखा है zero से hundred तक जाती है progress जो है, यहां पर बता रखा है देखो
6:20
progress क्या है zero से लेकर hundred तक आप कर सकते हो और ये आपका बार चलेगा, ठीक है। तो
6:24
ये काम मैंने किया है एक तो, एक तो update news में मैं करूंगा। Fetch
6:28
mode data में मैं नहीं करूंगा, update news में मैं करूंगा, ठीक है? तो यहां पर
6:31
componented mount के अंदर चल रहा है ये update news तो अच्छा
6:36
क्या update news कहीं और भी चल रहा है अभी, अभी कहीं और नहीं चल रहा है componented amount के
6:39
अंदर चल रहा है तो मैं इसको directly इस logic को componented mount के अंदर भी डाल सकता हूं। पहले
6:43
हमारे पास previous next button थे इसलिए मैंने इसको अलग लिखा हुआ था but अभी के लिए मैं इसको
6:47
ऐसे refactoring इतनी नहीं करूंगा। अभी आ जाते हैं यहां पर ये
6:51
कह रहा है set progress is not defined, what is the issue देखता
6:54
हूं। Okay तो this dot set progress मुझे करना था ठीक है। तो
6:58
जहां जहां मैंने इस तरह से set progress लिखा हुआ है वहां वहां मुझे this dot
7:02
set progress करना क्योंकि मैं class based component के अंदर हूं यार
7:06
ठीक है save करता हूं इसको और यहां पर देखो ये कह रहा है कि this dot
7:09
set state is not a function। ये कैसा मजाक है, this dot
7:14
set state is not a function। okay तो यहां पर मैं बताता हूं क्या दिक्कत
7:18
आ रही है। मुझे इसको एक arrow function बनाना वरना मुझे this उपलब्ध
7:22
नहीं होगा, ठीक है, तो मुझे यहां पर कुछ इस तरह से करना is equal to a arrow
7:25
function ठीक है, तो ये बात आप लोग जरूर ध्यान में रखना, हां अब सही
7:29
है, अब अब ये चल जाएगा ठीक है, तो यहां पर देखो आप लोग ये load हो गया ये देखो पूरा hundred
7:32
तक गया। अब मैं general पर click करूंगा तो ऊपर देखना नहीं
7:36
चला, ठीक है, देखेंगे नहीं चला था, चला था चला था। technology पर
7:39
click करूंगा तो ये चल रहा है लेकिन late चल रहा है, ऐसा क्यों
7:43
हो रहा है ये भी देखेंगे। मैं चाहता हूं business पर जैसे ही मैं करूं तो initially सा
7:47
ये ten तक रहे फिर चले। तो एक काम करता हूं, मैं जो initial progress
7:50
है उसको ten कर देता हूं, zero नहीं करता हूं, ten कर देता हूं, ताकि चलता हुआ
7:54
भी दिखे वो ठीक है। अब इसको save करूंगा, अब देखो आप लोग ये चलता हुआ
7:57
दिख रहा है, technology पर click किया देखो बाहर आया और ये पूरा complete हो गया
8:02
अब entertainment भी किया मैंने ये पूरा complete हो गया। मैं एक चीज
8:05
और कर सकता हूं, बताऊं क्या? जैसे ही मेरा data आ जाता
8:09
है fetch होकर। मैं कहूंगा कि अब progress को कर दो thirty
8:12
ठीक है। फिर जैसे ही data pass हो जाता है, मैं कहूंगा
8:17
अब progress को कर दो fifty ठीक है या seventy और finally
8:21
hundred कर दो तो देखो ये सा चलता हुआ दिखेगा, ये देखो ये आया
8:25
ये आया पूरा चला गया end तक, फिर technology ये देखो ये
8:29
चल रहा है, entertainment ये देखो ये चल रहा है। अब अगर आप लोगों को लगता है कि ये बार
8:32
पतला है तो आप इसकी height set कर सकते हो। यहां पर ये सारी की सारी properties आप
8:36
set कर सकते हो, इस पर मैं height set करूंगा। by default ये two है बस एक से दूंगा
8:40
इसको three कर दूंगा। ठीक है। तो इसकी जो height है इसको
8:44
मैं कर दूंगा three ज्यादा करोगे तो बहुत मोटा हो जाएगा ठीक है, वो भी नहीं चाहते हम
8:47
लोग कहां गई news की ये रही, तो ये देखो ये सा मैंने मोटा कर दिया
8:51
इसको three कर दिया ये देखो अभी दिख रहा है ऊपर progress bar तो इस
8:54
तरह की progress bar जो है आप लोगों ने देखे होंगे modern react applications में
8:59
modern single page applications में आप आप angular view की सहायता से
9:02
भी ये सब कर सकते हो। but react में ये ऐसे की जाती है, एक बहुत ही popular package
9:06
है react uploading और बहुत ही प्यारा सा package है, सब कुछ उपलब्ध है। आता
9:10
है करने में ठीक है। तो I hope कि आप लोगों को समझ में आ गया
9:14
और ये देखो इन्होंने कुछ projects दिए हुए हैं जो कि इनका react top loading bar use
9:17
करते हैं। So I hope कि यार news bunking को बहुत shape मिल गया है, अभी देखो
9:21
भी आ रहा है और यहां पर देखो loading bar भी चल रहा है और ऊपर भी चल रहा है loading bar आ
9:25
रहा है यार ठीक है। So I hope कि आप लोगों को ये
9:29
प्यारा लग रहा है, हमारी जो application का structure है और अलग अलग तरह की
9:33
खबरें भी आप लोग सकते हैं इसकी सहायता से और एक professional application
9:37
लग रही है यार ये अब एक professional application लग रही है phone में देखते हैं कैसे चलेगी
9:42
तो मैं इसके mode को phone कर देता हूं, ये error कैसा आ रहा है? Error कैसा आ रहा है
9:45
ये? This dot set state is not a function। इसको reload करता
9:49
हूं। क्या ये error गया? हां अब चला जाएगा शायद ये error मैंने reload नहीं किया था, तो
9:53
मैंने reload up कर दिया है। इसको मैं undock कर दूंगा, इसको मैं
9:57
यहां side में कर दूंगा। और यहां पर अब देखते हैं कैसा चल रहा है। Entertainment
10:02
wow, wow, wow wow क्या scroll करके मुझे loading bar दिख रहा
10:07
है? हां यार दिख रहा है, बिल्कुल दिख रहा है और जब जब
10:10
ये load हो जा रहा है फिर loading पर नहीं भी दिख रहा है। तो देखो ये infinite scroll बन चुका है। देख
10:14
रहे हो आप लोग, अगर मैं page down करूँ, तो ये देखो ये सारी की सारी news
10:18
load हो गई है। बहुत बहुत ही ठीक है। तो यार अब आ रहा
10:21
है यहां पर इसको इस्तेमाल करने का, ठीक है। और यहां पर
10:25
आप लोग जैसे कि देख ही सकते हो कि सारी की सारी news उनके
10:29
sources अच्छा एक दिक्कत मुझे दिख रही है अभी यहां पर पता है क्या? कि
10:33
ये जो Indian express है ये बाहर निकल रहा है इससे, ये बाहर नहीं निकलना चाहिए यार। मैं
10:36
इसको इसके overflow को यहां तो कुछ ऐसा कर दूँ। या इसको अंदर ले लूं मैं
10:40
तो इसको अंदर लेने के लिए कुछ मैं करता हूं अभी के लिए और
10:44
इसको fix करके जो है हम इस video को wrap करेंगे, तो मैं जल्दी से इसको ऐसे कर देता हूं
10:48
और इसको fix करने की कोशिश करता हूं। तो इस को fix करने के लिए मैं यहां पर एक
10:51
div add करूंगा सबसे पहले तो ठीक है, और इस div के अंदर डालूंगा
10:55
इस pen को और ये सारी classes यहां से हटा दूंगा except badge ah
10:59
और ये rounded pill यानी कि एक badge रहेगा ठीक है और ये style भी हटा
11:03
दूंगा इसमें से मुझे style नहीं चाहिए इसका, z index वगैरह मुझे set नहीं करनी है
11:07
तो अभी अगर मैं आप लोगों को दिखाऊं तो ये कुछ ऐसे बन चुका है कि div के अंदर आ चुका है। अब मैं इस
11:10
div को display दे दूंगा flex की कहां गया मेरा div मैं
11:14
rightly करके inspect करता हूं, ये जो मेरा div है इसको मैं display दे दूंगा flex
11:18
की display flex और मैं align items कर दूंगा आपका sorry justify
11:26
items, not align, justify item justify content center नहीं flex end ठीक
11:31
है, कुछ इस तरह से कर दूंगा। अब मैं यहां पर इसकी position
11:35
को absolute कर सकता हूं, ठीक है, और position को अगर मैं
11:38
absolute करूंगा, तो मेरे हिसाब से कि ये अपने यहां पर जगह
11:43
पर आ जाएगा और मैं यहां से left zero कर सकता हूं चाहूं तो
11:47
ठीक है, sorry right zero कर सकता हूं, चाहूं तो इसको एकदम right में भेजने के लिए, तो
11:51
ये सारा का सारा CSS में use कर सकता हूं, ठीक है। तो देखो CSS
11:55
तो आप लोग use कर लेना कोई वो नहीं है ठीक है, CSS तो जैसे मन चाहे आप लोग use कर सकते हो
11:58
अगर मैं इसको style के अंदर डाल दूं। अगर मैं style के through इसको style करूं
12:02
तो मैं वो भी कर सकता हूं। तो मैं यहां पर क्या करूंगा, style
12:07
is equal to अगर मैं कुछ ऐसे करूं तो ये सा अजीब सा दिख रहा है क्योंकि हम
12:10
अभी react में हैं, ठीक है, classes से भी कर सकते हो bootstrap की classes से
12:14
deflex करके class है शायद, if I am not wrong तो मैं एक काम करता हूं जल्दी
12:18
से semicolons हटा कर, और इसको एक java script object बनाता हूं तो
12:21
यहां पर comma लगाऊंगा, ये flex end को कुछ ऐसे करके यहां पर
12:25
comma लगाऊंगा, ठीक है। और same काम मैं यहां पर भी करूंगा
12:29
position absolute, position absolute की class भी use कर सकते थे यार हम लोग ठीक है
12:33
but ठीक है यार नहीं कर रहे हैं अभी, कैसे भी कर सकते हो आप
12:36
यहां एक comma और justify content को आपको ऐसे लिखना ठीक है
12:40
camel case में और right click format, document हाँ अब सही है
12:45
save करता हूं और अब देखो कि ये जो है इसके end में आ गया है बिल्कुल चिपक चिपक के आ गया
12:49
है यहां पर ठीक है। तो ये badges से और clean लग रहे हैं, ठीक है। तो यहां
12:53
पर जो सारे के सारे इसकी sources हैं वो यहां पर मुझे देखने को मिल रही हैं, news
12:56
की और right click करके अब अगर मैं आप लोगों को phone में दिखाऊं अब आएगा देखो
13:00
अब इसको देखने में मजा आएगा। और मैं चाहता हूं कि यार आप लोग time निकाल के देखो इसको आपके
13:04
phone में ये कैसी दिख रही है। मैं phone में ले लेता हूं इसको और अब देखो देखो ये कैसी चल
13:07
रही है, कितना मजा आ रहा है, general पे आपने click किया, news load हो गयी है और यहां पर देखो
13:11
सारी general की news load हो गयी। अब मैं नीचे अगर करूँगा page down तो देखो
13:15
ये इसमें infinite scrolling भी है, ठीक है। और यहां पर ये
13:18
सारी की सारी news जो है ये हमारी news API से आ रही है, और
13:22
इसको display कराने का काम हमारी react application कर रही है। तो I hope कि
13:26
आपको आया और अगर sports की news देखती है तो हम वापिस sports पर click करेंगे
13:30
और उसके बाद scroll करके sports की news देखेंगे, देखो यहां पर सारी sports की news आ रही
13:33
है, infinite scrolling भी है, नीचे देखो जैसे जैसे हम scroll कर रहे हैं, वैसे वैसे नई
13:37
news load होती जा रही है। तो एकदम perfect application ये बन चुकी है
13:40
and I am really very happy with this application। अब हम लोग क्या करेंगे आने वाले
13:44
videos में react के और concepts को सीखेंगे। ये एक ऐसी app है, मेरी
13:48
बात ध्यान से सुनना ये एक ऐसी app है। जिसको आप लोग अपने resume में
13:52
get up पर add कर सकते हो and this will add a lot of value
13:56
believe me। मेरी बात पर आप भरोसा करें, बहुत ज्यादा value add
13:59
करेगी और ये मैं कहने के लिए नहीं कह रहा हूँ। ये एक ऐसी application है जो
14:03
आज की तारीख में corporate word में लोग देखते हैं कि यार
14:07
हमें इस तरह की application बनवानी है। आपकी आपका page reload नहीं
14:10
हो रहा है सबसे पहले आप यहां पर जैसे click कर रहे हैं। इन सारी categories में, वैसे
14:14
वैसे यहां पर आपकी ये सब load हो रही है। तो this is really
14:18
amazing application resume में डालने के लिए और showcase करने के लिए
14:22
अपनी react skills को और ये उसी के साथ साथ बहुत useful भी है
14:26
तो अभी के लिए इस video में इतना है guys इस playlist को जरूर access करना अगर आप लोगों ने अभी
14:29
तक नहीं करा है तो thank you so much guys for watching this video and I
14:33
will see you next time।
#Educational Software