Up next in 10
Understanding State & Handling Events in React _ Complete React Course in Hindi #7
304 views
Feb 10, 2024
The video "Understanding State & Handling Events in React _ Complete React Course in Hindi #7" is likely a part of a comprehensive React tutorial series delivered in Hindi. In this video, viewers can expect to learn about the crucial concepts of state management and event handling in React. State allows components to manage and maintain their data, while event handling enables components to respond to user interactions. Through explanations and practical examples provided in Hindi, viewers will gain a solid understanding of how to utilize state and handle events effectively in React applications. This tutorial aims to equip Hindi-speaking audiences with the necessary skills to build interactive and dynamic user interfaces using React.
View Video Transcript
0:00
अब अभी तक बड़ी खुबसूरत सी application बना लिया है हमन�
0:02
मैंने npm run start run कर दिया है मुझे पता है थोड़ा थोड़ा time लेके जाएगा ये मेर�
0:06
लेकिन आपका नहीं क्योंकि मैंने editing के जादू से आप लोगों को यहाँ तक लिया है हूं मैं फास्ट फॉरवर्ड कर दिया है मैंने सब कुछ मेरा इन पीम रन स्टार्ट चल गया ह�
0:14
अब मैं क्या करूँगा देवो प्रॉप्स हमने देगे लिये सही से क्या होते हैं प्रॉप्स होती है प्रॉपर्टी�
0:18
हम एक component को pass कर सकते हैं वो properties और उन properties की साइता स�
0:22
वो component अपने आपको render करेगा इस case में मैंने भेजा text, utils, about को और वो यहाँ पर fit होकर मुझे मिल ग�
0:28
अगर मुझे इस component को reuse करना है तो तो मैं text, utils, about की जगह किसी औ�
0:32
website में कोई और चीज भेजूंगा वो यहाँ पर render हो जाएंगे ठीक है प्रॉब सम लोगों ने समझ लिए अब हम लोग क्या करेंगे इस आपको आगे बढ़ाएंगे और एक नया component बनाएंगे और उस नया component का नाम क्या होगा उस नया component का नाम होगा text form ठीक है देखो नाम कु�
1:02
कि text form है इसके अंदर मेरा form आने वाला है इस component के अंदर मैं क्या करूँग�
1:05
react का function based component मुझे चाहिए rfc मैं यहाँ पर लिख दूँग�
1:09
और यह जो component है इसके अंदर मैं क्या करूँगा render करूँगा एक form क�
1:14
वो form का से लेकर आउँगा मैं मैं कुछ नहीं लिखूंगा फॉर्म में लेकर आओंगा बूट्स ट्रैप से कॉपी पेस्ट करूंगा ठीक ह�
1:19
तो यहाँ पर बूट्स ट्रैप मैंने इंक्लूडी इसलिए कर रही है ताकि मैं यहाँ से कॉपी पेस्ट कर सकूंग�
1:24
फॉर्म में जाऊंगा और मुझे यहां पर बस एक टेक्स्ट एरिया चाहिए था अब आप इट तो मैं जल्दी से ना यह पूरा कॉप�
1:30
लेता हूं फिर इसमें से जो चीज मुझे यूज होगी हो मैं यूज करूंगा जो मुझे हटानी होगी हो मैं हटा दूंगा यहां पर मैं पेस्ट कर लेता हूं अब हां कुछ कैवियट्स है कैवियट्स क्या है कैवियट्स यह है कि क्लास क्लासनेम मुझे यहां पर सबसे पह�
2:00
में जो कि है हमारा टेक्स्ट एडिया मुझे से टेक्स्ट एडिया चाहिए तो मैं क्या करूंगा यहां पर शिफ्ट टैप दबाक�
2:07
इसको जिस तरह से रख लूंगा और कि मेरा जो है फॉर इस इकुल टू मैं इसका नाम रख देता हूं टेक्स्ट माइटेक्स्ट य�
2:15
पर माइबॉक्स रख देता हूं उसका नाम में ठीक है विजय की बॉक्स होने वाला पूरी वेबसाइट पर इसमें �
2:22
यहां पर इसकी आईडी माइबॉक्स कर देता हूं ठीक है तो यहां पर अभी बिल्कुल सही मैंने इसको रेंडर कर दिय�
2:27
आया नहीं यहाँ पर क्योंकि मैंने इस component को अभी इस्तेमाल लिखिया है सिर्फ बनाया है ठीक है तो यह जो text form component है इसको मैं save करूँगा यहाँ copy करूँगा और यहाँ पर मैं just nav bar के बाद इसको लेकर आउँगा ठीक है तो आप लोग देखना है यहाँ पर मैं इसको कुछ इ�
2:57
लिखा रहा है मतलब यहां पर मुझे इसको एक कंटेनर के अंदर डालना पड़ेगा तो मैं यहां पर डिव डॉट कंटेन�
3:02
लिखूंगा ठीक है और इसके अंदर डाल दूंगा इस टेक्स फॉर्म को कंटेनर से क्या हो बूट्स ट्रैप की क्लास होत�
3:08
container जो कि आपको कुछ इस तरह का लुट देती है देखो बीच में आ गया यह ठीक है और एक्सांपल टेक्स्ट एरिया की जग�
3:14
मैं एक्सांपल टेक्स्ट यह पर नहीं लिखोंगा मैं आप लिखोंगा एंटर यॉर्ड टेक्स पिलो और उससे पहले मैं एक हेडिं�
3:18
करूंगा तो मैं एक है डिंग डाल देता हूं यहां पर एक्शन एवर मैं काम करता हूं है डिंग को एज़ प्रॉब्लम पा�
3:24
करता हूं तो मैं यहां पर लिखूंगा है डिंग इज इक्वल टू और इसकी है डिंग में क्या दूसरी मैं है डिंग लेट�
3:29
देता हूँ, enter the text to yze, ठीक है, अब यहाँ पर यह component कितना reuse होगा, इस बारे में आप लोग अभी मत सोचो, आप बस यह सोचो कि हमने props का एक concept पढ़ा है और हम उसको इस्तेमाल कर रहे हैं, ठीक है, अभी text form को as a prop क्या मिलेगा, यहाँ पर लिख लेता हूँ, props, और यहाँ पर म�
3:59
बंद कर दूंगा तो जो भी हेडिंग में दूंगा वह यहां पर यहां से जो भी एडिंग पास करूंगा वहां पर रेंड�
4:04
हो जाएगी ठीक है तो मैं दिखाता हूं आप लोगों को एंटर तक स्टू एनलाइज यहां पर लिख कर आ गया है ठीक है अ�
4:10
आप चाहते हो वह नीचे तो डिस्पेस आ जाए तो कंटेनर के साथ साथ m y 3 क्लास होती है बुट्सट्रैप में मार्जि�
4:15
वाइम दे देती है थ्री की तो डिस्पेसिंग वह जाती है कंटेनर के ऊपर जो जैसे कि आप देख सकते हैं अभी यहा�
4:21
इसके बाद मैं यहाँ पर कुछ बटन्स लगाना चाहूँगा और उन बटन्स पर क्लिक करके मैं चाहूँगा कि मेरा text जो है वो change ह�
4:26
पर अगर यह text area थोड़ा बड़ा हो जाए तो कितना मज़ा है तो मैं क्या करूँगा कि जो मेरा text area है इसमें rows is equal to 3 ह�
4:32
तो मैं roses equal to 3 ना करके मैं roses equal to 8 करके देखता हूँ और देखता हू�
4:36
यहाँ पर क्या change होता है हाँ यहाँ बढ़िया लग रहा है काफी बड़ा text यहाँ पर डाला जा सकता ह�
4:40
अभी मैं आपको एक लंबी जोड़ी कहानी लिख सकता हूँ ठीक है और मेरा text जो ह�
4:44
वो मुझे यहाँ पर देखने को मिल जाएगा, अब यह example text area जो लिखा हुआ है, वो मुझे बिल्कुल भी अच्छा नहीं लिखता है, ठीक है, और मैं क्या करूँगा, example text area की जगह जाता हूँ, example text area को हटा ही दूँगा, या नहीं कि मैं label डालूँगा ही नहीं कुछ, label ही हट�
5:14
किया जाए वैसे ही क्या होना चाहिए यह जो हमारा कंपोनेंट है इसके अंदर मैं कुछ मैथड लिखोगा कुछ इवेंट्�
5:20
पाइर करूंगistes बटन पर क्लिक किया जाए तो क्या क्या होना चाहिए तो मैं क्या करूंगा कि जो डेव है मेरा इस यहा�
5:27
एक बटन लगाऊंगा ठीक है इन फैक्ट बटन डॉट बीटीएन डॉट बीटीएन प्राइमरी ठीक है और मैं यहां पर लिख दूंगा रिमू�
5:37
लेटर से रिमूव मैं नहीं करता हूं भी मैं कनवर्ड टू अपर केस कर देता हूं ठीक है मानों मैं एक बटन बना है ज�
5:57
लेकर मैं बहुत सारे बटन यहां पर बनाना चाहता हूं और उन पर जैसे मैं क्लिक करूं वेरा टेक्स्ट कुछ उस�
6:01
हिसाब से मैंने प्लेट हो जाएगा मैं कन्वर्ड लोग के इस करना जाता हूं तो कन्वर्ड लोग के सुझाए अगर मै�
6:06
और करना चाहता हूं तो वह कुछ और हो जाए ठीक है तो यह चीज आप लोग को आयू आप यहां तक समझ में आ गई कहानी अ�
6:25
रिलोड करता हूँ यहाँ पर, मैंने कहीं class लिखा हुआ है, class name मुझे लिखना चाहिए था
6:31
तो मैं इसको ठीक कर लेता हूँ, और I hope कि मेरा इस जो error है, वो चला जाएगा reload करके
6:35
कहीं और मैंने यह काम किया हुआ है कहीं और मैंने class लिखा हुआ ह�
6:39
जबकि बच्चे class name लिखना चाहिए तो यह चीज जो है आपको बहुत ध्यान में रखनी ह�
6:43
कोई भी error नहीं होना चाहिए console में अभी ठीक है हमारा console बिल्कुल सही दिख रहा है अब मैं यहाँ पर क्या करना चाहता हूँ, मैं आपको यहाँ पर बताऊँगा concept of state, अब होगा क्या, कि यह जो component है, इसकी एक state होगी, लिखे यह जो मैंने component अभी बनाया है, यह वाला text form, इसकी एक state होगी, और state का क्या मतलब है, state का मतलब यह है कि अवस्था, इसकी अवस्�
7:16
पर जो content लिखा हुआ है, मैं एक variable के तौर पर रखना चाहता हूँ, मेरी बात को ध्यान से सुनना
7:21
मैं एक variable के तौर पर रखना चाहता हूँ, और मैं चाहता हूँ, जैसे ही वो variable update हो
7:25
वैसे ही, जहां जहां वो variable use हो रहा है, वहां वहाँ पे, update मुझे reflect होता हु�
7:29
दिख जाए ठीक है तो मैं इसको as a part of state बना सकता हू�
7:33
तो props से confused मत होना state को props एक अलग चीज़ है state अलग चीज़ ह�
7:37
props क्या होते है props को आप pass करते हो एक component आपने बना रखा है तो आप क्या करते ह�
7:41
प्रॉप्स को पास करते हो और वो चीज़ें रेंडर हो जाती हैं आपके कंपोनेंट में, बट state क्या होती है, state एक component को belong करती है
7:48
for example, मैं आप और आप लोगों को जल्दी से एक state बना कर दिखाता हूँ
7:53
अब मैं आपर क्या करूँगा, react से import करूँगा use state, use state एक hook होता ह�
7:58
अब आप में से लोग सोचो यार ये मैंने क्या बोल दिया ये hook क्या होता है hook तो हमने कभी सुना ही नहीं ह�
8:03
तो मैं आपको बताता हूँ ये hook क्या होता है सबसे पहले react hook के बारे में जान लेते है�
8:07
तो मैं अगर internet पर react hook search करूँ तो मैं इस page पर आ जाओग�
8:11
तो hooks are a new addition to react 16.8 होता क्या था पहले ज�
8:15
आप एक class based component लिखते थे तो आपको बहुत सारे functions देखने क�
8:20
मिलते थे ठीक है और बहुत सा तरह की चीज़े थी जो कि आप वहाँ पर कर पाते थे लेकि�
8:23
लोगों ने क्योंकि function based component को पसंद किया, इसलिए react ने hooks को introduce किया
8:28
तो आप use state को इस्तेमाल कर सकते हैं, कुछ इस तरह से
8:33
तो मैं अगर इसको copy करूँ, और यहाँ पर ले कर आओ, तो यहाँ पर मैं क्या कह रहा हूँ
8:36
मैं कह रहा हूँ कि यह count variable है, मेरे case में यह text होगा, और मैं इसका
8:41
जो update वाला function है, उसका नाम set text रखूँगा, मैं कहूँगा
8:45
use state, enter text here, ठीक है, अब मेरी बात को सुनना
8:49
ध्यान से मैंने क्या किया, मैंने सबसे बड़े use state hook को, import किया
8:53
from react, ठीक है, ये तो आपको समझ में आया, इसके बाद मैंने क्या किया, इस syntax से मैं क्या कह रहा हूँ, इस syntax से basically मैं ये कह रहा हूँ, कि वाई text जो है, वो मेरा text है, यानि कि जो भी value मैं चाहता हूँ, text की एक variable है, मेरा text उसके अंदर क्या value आजाए, enter text here आजाए, ये default value है, ठीक है, और ज�
9:24
यहां से लेकर आया ठीक है तो यह सिंटेक्स हम लोग बार-बार इस्तेमाल करेंगे सिंटेक्स को दिमाग में बैठ�
9:28
लो ठीक है यह अच्छा शब्द दिमाग में बैठा लो रटना जो है बहुत ही गंदा शब्द है ठीक है तो रटना नही�
9:34
बाग में बैठाना है ठीक है, const count set count is equal to use state 0, और इस तर�
9:37
के बहुत सारे variables आप बना सकते हो, अब मैं count को जहां भी use करूँगा
9:42
और मैं जब भी update करूँगा count को, वहाँ वहाँ वो update हो जाएगा, ठीक है, यही जादू है react का, obviously
9:47
बिना page को reload करे, बिना page को reload करें, अब सुन दे रहो कहानी आपक�
9:51
समझ में आएगी बात, क्योंकि मैंने अभी खतम नहीं करा है, hooks के बारे में बतान�
9:55
और state के बारे में बताना अब देखो होता क्या था पहले, जब हम class based
9:59
component इस्तेमाल करते थे, तब वहाँ पर मैं directly this.state करके अपनी state set कर सकता हूँ
10:05
लेकिन यहाँ पर, क्योंकि मैं एक function use कर रहा हूँ, मैं state को कैसे set करूँगा
10:09
तो hooks जो है, आपको बिना class बनाए, class के features use करने में सहायक होते हैं
10:14
अब यह क्या है, use state क्या है, use state को अगर मैं कुछ इस तरह से use करूँगा
10:22
यानि कि मैं ये array destructuring का use कर रहा हूँ तो use state क्या return करेगा मुझ�
10:27
text और set text basically मैं कह रहा हूँ जो text है मेर�
10:30
वो set हो जाए ये जो array return करेगा उसके पहले parameter क�
10:34
और set text क्या हो जाए set text हो जाए set मेर�
10:38
इसके दूसरे parameter के तो अगर मैं यापर console.log कुछ इस तरह से करूँ, मान लो मैं कुछ इस तरह से करूँ, console.log, ठीक है
10:46
और मैं यहाँ पर 2 लिख देता हूँ, ठीक है, और मैं save करूँ इस चीज को, और आप लोगों दिखाता हूँ यहाँ पर मैं
10:52
तो यहाँ पर आप लोगों को सबसे पहली बात जो ध्यान में रखनी है वो यह है कि आप इसको अपने function component के अंदर डालें, मैं इसको function component के अंदर डालूंगा, बाहर नहीं रखूंगा, सबसे पहली बात, ठीक है, यह तो पहली important बात हो गई, दूसरी important बात यह हो गई, कि यह �
11:22
यह रियाप्ट में मैं टेक्स्ट को ऐसे अपडेट नहीं कर सकता मैं कुछ इस तरह से टेक्स्ट को अपडेट नहीं कर सकता कि मैंने टेक्स्ट को यह बना दिया और अपडेट हो गया टेक्स्ट मेरा नहीं इस तरह जैसे आप नॉर्मल वैरिबल को अपडेट करते हुए से �
11:52
वो अब enter text या ना होकर, ये हो जाएगी, ठीक है, तो इस चीज़ को ज़रा समझते हैं
11:57
और यार जब तक हम use नहीं करेंगे states को, जब तक हम इस समझ में नहीं आएगी, तो चलते हैं, use करते हैं state को
12:02
तो मैंने कहा, text set text is equal to use state ये, तो मैंने basically ये कहा
12:06
text state variable set heading use text area value
12:47
तो मैं यहाँ पर control x करता हूँ, और मैं यहाँ पर text area value is equal to
12:51
मैं लिखूँगा value is equal to, और मैं इसको as a text set कर दूँगा
12:56
एक मिनिट मैं इसको जड़ा backspace से ठीक कर लेता हूँ, तो यह जो text area इसकी value हो जाएगी
13:00
जो भी text की value है, और मेरी text की क्या default value मैंने set करी ह�
13:04
enter text here to ठीक है तो यहाँ पर मैंने इस तरह से set कर दिये value तो देखो enter text here to
13:09
इसके अंदर आ गया आ गया कि नहीं आ गया अब एक चीज और दिखाता हूँ आप लोग मालों मैं text को change कर देखी कोशिश करता हू�
13:15
मैं कहता हूँ text को new text कर दो और मैं save करता हू�
13:18
तो आप लोग देखना है यहाँ पर क्या होगा मुझे error मिलेगा यह कहेगा कि आप लोग directly state को ऐसे set नहीं कर सकत�
13:24
आपको यह वाला function इस्तेमाल करना पड़ेगा कौन सा function set text तो यह wrong ह�
13:30
wrong way to change the state और correct way क्या है मैं यहाँ पर लिख देता हूँ, correct वी क्या है
13:37
correct way to change यह state क्या है? set text को इस्तेमाल करना, ठीक है? मैं कहूँगा set text, और इसके अंदर मैं डाल दूँगा यह
13:44
तो मैं set text करूँगा, new text, तो यह correct way है
13:48
मैं अभी के लिए इन दोनों को comment out कर दूँगा, और save कर दूँगा, और जब भी हमें change करना होगा
13:53
इस state को, तो हम set text को इस्तेमाल करेंगे, अब मैं आपर और भी बहुत सारे state variables डाल सकता था
13:58
3-4 और डाल सकता था, बड़ अभी के लिए मुझे सिर्फ एक ही चाहिए, जो है text, ठीक है, अब मैं चाहता हूँ
14:03
कि कोई भी इस button पर click करे, कोई भी इस button पर click करे, तब क्या हो confusing function run हो
14:09
let us say मैं उस function का नाम रखना चाता हूँ, handle click, ठीक है
14:13
और handle uppercase click, तो मैं handle up click कर देता हूँ उसको
14:17
मालूम मैं चाहता हूँ कि यह function invoke होजा, जैसे कोई इस button पर click करे
14:21
तो अब ये function मुझे definitely बनाना पड़ेगा ठीक है तो मैं क्या करूँगा यहाँ प�
14:26
एक constant बनाऊंगा मैं कहूँगा handle of click is equal to और ये एक arrow function होग�
14:31
और console.log कर दूँगा uppercase was clicked ठीक है तो मैंने यहाँ पर कुछ इस तरह स�
14:38
एक function बना लिया अब यहाँ पर मैंने क्या कहा कि जैसेdimensional इस बटन पर क्लिक करेगा तब क्या होगा यह फंक्शन फायर होगा ठीक है तो मैं आपको यह चीज दिखा देता हूं सबसे पहले रिलोड करते हैं इसको इंस्पेक्ट करते हैं यहाँ पर और देखना यहाँ पर अब यहाँ पर मैंने को�
15:09
करूंगा हैंडल ऑन चेंज लिख दूंगा हैंडल ऑन चेंज ठीक है और मैं ऑफिसली इसको यह कॉपी करूंगा लॉजिक अभ�
15:17
नहीं लिखूंगा और हैंडल ऑन चेंज लिख दूंगा यह पर ठीक है और मैं यहां पर लिख दूंगा ऑन चेंज और चेंज ठीक ह�
15:25
अब यहाँ और मैंने को इस तरह से लिख दिया, handle up click, handle on change, और यह error मेरा चला जाएगा, ठीक है, और भी यह मुझे कह रहा है
15:31
set text is assigned a value but never used, हम use करेंगे भी set text को, मैं क्या करना चाहता हूँ, कि जैसे कोई click करे
15:37
सबसे पहले तो मैं यह दिखाता हूँ convert to upper case को मैंने जैसे ही click किया upper case was clicked यहाँ पर मुझे देखने को मिल गय�
15:43
बिना page reload हुए page reload नहीं हो रहा है बस मैं यहाँ पर convert to upper case पर click कर रहा हू�
15:48
जैसे ही यह देखो यहाँ पर यह function fire हो रहा है अब मैं चाहता हूँ जैसे ही function fire ह�
15:53
मैं यहाँ पर set text का इस्तेमाल करना चाहता हूँ और मैं क्या करना चाहता हू�
15:58
you have clicked on handle up click ठीक है अब यहाँ पर देखना क्या होग�
16:06
जैसे ही मैं यहाँ पर click करूँगा मेरी जो text की value है वो मैं change कर दूँग�
16:11
क्यों कर दूँगा change, क्योंकि set text के अंदर जो भी चीज में डालूँगा
16:15
वो मेरी text की value को उसके बरापर set कर देगी, ठीक है, क्योंकि मैंने यहाँ पर, जो मेरा state variable है
16:21
वो कुछ इस तरह से बनाया है, कि set text के अंदर जो भी चीज आएगी
16:24
वो text को उसके बाराबर set कर देगी, this is the correct way to change the state, ठीक है, तो यहाँ पर मैं आप लोग को दिखाता हूँ, जैसे मैंने यहाँ पर click किया, आप लोग देखो यहाँ पर क्या हुआ, you have clicked on handle, up click, ठीक है, तो जैसे ही मैं इस पर click करता जाओंगा, क्योंकि यहाँ पर इसकी state change हो रह�
16:54
react सारे variables को watch नहीं करती है, but इस case में आप देखो
16:59
कि ये जो text variable है, ये update हुआ, क्यों update हुआ
17:03
क्योंकि मैंने इसको set text की सायता से update किया, और जैसे ये update हुआ
17:07
इसकी जो value थी वो भी यहाँ पर reflect हो गई, यहाँ पर जैसे से मैं इसको change करता जाओंगा
17:12
ये reflect होती जाएगी, अब एक चीज और दिखाता हूँ आपको, जैसे मैं यहाँ पर कुछ type करूँगा, यहाँ पर देखो, on change function मेरा run कर रहा है, लेकिन मैं कुछ change नहीं कर पा रहा हूँ उसके अंदर, उसकी वज़ा पता है क्या है, उसकी वज़ा यह है, कि मैंने यहाँ पर �
17:42
event के लिए लिस्ट कर रहे हैं तब क्या होता है कि यह फंक्शन तो रन होगा होगा ठीक है जैसे मैं कु�
17:48
चेंज करूंगा मुझे यहां पर फ्री में एक ईवेंट ऑप्जेक्ट मिल जाएगा तो मैं यहां पर ईवेंट लिख देता हूं औ�
17:53
क्या कर दूँगा, set text को कर दूँगा, event.target.value, अब ये बहुत सारे लोगों को confusing लगेगा
17:59
confusing क्यों लगेगा, क्योंकि लोगों को लगेगा, event.target.value क्या है, और value तो text है
18:05
तो मैं आप लोगों को बताता हूँ, क्या चल रहा है यहाँ पर, और मैं बता रहा हूँ कि यह आप कई बार use करोगे
18:09
जब जब आप inputs use करोगे, जब जब आप text areas use करोगे
18:13
तब आप definitely यह वाला syntax कई बार इस्तेमाल करोगे, तो मैं आप और आप लोगों को बता देता हूँ
18:18
text area class name is equal to यह मैंने, जो text area डाला हुआ है
18:22
इस text area के अंदर एक value है जो की text के बराबर है अब text एक ऐसा variable है जो क�
18:26
मेरी state को belong करता है एक state variable है ठीक है यहाँ पर इसको मैं update कर सकता हू�
18:31
set text की सहायता से मैं क्या कह रहा हूँ मैं कह रहा हूँ कि जब भी user change करने की कोशिश करे text area क�
18:37
तब क्या होना चाहिए जो value है मेरी यानि कि जो user ने मानलो h लिख�
18:42
तो जो value है वो क्या हो जाएगी वो उस moment पर value हो जाएग�
18:47
जो text already था plus h तो मैं कहूँगा कि जो मेरा text है उसको भ�
18:51
उस value के बराबर set कर दो ठीक है तो यहाँ पर इससे क्या effect आएग�
19:07
उसको set कर देने हैं, हमारा जो text है उसके बराबर, तो हमारा text जो variable है, जो हमारी state है text, वो भी update होती जा रही है, ठीक है, तो यहाँ पर हमने दो concepts को सीखा है इस वीडियो के अंदर, एक तो हम कैसे events को handle करते हैं, events को कैसे handle करते हैं, यह बहुत आसान है, और बहुत ही straightforward है, तो �
19:37
आप हर event के लिए इस तरह से handler बना सकते हो, but मैंने आप लोगों को एक bare minimum form बना कर दिखाया
19:43
ठीक है, अब हमें करना क्या है, कि जैसे ही हम click करेंगे convert to uppercase पर
19:48
मैं चाहता हूँ कि यह जो set text है, वो बराबर हो जाए, किसके
19:52
वो equal हो जाए, जो existing value है text की, that in uppercase, ठीक है
19:58
तो मैं आपर, अगर console.log uppercase, first click लिखूं, और फिर इसके बाद यहाँ पर
20:02
text भी लिख दू, मैं इसको यहाँ पर plus text लिखता हूं, ठीक है, तो क्या होगा
20:07
मैं जैसे इस पर लिख करूँगा, आप लोग देखना, मैं जरा console को clear करता हूँ, मैं जैसे यहाँ पर लिखूँगा
20:12
तो देखो, यह जो value है, वो यहाँ पर आ गई है, अब मैं इस value को change कर दूँ
20:15
अगर तो देखो, यह कुछ इस तरह से value मेरी यहाँ पर आ गई है, यहाँ पर जो text variable है
20:19
वो मैं यहाँ पर access कर पा रहा हूँ, इस function के अंदर से, अब मैं क्या करूँगा
20:24
इसको uppercase में convert कर दूँगा, ठीक है, तो मैं क्या करूँगा, set text is equal to
20:28
मैं यहाँ पर लिखूँगा, let new text is equal to, लिखूँगा मैं
20:33
text.to uppercase, ठीक है, to uppercase function में इस्तेमाल करूँगा JavaScript का और मै�
20:40
set text कर दूँगा new text ठीक है new text तो हमने अपनी पहल�
20:45
react की useful application बना लिये मैं console को जड़ा बंद करूँगा reload करूँग�
20:49
इसको और यहाँ पर कोई भी text आप लिखें जैसे Harry is a good boy
20:53
और इसके बाद आप convert to uppercase करेंगे, तो यह देखो, यह Harry is a good boy, अब अगर इसमें convert हो गया, कितन�
20:59
मज़ेदार है यह, ठीक है, कितना मज़ेदार है, आप यहाँ पर एक ऐसी app बना पाए, जो कि actual मे�
21:05
किसी के काम आ सकती है, ठीक है, आप यहाँ पर एक ऐसी app बना चुके हो, कि कोई भ�
21:09
इसमें अगर fully capitalize करना चाहता है, एक-एक letter को अपने sentence में से
21:15
तो वो कर सकता है इस application का इस्तेमाल करके, हमने क्या-क्या concept यूज़ करें
21:19
हमने state का concept यूज़ करा, हमने state बनाई, हमने कहा कि text हमारी एक state होगी
21:24
use state hook का हमने इस्तेमाल करा, use state hook क्या करता है, एक हमें state variable बनाने में मदद करता ह�
21:29
text और set text ये दोनों हमने क्या किया initialize कर दिये use state
21:35
होक की साहिता से text मेरी वो value है जो कि यहाँ पर मैंने by default
21:39
enter text here 2 रखी हुई है और set text मेरा एक function है जो कि मैं use कर सकता हू�
21:43
कभी भी इस text state को update करने के लिए तो मैं इस तरह की बहुत सारी states बना सकता थ�
21:48
बट अभी के लिए मैंने सिर्फ एक state बनाई है आगे हम और बनाएंगे बट अभी के लिए सिर्फ एक state मैंने यहाँ पर बना रखी ह�
21:53
जिसका नाम है text यह जो text state मैंने बनाई है यह मैं यहाँ पर कहीं भी इस्तेमाल कर सकता हूँ जैसे कि आपने देखा हैंडल अप क्लिक में मैंने इस्तेमाल कर दिय�
22:02
अब मैंने आप लोगों को यहाँ पर ये text area में दो events के लिए listen किय�
22:06
एक on change event के लिए on change event के लिए listen करना मेरे लिए ज़रूरी इसलिए थ�
22:10
क्योंकि अगर मैं नहीं करता on change event के लिए listen तो मैं type नहीं कर पाता इसमे�
22:14
यह जरूरी होता है, मुझे इसके लिए lesson करना पड़ेगा, और इसके अंदर मेरी जो, यह state है
22:18
इसको मुझे set करना पड़ेगा, ताकि मैं इसमें type कर सको, वरना मैं type नहीं कर पाँगा text area के अंदर
22:22
और इसलिए error आ रहा था मेरा, अगर आपको याद हो वो error आ रहा था ना कि आपने यहाँ पर on change क्यों नहीं बना रखा ह�
22:28
on change बनाना पड़ेगा क्योंकि हम यहाँ पर value is equal to
22:33
एक state variable यूज़ कर रहे हैं और ये state हम क्योंकि यूज़ कर रहे है�
22:36
ये state को update करना ज़रूरी है जैसे ही को टाइप करे उस टेक्स्ट एरिया के अंदर ठीक है तो इसलिए हमने यहाँ पर ऑन चेंजिमेंट के लिए लेसन किया यह कंसोल लॉग लगाना यह पर जरूरी नहीं है हम अपने कंसोल को गंडा नहीं करना चाहते हमने बस यहाँ पर डीबगिंग के लिए और ची�
23:08
देखो अभी मेरा console एकदम clean है मैं कुछ भी यहाँ पर लिख करें और convert to uppercase करता हू�
23:13
तो मेरे console में कोई भी message नहीं आ रहा है ठीक है तो इस तरह से आप लोग क्या कर सकते ह�
23:17
एक text को lowercase से uppercase में बिना page को reload किये आप लोग change कर सकते हो ठीक ह�
23:23
I hope कि यहाँ पर आप लोग को इस चीज समझ में आ गई और आने वाले टाइम में हम लोग और events को listen करेंग�
23:29
अपने components को और थोड़ा सा complex बनाएंगे बहुत सारी states के साथ और एक बात और बता दूँ आप लोगों क�
23:34
use state से fake hook नहीं होता है हमारे पास react में और बहुत सारे hooks होते है�
23:37
जो कि हम देखने वाले हैं बड़े मज़ेदार hooks होते हैं मज़ा आएगा आप लोगों को use state तो सिर्फ एक trailer थ�
23:43
अब रियाक्ट में और भी बहुत सारी चीज़े हैं जो कि आपकी javascript क�
23:47
थूँ application मनाने की जर्नी को मज़ेदार बनाती है, यार आप plain and simple
23:51
vanilla javascript लगा इस्तेमाल करते हैं, तो कितना कुछ करना पड़ता आपको, .inner
23:55
HTML, और add event listener, और मतलब बहुत सारे चक्कर होते हैं
23:59
उन सब चक्करों से आप बज़ गए, और आपकी app कितनी organized है, यहाँ पर आपक�
24:03
app.js के अंदर दिख रहा है कि बाई मैंने एक dab bar यूज़ किया है एक text form
24:07
नाम का component यूज़ किया है जिसको मैंने ये heading दे रहे है ठीक है I hope कि आप लोग सम�
24:11
गए अभी तक के react के जितने concepts मैंने आप लोग को बताये है ये playlist
24:15
आप लोग bookmark जरूर करें और इसको इसको सेव करें यहां पर क्लिक करके बहुत कम लोगों ने सेव करें अभी तक प्लेलिस्ट आप इसको जरूर सेव करे�
24:22
और बुकमार्क करें कि इसके अंदर सारी चीजें में अपलोड करने वाला हूं और जब तक आप इस प्लेलिस्ट को एक्से�
24:26
रहे होंगे इसमें बहुत सारे वीडियो डल चुके होंगे अभी के अभी आप खोल कर देखो प्लेलिस्ट को चैलें�
24:31
करता हूं कि चार पांच से साथ तक डॉली गए वीडियो जब आप देखोगे तो हो सकता है बहुत सारे डल गए हो ठीक ह�
24:37
कुछ पता नहीं हो सकता है, 100 डल गए हूँ जब आप देख रहो, ठीक है, तो देख ले ना आप लोग कितने डल गए हैं जब तक
24:41
और मैं बस इस course को the best बनाने की कोशिश कर रहा हूँ
24:45
पले मुझे थोड़ा सा slow आगे बढ़ना पड़े इस course में, but मैं slow बढ़ूंगा आग�
24:50
धीरे धीरे डालूंगा videos but perfect course बना कर दूँगा I hope कि मज़ा आ रहा है सब लोगों को इस course मे�
24:55
अभी के लिए इस video में इतना है guys Thank you so much guys for watching this video
24:59
and I will see you next time करते है�
#Flash-Based Entertainment