Adding a top loading bar to NewsMonkey _ Complete React Course in Hindi #36

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।

Adding a top loading bar to NewsMonkey _ Complete React Course in Hindi #36

codehunter.online

How to become a Blockchain Developer in 2022_ _ 🔥 Complete Roadmap + Salary + Tech Stack

How to make the Best Time Table_ _ Time Management for Students

Government or Private _ What job to do_

How to use DALL·E in 10 minutes

Create an Intro Video with AI _ Synthesia

How I Made This Video_ w_ ChatGPT, Synthesia, DeepBrain, Colossyan & Yepic AI

Easily Slice Part with Plane in FreeCAD | FreeCAD Tutorial | FreeCAD Part Design | Mechnexus |

Robots: Friend or Foe? Exploring the Pros and Cons

Use Python Console as Scientific Calculator in FreeCAD | FreeCAD Tutorial | FreeCAD Python |

4ft Firewood Rack Review

Atelier Resleriana: The Red Alchemist & the White Guardian - Official System Introduction Trailer

MERMAIDS: Cursed Wives Of The Watchers

Up next in 10

Adding a top loading bar to NewsMonkey _ Complete React Course in Hindi #36

codehunter.online