Up next in 10
Understanding state in class based components _ Complete React Course in Hindi #25
387 views
Feb 10, 2024
The video "Understanding state in class-based components _ Complete React Course in Hindi #25" likely delves into the concept of state management within class-based components in React, as part of a comprehensive course delivered in Hindi. In this tutorial, viewers can expect the instructor to explain the role of state in class-based components, including its purpose, usage, and importance in managing component data and UI changes. The instructor may demonstrate how to initialize, update, and utilize state within class-based components, illustrating its practical application through examples. Through clear explanations and practical demonstrations provided in Hindi, viewers can gain a solid understanding of how to effectively manage state in class-based components in React. This video aims to empower Hindi-speaking audiences with the skills needed to build dynamic and interactive user interfaces using class-based components and state management techniques.
View Video Transcript
0:00
तो अपने पिछले वीडियो में हम लोगों ने देखा था कि किस तरह से हम लोग यहाँ प�
0:04
डी स्ट्रक्चरिंग की साइटर से प्रॉप्स में से जो भी हमें निकालना है वो निकाल सकते है�
0:08
अब यहाँ पर मैं क्या करूँगा, state और props की बात करूँगा, उसी के साथ साथ constructor की बात करूँगा, यार देखो अगर आप लोगों को class से दिक्कत हो रही है, तो बिल्कुल भी आपको class से दिक्कत नहीं होनी चाहिए, जो कि यार हम class को उतना extensively use करी नहीं रहे हैं, हम इतना object oriented programming
0:38
नहीं ठीक है तो यहां पर हम लोग क्या करेंगे अभी अभी अपने न्यूज आइटम के अंदर एक तो हम लोग जो जो हमक�
0:44
प्रॉफ्स चाहिए वह लेंगे तो मुझे यहां पर एक इमेज यूआरल भी चाहिए ठीक है तो मैं यहां पर सिर्फ यूआर�
0:50
देता हूँ इसको इजी रखने के लिए यह मैं इमेज यूअरल लेता हूं यार हो सकता है मैं कोई दूसरा यूअरल पास करू�
0:56
यहां पर और मैं करूंगा क्या है यहां पर यह जो मैंने ऐसा रसी इज लिखा हुआ इमेज का इसको मैं सबसे पहल�
1:01
कंट्रोल एक्स करूंगा यहां पर यू आर लिखूंगा इन फैक्ट इमेज यू आर लिखूंगा मैंने यू को कापिटल रखा हुआ है उसी क�
1:09
और साथ यहाँ पर जो यू आर लाइफ पास कर रहा हूं न्यूज डोट जेस में से मैं आप पास करूंगा यू आर लाइ�
1:13
इकॉल टू अभी के लिए मैं यह वाला पास कर रहा हूं ठीक है तो इसको मैं कुछ इस तरह से करूंगा से�
1:20
लोग देखना जो पहला वाला मेरा कंपोनेंट होगा न्यूज आइटम उसमें सिर्फ आना चाहिए यू आरल मैं इसको रिलोड करत�
1:27
हूं नहीं आ रहा है देखता हूं क्या प्रॉब्लम आ रही है तो मैंने यहां पर यू आरल इज एकल्ड टो ठीक ठाक लिख�
1:31
इटम को दिया है ठीक टक यू आर एल तो मैं अगर यहां पर न्यूज आइटम के अंदर आ जाऊं तो यहां पर इमेज यू आर ए�
1:39
इमेज यू आर एल सब कुछ ठीक दिख रहा है मुझे यहां पर उसके बाद भी मेरा एस आर सी के अंदर यह यू आर एल नही�
1:44
नियुक्त करता हूं तो यहां पर कोई एरर नहीं इसको बंद करता हूं तो क्या दिक्कत आ रही है यह यूअरल क्यों नही�
1:54
आ रहा है ओके तो यहां पर मैंने इमेज यूअरल यूज किया हुआ बट यहां पर मैं यूअरल यूज कर रहा हूं देखो यार मै�
1:59
तो अजीब से काम करता हूँ, image URL अब आ जाएगा, ठीक है, तो यहाँ पर देखो, पहला वाला जो हमारा news item है
2:03
उसमें यहाँ पर यह URL आ गया, यह title आ गया, यह description आ गया, और यहाँ पर मैं read more लिख सकता हूँ
2:08
get somewhere के जगह read more कर सकता हूँ, तो मैं क्या करूँगा कि news item में आऊंग�
2:13
जो go somewhere लिखा हुआ है मैं लिखूँगा यहाँ पर read more और उसी के असा�
2:17
आप लोग को बदाना चाहूँगा कि एक btn sm करके class होती है bootstrap मे�
2:21
अब मुझे क्या ready हुई है यह क्या मैं याद करके बैठा हूँ, क्या किसी दिन मैं सुबह उठा और मैंने साली classes याद कर ली
2:26
नहीं, ऐसा नहीं हुआ, over the period of time मैंने ये साली classes यूज़ करी हैं, जिसकी वजह से मुझे ये याद रहा, तो देखो button छोटा हो गया
2:31
यहां पर बीटी एन ऐसे मैंने जैसे यूज किया मुझे चोटा बटन यहां पर चाहिए था उसी के साथ अगर आप लोग चाहत�
2:37
हैं कि यह जो हमारा आइटम है न्यूज आइटम यह थोड़ी सी दूरी बनाकर रखें ऊपर तो इसको मैं एम वाइट थी दे सकत�
2:44
टाइम इसे कोट टो कभी भी मुझे इसमें से दूरी कम ज्यादा करनी होगी तो मैं कर सकता हूं ठीक है तो यह आपक�
2:55
बता रहा हूं बस तो एक कार्ड हमने यूज किया इसके अंदर दाट सेट मैं सेव करूंगा इसको और यहां पर मैंन�
3:02
एडिल डिस्क्रिप्शन और इमेज यू वर्ल इसको दे दिया कि कोई और ऐसी चीज है जो मैं इसको बास करना चाहूंग�
3:06
नहीं यार मैं इसको और कोई चीज पास नहीं करना चाहूंगा वह या फिर करना चाहूंगा शायद मैं करना चाहूंग�
3:11
URL populate constructor javascript glass constructor
3:23
और constructor का मैं जैसे ही इस्तेमाल करूँगा, और save करूँगा और यहाँ पर आप लोगों को लेकर आँग�
3:27
तो देखो यहाँ पर एक error दे रहा है मैंने सिर्फ constructor की body लिख�
3:31
in fact body भी नहीं लिखी constructor का मुखडा लिखा सिर्फ उसके बाद एक error मिल गय�
3:35
तो कुल मिला कर यह मुझे से यह कह रहा है कि कभी भी आपको constructor लिखना ह�
3:40
तो आपको क्या करना है यहाँ पर super को कुछ इस तरह से call करना ह�
3:44
इन्हीं कि super class के constructor को call करना है वरना यह आपको error throw करेग�
3:49
तो यह चीज़ आपको हमेशा लिखना है constructor तब run करता है जब भी इस class का कोई object बनता ह�
3:54
ठीक है, technically अगर मैं constructor की बात करूँ तो, तो अगर मैं यहाँ पर कुछ भी लिखता हूँ
3:59
वैसे मैं react life cycle की पूरी बात करूँगा, सारी life cycle methods की बात करूँगा, अभी मैं बस आप लोगों को
4:05
hello, I am a constructor लिखा रहा हूँ, मैं कुछ इस तरह से लिख दू
4:09
और आप लोगों को फिर console दिखाओ, तो आप लोग भी यहाँ पर देखोगे, यह क्या error आ रहा है
4:14
यह कह रहा है कि must call super in drive class using this
4:18
तो मैं इसको reload करता हूँ, देखता हूँ क्या error आ रहा है, नहीं error नहीं आ रहा है, तो मैं इसको जैसे reload करूँगा
4:22
आप लोग देखो Hello I am a constructor तीन बार run हुआ, तीन बार क्यों run हु�
4:25
क्योंकि constructor ये news item का है ठीक है, तो तीन news item से तीनों के लि�
4:30
एक बार run हुआ ये constructor ठीक है तो ये तो constructor वाली बात हो गई अब मैं क्या कर सकता हूँ कि इ�
4:35
card की जो state है उसको यही से सेट कर सकता हूँedereen से सेट कर सकता हूँ तो यह जस्ट मैं आप लोगों को एक एग्जांपल के तौर पर बता रहा थ�
4:46
मैं इसको कंट्रोल एक्स करूंगा अभी यहां से और इस कंस्ट्रक्टर को लेकर जाऊंगा अपने न्यूज कंपोनेंट के अंद�
4:51
कि news component हमारा एक ऐसा component है, जहाँ पर हम लोग अपनी HTTP calls मारेंगे
4:56
और वहाँ से सारी के सारी news लेकर आएंगे, तो मैं क्या करूँगा, जैसे ही constructor run करेगा
5:00
मैं कहूँगा, कि hello, I am a constructor from news component, ठीक है
5:07
और उसके बाद मैं क्या करूँगा, लिखूंगा this.state is equal to एक object बनाऊंगा और मैं क्या करूँगा this.state को set कर दूँग�
5:17
equal to the sample output JSON तो मेरी state में articles होंगे मेरी state में total results होंग�
5:23
मेरी state में status होगा ठीक है तो मैं इसको copy कर लेता हूँ और यहाँ पर ले आता हूँ ठीक ह�
5:28
तो मैं कुछ ऐसा करूँगा और आप लोग देखो मैं जैसे ही ऐसा करूँगा और save करूँगा तो ये मेरे state का part बन चुके हैं ये सारे के सारे articles मेरी state का part बन चुके है�
5:38
इन फैक्ट मैं काम करता हूँ, कंट्रोल Z करता हूँ, ठीक है, मैं directly यहाँ पर state के अंदर पूरी बुरी JSON नहीं डलना चाहता
5:45
मैं यहाँ पर एक variable बनाऊँगा, मैं लिखूँगा articles, ठीक है, और articles को एक array बनाऊँगा, और मैं यहीं से लेकर आउँगा
5:53
तो इस जो articles वाला array है मेरा, मैं सिर्फ इसको copy करूँगा, और मैं इसको यहाँ पर लाकर रख दूँगा
5:59
ठीक है, तो इस जो articles है, इसको मैं ऐसे कर लेता हूँ
6:03
मैंने यहाँ पर articles को एक array बना दिया, मैंने कहा articles is equal to this array
6:07
ठीक है, article एक array है, कोई भी error तो नहीं मिल रहा है नहीं हमें नहीं मिल रहा है ठीक ह�
6:11
तो मैं reload करूँगा अगर यहाँ पर तो आप देखो hello I am a constructor from news component
6:15
सब कुछ ठीक ठीक चल रहा है कोई भी दिक्कत वाली बात अभी तक नहीं आई है ठीक है तो articles एक variable है जिसको मैं access कर सकता हू�
6:22
वह टोट आर्टिकल्स करके ठीक है का भर कर सकते हो एक्सेस मैं यहां पर कर सकते हो टो मैं यहां पर यहा�
6:27
state state this and that it state this articles this react documentation
6:39
react.js.org में और यहाँ पर मैं आप लोगों को लेकर जाओं docs मे�
6:45
और मैं in fact search करूँगा google पर ही react.js class component state
6:51
ठीक है तो set कर सकते हो ठीक है तो भी नहीं documentation में होगा documentation की बात ही होती है कि थोड़ा से comprehensive होती है तो कोंस्ट्रक्टर के अंदर इन app ने य�
7:06
this.state is equal to date किया हुआ है देख रहे हो आप लोग किस तरह से इन्होंने आपको this.state क�
7:11
ऐसे किया हुआ है तो this.state is equal to इस तरह से इन्होंने यह किया हुआ ह�
7:16
ठीक है तो आप लोग यहाँ पर जो है state को set कर सकते हो अब एक important बात यहाँ पर बोलना चाहूँग�
7:21
कभी भी this.state को directly up-set मत करो, हमने देखा था, कि जब हम लोग इस्तेमाल कर रहे थे hooks को
7:27
तब भी हम लोग वहाँ पर क्या करते थे, useState hook में, जो method होता था
7:31
उसको use करके state update करते थे, यहाँ पर हम क्या करेंगे, this.set state का इस्तेमाल करेंगे
7:36
तो यह देखो, लिए उसको false कर देता हू�
7:53
तो जब भी कोई चीज load हो रही होगी तो मैं उसको true कर दूँगा ताकि मैं कोई spinner वगैर�
7:57
दिखा सकूँ और उसके बाद मैं वापस से उसको false कर दूँगा जब सारा data load हो जाएगा त�
8:00
तो इस तरह के काम आप लोग कर सकते हो state की साहिता से तो हमने देखा कि this.state की साहिता स�
8:05
constructor के अंदर आप कैसे state को set कर सकते हो और आप लोग state को props की साहिता से भी set कर सकते ह�
8:11
this.props करके अब हमने this.props आलरेडी यहाँ पर देख लिया और मेरा कोई भी intention नहीं ह�
8:16
title और description को एक state बनाने का, क्योंकि मैं इसको dynamically change नहीं करूँगा
8:20
ठीक है, तो state आप तब इस्तेमाल करते हो, जब आप उसको change करो, जब आप उसको change करो
8:25
बार बार बार बार, और आप चाहो कि, आपकी screen पर वो variable change होता हुआ दिया
8:30
बिना page को reload करें ठीक है, तो ना ही तो मैं इस title को कभी change करूँगा
8:35
मतलब कि एक particular news item component के लिए, ना ही तो मैं title को change करूँगा
8:39
ना ही इसके description को change करूँगा, तो मैं इसको as a state set नहीं करूँगा
8:43
इसको as a prop पास करके, वैसे के वैसे ही रहने दूँगा, प्रॉप्स चेंज नहीं कर सकते आ�
8:48
अगर आपको कभी भी प्रॉप्स पास करके स्टेट सेट करनी है तो आप स्टेट सेट कर सकत�
8:52
और उसको बाद स्टेट को चेंज कर सकते हो प्रॉप्स को चेंज नहीं कर सकते आप लोग डिरेटली props are read only हमने देखी थी बा�
8:58
तो चलो यार ये सब तो हमको समझ में आ गया अब हम लोग क्या करेंगे कि इन सारे के सार�
9:02
articles को display कराएंगे और ये देखेंगे कि कैसे इनको display कराय�
9:06
जा सकता है तो अगले वीडियो में हम लोग देखेंगे कि किस तरह से हम लोग य�
9:10
news के अंदर यह जो सारी की सारी news है यह जो articles वाला array ह�
9:13
जिसको हमने अपनी state का part बना दिया है किस तरह से हम इन articles क�
9:18
iterate करके screen पर display करा सकते हैं और हम यह भी देखेंगे कि किस तरह स�
9:22
जब भी user next पर click करें या maybe scroll करें नीचे क�
9:26
तो किस तरह से इन articles array में और articles append करके इनको populate किया जा सक�
9:32
तो यह सारी की सारी चीज़ें हम लोग देखेंगे आने वाले टाइम में आने वाले वीडियो मे�
9:35
और loading is equal to false मैंने लिखा हुआ एक spinner भी मैं लगाना चाहूँग�
9:39
पर अभी के लिए मैं एक चीज़ और करना चाहता हूँ hrf is equal to news detail news detail slash purpose id send
9:57
news id, news id क्या होगी, uniquely define करेगी news को, I am sure कि इन्होंने कुछ ना कुछ एक unique identifier दिया होग�
10:05
sample output में जैसे कि अगर हम articles को खोलें तो source है तो देखो यहाँ पर id और name ह�
10:11
बट इसको uniquely identify करने के लिए अगर कोई चीज मुझे यहाँ पर दिख�
10:15
तो वो URL to image है तो मैं URL से uniquely identify कर सकता हू�
10:20
कि इस चीज को uniquely identify कर सकता हूँ इस particular news को तो कभी मुझे इस particular object क�
10:25
यानि कि इस particular news को अगर refer करना है तो मैं इस URL का इस्तेमाल कर सकता हू�
10:29
URL हमेशा unique होने वाला है हर news का तो ये चीज मुझे इस बात की समझ रखनी ह�
10:34
और मैं फिर क्या करूँगा कि एक news detail component बनाकर ये सारा का सारा data एक बहुती अच्छी तरह से एक precise form में दिखा सकता हूँ, ठीक है, तो मैं क्या करूँगा, कि जो URL है उसको भी पास करूँगा, और URL to image तो मैं पास करी रहा हूँ, ठीक है, तो मैंने आपको बोला था ना, कि एक दूसरा URL भी मैं पास कर सकता ह�
11:06
नहीं करता हूं ठीक है मैंने इसको ले तो लिया अपने प्रॉप्ट से बट विश्व यूज नहीं करूंगा और न्यूज यूअर�
11:10
को मैं पास करूंगा अपने न्यूज डॉट जीएस वाले कंपोनेंट से तो मैं इसलिए क्या करूंगा न्यूज यूअरल इ�
11:16
एक्टू मैं देख दूंगा टू टू टू का मतलब मुझे करना है इस पर काम अभी अभी के लिए मैं इसको न्यूज यूआर�
11:21
एक्टू टू डू कर दूंगा अब एक चीज और आप लोग देख रहे होगे कि जो न्यूज आइटम है यह वाला और न्यूज आइटम ह�
11:27
वाला इसके अंदर हमने जो image का URL है वो नहीं भेजा है ठीक है तो image URL मैंने इसका नहीं भेजा है जिसकी वजह से यहाँ पर यह दो news इसलिए दिख रहे हैं मैं control shift reload करूँगा तो देखो यहाँ पर यह दोनों URL जो हैं cache हो रहे थे तो उसकी वजह से दिख रहे थे अभी यह न�
11:57
लिया करो कैसे सब क्लियर हो जाएगी से ऐसे वाला कैसे नहीं है यह वाला कैसे ठीक है तो आप कैचे भ�
12:04
बोलते हैं लोग इसको देशी बाजा में ठीक है कुछ भी बोलना ठीक है बट कैसे बोलते हैं यह कैसे तो कैसे भ�
12:11
अगर आपने कर ली उसके बाद भी आपको image नहीं दिख रहा है तो इसका मतलब कि आपने यहाँ पर जो ह�
12:16
इसको pass नहीं किया तो हम image URL को pass करेंगे in fact हम एक loop लिखेंग�
12:19
loop के थूँ हम लोग इन सारे के सारे articles को iterate करेंग�
12:24
और एक एक करके सारी image को दिखाएंगे So I hope that you guys understand
12:28
The concepts that we have learned so far This dot state This dot set state we have not done yet
12:33
But I hope that you guys understand How to use this dot state and this dot props
12:37
Next we will iterate this And display it in our news app
12:42
So that's all for this video Thank you so much guys for watching this video
12:47
And I will see you next time करते है�