Up next in 10
Exercise 2_ Solutions + Shoutouts _ Complete React Course in Hindi #20
260 views
Feb 10, 2024
The video "Exercise 2_ Solutions + Shoutouts _ Complete React Course in Hindi #20" likely follows a previous exercise given in a React course presented in Hindi. In this video, the instructor provides solutions to the exercise presented earlier in the course, demonstrating how to implement the desired functionality or improvements in the React project. Additionally, the instructor may give shoutouts to participants who successfully completed the exercise or provided valuable contributions. Through explanations and practical demonstrations in Hindi, viewers can further reinforce their understanding of React concepts and learn from different approaches to problem-solving. This video fosters an interactive learning environment, encouraging participation and recognizing the efforts of learners.
View Video Transcript
0:00
तो गाइस सबसे पहले तो NPM run start करूँगा और उसके बाद बोलूंगा जो भी मुझे बोलना है और मैं क्या गहरा था कि हमने पिछले वीडियो में ये देखा था कि किस तरह से text tutorials को finally mytextutorials.com पर डालना है हमने बहुत खुबसूरत बनाया है इसको यार मज़ा ही आ गया आप �
0:30
बहुत सारा time दिया था क्योंकि मैं चाहता था कि सभी लोग करें इसको solve तो मैं इसको जल्दी नीचे क�
0:34
स्टॉल करता हूं और मैं आ चुका हूं एड दी वेरी एंड इससे पहले कि मैं आप लोगों को शाट आउट दूं मै�
0:39
करूंगा कि यहाँ पर आकर जल्दी से solve करूंगा इस question को ठीक है तो हमें करना क्या था हमे�
0:44
custom palette बनानी थी सबसे वह तो हमें custom palette बनानी थी तो मैं क्या करूंगा कि ज�
0:49
custom palette बनाऊंगा वो Navbar के अंदर बनाऊंगा तो मैं काम करता हूं कि यह जो मेरा form था मै�
0:55
और करूंगा कि यहां से सारे के सारे comments हटाओंगा, मैं थोड़ा clean करूँगा text tutorials को
0:59
बट एक बात और मैं बोलूँगा कि यार देखो, यह जो अभी मैं करने जा रहूं
1:02
मैं इसको deploy नहीं करूँगा mytexttutorials.com को, क्योंकि मुझे नहीं लगता कि एक text tutorials जैसी app में
1:07
हमको dark mode के अलावा और भी बहुत सारे colors की ज़रूरत पड़ेग�
1:11
यह just practice के लिए एक exercise थी तो हम इसको as an exercise ही लेंग�
1:15
और also मैं CSS पे ज़्यादा emphasize नहीं करूँगा with that said मैं यहाँ पर क्या करूँग�
1:19
कि एक div डालूँगा in fact मैं div with a class name of display
1:24
flex डालूँगा जो कि एक एक्स एक्स में दूरी बना कर रखें दूसरे के साथ और यहाँ पर मैं क्या करूंगा इसको एक स्टाइल दूंगा ताक�
1:43
इसकी हाइट और विड तो हो जाए क्योंकि ऐसे दिखेगा नहीं तो मैं आप रस्टाइल इज एकॉल टू हाइट दूंग�
1:48
40 pixel 30 pixel से start करते हैं अगर मुझे लगा छोटा बड़ा य�
1:52
तो मैं इसको और ठीक कर लूँगा ठीक है और width को भी मैं 30 pixel कर दूँगा ठीक ह�
1:57
height और width मैंने दोनों 30 pixel कर दी हैं इसकी अब क्या करूँगा मै�
2:01
ये करने के बाद मैं इसको save करता हूँ और मैं देखता हूँ कि मेरी app कैसी दिख रही ह�
2:07
तो मैं mytextutals.com को तो भी बंद कर देता हूँ मैं ये एक palette यहाँ पर मैंने बना दिया ह�
2:12
इसको और चोटा करना चाहते हो तो और चोटा कर सकते हो आप लोग मैं क्या चाहता हूँ कि इस palette पर कोई भी click कर�
2:18
यानि कि अगर कोई भी on click हो इस पे तो मैं कुछ ना कुछ करना चाहूँग�
2:22
obviously that's so obvious मैं कुछ ना कुछ करना चाहूँगा जैसे को इस पर click कर�
2:26
मैं क्या करूँगा जो मेरा app.js के अंदर toggle mode method थ�
2:29
वो क्या करता था पहले light theme को dark theme, dark theme को light theme
2:34
मना देता था, इस बार मैं क्या करूँगा, ये toggle mode जो है, इसको change जी कर दूँग�
2:38
पूरे function को, और मैं क्या करूँगा, मैं इसके अंदर एक, एक ची�
2:44
दूँगा mode, in fact एक काम करते हैं, ये जो मेरा mode है न, mode is equal to set mode, जैसे ये अभी light है
2:50
light के साथ साथ ये dark भी हो सकता है ये warning हो सकता है, ये danger हो सकता ह�
2:54
ये success हो सकता है, अगर आप लोगों को नहीं पता ये सब चीज़े क्या है, तो मैं आपको बताता हू�
2:58
color bootstrap पर अगर मैं जाओ तो आप देखो यहाँ पर color क�
3:02
in fact किसी भी तरह की coloring bootstrap में classes होती है primary, secondary, success, danger, warning
3:07
info, light, dark, muted, or white. ये सारी के सारी classes हैं
3:11
तो मैं क्या करूँगा? ये जो primary, secondary, success, danger है ये मैं अपने mode को बना दूँगा ठीक है? और कभी भी मुझ�
3:18
कुछ ऐसा काम करना पड़ेगा जैसे कि मुझे change करना है light theme से dark theme या किसी एक color से दूसरे color त�
3:25
class CLS class class reserved keyword JavaScript CLS
3:45
सिलेस क्या होगा सिलेस जब मैं डार्क थीम से लाइट थीम में लाइट थीम से डार्क थीम में जाऊंगा तो सिलेस नल होगा त�
3:51
तो सबसे पहले तो हमारा ने अब बार में बटन था इनेबल डार्क मोड में इनेबल डार्क मोड को चेंज करके टॉप मोड क�
3:58
दूंगा जब हमारे पर बहुत सारे पैलेट्स होंगे यहां पर तो यह दिक्कत आ रही है यह कह रहा है कि ऑन क्लिक आपन�
4:05
बताया नहीं कि क्या आपको करना है तो मैं props.toggle mode कर देता हूँ अभी के लि�
4:10
बाद मैं change करूँगा ठीक है तो कहां गया हमारा on click मुझे दिख क्यों नहीं रहा ह�
4:14
देवबर के अंदर है कहीं नहीं रही अरे मुझे दिख क्यों नहीं रहा हां विप दिख गया तो मैं इसके अंदर यह डाल देता हूं ताकि मेरी आप जो है वो कंपाइल हो जाए और अभी भी कंपाइल हो चुकी है ठीक है तो मैं भी इस पर क्लिक कर रहा हूं तो देखो डार्क थीम लाइट थीम डार्क थीम ला�
4:45
dark theme, white theme हो जाए, white theme, dark theme हो जाए, ठीक है, तो मैंने इसको toggle mode कर दिया, और मैं क्या करूँगा, कि toggle mode में एक parameter भेजूँगा, जो की है class, कौन सी class मैं set करना चाहता हूँ अपने mode को, तो यहाँ पर मैं क्या करूँगा, मैं कहूँगा onclick is equal to, अब मैं ऐसे नहीं कर सकता, मैं आपक�
5:15
एक बार और बोलूंगा on click को function चीज़ होता है function call नहीं चीज़ होती ये एक function call ह�
5:20
तो इसको function मनाने के लिए मैं क्या करूँगा एक arrow function मना दूँगा इसको कुछ इस तरह स�
5:25
मैं कहूँगा ये लो जी function चीज़ ही था ये लो ये function है अब on click के अंदर मैंने क्या दिया ह�
5:29
एक arrow function जिसके अंदर कुछ हो रहा है ठीक है जो कि मैं चाहता हूँ हो अब मैं इसको save करूँगा अगर तो आप लोग देखो इस पर मैं अगर click करूँगा तो यहाँ पर toggle mode run होगा मेरा with यह जो हमारा CLS है with CLS as primary ठीक है तो अगर मैं console.log करूँ यहाँ पर आपको दिखाने के �
5:59
primary आ रहा है इस पर click करूँगा तो क्या आ रहा है इस पर click करूँगा तो synthetic
6:03
base event आ रहा है यानी कि जो event है वो आ जा रहा है तो react में आपको मालूम है कि event
6:07
by default मिल जाता है but उसके बिवाद मैं क्या करूँगा ऐसा होता है उसके बावजूद भी मै�
6:11
मैं यहाँ पर null भेज दूँगा, वो वाला null नहीं भेजूँगा, null NU double L वाला भेजूँगा
6:17
कहा गया मेरा props, यह रहा toggle mode, मैं यहाँ पर इसको null भेजूँगा
6:23
वो वाला null मत समझ लेना, कहीं आप बोलो घर पर null तो आया है नहीं, भी भेजूंगा यह वाला नल नहीं है यह न्यूडबल वाला नल है ठीक है किसी के घर में मैं कोई नल नही�
6:31
भेज रहा हूँ अब यहाँ पर क्या होगा कि प्रॉफ्स टॉपल मोड प्राइमरी मैंने किया यही डिव मैं बना लूँग�
6:37
और हमारे success, danger इन सब के लिए भी, ठीक है, लेकिन इस, इससे भी पहले मैं क्या करूँगा
6:44
एक और CSS property add करूँगा, वो है cursor pointer, cursor pointer add करूँगा
6:49
इससे क्या होगा, मैं arrow लेकर जाओगा, तो देखो भी pointer बन जाएगा, ठीक है, तो अभी मैं क्या करूँगा
6:54
कि इस चीज को मैं करूँगा सबसे पहले तो मैं danger के लिए करूँग�
6:59
red color जो होता है और यहां भी danger लिख दूँगा फिर उसके बाद success
7:04
success के बाद warning that's about it यार जादा मैं नहीं करूँग�
7:08
warning success danger
7:38
करता हूं मैं कह सकता हूं document.body.class list.at और क्या मैं ऐड करूंगा मैं ऐड करूंग�
7:47
बीजी डेश जो भी चीज है जो भी मेरा सिर्फ प्राइमरी डेंजर जो कुछ भी है ठीक है तो अभी मैं देखो इस प�
7:54
पर क्लिक करूँगा तो यह रेड हो गया लेकिन ग्रीन पर क्लिक करूँगा तो यह रेडी रहा और मैं रिलोड करके अग�
7:59
ग्रीन पर क्लिक करूँगा तो यह ग्रीन हो जाता है रिलोड करके मैं येलो पर क्लिक करूँगा तो यह येलो हो जाता ह�
8:04
लेता है पर मुझे यह नहीं चाहिए मुझे यह चाहिए नहीं मुझे क्या चाहिए मुझे चाहिए कि यार मैं जब-ज�
8:09
क्लिक करूं तब तक मेरा बॉडी का कलर चेंज हो जो कि अब नहीं हो रहा तो रेड पर अटक गया अब नहीं हो रह�
8:14
हो रहा. ऐसा क्यों हो रहा है? ऐसा असली हो रहा है कि आपने एक बार बी जी प्राइमर�
8:18
add कर दिया. या मान लो बी जी डेंजर add कर दिया. अपनी बॉडी के अंदर. अब उसक�
8:22
बाद आप कोई भी background की class add करोगे वो ignore मारी जाएगी जब तक आप पुरानी क्लास को remove ना कर देते समझ जाओ मेरी बात को मैं आप लोग को बताता हूँ मेरे कहने का क्य�
8:29
मतलब है जैसे मैंने reload किया भी मेरी बॉडी में यानि की जो document डॉट बॉडी है उसके अंदर को�
8:34
नहीं है background वाली अब जैसे मैं यहाँ क्लिक करता हूँ बीजी डेंजर आ गई तो यह red color का दिख रहा ह�
8:39
अब अगर मैं यहाँ पर ऐसे क्लिक करूँगा तो इस बीजी warning body में add तो हो गई लेकिन बीज�
8:47
रिमूव नहीं हुई और बीजी डेंजर पहले आईड हुई थी तो इसलिए ये रेड ही दिखाएगा जब तक आ�
8:52
बीजी डेंजर को नहीं हटा सकते इस चीज को फिक्स करने के लिए मैं एक अजय को लिखूंगा रिमूव बॉड�
8:59
रिमूव बॉडी क्लासेस क्या करेगा मेरी डॉक्यूमेंट वॉटी में सारी क्लासेस को रिमूव कर देगा तो मैं द�
9:04
क्योंकि मैं डॉट बॉडी डॉट क्लास लिस्ट डॉट रिमूव कौन-कौन सी क्लास में रिमूव करना चाहता हूं बीजी लाइ�
9:11
रिमुफ करूंगा बीजी डार्क रिमुफ करूंगा सारी रिमुफ कर दूंगा अगर वह है तो बीजी लाइट बीजी डार्�
9:16
बीजी वॉर्निंग बीजी सक्सेस बीजी डेंजर सारी की सारी रिमुफ कर दूंगा सक्सेस भी कर दूंगा रिमु�
9:23
को नहीं छोड़ूंगा success भी remove कर दूँगा danger भी remove कर दूँगा warning भी remove
9:28
कर दूँगा सब remove कर दूँगा और जैसे ही मैं toggle mode कर रहा हूँ मैं यहाँ पर remove body
9:32
glasses को run कर लूँगा इससे क्या होगा मेरी document और body में से सारी glasses remove हो हो जाएंगी यह कैसा मजाक है यह मजाक नहीं है यह हकीकत है मैंने अरो फंक्शन नहीं लगाया ठीक है त�
9:43
मैं इसको रिलोड करूंगा और यह भी चल जाएगा चल चा सिम सिम यह क्या नाट medic और अच्छा सेंटेक्स में कैस�
9:52
कर सकते हैं जावास्क्रिप्ट के वो भी यहाँ पर देखो अभी बिल्कुल सही सही सब कुछ काम कर रहा है तो य�
9:57
देखो यहाँ पर कलर वगैरह बदल रहे हैं ठीक है बदल रहे हैं कलर नहीं बदल रहे हैं देखो बदल रहे हैं ठी�
10:02
अब मैं toggle mode करूँगा तो यहाँ पर देखो अभी अभी मैं दिक्कत में आ गया देखो मैं य�
10:06
toggle mode वाला जो button है इसको मैं use नहीं कर पा रहा हूँ तो यार यहाँ तो मैं इ�
10:09
toggle mode button को हटाई दूँ ठीक है या मैं यहाँ पर custom logic लिख लूँ तो यार वो आ�
10:14
खुद कर लेना मैं अभी के लिए टॉगल मोड बटन को अब फंक्शनल नहीं बना रहा हूँ आप यहाँ प�
10:18
जावास्क्रिप्ट लॉजिक लिख सकते हो और वो जावास्क्रिप्ट लॉजिक जो है बहुत ही सिंपल सा है आ�
10:22
यहाँ पर क्या कर सकते हो चेक कर सकते हो अगर आपकी CLS dark या अम लाइट है तो आपको क्या करना ह�
10:29
आपको किस तरह से चेंज करना है तो यह सारे काम आप लोग खुद कर लेना मैं अभी के लिए इसको ऐसे ही रहन�
10:34
custom logic robust custom logic requirement application but for now shout out
10:55
बाकी चीज़ें मेरे साथ से बहुत obvious है अगर आप यहाँ पर about के अंदर भी अ करना चाहते हो change इन इन सार�
11:01
background को change करना चाहते हो तो वो भी आप लोग कर सकते हो props की सायता से बहुत आराम से हो जाएगा और आने वाल�
11:08
videos पे जब हम देखेंगे use effect hook को तो ये सब चीज़े और असान लगेंगे आप लोगों को ठीक है but for now main changes क�
11:15
रखना नहीं चाता पठा मैं commit करके get up पे डाल दूँगा आप लोगों के लिए औ�
11:19
अगले वीडियो में वापस से मैं जो है उस commit को reward कर दूँगा ताकि मैंने क्या code लिखा हु�
11:23
यह आप लोगों को दिख जाए ठीक है तो यहाँ पर हम जल्दी से देखेंगे लोगों ने क्या क्या किया ह�
11:27
विशाल ठककर, अबेराना, फ्रीक, ओपी ओफिशल और चरिद दहिया, रोहिच शा, प्रनव ठाकु�
11:34
बिग शाउट आउट, प्रसाद प्रो गेमर, नॉट स्टूपिड devil calf monish giri
11:41
jazgun sing poetry collection by ayan ankush matyal ko shout out वापस से not stupid ने लिख दिय�
11:48
challenge accepted good prathmesh mane wrecked god poetry collection by ayan अब हम ढूनेंगे यहाँ प�
11:55
कि किसी ने अगर कुछ solve किया है तो और मुझे कोई solution नहीं दिख रहा है बीगल�
12:02
मुझे कोई solution नहीं दिख रहा है अब यहाँ पर देखो word count को कैसे ठीक करेंग�
12:05
यह मैंने पिछले वीडियो में बता दिया है तो question में था यह word count को ठीक करन�
12:10
बट मैंने अभी पिछले वीडियो में यह ठीक कर दिया है और यह देखो इन्होंने मेरा वाला ह�
12:13
method यूज़ किया है देख रहे हो इन्होंने मेरा वाला method यूज़ किया ह�
12:17
कि यार अगर आपका ये चीज के बराबर ना हो तब आप इसके elements को लोगे बरना नहीं लोगे ठीक ह�
12:23
तो यापर देखो word count के लिए यापर किसी ने function लिखा है big shout out red cod और सक्षन कुमार बिंदल को भी बहुत बड़ा shout out
12:30
और यहाँ पर मैं आपके नाम स्क्रॉल कर दूँगा कॉमेंट सेक्शन मे�
12:34
अभी के लिए अगले एक्सरसाइज का वेट करो यार और जल्दी सेल्दी पोस्ट करो अगर आपको शाउट और चेहिए त�
12:40
अगर आप लोगों ने अभी तक रियाक्ट जैस की इस playlist टो access नहीं किया है तो उसको जरूर access कर लेन�
12:45
जहां पात रही है इस custom logic को लिखने की वो आप लिख लेना औ�
12:49
मैं यहाँ पर लिखूँगा तो वीडियो बहुत लंबा हो जाएगा simple आपको क्या करना है कि toggle mode औ�
12:53
इसको एक साथ अगर आप लोग को करवाना है work तो वो आप करवा सकते हो but it doesn't make sense toggle mode क�
12:59
का होना भी sense नहीं बनाता है अब यहाँ पर एक और button light और dark
13:03
के लिए कर सकते हैं तो वो चीज़ मैं कर देता हूँ मैं toggle mode को हटा दूँगा यहाँ से यह जो toggle mode वाला यहाँ पर मैंने switch
13:08
लगाया हुआ है उसको मैं हटा दूंगा और मैं करूँगा क्या कि यहीं पर एक डार्क एक लाइट इन दोनों को मै�
13:15
ले लूँगा तो एक लाइट एक डार्क एंड आटल मेक मोड सेंस क्योंकि मैं नहीं चाहता यार कि एक टॉगल मोड भी ह�
13:23
पास और एक अ मेरे पास पैलेट भी हो या तो पैलेट रख लो या डार्क मोड लाइट मोड रख लो और हा minute
13:29
का बॉडर दे सकते हो आप अगर आपको लगता है यह लाइट वाला थीन जो दिख नहीं रहा है तो ठीक है तो यह सार�
13:33
आप कर सकते हो देखो मैंने light theme active किया अगर तो यहाँ पर देखो दिक्कत आ रही है यह ठीक से काम नहीं कर रहा है मैं इसको reload करके देखता हूँ भी हाँ आप काम कर रहा है देखो अब काम कर रहा है ठीक से यह yellow हो गया यह green हो गया यह यहाँ पर black हो गया यह यहाँ पर blue हो ग�
14:03
Thank you so much guys for watching this video and I will see you next time
#Skins
# Themes & Wallpapers