0:00
गैस अपने पिछले वीडियो में हम लोगों ने एक exercise देखी थ�
0:02
enhancing text utils इसमें मैंने आप लोगों एक question दिया था कि आर आप लोग को text utils को enhance करना ह�
0:08
आज हम लोग यहाँ पर क्या करने वाले हैं एक नया component बनाएंगे जिसका नाम होगा about
0:12
about.js नाम को एक नया component बनाएंगे और उस component की साहिता से हम लोग state को समझेंग�
0:16
कि state क्या होता है ठीक है तो ये था हमारा बहुत ही basic सा text tutorials website
0:21
हम लोग यहाँ पर करेंगे क्या कि जल्दी से अभी मैं इसको बंद करता हूँ यहाँ पर terminal क�
0:26
ताकि थोड़ा बड़ा view दिखे मुझे, और मैं यहाँ पर जल्दी से components के अंदर, एक नया component बनाऊँगा
0:30
जिसका नाम होगा about.js, और क्योंकि मैंने ES7, React, Redux, GraphQL snippets install किया हुआ है
0:36
इसलिए मैं यहाँ पर RFC लिखूँगा, मुझे मिल जाएगा React का function based component
0:41
और यह extension इतनी समझदार है यह प्यारी इतनी समझदार है कि यह समझ गई कि यहाँ पर about.js जो है वो मेरे component का नाम है तो यहाँ पर about लिखना ह�
0:52
और इसलिए automatically इसने यहाँ पर about लिख दिया मैं यहाँ पर क्या करूँगा जल्दी से getbootstrap.com पर जाऊँग�
1:00
और मैं यहाँ पर लूट कर लेकर आऊंगा एक component get-bootstrap.com से और एक बहुत ही basic सा about component मैं देखता हूँ accordion मुझे कोई ढंकी मिल जाए जिसमें मैं अपनी website को describe कर सकूं तो शायद मैं मैं इसको copy कर लेता हूँ ठीक है I am making a random component to be honest मैं यहाँ पर एक class add करूँगा dev class name is equal to class name is equal to औ�
1:30
जिसमें आपने जो closing वाला tag वो नहीं लगा है ठीक है तो वो देख लेना इसे input अगर आप copy करके लाते ह�
1:36
bootstrap से तो कभी-कभी दिक्कत कर देता है वो ठीक है तो अभी यहाँ पर देखते हैं कि हमारा about component कैसा काम कर रहा ह�
1:42
लेकिन about component को हमने use नहीं किया, तो मैं एक काम करूँगा, कि यह जो हमारा nav bar के बाद text form है
1:48
यहाँ पर मैं text form use ना करके, about component use करूँगा, तो मैं एक काम करता हूँ जल्दी से
1:52
मैं यहाँ पर लिखता हूँ about, ठीक है, और यहाँ पर मैंने about लिखा
1:56
और यह देखो यह मुझे ऑटोमाटिकली बता रहा है कि क्या आप यह वाला component यूज़ करना चाहते हो कि about component को लेकर आऊ�
2:01
अगर आप इस पर click कर देते हो तो यह देखो इसने import भी कर लिया आपका जो about वाला component थ�
2:06
देख रहे हो कितना smart है यह कितना smart है और इसको इस तरह से आप सेव कर लो यह टेक्स फॉर्म कंपोनेंट यूज हो नहीं रहा है तो इसको कमेंट आउट कर दो तो ही भला है आपकी रियाक्ट आपके लिए अच्छा रहेगा ठीक है तो मैं आप जल्दी से क्या करूँगा कि आऊंगा अपनी रियाक्ट आप में �
2:38
टाप देकर यहां पर इनडेंट करके इसका लाइक पता चलेगी हाया यह जो पर्टिकुलर एज़ टीमल इस एक ऑर्डियन क�
2:46
अंदर एक ऑर्डियन यहां पर बंद हो रहा है ठीक है तो थोड़ा सा इंडेंटेशन वगैरह पर सकते हैं प्रेडियर से भ�
2:51
कर सकते हो बड़कर हम लोग यहां पर अभी खूबसूरती पड़ाने पर ध्यान नहीं देंगे हम उल्टा ध्यान देंगे ए�
2:57
हेडिंग डालने पर और अब आउट अस में हेडिंग दूंगा ठीक है तो मैंने आप रॉटर सेटिंग दी और यह बाउट अस यहा�
3:03
आ गया और इनके बारे में आ गया और में भी आप इसको एच वन करना चाहिए आप देख रहे हो किस तरह से मैं एच वन क�
3:08
चेंज कर रहा हूं तो यह भी चेंज हो जा रहा है यह कमाल है और टो रिनेम टैग वाली एक्सटेंशन का ठीक है ऊपर-नीच�
3:14
थोड़ी margin देना चाहते हो वो दे सकते हो आप इसमें class name लगा लो class name आप लगा सकते ह�
3:19
MY2 that depends upon your requirements यार अगर आपको लगता है की थोड़ी ज्यादा margin देनी है MY3
3:25
लगा लो यार ठीक है MY3 लगा लो तो वो तो आपकी requirement पर depend करेगा ठीक है about us मैंने यहाँ प�
3:31
लेकर उसके यू को कैपिटल शायद मैं अगर तो अच्छा लगे अपने असाब से आप लोग कर लेना वो सब चीजे�
3:36
अब हम यहाँ पर क्या करेंगे कि एक फीचर एड करेंगे इस वेबसाइट में तो यह तो मैंने बूट्सट्रैप से कॉब�
3:41
इस प्रेस्ट मारा यह आपको पता है कोई मैंने नया काम नहीं करा लेकिन अभी यहां पर जो मैं करने वाला हू�
3:46
वह क्या है कि मैं डाक मोड को इनेबल करूंगा तो मैं क्या करूंगा कि यहां पर बटन मनाऊंगा इनेबल डा�
3:51
अब आइडियली आप लोग को वेबसाइट पर dark mode enable करने के लिए यहाँ पर मिले button या पर यहाँ पर मिले button
3:57
बट हम लोग क्या करेंगे यहाँ पर समझने के लिए state को यहाँ पर dark mode
4:01
जो है enable करने का button बनाएंगे ठीक है तो यह मेरा container यहाँ पर बंद हो रहा ह�
4:05
पर सबसे एंड में तो मैं क्या करूंगा यहीं पर एक बटन डालूंगा ठीक है और मैं लिख दूंगा इन एवल डार्क मोड औ�
4:13
डार्क मोड को एनेबल करने के लिए मैं क्या करूंगा कि जैसे डार्क मोड इनेबल हो रहा है मैं बिसीज के लिए क्य�
4:20
लगा दूंगा यहां पर आप इससे थ्रू एक कलर सेट कर दूंगा पूरा यहां पर और जो इसका कलर है अंदर वाले का उसक�
4:27
वाइट कर दूंगा ठीक है अब देखना मैं यह काम कैसे करूंगा तो मैं काम करूंगा कि यहां पर बड़न्स को बू�
4:33
आपसे लेकर आऊंगा सबसे पहला काम तो यह करूंगा प्राइमरी बटन यूज करते हैं हम लोग ठीक है तो प्राइमरी बट�
4:38
का जो टाइप है और क्लास है वह कॉपी कर लेता हूं यहां पर लगा दूंगा और मेरा काम हो जाना चाहिए ठीक है त�
4:43
glass BTN BTN primary and obviously container
4:55
ठीक है, क्योंकि एक पूरा अपने आप में एक entirety है, तो आप इसको एक container में डाल लो
4:59
थोड़ा था धंका दियेगा ठीक है और उस container में आप MY3 दे दोगे तो थोड़ी स�
5:03
दूरी भी बना के रखेगा यह Y-Axis में तो देखो यह Y-Axis में रोडी से दूरी बना ल�
5:07
Enable Dark Mode पर अगर मैं क्लिक करूँ तो मैं चाहता हूँ कि जैसे मैं click करूँगा इसी dark mode enable हो जा�
5:11
और ये disable dark mode हो जाए ठीक है तो यहाँ पर मैं ग्या करूँग�
5:16
कि इस feature को enable करने के लिए यहाँ पर क्या मैं Oak बात करूँग�
5:20
इस feature को enable करने से पहले आप लोगो एक चीज मैं बताना चाहता हूँ देखो यार आप style set कर सकते ह�
5:25
directly यहाँ पर for example अगर मैं यहाँ पर style is equal to कर�
5:29
तो मैं style is equal to एक style variable दे सकता हूँ मान ल�
5:33
मैं इसका नाम my style लग लूँ अब यह my style क्या होगा यह my style एक object होग�
5:37
और मैं दिखाता हूँ यह object कुछ इस तरह से दिखाई पड़ेगा किस तरह से दिखाई पड़ेगा दिखाता हू�
5:42
तो मैं लिखूँगा let my style is equal to यह एक object है एक javascript
5:46
object है मैं आपर मान लो लिख देता हूँ color red ठीक है और यह एक object है तो यह ए�
5:52
string होगी यह javascript object है और मान लो मैं लिखता हूँ background
5:56
देखो CSS में आप इस तरह से लिखते हो ना background-color यहाँ पर आप camel case में लिखोग�
6:01
आपने अगर javascript पड़ी है थोड़ी सी भी ठीक से तो आप लोगों को यहाँ पर यह चीज मालूम होगी क�
6:08
जब भी आप लोगों को जावा स्क्रिप्ट के अंदर किसी भी एलिमेंट का स्टाइल वगैरह चेंज करना पड़ता ह�
6:12
तो आप dot style dot background color ऐसे लिखते हो ठीक है is equal to let us say cn
6:20
मान लो मैं चाहता हूँ इसका स्टाइल चेंज करना लेट असे मैं मान लो मैं चाहता हूँ nav bar का style चेंज करन�
6:27
तो मैं body को खुलूँगा और यहाँ पर nav bar को select करूँग�
6:31
और मैं यहाँ पर लिख दूँगा dollar 0 dollar 0 भी अगर आपको नहीं बालूं तो वो भी बता देता हूँ यहाँ प�
6:36
तो मैं जैसे यहाँ पर background color is equal to cyan लिखूँगा या background color is equal to red लिखूँगा आप लोग यहाँ पर देखो कि इसके अंदर एक style add हो जाएगा background color red अब यह style यहाँ पर काम इसलिए नहीं कर रहा है क्योंकि already इसमें यह style set हो रखा है तो मैं काम करता हूँ मैं कुछ और चीज़ change करता �
7:06
और मान लो मैं यहाँ पर border देना चाहता हूँ border is equal to 2 pixel करना चाहता हूँ मान लो मै�
7:11
या फिर 7 pixel solid red ठीक है तो यह देखो style लग गया तो आप जिस तरह से dollar 0.style.border करना चाहते ह�
7:20
तो by the way $0 बता दूँ, $0 वो element होता है Google Chrome में जो आपने select किया हुआ है
7:23
देखो $0 लिखा हुआ है यहाँ पर, आप $0 use कर सकते हो console में to refer this element
7:29
आप $0 को तब ही use करें, जब आप Chrome में हैं, यहाँ पर use मत करना $0 को, ठीक है
7:33
$0 मतल Hate वह एलिमेंट जिसको मैंने सिलेक्ट किया हुआ तो मैंने इस एलिमेंट को सिलेक्ट किया वह इसका स्टाइल डॉट बॉर्डर कर दो यह तो मैं इस तरह से जावास्क्रिप्ट सेट कर सकता हूं डेश नहीं लगेगा यहां पर कैमल केस यूज करता है जावास्क्रि�
8:03
बैकग्राउंड फिर इसके बाद यह चीज जो है इसका कलर रेड हो गया यह देखो सारी के सारी चीजें यहां पर आ चुकी है ठीक है तो मैं इस तरह से स्टाइल चेंज कर सकता हूं तो यहां पर डार्क मोड को इनेबल करने के लिए हम लोग क्या करेंगे कि इनी कलर के साथ �
8:33
भी मेरे जो है कुछ इस तरह से हो जाएं कि सब कुछ ब्लैक ब्लैक दिखे ठीक है तो मैं आप लोगों यहां पर दिखाता हूं जो मेरा स्टाइल इस इगल टू माइ स्टाइल है वह मैं इसमेंfta लूंगा इसमें डालूंगा उसी के साथ साथ अपॉडियन में डाल दूंगा �
9:03
अभी तक नहीं पाया मैंने निजात इस error से what is this
9:07
मैंने class कहा यूज़ किया है okay यहाँ पर यूज़ किया है class is equal to
9:10
मुझे replace करना पड़ेगा class name से सारी classes को जहां जहां class is equal to यूज़ हुआ ह�
9:16
वहाँ class name is equal to यूज़ कर दो replace all कर देते हैं save कर लेते है�
9:20
background color background color black dark mode color white kind of dark mode enable button style
9:45
तो जहां जहां मेरा class name is equal to accordion button collapsed ह�
9:49
मैं यहाँ पर style is equal to my style दे देता हूँ तो एक मैंने किया दूसरा भी ढूंढता हूँ मैं दूसरा यहाँ पर आ गया यहाँ भी style is equal to my style देता हूँ और तीसरा कहाँ पर है एक और होगा button हमारा कहाँ गये भाई तुम बटन तीन होने चाहिए बटन यार एक दो तीसरा कहाँ गया तीसरा कहाँ गया मिल गया तो मैं क�
10:21
यार ठीक ठाक लग रहा है उतना भी बुरा नहीं लग रहा है बट अभी आप कुछ ऐसा समझ ल�
10:26
कि हमने dark mode को enable कर लिया है तीके यहाँ पर मैं click कर रहा हूँ तो देखो dark mode मेरा enable हो जा रहा है अब अग�
10:31
इस style को मैं एक state variable बना दू तो मैं यहाँ पर enable dark mode पर click करके इस style को change कर सकता हू�
10:37
तो मैं क्या करूँगा अपने use state hook को use करूँगा ठीक है तो मैं यहाँ पर simply लिखूँगा कि let my style is equal to
10:44
मैं क्या करूँगा let my style is equal to मैं लिखूँगा use state तो मैं use state hook का इस्तेमाल करूँग�
10:50
और यहाँ पर मैं my style को हटा देता हूँ मैं control x कर देता हू�
10:55
और मैं यहाँ पर एक constant मनाता हूँ और मैं लिखूँगा यहाँ पर my style
10:59
और set my style यहाँ पर set my style मैं कर दूँगा और यहाँ पर जो initial state होगी मेरे style क�
11:04
वो कुछ इस तरह से दिखाई पड़ेगी ठीक है यह initial state हो गई and obviously मैं यहाँ पर use state को जो ह�
11:10
import करूँगा react में से तो use state ठीक है मैं use state को import करूँग�
11:16
तो यह मेरी state है अब मैं set my style करके in fact मैं इसको भी camel case कर देता हू�
11:19
set my style का use करके change कर सकता हूँ state को, तो मैं करूँगा क्या, मैं आपर एक arrow function मनाता हूँ, मैं आपर लिखूँगा जो इसका on click है, यानि कि इस button पर अगर कोई भी click करें, मैं चाहता हूँ कि इस button पर कोई भी click करें, तो मेरा toggle style run हो, toggle style एक function होगा, ठीक है, toggle style क्या करेगा, toggle style dark को, dark को light में, light को dark में convert करेगा, �
11:52
है ठीक है मैं टॉपल स्टेट टॉपल स्टाइल इस एकुल टू एक एरो फंक्शन बनाऊंगा ठीक है और यह फंक्शन क्य�
11:58
करेगा यह यहां पर जो मेरी माइस्टाइल है मैं लिखूंगा डॉट कलर अगर यह वाइट है अगर यह बाइट है तो क्या करूंग�
12:08
अगर मेरा जो थीम है वो white है तब मैं क्या करूँग�
12:12
मैं set my style का इस्तेमाल करते हुए कुछ ऐसा करूँगा कैसा करूँगा एक object बनाऊंग�
12:17
और ये वाला object जो है इसको invert कर दूँगा किस तरह से invert करूँगा मैं इस object क�
12:23
मैं basically जो मेरा color है उसको मैं black कर दूँगा और background color को white कर दूँग�
12:30
वरना मैं क्या करूँगा else else मैं क्या करूँगा set my style करूँगा यानि कि मेर�
12:36
state है वैं उसको change करूँगा और यही रहने दूँगा white और background
12:42
color यहाँ पर क्या करूँगा मैं background color कर दूँगा black, ठीक है, अब यहाँ प�
12:48
आप देखते जाओं, मैं एक चीज और करूँगा, मैं button के text को भी as a state
12:52
use करना चाता हूँ, तो मैं आपको यह दिखाना चाता हूँ कि हम एक से जादा state
12:56
भी use कर सकते हैं, तो मैं यहाँ पर use state का इस्तेमाल करूँगा तो मैं यहाँ पर लिखूँग�
13:00
button text और मैं btn text लिखता हूँ इसको set btn text is equal to use state
13:07
और initial क्या होगा enable dark mode ठीक है और मैं set btn text जो है जिसक�
13:15
मैं यहाँ पर camel case बनाओगा just for radiability मैं चाहता हूँ कि यह function मैं run कर द�
13:19
अगर color white है तो मैं ये run करते हुए मैं enable dark mode
13:25
तो यहाँ पर क्या होगा dark mode enable हो चुका है तो अब मैं इस text को change करते हुए enable
13:29
light mode कर दूँगा क्या कर दूँगा enable light mode और वरना मैं क्या करूँगा वरना मैं btn text क�
13:37
कर दूँगा enable dark mode और obviously मैं इस btn text को use भी करूँगा उप�
13:51
सेव करूंगा और ऑफिसली यहां पर जाए ने बल यह चीज मैंने लिखे हुए ने बल्डा पोर्ट यहां पर मैं बीटी एं�
13:58
टेक्स का इस्तेमाल करूंगा सेव करूंगा आयोप को एरर ना है देखा हांगे एरर टॉप स्टाइल इस नोट डिफाइ�
14:39
white mode करना चाहता हूँ और उसके बाद मैं dark mode enable करने के लिए बोलना चाहता हू�
14:43
तो मैं इन सब चीज़ों को ऐसे रहन देता हूँ क्या करूँ क्या करूँ क्या करू�
14:47
ओके तो मैं यह कर सकता हूँ कि इसको black कर देता हूँ इसको white कर देता हूँ white और black क�
14:51
इसको शुरू कर देता हूं ठीक है जहां ब्लैक वहां वाइट जहां वाइट वहां ब्लैक जहां ब्लैक वहां वाइट जहा�
14:59
वाइट वहां ब्लैक जहां ब्लैक वहां वाइट जहां वाइट वहां ब्लैक ठीक हां ठीक है इनेबल डार्क मोड यह दोखो�
15:06
नियुक्त है और अगर पूरे पेज पर होता तब शायद थोड़ा ज्यादा अच्छा लगता बट अगर मैं इसको कुछ सीएसस क�
15:15
इस्तेमाल करके इस वाले कंटेनर को यह जो मेरा यह वाला कंटेनर है इसको मेरा बड़ा कर लूं मैं कुछ इसक�
15:21
विट है तो उसको कुछ इस तरह से 100% कर दूं 100% नहीं मैं इसको 100 VH करूंगा VW सोरी तो मैं इसको अग�
15:30
100 VW कर दूं अच्छा यहाँ पर एक चीज और करूंगा मैं मैं एक चीज और करूंगा कि जब भी मैं डार्क मोड को एनेबल कर रहा हू�
15:37
तो मैं यहाँ पर क्या करूंगा एक border भी set करूँगा border मैं कर दूँगा 2 pixel solid white तो जब जब मैं dark mode enable कर रहा हूँ इनकी color white कर रहा हूँ तब तब मैं यह काम करूँगा तो मैं यहाँ पर इसको paste कर देता हूँ क्योंकि यहाँ पर मैं dark mode को enable कर रहा हूँ और I think that should do अभी देखता �
16:07
बार देता हूं बॉटर वन पिक्सल सॉलिड वाइट हाफ थोड़ा ठीक लगेगा डार्क मोड हाफ बढ़िया लग रहा है तो अभी सारे क�
16:14
बॉर्डर्स आ गए हैं, सब कुछ बढ़िया लग रहा है, और dark mode भी enable हो गया
16:18
now this might not be the best website, ऐसा नहीं है कि इस तरह का dark mode आपको कहीं चाहिए
16:23
but ये satisfying लग रहा है, अब ये अब ये इसको enable dark mode कर दू
16:26
enable light mode कर दू, तो ठीक था कभी ये दिख रहा है, तो देखो कुछ इस तरह से state variables का इस्तेमाल करक�
16:31
आप light mode और dark mode enable कर सकते हो अपनी website प�
16:35
usually हम क्या करते हैं body का change करते हैं जो हमारी body होती है उसका जो dark mode होता है उसको change करते है�
16:41
enable dark mode में एक यहाँ पर switch लगाते हैं अगर मैं आप लोगों forms में दिखाओ�
16:46
और यहाँ पर में radio button आप लोगों को दिखा हुआ अलग-अलग तरह के radio buttons ह�
16:50
तो यह जो switches हैं यह इस तरह का दिखाते हैं dark mode, light mode
16:54
तो इस तरह का हम यूज़ करेंगे तो अच्छा रहेगा तो आने वाले वीडियोस में हम जब अच्छे projects बनाएंग�
16:59
तो वहाँ पर हम लोग देखेंगे कि किस तरह से इस चीज को किया जा सकता है यह एक बहुती basic introductory website थ�
17:04
इसमें मैंने router का इस्तेमाल भी नहीं किया है तो मैं क्या करूँगा about component की जगा पर वापस से text form component को manually लेकर आँग�
17:12
और आगे मैं आप लोगों को ये दिखाऊंगा कि किस तरह से राउटर का इस्तेमाल करके ही काम किया जा सकता ह�
17:16
इंपोर्ट कर लेता हूँ text form को और about को comment out कर देता हूँ ताकि react शिकायत ना कर�
17:20
अभी भी कर रही है react शिकायत कहाँ पर कर रही है यह तो यह कह रही है कि आर आपने ना यह जो ट्रिपल इकुल टू यह उसनी किया बहुत बुरे हो चलो यार मैं अच्छ�
17:28
बन जाता हूं ट्रिपल इकुल टू यूज कर लेता हूं तो विलागर यह वॉर्निंग देता है रिएक्ट हमेशा जब भी आ�
17:34
वाली टी ऑपरेटर को यूज करते हो आप चेक करते हैं इक्वालिटी को तो यहां पर इसने और भी कोई वार्निंग दि�
17:41
मेरे को क्या दिए एक्सपेक्टिट ट्रिपल इक्वल ट्रू इंस्ट्रेट सॉर्ड डबल इक्वल तो मैं काम करता हूं इसको दोबार�
17:47
कंपाइल करता हूं कहीं ना कहीं तो मैंने गलती करी है कहां पर करिए मैंने यह मुझे देख lazım तो यहा�
17:53
पर अभी अभी नहीं करिए भी सब कुछ ठीक है तो 1226 तो मैंने लाइन नंबर 12 में भी किया है कुछ ना कु�
17:58
1226 नहीं अब ठीक हो गया अब सब कुछ ठीक हो गया अब ये compile हो गया successfully वो पुरानी warnings दिखा रहा है ऊप�
18:04
So I hope कि आप लोगों को इन वीडियो पसंद आएगा और आप लोगों को समझ में आ गया यार कि state क्या होती है और यार बड़ी खतरनाक app हमें ने बना लिय�
18:11
और मैं आप लोगों के responses का इंतजार करूँगा इस app को जल्दी से wrap करते है�
18:15
तो यार अगर अभी भी किसी ने comment नहीं करा इस वाले video में अगर आपने अपने function को comment नहीं करा तो जल्दी से comment कर लेन�
18:20
कि जल्दी मैं इसका वीडियो बनाने वाला हूँ जिसमें हम इसका solution को देखेंगे मैंने आप लोगों से responses इसलिए request करेंगे क्योंकि यार अग�
18:26
हब सब लोग एक भी function text से related देंगे तो यह बहुत अच्छी utility बन जाएगी तो हम लोग शायद इसको use भी करे�
18:32
future में, मैं इसको get up पे लोग डाली दूँगा वैसे भी, तो अगर हम लोग इसको use करते हैं as a utility
18:38
तो यार मज़ा आएगा, मतलब देख रहे हो आप इस तरह से कर सकते हो, और फिर clear text कर सकते ह�
18:42
आप convert to lower case कर सकते हो, कुछ भी लिख कर, upper case कर सकते हो, कभी-कभ�
18:46
इन सब चीजों की जरूरत पड़ जाती है रोज मर रहा है सिंदगी में सो यार सब लोग अभी इस playlist को जरूर access कर लेन�
18:51
यहाँ click करके save कर लेना यहाँ click करके bookmark कर लेना अभी के लिए इस वीडियो में इतना है guys
18:55
thank you so much guys for watching this video and I will see you next time