Up next in 10
Introduction to React Hooks _ Complete React Course in Hindi #38
38 views
Feb 11, 2024
In the 38th episode of the "Complete React Course in Hindi," the tutorial introduces viewers to the powerful concept of React Hooks. This video serves as a foundational guide, explaining the significance and usage of React Hooks in modern React development. The instructor provides clear explanations and practical examples, offering insights into how Hooks simplify state management, side effects, and other functionalities in React components. Whether you are a React enthusiast exploring the latest features or a developer eager to enhance your React skills, this tutorial lays the groundwork for understanding and implementing React Hooks in your projects, ushering in a more streamlined and functional approach to building React applications.
View Video Transcript
0:00
Guys, when I was telling you in this course that we will use class-based components
0:03
then I told you there that we are using class-based components only for learning
0:08
That is, if we know how class-based components work, then we will be able to work on the code basis of more React
0:15
If someone else has written a class-based component, and we have not learned a class-based component
0:19
then we will not be able to see its code, and we will not be able to work on any such component which class-based component uses
0:24
Personally, I prefer functional-based components, and many of you are telling me in the comments that
0:29
जल्दी से function based component में सब कुछ को convert करते हैं, news app में भी, तो हम news monkey को पूरा function based component में convert करने वाले हैं, उसी के साथ सारे बहुत सारे लोग code मांग रहे थे, तो मैंने code जो है github पर डाल दिया है, अब अगर मान लो आपने 31st, 32nd, 33rd video complete किया है, और वहाँ तक का आपको code चाहिए, तो �
0:59
तब तक का source code है तो आपको मैंने यहाँ पर इतने सारे commits मार के इसलिए दिया ह�
1:05
ताकि आप किसी भी point of time में code निकाल सको यह काम मैंने news API के साथ भी किया हुआ ह�
1:10
news app के साथ जो कि यह आपके साथ हमने news monkey बनाई है और हमने text tutorials के साथ भ�
1:15
मैंने ऐसे ही किया हुआ आप लोगों के लिए कमेंट्स मार रखे हैं जगा जगा पर ताकि आप लोगों पता चल जाए कि कहां पर कितना कोड आपको कैसे मिलेगा जैसे मालो वीडियो 30 का कोड मुझे चीज है तो आपको जादा गिट आने की जरूरत नहीं है अगर आपको न�
1:45
लिखा है कि time to time मैं चीजों को change करता जा रहा हूँ नीचे आकर तो अगर आपको class based component वाला code चाहिए working सब कु�
1:51
तो आप ये जो मेरा 37th video है इसको आप consider कर सकते हो तो मैं आपको क्या करूँगा जल्दी स�
1:57
अभी मैं सब कुछ function based component में मैं convert करने वाला हू�
2:03
अगर हम सब कुछ को function based component में convert कर देंग�
2:07
तो ये component read mount कहाँ पर जाएगा this use state hook news fetch mode data function component read mount
2:43
होते हैं react में functions होते हैं जो कि आप लोगों को function
2:48
based component के अंदर वो सारी चीज करना allow करते हैं जो कि class based component
2:52
में आप लोग कर रहे थे अब hooks को आप लोगों को और बढ़िया तरह समझाने के लि�
2:55
मैं आपर थोड़ी बहुत थेओरी आप लोगों के लिए लेकर आया हूँ, जो कि definitely काम आने वाली है
2:59
कि मैं आप लोगों के लिए यहाँ पर most used hooks लेकर आया हूँ
3:03
जो कि आप लोगों को जानना बहुत जादा जरूरी हो जाता है, अगर आप लोग react सीख रहे हो तो, तो सबसे पहले react hooks होते क्या हैं
3:08
अभी तक हमने officially hooks पर बैट के बात नहीं कर रही है, hooks को लेके dedicated discussion नहीं किया है
3:13
तो इस video में वो करते हैं, तो देखो hooks क्या होते हैं, features of class based components in function based components
3:19
यानि कि class based component में जो features यूज़ किये जा रहे थे, वो directly function based component में hooks की साइधा से किये जा सकते हैं
3:25
तो चीजे भी आसान रहेंगी this.this. भी नहीं करना पड़ेगा और जिनको object oriented programming नहीं आती ह�
3:30
उनको भी दिक्कत नहीं होगी वो भी directly function based component में अपने काम कर सकते है�
3:33
it allows you to use state and other react features without writing a class
3:38
पहले आप लोग क्या कर रहे थे this.state यूज़ कर रहे थे जब भी हमें state access करनी थ�
3:43
और this.set state यूज़ कर रहे थे जब भी हमें कोई भी state
3:47
update करनी थी या फिर set करनी थी अब यहाँ पर हम क्या करेंग�
3:50
use state hook का इस्तेमाल करेंगे तो इस तरह के और भी बहुत सारे hooks होते है�
3:54
use state हमने अभी तक सिर्फ सीखा एक hook but हम लोग और hooks के बारे में भी बात करेंगे
3:58
और आप अपना hook भी बना सकते हो react में, but उसके बारे में बात मैं अभी नहीं करूँगा, अभी चीजों को simple रखते हुए
4:03
हम अपनी news app को, जो हमारा पूरा function based component वाला structure है
4:08
उसमें convert करेंगे, तो यहाँ पर आप लोग देखो अगर तो hooks are the functions
4:12
which hook into react state and life cycle features from function components
4:17
यानि कि hook नाम इसका क्यों दिया है क्योंकि आप क्या कर रहे हैं कि react की जो life cycle वाले features थ�
4:22
जो कि आपको class based component में देखने को मिलते थे अब आप function based component में रहक�
4:27
उसका मज़ा उठा रहे हैं यानि कि best of two words आपको मिल रहा है, function component आप use करके
4:32
use class based component in fact create react app create react app class based component create react app create react app class based component
4:43
आज की तारीक में वो change होके function based component कर दिया गय�
4:46
क्योंकि function based component पे को लोगों का प्यार मिला, community का प्यार मिला, class based component से ज़्यादा, ठीक है, तो इसलिए function based component में आजकल ज़्यादा दर लोग काम करते हैं, और down the line आपको जितने भी component शायद कोई पुराने code के भी मिलेंगे, तो वो function based component के ही मिलेंगे, कोई भी react code अगर आप लोग �
5:16
थे विकोरी को खत्म करेंगे ज्यादा थे विभाग नहीं बताने वाला आपको अब लोग बोर हो रहे हो सबसे पहला ज�
5:22
कि हमारा वह यू स्टेट है हम इससे स्टेट को अपडेट कर सकते हैं और स्टेट की इनिशल वैल्यू को सेट क�
5:27
चाहते हैं ठीक है मान लो मैंने एक टेक्स नाम का वैरिबल बनाया और उसको मैं एक स्टेट का हिस्सा बनान�
5:33
चाहता हूं तो मैं दो चीजें इससे रिटर्न करवा सकता हूं एक तो टेक्स्ट और एक सेट टेक्स्ट सेट टेक्स्ट फंक्श�
5:39
जो कि मुझे इसको future में update करने के काम आएगा और text वो variable होग�
5:42
जो कि इस state का part है ठीक है और हम एक से ज़ादा बा�
5:46
use state को use कर सकते हैं ठीक है use effect की बात करूँ अगर मै�
5:50
तो use effect basically क्या करता है side effect perform करने के लिए हमें मदद करता ह�
5:54
मैं आपको इस बात को समझाता हूँ जो काम हम लोग component did mount पर कर रहे थे वो काम हम use effects पर कर सकते हैं अब अगर मान लोग component हमारा update होता है तो हमें कोई चीज करवानी है तो हम use effect के अंदर डाल कर वो चीज करवा सकते हैं अब मान लोग ही मैं चाहता हूँ कि मेरा एक state variable है text मैं ज�
6:24
update जो कर रहा था वो क्या करेगा side effect हमें करवा कर देगा ठीक है use context की बात करते है�
6:31
use context context API use करने की काम आता है context API पे मैं आगे आपको in-depth सब कुछ समझाऊंगा क्या होती ह�
6:37
तो इसको आप hold पे रख सकते हो but for those who are interested उनको मैं उपर-उपर से बता देता हूँ context API क्या काम करती ह�
6:54
prop drill prop drill prop prop prop next component जैसे कि मैंने बेजा app से news item
7:04
news में news से news item में, अब मालो News item के अंदर भी कोई component है उसके अंद�
7:08
तो एक function जिसको मुझे नीचे run कराना था उसको मुझे इतनी जगा प�
7:11
भेज भेज के नीचे end तक भेजना पड़ा तो इसलिए context API क्या करती ह�
7:15
आप लोगों को globally available करा देती है इस तरह के functions आप कहीं से भ�
7:20
कोई भी function या कोई भी state जो है context के अंदर जो की मौज़ेत है वो use कर सकते है�
7:24
इसके बारे में detail में बात करेंगे अभी अभी बिल्कुल भी इसको समझने की कोशिश मत करन�
7:27
सिर्फ इससे जो मैंने आपको बताया बट जस्ट जिन लोग को rough idea चीए था उन लोग के लिए मैंन�
7:32
ये बात बोली अब use ref की बात करते हैं use ref क्या करता है return करता ह�
7:36
mutable reference object जिसके अंदर एक dot current property होती है और हम क्या कर सकते है�
7:41
एक डॉम के अंदर किसी element पर इसको point करा सकते हैं इसके बारे में भी हम लोग आगे देखेंग�
7:47
बट कहीं �Silver भी होता है यह आपको UseRef को use करने की ज़रूरती नहीं आपड़�
7:51
हर आप में आप UseRef use करो ऐसा ज़रूरी नहीं है ठीक है तो आप use ref को कुछ ऐसा समझ सकते हो यह एक holder ह�
7:57
जिसके dot current के अंदर कोई भी DOM का एलिमेंट रह सकता है ठीक ह�
8:01
तो आप ref is equal to use ref वाला जो भी return हो रहा है आपका use ref स�
8:06
वो कर सकते हो किसी भी element के अंदर देखेंगे इसको भी लेकिन आपको ज़्यादा समझ लेगी यूजर एफ को कि किसी भी एक element का reference
8:13
आपके JSX के अंदर कोई भी एक tag है उसका reference रखने के लिए यूजर एफ काम आता ह�
8:17
तो अब हम लोग क्या करेंगे आने वाले वीडियो में हम लोग अपनी NewsMonkey application को refactor करेंग�
8:25
और हम लोग अपनी News Monkey application को use करवाएंगे function based component
8:30
अभी तक हमारी News Monkey application को class based component इस्तेमाल कर रही थी तो हम उसको use करवाएंगे function based component
8:35
so I hope कि समझ में आ गया सब लोगों को यह जो मैंने अभी आप लोगों को बताय�
8:39
hooks के बारे में बहुती brief सी theory थी but मुझे लगा बहुत ज़रूरी है इसलिए मैंने add कर�
8:44
अब अगर आप लोगों ने ये react.js की playlist अभी तक access नहीं करी है तो इसको ज़रूर access करन�
8:47
यहाँ click करके इसको bookmark करना यहाँ click करके इसको save करना अभी के लिए इस वीडियो में इतना है guys
8:52
Thank you so much guys for watching this video and I will see you next time