Up next in 10
Improving Dark Mode & Refactoring App Component _ Complete React Course in Hindi #12
Feb 10, 2024
The video "Improving Dark Mode & Refactoring App Component _ Complete React Course in Hindi #12" is likely part of a React course delivered in Hindi. In this video, viewers are shown how to enhance the functionality of the dark mode feature in a React application, possibly building upon the previous tutorial where the dark mode toggle button was implemented. Additionally, the instructor demonstrates how to refactor the App component, likely optimizing its structure and code for better maintainability and readability. Through explanations and practical demonstrations provided in Hindi, viewers can learn advanced techniques for improving their React applications and gain insights into best practices for code organization and optimization. This tutorial aims to empower Hindi-speaking audiences with the skills needed to create more robust and efficient React applications.
Show More Show Less View Video Transcript
0:02
So guys यहाँ पर मैंने इस application को start कर दिया है। NPM start run
0:05
करने के बाद आप देख सकते हो application कुछ ऐसी दिखती है और इस video में हम
0:09
लोग क्या करेंगे? इस application की सुंदरता को सुंदरता को से क्या
0:13
मतलब है? मैंने यहाँ पर enable dark mode का आह discussion किया था। मैंने
0:16
बात की थी आप लोगों से कि हम dark mode को enable कर सकते हैं। लेकिन बात पता है क्या हुई
0:20
थी वहां पर हमने about component में किया किया था और उसके बाद मजा भी नहीं
0:24
आया था सा part जो है वो dark हुआ तो आप लोग सोच रहे होंगे कि
0:27
यार मजा तो आ नहीं रहा है। तो यार इस video में वो मजा आने वाला है। चलो
0:31
देखते हैं वो मजा कैसे आएगा। मैं यहाँ पर क्या करूँगा मेरी बात को ध्यान से समझना
0:35
और सुनना देखो app dot JS जो है मैं चाहता हूँ कि मेरी
0:38
app dot JS से पूरी application की state को मैं manage करूँ। मैं इस बात को repeat
0:42
करता हूँ। मैं पूरी application की जो state है यानी कि मेरी ये react website की
0:46
जो state है मैं चाहता हूं कि app dot JS से मैं manage करूँ। इसका मतलब
0:49
ये होगा कि अगर मैं dark mode enable disable करना चाहता हूं तो मैं app dot JS के अंदर
0:53
वो सारे के सारे variables बनाऊंगा। अगर मैं कोई दूसरा भी काम करना चाहता हूं
0:56
तो मैं ज्यादा से ज्यादा control app dot JS में रखना चाहूंगा। तो इसके लिए मैं
1:00
क्या करूँगा कि जो मेरा अब dot JS था उसको अभी के
1:04
लिए तो मैं ऐसे ही रहने दूंगा और मैं यहाँ पर just ये check कर
1:08
रहा हूँ अपने reference के लिए की मैंने। यहां पर, status हाँ
1:15
ठीक है working tree clean। Actually मुझे आप लोगों को ये सारा का सारा code देना है
1:18
description में तो मुझे आह उस उस हिसाब से भी देखना है
1:22
चीजों को। तो यहां पर देखो मैंने style, my style यहां पर कुछ इस
1:25
तरह से दिया हुआ है तो मैं basically क्या करूंगा कि यहां
1:29
पर आऊंगा। मैं app dot G के अंदर आऊंगा और यहां पर एक नया state बनाऊंगा
1:33
तो मैं यहां पर use state लिखूंगा और मैं यहां पर क्या करूंगा
1:37
कि mode। dark mode लिखता हूं। dark mode से dark mode is
1:42
equal to false। मैं dark mode को by default false रखना चाहता
1:46
हूं और ये मेरा state variable है जो कि आह ये बताता
1:51
है कि dark mode enabled है कि नहीं है। whether dark mode is enabled
1:55
or not। ठीक है? ये मेरे application की state है जो कि
1:59
ये बताती है। तो dark mode enable है या नहीं ये मैं यहां से control कर सकता
2:03
हूँ। उसी के साथ-साथ मैं क्या कर सकता हूँ जो मेरा nav bar है उसको मैं mode pass
2:07
कर सकता हूँ। mode is equal to it can either be dark, it can either
2:10
be light। ठीक है? तो मैं dark mode जो है true या
2:14
false यहां पर मैं इसको भेज सकता हूँ। अब देखना मैं क्या करूँगा जो मेरा
2:18
nav bar component है। Navbar component इस prop को लेगा। किस prop
2:22
को mode is equal to dark mode को तो mode यहाँ पर यहाँ तो true होगा या false होगा। मैं
2:26
चाहता हूँ कि अगर dark mood मेरा true हो तभी मैं यहां पर
2:30
dark दिखाऊं वरना मैं यहां पर dark ना दिखाऊं। अब ये काम मैं कैसे करूँगा? ये
2:34
काम करने के लिए मैं ये पूरा का पूरा जो string है इसको java script से लिखूँगा। तो
2:38
मैं सबसे पहले यहाँ पर curly brackets लगा लूँगा जो कि specify करेगी कि मैं java script
2:41
का इस्तेमाल कर रहा हूँ। इसके बाद मैं क्या करूँगा यहाँ पर back tick लगाऊंगा
2:45
अब देखो back tick लगा रहा हूँ मैं। back ticks क्यों लगा रहा हूँ आप देखना back ticks मैं क्यों लगा
2:48
रहा हूँ ताकि ये पूरी की पूरी string के अंदर अंदर मैं template
2:53
literal का इस्तेमाल कर सकूँ। तो मैं यहां पर template literal का इस्तेमाल करना चाहता हूं
2:56
इसलिए मैंने कुछ इस तरह से लिखा है और मैं यहां पर dark
3:00
की जगह पर क्या लिखूंगा? मैं चाहता हूं मैं यहां पर लगाऊंगा एक dollar तो
3:04
मैं अगर कुछ इस तरह से लिखता हूँ dollar और ऐसे तो मैं यहां पर एक variable का इस्तेमाल कर
3:07
सकता हूं। तो आप देखो मैं यहां पर java script लिख सकता हूँ basically। तो मैं एक काम
3:11
करूँगा कि जो मेरा mode है या तो वो dark होगा या
3:15
फिर वो light होगा। तो मैं एक काम करता हूं इसको dark या light कर देता हूं
3:19
अभी के लिए मैं इसको light कर देता हूं। ठीक है? तो मैंने यहां पर nav
3:23
bar dark किया हुआ था but मैं यहां पर इसको nav bar light कर दूंगा। तो मैं इसको
3:26
यहां पर लिखूंगा props dot dark mode या फिर props dot mode
3:31
कर देता हूं but मैं फिर इसको dark mode भी नहीं करूंगा। मैं इसको mode ही
3:34
पुकारूंगा। तो मैंने यहां पर सा change कर दिया है। मैं set mode
3:38
कर रहा हूं। तो mode can either be dark mode or light mode ठीक है? तो
3:41
मैं यहां पर mode is equal to mode कर दूंगा। ठीक है? तो यहां पर मैंने
3:45
mode is equal to mode करा, mode मेरा यहां पर आया और मैं यही यहां
3:49
पर इस तरह से करूंगा। तो अगर मैं अब यहां पर mode
3:52
is equal to आह यहां पर light करता हूं। अगर मैं यहां पर light set
3:56
करता हूं। तो क्या होगा कि light mode दिखेगा। ये कह रहा
4:00
है use state is not defined मुझे import करना react से। तो
4:04
मैं यहां पर लिखूंगा IMRS और enter मार दूंगा तो import हो
4:07
जाएगा react और use state from react। ठीक है? तो मैं कुछ इस तरह से करूँगा और मेरी
4:11
application अब compile हो जानी चाहिए। तो ये देखो यहाँ पर अभी light mode आ रहा है। light mode क्यों
4:14
आ रहा है? क्योंकि मैंने mode is equal to light किया है। अगर मैं mode is equal to dark कर दूंगा
4:18
यहां पर तो ये देखो ये dark mode आ गया तो ये dark यहां पर देखने को मुझे मिल गया। अब
4:22
मैं कह जाता हूं कि यह light है या dark है। यह मैं control
4:25
कर सकूं यहां पर एक switch से। तो मैं जाऊंगा get bootstep dot com पर और वहां
4:29
से लेकर आऊंगा एक switch को। तो मैं docs में जाऊँगा, components
4:33
में जाऊँगा infact form में जाऊँगा। पुरानी bootstrap की website में components
4:37
के अंदर form होता था लेकिन अभी यहाँ पर आप लोग देखो आह मैं control
4:41
F switch करूँगा। मुझे switch चाहिए switch switch चाहिए switch नहीं मिल
4:44
रहा है मुझे। Sct और मैं नीचे scroll करता हूँ। शायद मुझे
4:48
यहाँ कहीं मिले switch checks and radio में मिले शायद switch control
4:52
F। हाँ मिल गया switch मुझे। ये है switches तो मुझे एक switch चाहिए
4:55
ठीक है? अब देखो switch किस तरह से काम करता है। मैं
4:59
यहाँ पर default switch check box input देखो check switch ah check
5:03
box input। तो basically मैं इन दोनों में से कोई सा भी ले लूंगा। मैं ये पहला वाला ले लेता हूं। ठीक है? तो
5:07
मैं क्या करूंगा कि इसको लेकर आऊंगा यहां पर और इसको nav
5:11
bar के अंदर दे दूंगा। कहां पर दूंगा मैं nav bar के अंदर जहाँ पर मैं मेरा
5:14
form था पहले। तो मैं यहां पर इसको डाल दूंगा और आप लोग देखो
5:18
यहां पर जो input है वो मुझे दिक्कत दे रहा है दिक्कत क्यों दे रहा है
5:22
ये basically मुझसे ये कह रहा है कि भाई साहब input को आपने
5:25
close तो किया नहीं तो इस तरह से कृपया करके close कर दें तो ये कह रहा है मेरे
5:29
से। मैं यहां पर लिख दूंगा dark mode, dark mode। enable dark
5:34
mode। और देखता हूं यहां पर कि ये किस तरह surrender हुआ
5:40
हुआ भी ठीक surrender कि नहीं हुआ। हाँ यार सही surrender हुआ लेकिन ये जो enable
5:43
dark mode है यहां पर दिख नहीं रहा है मेरे को। तो ये एक दिक्कत आ गई है यहां पर। ठीक है? तो मुझे
5:47
क्या करना ये जो enable dark mode है। किसी तरह से इसके colour को change
5:50
करना और मैं इसको यहां पर text light नाम की class दूंगा जो कि bootstrap
5:54
में किसी भी text को white करने के लिए use की जाती
5:58
है। तो ये enable dark mode कुछ इस तरह से मैं कर सकता हूँ। तो मैंने
6:02
enable dark mode किया तो dark mode enable हो जाना चाहिए। तो मैं एक काम करूंगा यहां पर एक function
6:05
बनाऊंगा और मैं इस function का नाम लिखूँगा enable dark mode एक
6:10
Prop भेजूंगा और enable dark mode नाम का एक आह या toggle
6:15
mode नाम का एक function भेजूंगा। toggle mode is equal to toggle mode
6:18
और toggle mode क्या होगा? Toggle mode एक function होगा जो कि na bar में जा
6:22
रहा है लेकिन ये function actual में कहां पर होगा? ये function actual
6:26
में यहां पर होगा। तो मैं यहां पर लिखूंगा toggle mode is equal
6:29
to एक arrow function तो मैं यहां पर एक Cat arrow function syntax
6:33
का इस्तेमाल करूंगा, लिखूंगा cons toggle mode और toggle mode जब मैं
6:37
करूंगा तब मैं basically क्या करूंगा set mode को change कर दूंगा। Set
6:41
mode is equal to dark कर दूंगा अगर mode मेरा light है
6:44
तो मैं लिखूंगा if mode is model नहीं mode is triple equal
6:49
to light change it to dark, else do what else change it
6:53
to Light ठीक है तो मैं यहां पर else लिखूँगा और change कर दूंगा
6:57
इसको to light। तो मैं यहां पर else लिखूँगा और इसको change
7:01
कर दूंगा to light। तो basically मैं toggle कर रहा हूँ mode को कि
7:04
यार अगर dark है तो light हो जाए light है तो dark हो जाए। ठीक है? तो toggle mode damp
7:08
का function है। अब यह toggle mode function जो है यह कब run
7:12
होगा? ये तब run होगा जब कोई भी इंसान इस वाले switch
7:16
पर click करेगा। तो मैं एक काम करूँगा यहाँ पर on click लगा दूंगा। एक मैं कहूँगा
7:20
on click। is equal to और मैं लिख दूंगा props dot toggle
7:24
mode। ठीक है? तो कोई भी इंसान इस पर click करेगा इस वाले switch पर और
7:28
मैं एक यहां पर और करना चाहूंगा यार कि जो class is equal to है
7:32
उसको class name is equal to से replace करूंगा। तो मैं यहाँ
7:37
पर replace solve कर देता हूँ। तीन ही हमारे पास theme classes। तो मैं इसको
7:40
save करूँगा और hope करूँगा कोई error नहीं है। मैं इसको inspect
7:44
करता हूँ और यहाँ पर मैंने कहीं ना कहीं use कर दिया
7:48
है। शायद अबG के अंदर। Reload करता हूँ इसको reload करता हूँ
7:52
ah for okay तो for की जगह HTML four आएगा। ah HTML
7:57
four आएगा। और कहीं पर for है क्या नहीं और कहीं पर
8:02
for नहीं है so this should fix the issue। अब यहाँ पर
8:05
ये कह रहा है set mode is assigned a value but never use set mode is constant
8:09
set mode is constant। तो यार मैंने यहाँ पर basically गलती करी है। मैंने set
8:13
mode को ठीक करना है। मैं set mode एक function है उसको इस तरह से call करूँगा mode
8:17
set करने के लिए नाकि मैं कुछ ऐसे set mode is equal to करूँगा और
8:21
I hope I hope कि ये बात सबको clear हो गई कि mode is equal to करके मैं directly mode को set
8:24
नहीं कर सकता क्योंकि ये एक state है। तो state variable को
8:28
आप directly ऐसे mode is equal to this करके नहीं कर सकते। आपको set
8:32
mode function का इस्तेमाल करना I hope अब सारे के सारे errors जा चुके होंगे
8:35
मैं reload करता हूं। हाँ यार अब सारे errors जा चुके हैं। तो अब
8:39
अगर यहां पर मैं इसपे click करूंगा। तो basically यहां पर देखो
8:43
यह देखो enable dark mode उल्टा हो रहा है but will fix it will fix
8:47
it। ठीक है? तो मैं क्या करता हूं by default आह यहां पर इसको light
8:50
कर देता हूं। ठीक है? मैं इसको by default light कर देता हूं और इस पर कोई भी click
8:54
करेगा अगर इस पर कोई भी click करेगा तो dark mode enable हो जाएगा इस पर ऐसे करेगा
8:57
तो light mode enable हो जाएगा। but हां एक और मुझे यहां पर आह आह
9:01
एक और मुझे यहाँ पर करनी है कि यार अगर mode light है तो
9:05
मुझे यहाँ पर इसको आह जो मैंने text light class रखी है
9:09
अपने के अंदर कहाँ रखी थी यहाँ पर रखी थी text light class मैंने। मैं
9:13
text light नहीं रखूँगा class मैं ये ये जो class रहेगी वह depend
9:17
करेगी mode पर। तो मैं एक काम करूँगा कि यहाँ पर इसको
9:21
एक java script बनाता हूँ सबसे पहले एक template litle बनाता हूँ तो मैं अब java script लिख
9:24
रहा हूँ basically। अब मैं यहां पर back tick लगाता हूँ ताकि ये template
9:28
string बन जाए एक template litle बन जाए तो curly brace के अंदर जो भी है java
9:32
script है ये पूरी मैं java script लिख रहा हूँ। अब light की जगह पर मैं क्या करूँगा
9:35
dollar लगाऊंगा और लिख दूंगा props dot mode। ठीक है? Props dot
9:39
mode। And that should fix यार क्योंकि जब mode dark होगा तो
9:44
text dark हो जाएगा यह जब mode light होगा तो text light हो जाएगा यह ठीक है? तो
9:48
मैं भी देखता हूं कि यार fix हुआ कि नहीं हुआ। आह नहीं हुआ
9:51
fix तो मुझे basically क्या करना था उल्टा करना था। आह मुझे
9:55
यहाँ पर basically कुछ ऐसा करना था कि props dot mode अगर
9:59
light है। तो dark वरना light। तो मैं क्या करूंगा यहां पर
10:03
एक conditional expression का इस्तेमाल करूंगा। तो मैं यहां पर लिखूंगा if prop dot
10:07
mode is equal to light then this value will be equal to
10:12
dark। ठीक है? तो मैं यहां पर turnery operator का use कर रहा हूं। वरना
10:16
क्या होगा वरना light। ठीक है? तो मैंने कुछ इस तरह से
10:21
turner या operator का प्रयोग कर लिया और अब देखो अब सही हो गया ये। अब
10:25
अगर आप में से कई लोग ये सोच रहे हो कि यार ये क्या कर दिया इतनी खतरनाक java
10:28
script कैसे लिख सकते हो आप। देखो यार मैं बताता हूँ क्या किया मैंने
10:33
सबसे पहले देखो इसको divide and conquer करो मतलब में और समझो। सबसे
10:36
पहले तो curly brace लगा लिया अभी लिखनी थी मुझे java script। अब मैंने
10:40
लगा लिया यहाँ पर एक template literal तो ये ये पूरी की पूरी एक string बन गई जो भी
10:43
ये bactics के अंदर है। ठीक है? ये पूरी एक string बन गई। अब जब मैं backtick
10:47
use करता हूँ java script में तो मैं dollar लगा के कोई भी variable use कर सकता हूँ। dollar और curly
10:51
brace लगाकर। तो ये पूरा का पूरा एक variable है और इस variable के अंदर एक
10:55
turnery operator है जो ये कह रहा है कि अगर prop का mode light है तो dark हो जाए
10:58
dark है तो light हो जाए। That's about it। बस इतना है इतना ही
11:02
simple है। अगर आपको दिक्कत हो रही है इसका मतलब आपकी java script सी
11:05
weak है। but worry not। I hope कि मैंने आपको explain कर दी
11:09
ये ठीक है? तो हम अभी enable dark mode करके कम से
11:13
कम आह जो nav bar है उसके dark mode को enable कर पा रहे हैं। लेकिन
11:16
खुशी की बात यह भी है कि जो हमारा ये state variable है
11:20
dark mode वाला वो actual में कहाँ पर है? वो actual में
11:23
यहां पर है देखो app dot JS के अंदर और ये toggle mode भी app dot JS
11:27
के अंदर है। तो मैं आराम से यहां पर document dot body
11:31
dot style dot background colour is equal to black कर सकता हूँ
11:37
कुछ इस तरह से कर सकता हूँ और and vice versa मैं
11:40
यहां पर इसको white कर दूंगा। और ये करने के बाद अब
11:46
अगर मैं enable करूँगा dark mode को मैं जरा reload कर लेता हूँ और ये कह रहा है cannot
11:50
set background colour of undefined। ये कैसा मजाक है? Okay तो मुझे
11:56
यहां पर small S use करना है। Capital S use नहीं करना है और
12:00
body dot style dot background colour हाँ ठीक है। अभी मैं इसको reload करूँगा
12:04
enable dark mode करूँगा। हाँ मुझे पता है बहुत बुरा लग रहा है but again ठीक
12:08
करेंगे इसको ठीक करेंगे ठीक करेंगे। ठीक है? सबसे पहले तो मैं ये वाला colour उठा लूँगा
12:11
क्योंकि ये black नहीं है। ठीक है? मैं चाहता हूँ सी uniformity बनी रहे। तो
12:15
जो dark वाला colour है कहाँ गया मेरा dark वाला colour nav
12:19
bar का background। Nav bar का background चाहिए मेरे को dark यह
12:24
है। ये वाला colour है। ठीक है? BS cre dark if I
12:28
am not wrong। तो इस colour को मैं copy करूंगा और copy करने
12:32
के बाद क्या करूंगा? ये black की जगह यहां पर लगा दूंगा। अब सी uniformity
12:36
दिख रही है देखो। नहीं यार अभी भी नहीं दिखी uniformity मुझे अगर मैं dark
12:39
mode को enable करूँ तो नहीं अब दिख गई ठीक है अभी दिख गई। अभी सब कुछ ठीक है। ठीक है? तो
12:43
मैं dark mode को enable कर रहा हूं तो देखो इस तरह से हो जा रहा है। Dark mode enable but एक और
12:47
है जब मैं dark mode को enable कर रहा हूं ना तो मुझे सा difference चाहिए
12:51
मेरा जो ये body का background है उसमें। मैं इसको same नहीं रख सकता हूं। मैं बताता
12:54
हूं क्यों मैंने ऐसा बोला। तो मैं इसको grey रखूंगा। ठीक है मैं इसको
12:58
जैसे grey करूंगा reload करूंगा, enable करूंगा। हाँ ये है ये अच्छा
13:01
dark mode है क्योंकि मैं चाहता हूं ये एक distinction रहे मेरे nap बारे में और मेरी body में। ठीक
13:05
है? और उसी के साथ साथ मैं इसको white रखना चाहता हूँ, इसका colour white रखना
13:09
चाहता हूँ। इसका white रखना चाहता हूँ जब जब dark mode enable रहे और इसके
13:13
अंदर का colour भी white रखना चाहता हूँ तो देखना वो मैं कैसे करूँगा। ठीक है? तो
13:16
मुझे क्या करना चाहिए मुझे ये terminary operator को वापस से use करना चाहिए
13:20
तो basically ये जो terminy operator है ये क्या कर रहा है? यह java script जो लिखी
13:23
हुई है ये basically evaluate हो रही है। अगर mode जो है हमारा
13:27
वो light है तो dark में evaluate हो रही है dark है तो light में evaluate हो रही है। ठीक है? तो
13:31
मुझे क्या करना है वही चाहिए मुझे colour को वही set करना है। तो कुल मिलाकर
13:35
मैं क्या करूँगा text form के अंदर भी मैं mode दूंगा। मैं
13:39
text form को भी दूंगा कि भाई mode ये है। text form को भी बताऊंगा कि भाई मेरा mode
13:43
क्या है? ठीक है? अब text form के पास यहाँ पर अपने
13:48
पास अपने ऊपर style set करने का पूरा मौका है। ठीक है? तो मुझे क्या करना है basically
13:51
मुझे एक तो सबसे पहले ये जो H one है मेरे। इनके इनके अंदर क्या
13:55
करना है मुझे इनका colour को white करना है। ठीक है? Colour को white करना है। और
13:59
उसी के साथ-साथ मुझे क्या करना है इसके colour को dark करना है। तो मैं क्या करूंगा
14:03
यहां पर इसका जो background है उसको आह dark कर दूंगा। ठीक
14:07
है? तो मैं grey कर दूंगा इसके background को। ठीक है? कुछ इस तरह
14:11
से तो वो भी मैं आपको दिखा देता हूं और colour white करूंगा। ठीक है? Colour
14:16
white ठीक है? अब देखना ये काम मैं कैसे करूंगा? मैं यहां पर
14:19
इसका जो style है मैं लिखूंगा style is equal to style is
14:23
equal to सबसे पहले एक curly brace मैंने java script का लगाया यानि की अब इसके अंदर
14:27
मैं java script लिख सकता हूं। मैं इसके अंदर अब एक object डाल रहा हूँ तो इसलिए double curly
14:30
brace लगेगा। समझ रहे हो ये समझे सब लोग देखो एक curly brace तो मैंने लगाया है
14:34
java script लिखने का क्योंकि मैं java script लिखना चाहता हूँ। और दूसरा curly brace एक
14:38
object लिख रहा हूँ अब मैं java script में भी object लिख रहा हूँ एक ठीक है? तो एक दूसरा curly brace
14:41
लगाया। अब मैं यहाँ पर क्या करूँगा? मैं लिखूंगा यहाँ पर background
14:46
colour जो है वो क्या हो जाए? Background colour कुछ ये हो
14:50
जाए क्या हो जाए ये हो जाए। आह नहीं ये नहीं हो actually
14:53
मैं इसको copy करके लाना चाहता था। हाँ ये हो जाए। अब देखो ये क्या
14:57
हो रहा है? अगर props dot mode जो है मैं यहां पर जरा props को ले
15:00
लेता हूँ। Props मैंने लिए नहीं है लगता है आप नहीं लिए हैं। ठीक है? तो props
15:04
dot mode जो है वो अगर मेरा light है तब dark हो
15:08
जाए तब infact grey हो जाए वरना क्या हो जाए वरना white
15:13
हो जाए। Simple है। ठीक है? अब यहाँ पर क्या दिक्कत आ रही है ये कह रहा है
15:17
ah property props। तो मुझे ये curly brace यहाँ से हटाना यह curly
15:20
brace नहीं चाहिए। ठीक है? ये वाला curly brace नहीं चाहिए बस यहाँ पर double curly brace के अंदर लिखना है
15:24
सब कुछ। I hope that we are good। जरा देखते हैं काम
15:28
भी कर रहा है कि नहीं कर रहा है। enable dark mode किया तो यह white हो गया उल्टा
15:31
कर दिया। मैंने भाई उल्टा कर दिया। तो मुझे क्या करना है कि इसको
15:35
white करना है। अगर light mode है। Infact मैं एक काम करता
15:39
हूँ। dark mode है अगर तब grey कर दो इसका colour वरना ऐसे ही रहने दो। तो
15:42
dark mode होगा तो इसका colour grey हो जाएगा पूरे का और
15:46
उसी के साथ साथ क्या होगा कि जो हमारा आह यह text
15:51
है इसको मैं white करना चाहता हूं। तो मैं इन सब में style डालूँगा और style में डाल
15:55
दूंगा colour white। ठीक है? तो मैं दिखाता हूं आप लोगों को तो मैं यही style copy
15:58
करूँगा और ये मैं लगाऊंगा ये वाली heading में सबसे पहले। ठीक है? Infact
16:02
मैं parent container में लगाऊंगा। parent container में ही लगा देता हूँ। और मैं
16:05
यहां पर लिखूंगा colour। अगर prstot mode dark है तो white कर
16:11
दो वरना क्या कर दो वरना black कर दो। जो था वह कर दो। ठीक
16:15
है? तो यहां पर आप लोग देखो कि इस container के अंदर
16:20
तो सारे changes आ गए but इस वाले container के अंदर नहीं आए। ठीक है? तो हाँ
16:23
हम एक काम कर सकते हैं। हम यहां पर या तो इस
16:28
style को copy करके नीचे paste कर सकते हैं या parent container के अंदर ही सब कुछ डाल
16:31
सकते हैं। तो कुछ भी कर सकते हो आप। मैं भी यहां पर क्या करता हूं कि इसी style
16:35
को copy कर देता हूं नीचे भी तो सब कुछ नीचे भी white हो गया ठीक है? और यहां पर देखो मैं
16:38
लिख पा रहा हूँ। हाँ इसका colour भी white करना है text area का तो text area के अंदर भी मैं colour
16:42
white करना चाहता हूं। तो background colour को मैंने ये कर दिया और comma लगाकर
16:46
मैं क्या करूंगा? Colour को क्या करूँगा? Colour को मैं ये करूँगा
16:50
Ps dot mode अगर dark है तो white वरना black। तो दिखाता हूँ आप
16:54
लोगों को। हाँ मुझे पता है सी complex java script मैंने लिखी
16:57
है यहाँ पर और मैंने कुछ turnery operators ऐसे डाले हैं जो कि यार
17:01
शायद लोगों को समझने में time लगे तो यार आप अपना time लेना रोक रोक के देखना
17:05
इसको क्या किया है, कौन-सी किसमें evaluate हो रही है। एक curly brace
17:08
मैंने जो लगाया है वह java script का लगाया है और दूसरा curly brace java
17:12
script में भी मैंने object लिखा है तो object में जो curly brace लगता है java script में
17:16
एक curly brace उसका लगा हुआ है। तो अभी जो मैं select कर रहा हूँ वो पूरा
17:19
एक object है। ठीक है? आप सोचो इस बात को। ये पूरा एक object है
17:23
और बाहर जो curly brace लगाया है वह तो मुझे लगाना ही है जब भी मैं कोई java script लिखता हूँ for
17:27
example मैंने props dot about text लिखा। तो एक curly brace लगाना है ये बताने
17:30
के लिए react हो कि मैं java script लिख रहा हूं। ठीक है? तो अभी देखते हैं कि app
17:34
भी काम कर रही है कि नहीं कर रही है। तो मैं reload करूँगा इसको तो light mode में तो बहुत से ही काम कर
17:37
रही है। ठीक है? dark mode में देखते हैं dark mode अगर मैंने enable किया तो
17:41
यहां पर देखो। ये भी काम कर रहा है इसका colour भी white हो गया। ठीक है? अब
17:45
ये देखते हैं कि यार functions भी काम कर रहे हैं या नहीं कर रहे हैं या फिर ऐसे ही
17:49
convert to upper case, yes works, convert to lower case, yes works। Copy
17:52
text क्या copy भी हुआ text हाँ copy हुआ text। Remove extra
17:56
spaces देखते हैं ये काम कर रहा है कि नहीं कर रहा है बहुत सारी space दे देता हूं यहां पर
18:00
और बहुत सारी space दे देता हूं यहां पर ठीक है। यहां पर
18:03
भी दे दी मैंने बहुत सारी space और मैं यहां पर क्या करूँगा remove
18:07
extra space कर दूंगा। हाँ ये भी काम कर रहा है। ये भी काम कर रहा
18:10
है। ठीक है? तो I hope कि समझ गए आप लोग किस तरह से ये चीजें काम करती
18:14
हैं। ठीक है? तो यार app shap हो गई। ये हमारी बस एक करना
18:18
चाहता हूं यहां पर ये ना अच्छा नहीं लग रहा है। आह यहाँ पर मैं चाहता हूँ
18:22
enter your text to preview it here ऐसे कुछ लिखना चाहता हूँ। ठीक है? तो मैं
18:25
क्या करूँगा की जो मेरा text form component है मैं यहां पर लिखूंगा
18:29
की अगर text मेरा empty है अगर मेरा text empty है। सबसे
18:33
पहले तो अगर मेरा text है तो ये आ जाए लेकिन अगर मेरा text कुछ है ही नहीं यानी कि
18:36
empty है। तब मैं क्या करूँगा? मैं यहां पर लिखूँगा if text is equal
18:40
to empty तो मैं यहां पर लिखूंगा text अगर empty है triple
18:45
equal या फिर text dot length जो है। आह वह greater than
18:49
zero है तब मैं क्या करूंगा तब मैं text को लिख दूंगा यहां पर वरना मैं
18:52
क्या लिखूंगा colon लगाकर मैं लिखूंगा आह your enter। Something to preview
19:01
it here। कुछ इस तरह से। तो यहां पर देखो enter something ah
19:06
in the text box above enter something in the text box above
19:11
to preview it here। ठीक है? तो मैंने कुछ इस तरह से लिखा कि भाई कुछ
19:14
लिखो ऊपर तो जैसे ही बंदा लिखना शुरू करेगा यहां पर preview होना शुरू हो जाएगा। ठीक है
19:19
यार और enable dark mode भी बना दिया और अब मत कहना कि
19:22
ये अच्छा नहीं लग रहा है क्योंकि ये बहुत धमाकेदार लग रहा है अब और इतना धमाकेदार लग
19:26
रहा है कि इससे प्यार हो जाएगा आप लोगों को और अगर इस इसको
19:30
dark करना चाहते हो आप लोग अगर इस को dark करना चाहते हो जो मेरा
19:33
body है आह इस grey को सा dark करना चाहते हो उससे
19:37
आप इसको bluish की तरफ लेकर जाना चाहते हो क्योंकि मुझे मालूम है कि
19:41
हमारी application already bluish ah te- texture में है तो अगर आप
19:45
इसको कुछ ऐसा करना चाहते हो तो ऐसा कर सकते हो। ठीक है? तो इस colour को copy
19:48
करके आप black जहाँ लिखा है ये colour डाल दो। तो वही करना
19:52
है आपको। तो ये black जहाँ जहाँ है। Black कहाँ कहां है
19:58
यहां पर है एक तो black और एक यहां पर है black आप ये कर सकते हो। और
20:01
उसी के साथ- साथ app dot JS में भी यही कर दो। App dot JS में तो law
20:05
है ही नहीं black na bar में जरूर होगा कहीं ना कहीं नहीं nap bar में भी नहीं है। ठीक है? तो
20:09
मेरे हिसाब से काम हो गया आपका reload करो। dark mode जैसे ही
20:12
enable करोगे। आह क्या मैंने save नहीं किया? क्या मैंने save नहीं
20:16
किया? मैंने save तो किया यार। ah black को मैंने किससे replace
20:20
कर दिया? Black को मैंने text form में black। ah If mode
20:27
is dark तो white वरना text colour ये black। तो यार ये
20:32
काम इसलिए नहीं कर रहा है क्योंकि यहाँ पर मैंने colour जो है आह
20:36
वो जो grey है वो मैंने रखा हुआ है यहाँ पर। ये
20:39
मैंने गलती करी थी अभी। तो अब सही हो जाएगा मैं reload करता हूँ देखो मैं
20:43
enable करूँगा जैसे ही dark mode को वाह भाई वाह यार ये लग रहा है
20:46
dark mode यार this is the dark mode of future। ये लग
20:50
रहा है dark mood of future। अब मजा आ रहा है application में अब कोई भी dark
20:54
mood enable करेगा तब वो बोलेगा की किसी heavy coder ने application बनाई है
20:59
वाह बेटे वाह हुआ तताप अरे तमत heavy driver है भाई। So
21:04
yeah that's all अगर आपको na bar के colour को भी change करना है तो वो भी कर
21:07
सकते हो और यार ये application तो बहुत ही मजेदार हो गई है इसको deploy भी किया
21:11
जा सकता है अब और light mode को enable भी कर लो dark mode
21:14
को enable भी कर लो जैसे मन चाहे कर लो यार। और और क्या चाहिए
21:18
जिंदगी से किसी और को कुछ और चाहिए तो comment में लिखे वो भी भिजवा दूंगा। ठीक है
21:22
और clear text भी काम कर रहा है। मतलब सब कुछ काम कर रहा है
21:25
यार अब क्या चाहिए जिंदगी से कुछ भी नहीं चाहिए जिंदगी से जिंदगी जो है सफल
21:29
हो चुकी है। ठीक है? बस अब playlist को और access कर लो जल्दी से और सफल
21:33
हो जाएगी जिंदगी save play list पर click करें यहाँ click करके bookmark करें। अभी
21:37
के लिए इस video में इतना ही guys। Thank you so much guys for watching this video and
21:41
I will see you next time।
#Online Media
#Performing Arts
#TV & Video
#Programming
#Software
#Operating Systems
#Jobs & Education