Up next in 10
Changing Class based NewsMonkey components to Functional based _ Complete React Course in Hindi #39
146 views
Feb 11, 2024
In the 39th episode of the "Complete React Course in Hindi," the tutorial focuses on refactoring NewsMonkey components, transitioning from class-based components to their functional counterparts. The video provides an in-depth exploration of this conversion process, highlighting the advantages and best practices associated with functional components. The instructor guides viewers through the step-by-step transformation, offering insights into the simplified syntax and improved performance that functional components bring to React applications. Whether you're a React developer seeking to stay current with best practices or a learner looking to understand the benefits of functional components, this tutorial equips you with practical knowledge on transitioning from class-based to functional components in the context of the NewsMonkey React App.
View Video Transcript
0:00
So guys, जैसे कि हम लोगों ने बात करी थी कि हम पूरी की पूरी application को hooks और उसे के साथ साथ function based component में refactor करने वाले हैं, तो यही काम हम लोग यहाँ पर करेंगे, एक comment मुझे आया था जिसमें कि यह बताये गया था कि यार मैं जब यह 192 वाला link खोल रहा हूँ तो मेरी application नहीं चल र�
0:30
यही local host से development हम करेंगे यह जो app है वो मैंने आप लोगों को primarily
0:34
react सिखाने के लिए बनाई है इस तरह की कोई दूसरी API शायद आप लोगों को मिल जाते हैं तो आप वो use कर सकते ह�
0:38
और इससे similar कोई दूसरी app भी बना सकते हो तो तो यह बात जो है आप लोगों ध्यान में रखना है तो आप अगले नहीं होगा आपको यह वाला 192 वाला लिं�
0:46
यूज करने में रहा रहा है अब हम लोग क्या करेंगे यहां पर चेंज करेंगे अपने सारे कंपोनेंट्स को औ�
0:51
class based component से function based component बनाएंगे मेरे लिए सबसे आसान होग�
0:56
refactor करना navbar.js वाले component को अच्छा उससे भी पहले एक बा�
1:00
बोलना चाहूँगा कि बहुत सारे लोग ये पूछ रहे थे कि क्या आधे components
1:04
class based और कुछ components function based हो सकते हैं react application मे�
1:08
तो जवाब है yes हो सकते हैं आपकी part of react application function based component हो सकती ह�
1:14
और part of application आपकी यहाँ पर class based component हो सकती ह�
1:19
तो class based component को function based component में convert करने के लिए मैं क्या करूँगा सबसे पहले तो यह जो class लिखे हुई है इसको एक function मनाऊंग�
1:25
तो मैं आपका लिखूँगा const navbar is equal to एक arrow function ठीक ह�
1:32
और जो arrow function है यह क्या लेगा यह prop लेगा ठीक है और यहाँ पर जहाँ जहाँ मैंने this.props लिखा हुआ ह�
1:38
क्या मैंने कहीं this.props लिखा है नहीं यहाँ इसको कोई props receive भी नहीं हो रहे है actually
1:42
तो सबसे आसान तो मेरे लिए navbar.js query factor करना ही है तो यह जो render sorry render function ह�
1:48
यहाँ पर start हो रहा है यहाँ पर बंद हो रहा है तो मैं इसको अटाओंग�
1:52
और इसको भी अटाओंगा तो मैंने render का opening bracket और closing bracket हटा दिया ह�
1:58
तो अब क्या हो रहा है यहाँ पर कि मेरा एक function है जो कि यह चीज़ return कर रहा ह�
2:02
प्रॉप्स में यूज कर नहीं रहा है उसलिए प्रॉप्स भी अटा सकता हूँ मैं मैंने सेव कर दिय�
2:06
और यहाँ पर देखो application बिल्कुल ठीक से चल रही है ठीक है तो यहाँ पर हम क्या करेंग�
2:11
यह हमारा जो है function based component बन चुका है यही काम अब हमको करना ह�
2:17
बाकी सारे components के लिए यहाँ पर यह जो फाल्दू spaces ह�
2:21
यह मैं हटा रहा हूँ और मैं अपने component को थोड़ा अच्छे से लिख रहा हू�
2:25
looks good तो navbar.js का काम हो चुका है अच्छा by the way हमारे बास कितने components ह�
2:31
एक, दो, तीन, चार components है क्या spinner.js है class based component ह�
2:34
हां, spinner.js एक class based component है, सबसे आसान target मुझे navbar.js लगा
2:41
second आसान target अगर मैं कहूँ तो मुझे spinner.js लग रहा है, इसको मैं बड़े प्यार से बना सकता हूँ
2:45
function based component, यही काम करूँगा, render यहां खुल रहा है, यहां बंद हो रहा है, बंद को पहले अटाऊंगा
2:50
पर यह खुला हुआ तो दिखी रहा है इसको हटा दूंगा और यहाँ पर मैं लिख दूंगा कॉन्स्ट स्पिनर इज इक्वल ट�
2:57
क्या एक एरो फंक्शन और यह जो एक्सपोर्ट लास्ट इसको मैं कॉन्स्ट कर दूंगा कॉन्स्ट स्पिनर इज इक्वल टू ए�
3:03
फंक्शन और स्पिनर एक्सपोर्ट भी हो रहा है तो यहाँ पर देखो एप्लीकेशन बिल्कुल सही चल रही ह�
3:07
हेल्थ पर क्लिक करूंगे स्पिनर बिल्कुल सही गुम रहा है अगर मैं नीचे यहाँ पर स्ट्रॉल करूंग formula सब्सक्राइब तो यहां पर यहां पर कभी-कभी एपिएई जो है कुछ-कुछ इमेजेज ऐसे भेज दिया जो क�
3:26
अक्सेसबल नहीं है ठीक है तो यह लोग शायद एपिएई को अपडेट करते हो बैक एंड में जो भी मैनेज करता हू�
3:31
पीआई को organizes अब कुछ ठीक है तो यहां पर मैंने स्पेनर को भी बना दिया फंक्शन वेस्ट कंपोनेंट दो हमन�
3:38
बड़े आराम से बना दिए अपने फंक्शन वेस्ट कंपोनेंट कुल मिलागर कितने कंपोनेंट से 1234 नहीं पांच कंपोनें�
3:44
डोट जेस बीए कमारा, उसको भी हमें एक function based component बनाना है
3:48
तो 5 में से मैं कहूँगा, हमने दो components तो बड़े आराम स�
3:52
बिल्कुल मक्खन की तरह कर दिये convert function based component में, लेकि�
3:56
अभी 5 में से 3 बचे है, तो इन 3 components का क्या करना है, सबसे पहल�
4:00
News item की बात करता हूँ मेरे जावसे News item सबसे आसान रहेगा side effects Component did mount News News item Component did component mount news but news item component mount
4:16
उसी के साथ साथ हम constructor का भी इस्तेमाल कर रहे हैं, तो ये सारे Under काम किये जा रहे है�
4:20
तो हमें क्या करना है कि अब जो NewsItem.js है उसको हमें Convert करना ह�
4:28
Function Based Component में तो वही काम करूँगा const कर दूँगा यहाँ प�
4:32
और ये is equal to एक arrow function is equal to एक arrow function ठीक ह�
4:36
रेंडर का ब्रैकेट यहाँ बंद हो रहा है इसको अटाओंगा क्लोजिंग ब्रैकेट और इसको ऐसे अटा दूंगा ठीक है जो दिस डॉट प्रॉप्स था वह प्रॉप्स है मैंन�
4:44
डीस्ट्रक्चर नहीं करी थी और यहां पर मैं प्रॉप्स लिखूंगा और यह दिस डॉट अटा दूंगा क्या कहीं और मैं इसक�
4:50
इस्तेमाल कर रहा हूं नहीं यार मैं कई और इसका इस्तेमाल नहीं कर रहा हूं क्या कोई और ऐसी चीज है जिसक�
4:56
मुझे चेंज करना है हां मैं यह जो कंपोनेंट आप इसको इस्तेमाल नहीं कर रहा हूं ठीक है इंपोर्ट रियाट त�
5:01
करें यहां पर जो है मैं इसको सेव कर दूंगा और जैसे मैं इसको सेव करूंगा आप लोग यहां पर देखो मेर�
5:08
एप्लीकेशन बिल्कुल सही से चलेगी चलनी तो चाहिए और चल भी रही है ठीक है तो यहां पर यह खबरे वगैरह पड़�
5:15
लगाए करो ठीक है एंडरटेनमेंट की खबरें पड़ो जो उनसी मंचा है खबरें पड़ो ठीक है तो आई होब कि यहां प�
5:22
आप लोगों समझ में आ गया कैसे हमने न्यूज आइटम डोट जीएस को रिफैक्टर किया एक फंक्शन वेस्ट कंपोनेंट मे�
5:27
इसको भी यहाँ पर मैं काटूंगा अब थोड़ा सा चैलेंज है News.js को रीफैक्टर करना और App.js को रीफैक्टर करना एक basic रीफैक्टर तो यहाँ पर मैंने आपको करके दिखा दिया जो कि हमने किया अपने बागी News item और Spinner और Navbar components को यही काम अब हमें करना है News.js के साथ और App
5:57
लिखना है प्रॉप टाइप्स और आपका डिफॉल्ड प्रॉप्स तो आप क्या करोगे यहाँ पर एक नई टैप खोलोगे और नई टैप में आ�
6:04
लिखोगे प्रॉप टाइप्स इन फंक्शनल कंपोनेंट्स ठीक है और मैं स्टार्ट वर्ग नहीं वेरी आपकी डॉक्यूमेंटेशन ह�
6:11
लूंगा और मैं यहां पर सीधा प्रॉप टाइप ही लिख दूंगा और मुझे आप यहां पर कोई ना कोई एक्सांपल मि�
6:17
जाएगा तो ग्रीटिंग एक क्लास है पर मुझे फंक्शन चाहिए तो मैं यहां पर फंक्शन के लिए देख रहा हूं क�
6:23
क्या मुझे कोई ऐसा function-based component मिल जाएगा जिसमें कि मुझे इसका usage समझ में आ जाएग�
6:28
तो मैं function-based component रूट रहा हूँ कि function components में कैसे prop types को use करना ह�
6:32
तो देखो यहाँ पर इन्होंने बताया हुआ है यह एक function-based component है इन्होंने इस function का ना�
6:36
dot prop types करके same चीज लिखी हुई है, तो मैं भी यही काम कर सकता हूँ, function का नाम
6:41
जो कि हमारा news है, अभी मैंने इसको function में convert किया नहीं है
6:45
बट कर दूँगा, function का नाम dot prop types, ठीक है, और उसी के साथ साथ
6:50
दिफल्ड props के साथ भी यही किया जाएगा, प्रॉप टाइप्स के साथ भी एक यह जाएगा, यह दोनों चीज़ें मैंने यहाँ से निकाल दियें, ठीक है, अब क्या करूँगा मैं, अब यहाँ पर मैंने एक capitalized first character इस class का पार्ट बनाया था, बट अब मैं क्या करूँगा, इस function के अंदर ही एक function बना दूँगा, ठीक ह�
7:22
बनाता हूं इसको अब क्या करूंगा मैं अब यहां पर मैं यूज एफेक्ट होगा इस्तेमाल करूंगा ठीक है यूज एफेक्ट अ�
7:31
यूज इफेक्ट तो मुझे चाहिए होगा ठीक है तो मैं देखता हूं इंपोर्ट यूज इफेक्ट फ्रॉम डिवाइट करना है मुझे तो मैं यहा�
7:38
कर लेता है कमा लगाकर हर चीज का इस निपेड भी नहीं ढूंढना चाहिए तो यहां पर आ गया यह यूज एफेक्ट फ्रॉम डिएक्�
7:44
मैं क्या करूँगा, यह जो मेरा function component इसके अंदर use effect का इस्तेमाल करूँगा
7:48
सबसे पहले तो यह जो constructor है, इसको हटाऊँगा, जो मुझे यह नहीं चाहिए, यह constructor
7:52
मेरा काम भी नहीं करेगा, क्योंकि मैं class based component में नहीं हूँ, यह जो states मैं use कर रहा हूँ
7:56
इन सारी states को मैं change करूँगा use state से ठीक ह�
8:00
किस से करूँगा use state से तो एक काम करते हैं जल्दी से यहाँ प�
8:03
कि सबसे पहले तो मैं use state का इस्तेमाल करता हूँ ठीक ह�
8:07
और मैं ये काम function के अंदर लिखूँगा तो मुझे use effect के साथ सा�
8:45
यहाँ पर use state का इस्तेमाल करूँगा, और यहाँ पर मैं page के लिए बनाऊँगा
8:51
initial value 1, और यही काम मैं वापस से करूँगा, use state
8:58
total results, ठीक है, set total results, और total results default 0 है
9:05
ठीक है, तो यह state तो मैंने कर दी, set, इसको मैं मिटा दूँगा, document के title क�
9:09
hold पर रखते हैं यह इतनी important चीज नहीं है इसको ज़रा hold पर रखते है�
9:13
comment out मैंने इसलिए कर दिया हूँ कि मैं इस पर आउंगा वापस अभी ठीक है capitalize first letter को अब इस्तेमाल कर लेंग�
9:20
async update news इसको मुझे इस तरह से लिखना पड़ेगा const update news is equal to
9:25
const update news इस एक्वल टू यह कैसे फंक्शन है तो मुझे यह फंक्शन यहां पर लिखना पड़ेगा कुछ इस तरह से अभी देखो यह भ�
9:34
चला गया है से ठीक है सेट दिस्टर सेट स्टेट जो मैं कर रहा था उसको मुझे चेंज करना पड़ेगा किस चीज मे�
9:40
मुझे ये जो set loading set articles हैं ये सारे functions use करने पड़ेंग�
9:45
ठीक है तो इसको भी करेंगे हम लोग this.props को मुझे props मे�
9:49
change करना पड़ेगा तो मैं props में change करूँगा तो जहां जहां this.props थ�
9:53
वहां props किया जाएगा ठीक है props.setprogress और उसी के साथ जहां जहां लिखा हुआ है props
10:01
उसको मैं replace करूँगा props से ठीक है ये तो मुझे याबर करना ह�
10:05
replace all कर देता हूँ सारे this.props मेरे props हो गए ठीक ह�
10:09
अब क्या करूँगा ये जो मेरा set state है इसमें मैं ये सार�
10:13
functions यूज़ करूँगा तो set articles है है मेरे सेट आर्टिकल्स को मैं क्या करूंगा पास डेटा डॉट आर्टिकल्स ठीक है यह कर दूंगा उसी के साथ-सा�
10:22
मैं सेट टोटल रिजल्ट्स करूंगा क्या करूंगा मैं पास डेटा डॉट टोटल रिजल्ट्स ठीक है इसी के साथ-सा�
10:31
लोडिंग करूंगा फॉल्स ठीक है जैसे कि यहां पर रख दो यह जो चीज मैंने करी दिस डॉट सेट स्टेट वाली इसको मैंन�
10:40
रिप्लेस कर दिया है अपने इन सेट वाले जो फंक्शन जो कि मेरे यूज स्टेट वाले जो फंक्शन से सेटिंग वाले तो मैंन�
10:46
पेज अभी तक यूज नहीं किया और नहीं मैंने सेट टूटल रिजर्ट्स कर लिय�
10:51
सेट पेज अभी तक मैंने यूज नहीं किया जो कि हम करेंगे अभी ठीक है तो ये काम हमने कर दिय�
10:55
component did mount जो काम कर रहा है वो मेरा use effect करेग�
10:59
ठीक है use effect कैसे करेगा मैं यहाँ पर use effect का इस्तेमाल करूँग�
11:03
clean up अभी मैं कुछ कर नहीं रहूँ यह मेरा effect होग�
11:07
क्या होगा मेरा effect this.updateNews और मैं किसी को listen नहीं करूँग�
11:11
यहाँ जो जिस input को मैं listen करना चाता हूँ यहाँ जिसके change पर यह effect run ह�
11:16
वो चीज होती है यह इसको मैंने एमटी अरे दे दिया तो यह सिर्फ एक बार रन होगा ठीक है दिस डॉट अपडेट न्यूस ठीक है कंपोनेंट रिड माउंट को मैं अभी यहां से अटा देता हूँ ठीक है और यह करने के साथ साथ हम लोग क्या करेंगे हैंडल प्रीविय�
11:46
नॉट डिफाइन हैंडल प्रीवियस क्लिक इस नॉट डिफाइन हैंडल नेक्स्ट क्लिक इस नॉट डिफाइन कि सारी के सारे एरर्�
11:51
को ठीक करते हैं इन पर कॉंस्ट लगाना पड़ेगा आपको ठीक है क्योंकि पहले तो क्लास के पार्ट थे अब यह लास्�
11:58
नहीं है ठीक है कॉल्स अपडेट न्यूज कर दिया इसको भी मैं कॉल्स कैपिटलाइज फर्स्ट लेटर कर दूंगा और जहा�
12:04
जहां दिस डॉट लिखा हुआ है भी जहां जहां दिस डॉट लिखा हुआ उसको मैं अभी दो दिस डॉट से डॉट पेज लिख�
12:37
करेगा जहां जहां मैंने दिस्ट प्लेट न्यूज लिखा हुआ है उसी के साथ साथ यह जो सेट स्टेट है मुझे सेट पे�
12:44
करना पड़ेगा इसको ठीक है और मुझे क्या करना पड़ेगा पेज प्लस वन ठीक है जो भी पेज की वैल्यू है सेट पे�
12:51
पेज प्लस फन ठीक है तो पेज हमारी स्टेट का पार्ट है तो इसको मैंने चेंज कर दिया इसमें सेट पेज पे�
12:58
प्लस फन और यहां पर पेज माइनस फन ठीक है यहां पर सेट पेज पेज माइनस फन बाय देवर मुझे हैंडल प्रीवियस लेक�
13:05
अब इस लिए अभी चाहिए भी नहीं कि मुझे लगता मैं इस्तेमाल कर रहा हूं बट अगेन मैं इसको जिस रिपैक्ट�
13:11
कर देता हूं और दिस टॉट के अभी भी मौजूद है अभी भी 12 जगह दिस टॉट मौजूद है तो यहां बट दिस टॉट स्टे�
13:17
articles की जगह सिर्फ articles करना है मैं articles.com cat और हमें set articles use करना है ठीक ह�
13:23
set articles क्या कर देना है articles.com cat ये तो यार देखो मेहनत तो है यार ठीक है और बहुत साइल लोगों भी ये वीडियो भी boring लगेगा कि यार मैं बैठके एक एक करके सब को change कर रहा हू�
13:33
तो यार देखो करना तो पड़ेगा ठीक है अगर हम इसको फंक्शन में इस कंपनेंट में बनाना है तो और मैं क्या कर रहा हूँ जो this.setstate वाली calls है उनको replace कर देना हूँ setarticles set total results जिस तरह से मैंने आपको explain किया था use state hook बिल्कुल वही कर रहा हूँ मैं ठीक है अभी भी this.just 10 �
14:03
नहीं चाहिए articles में भी नहीं चाहिए और उसी के साथ साथ लोडिंग में भी नहीं चाहिए ठीक है तो जहां जहा�
14:09
यह दिस्ट और स्टेट डॉट यूज हो रहा है अब यह देखो सेट स्टेट हो रहा है � scoring पेज को एक से इंक्रमेंट करन�
14:15
कि मैंने यहां पर किया हुआ है तो मैं यह करूंगा ना कि यह ठीक है अभी भी दिस्ट है क्या है यार भी दिस्ट तीन जग�
14:22
लिखा हुआ है कोई बात नहीं नेक्स्ट इगल टू दिस डॉट पैच मोड की जगह फेच मोड ठीक है और यहां पर दि�
14:28
डॉट स्टेट और आर्टिकल्स आर्टिकल्स डॉट मैप ठीक है कि अभी भी � inversed लिखा हुआ है हां लेकिन वह कमेंटेड ह�
14:34
चलो यार इसको भी हटाई लेते हैं कमेंट भी है तो क्या है ठीक है दिस डॉट पर ले सारे दिस डॉट पर आगर मैंने सेव कर लिय�
14:40
लेकिन अब यह रहा है कि रफिफ फैच मोड डाइट इस डॉट डिफाइन देखते हैं � sack वो डाटा के डिफाइन नहीं है फै�
14:46
पर करके लिखना पड़ेगा फेस्ट पोर्ट इस इकुल टू एंड यूज इट वर्क्सbell तो हमने अपनी आपको रिफैक्टर कर लिय�
14:56
इस कंपोनेंट को एक प्लास बेस्ट कंपोनेंट से फंक्शन बेस्ट कंपोनेंट में हमने इसको चेंज कर लिया ठीक ह�
15:02
क्या कोई बग तो नहीं आ रहा है यह भी देखना पड़ेगा नहीं आ रही तक तो नहीं आ रहा है सब कुछ ठीक से चल रहा है हमारी न्यूज भी खुल रही है सब कुछ दिख रहा है यहां पर शारोख खान का बॉडी गार्ड भी दिख रहा है 2.7 करोड भी कमा रहा है वो क�
15:32
बढ़िया यार बढ़िया चल रहा है भी तक सब कुछ और लोडिंग बार वगैरह ठीक काम कर रहा है यह ऊपर वाला ठीक है तो यहाँ पर आप लोग देख सकते हो Görd
15:42
handle previous click and handle next click मुझे नहीं चाहिए बट in case आप लो�
15:47
जो मैंने previous next buttons बनाये थे उनको अगर आप refactor कर रहे ह�
15:51
तो आप इसको इस्तेमाल कर सकते हो तो आने वाले वीडियो में हम लोग क्या करेंगे कि जो app.js ह�
15:55
इसको भी refactor करेंगे और मैं इस वीडियो में एक काम इसलिए नहीं कर रहा हू�
15:59
कि मैं चाहता हूँ कि आप लोग try करें इस चीज़ को app.js को refactor करने की कोशिश आप लो�
16:05
खुद से करें ठीक है तो अगर आप लोगों ने अभी तक ये react की playlist access नहीं कर रही है तो यार जल्दी स�
16:10
इसको access करो यहां के लिए करके save करो playlist को यहां के लिए करक�
16:13
इसको bookmark कर लो playlist को अभी के लिए इस वीडियो में इतना है गाई�
16:17
thank you so much guys for watching this video and I will see you next time
#Computers & Electronics
#Electronic Components
#Electronics & Electrical