Up next in 10
useContext hook_ Using React Context API _ Complete React Course in Hindi #58
17 views
Feb 11, 2024
In the 58th episode of the "Complete React Course in Hindi," the tutorial delves into the useContext hook, offering a practical exploration of leveraging the React Context API. This video provides an in-depth guide on utilizing the useContext hook to access and consume context values within functional components. The instructor walks viewers through the implementation of this hook, demonstrating how it streamlines state management and promotes cleaner, more efficient code. Whether you're a React developer seeking to enhance your understanding of state management or a learner interested in harnessing the power of React Context API with hooks, this tutorial equips you with practical insights into using the useContext hook in the iNotebook project.
View Video Transcript
0:00
अपने पिछले वीडियो में हम लोगों ने देखा कि किस तरह से context API काम करती है�
0:03
वहाँ पर context API की सौफ बात की एक बात अगर आप लोगों को बताऊं तो कुछ ऐसी बात थी
0:08
कि यार app.js के अंदर अगर इतने सारे components हैं और वो भी इतने सारे components को use कर रहे हैं
0:13
इसे मान लो app.js component 2 use कर रहा है, component 2 component 8 use कर रहा है, component 8 अपने अंदर component 15 use कर रहा है, 16, 17, अब मान लो component 17 को user authenticated है की नहीं, इस information की ज़रूरत है, तो वो information मुझे app.js से यहां तहलाते हुए, पूरा component 17 तक लानी पड़ेगी, which is a pain
0:34
मैं चाहता हूँ एक ऐसा तरीका कि component 17 उसको जो चीज़ चाहिए वो ले ल�
0:39
component 18 उसको जो state चाहिए वो ले ले component 13 को जो कुछ चाहिए वो ले ल�
0:44
component 12 को जो कुछ चाहिए वो ले ले और यह काम किया जा सकता है context API स�
0:48
component 12 को जो भी चीज़ चाहिए context API से बात कर सकता है इनकी जो भी context हमने बनाया है उससे बात कर सकता ह�
0:54
जो state उस context के अंदर है इनकी जो states है हम एक context के अंदर डाल सकते है�
0:59
जो states इस context के अंदर हैं वो सारी की सारी accessible हो जाएंग�
1:03
किसी भी component को चाहेंगे 17 क्यों ना हो, 16 क्यों ना हो, 14, 13, 12, 10, 11, 9, 18 या फिर 7
1:09
कोई भी context access कर सकता है कोई भी component ठीक ह�
1:13
तो इस चीज़ को अभी हम code में लिखेंगे और समझेंगे कि यार यह जो बात बोली गई है यहाँ प�
1:17
इसका मतलब क्या है और यह करते कैसे है तो मैं आ चुका हूँ अपने visual studio code के अंद�
1:22
और यहाँ पर मैं क्या करूँगा दिक्कत होनी भी चाहिए यहाँ प�
1:41
अब context के अंदर मैं अलग-अलग context बनाऊंगा अब देखो यहाँ पर तो मैं context
1:45
folder के अंदर सारी files फैला सकता हूँ in fact मैं components के अंदर जो files
1:49
थी वो component folder बनाने की जरूरत भी नहीं थी ऐसे भी फैला सकता था लेकिन फैलाना रायता फैलाना कभी अच्छी बात नहीं ह�
1:55
हमेशा याद रखना application बड़ी होगी आपको दिक्कत होगी जितना ओर्गनाइज रखोगे चीजों को उतना फायदा होगा आपको future मे�
2:02
हो सकता है कि आपकी application future में बड़े अभी मान लो आप ये सोच रहे हो कि यार ये त�
2:06
simple सी app है मुझे बना के deploy करनी है लेकिन हो सकता है कि future मे�
2:11
आपको अभी बालूम ही ना हो आपको कि आप future में इसको आगे बढ़ाने वाले ह�
2:15
और हो सकता है आज से 6 महीने के बाद आपका plan बने इसको आगे ले जाने के लिए इसको आगे ले जाने के लि�
2:47
चाहे वो किसी भी ज़रूरा का कोड क्यों ना हो अब यहां पर आते हैं जल्दी से हमने जो कॉंटेक्स फोल्डर बना�
2:51
इसके अंदर हम नोट नाम से एक फोल्डर बनाएंगे ठीक है तो मैं आप एस स्मॉल नोट नाम से एक फोल्डर बनाता हूं औ�
2:58
अंदर मेरे notes से related जो भी context है वो आने वाला है ठीक है तो ये जो notes folder ह�
3:02
इसके अंदर मैं एक file बनाओंगा अब देखते जाओ मैं क्या क्या बना रहा हूँ सबसे पहली जो file मैं बना रहा हू�
3:07
वो है note state.js ठीक है ये मेरी note state.js है ठीक है बट मुझ�
3:13
यहां पर क्या चाहिए मुझे यहां पर एक context बनाना है तो मैं note state.js के साथ साथ एक file बनाऊंगा जिसका नाम होगा note context.js ठीक है जो पहली file मुझे बनानी है वो है note context.js फिर note state.js जिसके अंदर मेरी note की states आने वाली है ठीक है इसी के साथ साथ यहां पर मैं क्या करूँगा इन �
3:43
करना है क्रिएट कॉन्टेक्स्ट ठीक है फ्रॉम रियाट ठीक है क्रिएट कॉन्टेक्स्ट मैंने इंपोर्ट कर लिय�
3:49
अब मैं यहां पर लिखूंगा कि कॉन्ट और मैं लिखूंगा नोट कॉन्टेक्स्ट इस एकॉल टू क्रिएट कॉन्टेक्स्ट क�
3:56
उसके बाद मैं कुछ ऐसे सिंटेक्स लिख दूंगा यह क्या है यह सिंटेक्स से कॉन्टेक्स को क्रिएट करने का मैंने ए�
4:03
नए कॉन्टेक्स को जन्म दिया कॉन्टेक्स क्या है कॉन्टेक्स कुछ नहीं है कॉन्टेक्स बिसिकली यह सारी की सारी स्टे�
4:08
करेगा हमारी notes related notes related जो भी state है वो मैं यहाँ पर डालूँगा ताकि मेरे components जो हैं चाहे वो कितने ही drill down क्यों ना हो नीचे hierarchy में मैं उनको ये सारी की सारी state access करवा पाऊँगा ठीक है और मैं यहाँ पर लिख दूँगा export default note context ठीक है क्या लिखा मैंने export default note context बस हो गया अब मुझ�
4:38
state state note state file import react react import context
4:52
मैं लिखूँगा import note context from dot slash note context यह दो चीजें मैंने import करी, अब यहाँ पर मैं क्या करूँगा, कि एक, यहाँ पर आप लोगों को दिखाता हूँ, arrow function बनाऊँगा, ठीक है, तो मैं यहाँ पर simply लिखूँगा, note state is equal to, एक arrow function बनाऊँगा, कुछ इस तरह से, ठीक है, और यह देखो, हो सकता है कि आप लोगो�
5:27
आपको बता रहा हूं कि एक बार आप समझ गए ना यह कैसे करना है बस फिर हो गया काम आपका ठीक है उसके बाद आपक�
5:33
कभी दिक्कत नहीं होगी और मैं इसको एक्सपोर्ट डिफॉल्ट यहां पर लिखूंगा क्या नोट स्टेट ठीक है नोट स्टान�
5:42
state note state यह वाला ठीक है इसको export default कर दिया अब यहाँ पर देखना syntax अ�
5:49
syntax देखना यहाँ पर क्या है ठीक है अब इसके अंदर मैं return क्या करूँगा मैं इसके अंदर return
5:54
करूँगा देखते जाना मेरी मेरी बात को ध्यान से सुनो यार क्योंकि यह बहुत important है ठीक ह�
6:00
मैं आपको लिखूंगा notes state.provider ठीक है अब आपको यार यह क्या लिख दिया यह क्या लिख दिया और इसके अंदर मैं क्या करूँगा लिखूंगा props.children और मैं फिर समझाऊंगा आपको कि मैंने क्या लिखा है ठीक ह�
6:11
सबसे पहले boilerplate लिख देता हूँ, जो चीज आपको हमेशा लिखनी है, जब जब आप use कर रहे हो context API को, ठीक है, props.children, and obviously यह javascript है, तो इसको मुझे कुछ इस तरह करना पड़ेगा, अब होगा क्या देखो, मैं आपर सबसे पहले एक चीज और आपको बता दू, उसके बाद य�
6:41
यह बस मैंने अपने note context के लिए, ठीक है, मैं यहाँ पर क्या कह रहा हूँ, मैं कह रहा हूँ कि यह जो context है, यह जो note state है, यह note की सारी state को provide करेगी, और मैं यहाँ पर लिखूँगा value is equal to, और मेरी बात को ध्यान से सुनना, मैं फिर से कह रहा हूँ, और मैं यहाँ पर लिख द�
7:11
ठीक है बस इतना ही लिखता हूँ ठीक है और यहाँ पर मैंने value is equal to state जो ह�
7:15
यह दे दी तो यह basically value हमारी note state provide कर रही है ठीक ह�
7:19
अब syntax को देखना पहले सिर्फ और उसके बाद समझने की कोशिश करेंग�
7:23
क्या चीज क्यों और कैसे हो रही है अब ये हमारा एक context बनके तैयार हो चुका ह�
7:27
सबसे पहले मैंने यहाँ पर context API को इस्तेमाल करा जिसमें मैंने create context
7:31
को use किया सबसे पहले import किया react से और मैंने कहा कि यार मुझे एक context बना कर दे द�
7:35
मैं context API को इस्तेमाल करना चाता हूँ इस फाइल में मैं इसे ज़्यादा कुछ नहीं बोल रहा हूँ, मैं React Devta से कह रहा हूँ, React Devta मैं Context API का इस्तेमाल करना चाहता हूँ, React Devta कह रहा है, हाँ ठीक है बेटा, लो, इस्तेमाल करो, मॉज करो, ठीक है, इस फाइल में मैं सिर्फ इतना कह रहा हूँ, फिर मैं इस फा�
8:07
यूज करना चाहता हूं ठीक है अच्छे एक मैंने गलती करी है यहां पर मैं यहां पर इसको नोट कॉन्टेक्स लिखूंग�
8:12
बेसिकली ठीक है तो यहां पर मैं क्या करूंगा कि मैं कुछ इस तरह से करूंगा नोट कॉन्टेक्स यह नोट स्टेट नही�
8:22
context होगा, तो यह चीज आपको यहाँ पर जो है ध्यान में रखनी है, और react को अगर आप import नहीं भी करें, तो भी चलेगा, ठीक है, तो react को ना भी करें, import तो भी चलेगा, ठीक है, save करते हैं, तो यह मैंने क्यों किया, यह आपको समझ में आगे, मैंने react devta से कहा कि react devta मैं use करना �
8:52
बनाकर दिया है टीएक्ट देता ऐसा बोल रहा है कि यह हमने तुमको देखो यह कॉंटेक्स बनाकर दिया है भी त�
8:57
मिस्कांटेक्स डॉट प्रोवाइडर करके कुछ इस तरह का सिंटेक्स लेकर इससे क्या होगा कि तुम जब भी इस कॉंटेक्स क�
9:02
automatically children app note state note state application about value access About component component About
9:58
कर दो इस कोंटेक्स्ट को इस्तेमाल कर सकता हूं ठीक है तो मैं क्या करूंगा यहां पर मैं आप लिखूंगा कॉन्स्�
10:03
एडिज इक्वल टू और लिखूंगा यूज कोंटेक्स्ट यूज कोंटेक्स्ट और मैं किस कोंटेक्स्ट को इस्तेमाल करूंगा मै�
10:12
यहां पर इस कॉन्टेक्स का मैं सबसे पहले इंपोर्ट करूंगा इस कॉन्टेक्स को मैं यहां पर क्या करूंगा कि इंपोर्�
10:18
करूंगा नोट कॉन्टेक्स्ट ठीक है और मैं यहां पर लिख दूंगा नोट कॉन्टेक्स्ट ठीक है मैंने एज इकल टो यह कर दिय�
10:27
और मैंने लिखा this is about और मैं यहाँ पर लिख दूँगा a.name ठीक ह�
10:32
अब मैं यहाँ पर जल्दी से npm run बोत कर लेता तो अगर मेरा client और server दोनों start हो जा�
10:36
वैसे तो मुझे सिर्फ client को start करने की जरूरत थी सब्सक्राइब करने की जरूरत भी थी बट अगर मैंने लिख दिया पर ठीक है तो लोकल हो सीधा जब मेरा जो सर्वर है व�
10:45
चल जाएगा तो यहां पर मुझे एरड देखने को मिल रहे हैं और उसका रिजन है कि मैंने आप प्रोवाइडर पी को कैपिट�
10:51
वार्डिंग पर फिक्स करूंगा वार्डिंग पर क्या कहती है वार्डिंग पर बेसिकल यह कहती है कि आप तुमने ने बार के अंदर यह ज�
11:03
इन यहां पर आप लोग देखने में आप लोग देखोगे कि मैंने यहां पर नेम है लिखा हुआ है और मैं यहां पर लिख द�
11:29
and he is in class, and मैं यहाँ पर लिख दूँगा, a.class, ठीक है
11:36
तो यहाँ पर देखो, and he is in class 5b, अब मान लो कि मैं क्या करता हूँ
11:41
कि यह जो मेरी note state है, इसके अंदर मैं एक method बनाता हूँ, जो कि इस state को update करेगी
11:46
ठीक है, तो मैं obviously use state का इस्तेमाल करूँगा और मैं यहाँ पर क्या करूँग�
11:50
लिखूँगा use state ठीक है और मैं यहाँ पर लिखूँगा state set state is equal to use state
11:57
और यह जो मेरी state है ठीक है और मैं state का नाम s1 कर देता हू�
12:01
क्योंकि मैंने already state use कर लिया है variable का नाम अब मैं यहाँ पर क्या करूँगा कि मैं अपडेट नाम से एक फंक्शन मना दूंगा ठीक है और वह फंक्शन क्या करेगा वह फंक्शन से एक सेकंड के बाद ठीक है एक सेकंड के बाद स्टेट को चेंज कर देगा और क्या कर देगा स्टेट को स्टेट को चेंज करके नेम क�
12:35
इक्वल टू यह और यह यूज स्टेट इस नॉट डिफाइन ठीक है तो एमपोर्ट यूज स्टेट फ्रॉम रियाट ठीक है अब यहां अपन�
12:43
अपने वाल्यू बट नेवर यूज़ एक मिनट अब मैं क्या करूंगा वैल्यू इग्ल टू मैंने स्टेट और अपडेट यह दोनो�
12:49
चीजें जो है मैं एक्सपोर्ट कर रहा हूं क्या कर दिया मैंने अरे अपडेट यार अपडेट हां ठीक है तो यहां प�
12:57
बिसीकली मैं क्या कर रहा हूं कि स्टेट और अपडेट को में भेज दिया विकल्प अनेक्सपेक्टिड यूज ऑफ कॉमा ओके तो मैं क्या करूंगा कुछ इस तरह करोगा ठीक है तो बिसीकली मैंने एक ऑब्जेक्ट बनाया इसके अंदर स्टेट की वैल्यू स्टेट है अ�
13:27
क्या मैंने राम रखा था इसका function का update ठीक है मैं यहाँ पर a.update को run कर दूँग�
13:33
और मैं इसको सिर्फ एक बार run करना चाहता हूँ तो मैं एक empty array दे दूँगा ठीक ह�
13:38
तो मैं अगर इसको save करूँ और आप लोगों को दिखाऊँ यह कह रहा है use effect is not defined
13:42
use effect from react save किया, तो यहाँ पर देखो, he is in class empty लिखकर आ गया यहाँ पर
13:50
तो यह चीज एक मिर दिक्कत कर रही है, तो मैं देखता हूँ यहाँ पर क्या दिक्कत है, a.class, मैंने a.update को तो run कर दिया
13:57
हाँ ठीक है, तो मुझे क्या करना पड़ेगा, update how cool is that
14:25
यहाँ तेज लगा, तो मैं आपको एक चीज और बता दूं यहाँ पर, देखो यार
14:30
मैंने क्या किया है यहाँ पर विसिकली एक function बनाया ठीक है और इस function को मैं हटा दूँगा अगले वीडियो में हटा दूँग�
14:35
बट इस वीडियो के लिए रखूँगा बस यह function मैंने यहाँ पर बनाय�
14:39
और ये जो मैंने syntax इस्तेमाल करा, अगर ये किसी को समझ में नहीं आया, तो इसका मतलब यही होता है, मैं ये करता है, इससे अच्छा मैंने सिर्फ state, update लिख दिया, जावास्क्रिप्ट का modern syntax ये कहता है, कि आपको इस तरह से object पास करने ही जरूरत नहीं है, आप state, state, update, update लि�
15:09
state को update करने के लिए मैंने state को update कर दिया right after one second तो जैसे अपडे�
15:14
function नन होगा एक सेकंड के बाद आपकी state change हो जाएगी तो मेरा जो चीज दिखाने का मतलब था आ�
15:21
लोगों को यह था कि यहां पर हम इसके state को use कर सकते हैं state के तौर पर और update वाल�
15:27
प्रेमिशन को यूज कर सकते हैं आप इसका मतलब सारे फंक्शन जो कि हमारे नोट को अपडेट करें उनको ह�
15:32
एक्सपोर्ट कर सकते हैं और कहीं भी यूज कर सकते हैं यही थी कॉन्टेक्स टेपीआई बस मैंने कॉन्टेक्�
15:37
और यूज स्टेट को मिक्स कर दिया कॉन्टेक्स्ट एपिआई का जो कॉन्टेक्स्ट साथ के अंदर मैंने यूज स्टेट क�
15:42
मिला दिया अब एक चीज और दिखाते हुए आप लोगों का वार्निंग समको मिल रही है यहां पर तो एक तो यह मिल रह�
15:47
वार्निंग हमको कि यह यूज एफेक्ट एज़ अमिशिंग डिपेंडेंसी यह यह चीज आईड करेंगे क्योंकि हम नहीं चाहत�
15:56
यह बार-बार अपडेट हो ठीक है तो मैं यहां पर इसको डाल दूंगा अगर तो यह चली गई ठीक है तो बिसीगली मै�
16:02
तो आज कंपोनेंट डिट मांट की तरह यूज करना चाहता हूं इसलिए मैंने ऐसा किया है और यह मेरा जो है नॉर्म�
16:07
अब आउट फंक्शन का रेंडर मेथड है इन फैक्ट रेटर्न है क्योंकि हम फंक्शन बेस्ट कंपोनेंट बेवी अब यहा�
16:14
देखो दिस अबाउट यह एंड ही इन क्लास यह तो पहले मैंने एड ने इसलिए यूज किया था क्योंकि मैं डारेटल�
16:20
पूरी स्टेट को एक्सपोर्ट करा था मेरा जो ऑब्जेक्ट एक्सपोर्ट हो रहा है वह क्या है उसके अंदर एक स्टेट है उसक�
16:25
इन दर यह वैलिव टीविट इसलिए मुझे डॉट स्टेट लगाना पड़ा तो यह बात है और समझ में आ गई सबको ठीक है त�
16:31
यह करके देखो आप लोग पर कॉंटेक्स्ट एपिएई सिर्फ इतना है कि यार मुझे यह दो फाइल बनाने की जरूरत नही�
16:36
एक में भी काम हो जाता अगर मैं इस फाइल को कुछ ऐसा कर दू 아니� और उसके बाद यहां पर इंपोर्ट कर द�
16:42
तो बात बस ही होगी कि मुझे दो चीजें यहां पर एक्सपोर्ट करनी पड़ेंगे एक तो कॉन्टेक्स्ट और उसी के सा�
16:47
यह जो state है, note state वो, अब यहाँ पर मैंने इसको अलग-अलग file में करके क्या फाइदा उठाया है कि इस file से मैंने note context को export कर दिया, इस file से मैंने इस state को export कर दिया, तो जब भी मुझे context यूज़ करने की ज़रूरत पड़ेगी तो मैं इस file को import करूँगा, और बागी काम तो automatically हो �
17:17
आप बस इतना समझ लो कि ये दो फाइले बनाकर आप जहां मन चाहे इन states को use और update कर सकते हो जो जो functions आप यहां से export कर रहे हो इस्तेमाल कर सकते हो इस context को import करके और आने वाले कुछ वीडियो में मैं यही करने वाला हूँ तो अगर इस वीडियो में किसी को ये context API का syntax कमेंच मे�
17:47
provided कि आप मेरे साथ code करें देखें ना इसको ये कोई आपक�
17:52
कसौटी जिन्दगी की या बाली का वदू का episode नहीं है कि आप फोन लेके बैड़ ग�
17:56
ऐसे छट पर चाय का कप लेके नहीं आप oldest पर आपको देखने से काम नहीं बनेग�
18:13
आपको code करना है मेरे साथ साथ तब ही आपकी जो concept ह�
18:18
वो strong होंगे और अगर आपको समझ में नहीं आ रहा है सिर्फ देख कर उसका सबसे बड़ा reason यह है कि आ�
18:23
साथ में code नहीं कर रहे हो तो आने वाले वीडियोस में हम लोग क्या करेंगे क�
18:27
जो notes हैं उनको हम use करेंगे अपने अलग-अलग components से और हम लोग देखेंगे कि ये context API किस तरह काम करती ह�
18:36
अगर आप लोगों ने react playlist को access नहीं किया तो अभी जल्दी से जल्दी इस playlist को यहाँ प�
18:40
click करके save कर लें और click करके इस playlist को bookmark कर लें अभी के लिए इस वीडियो में इतना ह�
18:44
guys thank you so much guys for watching this video and i will see you next time
#Computers & Electronics