Up next in 10
Introduction to React Context API _ Complete React Course in Hindi #57
4 views
Feb 11, 2024
In the 57th episode of the "Complete React Course in Hindi," the tutorial introduces viewers to the React Context API, a powerful tool for managing state across components without prop drilling. This video provides a foundational guide on understanding the Context API and its role in state management within a React application. The instructor walks viewers through the fundamentals of creating and consuming context, showcasing how it simplifies the sharing of data between components. Whether you're a React developer looking to optimize state management or a learner interested in exploring advanced React concepts, this tutorial offers valuable insights into the basics of the React Context API.
View Video Transcript
0:00
तो गाइस आज हम लोग बात करने वाले हैं context API की और मेरे इसाब से context API एक बहुत ज़्यादा important concept ह�
0:05
और ऐसा मैं क्यों बोल रहा हूँ कि context API एक बहुत ज़्यादा important concept है ऐसा मैं इसलिए बोल रहा हूँ कि context API को complex application में आप बहुत ज़्यादा इस्तेमाल करोग�
0:13
context API एक बार आप लोग समझ गए तो उसी के साथ सथ आपको ले रिडब्स को समझना बहुत आसान हो जाएग�
0:18
अब ये context API, रिडब्स ये सारे शब्द तो मैंने बोल दी अब आप लोग को यार ये क्या बोले जा रहे हो कोई समझ में नहीं आ रहा ह�
0:24
तो यार जल्दी से आप लोगों को समझाता हूँ, आप लोगों के understanding को बढ़ाता हूँ, तो यार एक typical react app जो है, उसके अंदर क्या होती है, मैं बहुती important चीज जो होती है, सबसे मैं कहूँगा प्रमुक चीज होती है, होती है state, ठीक है, तो अगर ये मेरी एक react app है, तो मेरी react app
0:54
ठीक है अब यह काम एक बार कर लिया हमने state और components बना लिय�
0:57
तब एक problem आ जाती है जैसे ऐसे app की complexity बढ़ते जाती ह�
1:01
और चीज़ को मैं आप लोगों समझाता हूँ यहाँ पर कि वो problem क्या है किस problem के बारे में यहाँ पर बात की जा रही ह�
1:06
मानलो मेरे पास यह app.js है कि मेरी यहाँ पर एक बहुत बड़ी e-commerce shop है ठीक है और मैं उस shop के बिहाव पर blogs भी लिखता हूँ और उसी के साथ साथ मैं उस shop के बिहाव पर offers भी देता हूँ ठीक है तो मान लो मैंने start तो करा as an e-commerce shop तो मेरा सिर्फ एक shop component था और shop के अंदर मेरे पास और भी बहुत सारे components ह�
1:54
मैं सारे के सारे यहां पर इस कंपोनेंट में रखता हूँ, and let us assume कि मैं एक blog भी लिखता हूँ
1:59
एक blog के साथ भी deal करता हूँ, मैं तो मैं एक blogger भी हूँ, और let us say कि मैं offers भी provide करता हूँ
2:05
उसके लिए मैंने एक दूसरा component बनाया हुआ है, कि कौन सा offer किस date तक valid होगा, कौन सा offer किस user को दिया जाएगा
2:12
and so on, offers के अंदर भी हमारे पास O1, O2 components हैं, मान लो, जो कि अलग-अलग तरह के offers में deal करते हैं, ठीक है
2:19
यहाँ पर मैं O1, O2 लिख देता हूँ, ऐसे करके, ठीक है, तो यह हमने यहाँ पर देख लिया है हमारी typical react application कुछ इस तरह से दिखाई पड़ती ह�
2:26
अब मानलो कोई कैसी चीज़ है जिसे मानलो user logged in है की नही�
2:30
logged in state logged in state color change logged in state login is equal to true state state O2
3:02
यह हमारी react application है, but यहाँ पर, क्या user ने O2 से login किया कि नहीं किया
3:08
यह track करबाना मेरे लिए बहुत ज़्यादा मुश्किल होगा, और इस मुश्किल को आसन मनाने के लिए ही
3:13
हम context API का इस्तेमाल करते हैं, एक और problem की बात करता हूँ, मान लोग यह login is equal to true
3:18
जब हम लोग इस तरह से deal करते हैं तब होता क्या है कि हम state को lift कर देते हैं यहाँ पर हम state lifting कर देते हैं ठीक है state को lift कर देते हैं ठीक है और हम कहते हैं कि सारी की सारी जो state application की वो app.js में मना लो यहाँ पर सारी की सारी state बना लो एक javascript object के तौर पर लेकिन इस approach के साथ भी एक ब�
3:48
इस component को देना पड़ेगा, फिर इस component से इस component में आएगा
3:51
तो मुझे prop drilling करनी पड़ेगी, यानि कि मुझे as prop, मुझे कुछ ऐसे बेजना पड़ेगा
3:56
अगर मैं offers यूज़ कर रहा हूँ, तो मुझे ऐसे लिखना पड़ेगा, offers login is equal to login
4:02
ठीक है, और फिर ये login कहा पर आएगा मैं कुछ इस तरह से अगर offers component को use कर रहा हू�
4:07
फिर ये login कहा पर आएगा फिर ये login जो है वो यहाँ पर आजाएगा मेरे पा�
4:11
ठीक है और यहाँ से फिर मैं क्या करूँगा O2, O2 के अंदर दुबारा भेजूँग�
4:15
फिर मैं कहूँगा O2, फिर इस login को दोबारा मैं offers से वेजूँगा, offers में तो इस login का कोई काम ही नहीं था, offers के अंदर क्या काम था इस login का, कोई काम नहीं था, लेकिन मुझे offers में जबरदस्ती भेजना पड़ गया, अब एक complex application की बात करेंगे, ठीक है, जिससे यह आपको एक�
4:45
टॉट जेस ठीक है जल्दी जल्दी बना लेता हूं और मैं बहुत ही C1 C2 करके लिख रहा हूं इस बार components को C3 मान लो यहांส�
4:54
C4 मान लो यहां से C5 ठीक है और उसी के साथ साथ यहां से C6 मान लो यहां से C7 मान लो C7 पर मुझे चेक करना ह�
5:03
यहां पर C7 पर color नाम का एक variable state color is equal to red C8 color app state color color C3
5:39
अगर मैं आपको दिखाऊं तो सबसे पहले C6 को मिलेगा color, फिर C8 को मिलेगा color
5:43
तो बहुत ज़ादा pain है यार, इतना सारा pain कौन लेगा, तो हम क्या करते हैं
5:47
हम कहते हैं कि यार, अगर हमारी जो application वो थोड़ी सी भी complex हो गई है
5:51
तो यहाँ पर तो state बनाओ ही मत, यहाँ पर मत बनाओ state और यह काम भी मत करो, यह drilling भी मत करो, ठीक ह�
5:56
राधर आप क्या करो, कि आप यहाँ पर कुछ ऐसा करो कि एक context बना ल�
6:02
अब इसके बारे में मैं बताता हूँ कि क्या मतलब हो इस बात का तो basically यहाँ पर यह कहा जा रहा है कि यह सारे काम आप ना करे�
6:07
यह करने के आपको कोई जरूरत नहीं है आप यह जो color वलर आप भेज रहे थे यह सब आप ना करें ना यह आप यहाँ पर यह state बनाए�
6:13
आप rather क्या करें आप एक context बना लें तो मैं काम करता हूँ यहाँ पर, red color से आप लोगों को बताता हूँ context
6:19
ठीक है, तो मैं क्या करूँगा, कि, बिल्कुल इस app से independent एक context बनाऊँगा
6:24
ठीक है, मैं कहूँगा कि यहाँ एक context में बना रहा हूँ यहाँ पर, ठीक है, और इस context को नाम दे दो
6:29
let us say context color context color नाम का मैं इसको एक नाम दे दूँगा इस context के अंद�
6:35
मैं क्या करूँगा create context करूँगा यानि कि context को बनाऊंगा तो मैं context API में से create
6:41
context को इस्तेमाल करूँगा और create context करने के बाद मैं अपन�
6:45
context को बना पाऊँगा अब मैं कहूँगा एक बार मेरा context बन चुका है, तो चाहे फिर उसको C1 use करे
6:51
चाहे C2 use करे, चाहे C3 use करे, use करने का प्रतलब, चाहे तो उसको इस्तेमाल कर लें
6:55
update कर दे, चाहे C8 करे, चाहे C7 करे, मुझे कोई मतलब नहीं है
7:00
बस C7 को क्या करना है, context API को call करना है, कौन से hook के through, use context hook के through
7:06
तो use context एक hook है और बता दो भाई कौन सा use करना है context
7:09
मालो context color यूज़ करना है context color वाली file जहां भी बनी हुई है वो आप यूज़ कर सकते ह�
7:14
और यहाँ पर फिर यूज़ करना शुरू कर दो कोई props आपको यहाँ से भेजने की ज़रूरत नहीं ह�
7:33
या चीज कौन सा color कहां पर है, मालो मैं authentication के लिए एक auth context पना लूँ
7:37
ठीक है, और auth context से यह पता चलेगा, कौन सा user logged in है की नहीं
7:41
तो मुझे वो information यहां से नहीं भेजनी पड़ेगी, यहां से मुझे हर component को भेजने की जरूरत नहीं है
7:45
user login components components information pain context use component application C4 auth context data
8:00
पास कर सकता है, update कर सकता है to and fro communication हो सकता ह�
8:05
किसी भी component से, किसी भी context की तरफ ठीक है और क्या है context API में, क्या सिर्फ इतना ही ह�
8:10
तो यार हाँ इतना ही है, अब इससे ज़ादा मैं क्या करूँ इतना ही simple है, so this is
8:15
simple, ठीक है, बहुत simple है बहुत ही ज़ादा simple है या�
8:19
मेरी बात को सुन लिया अगर आपने तो तो और भी simple है ठीक है जो कि मैंने जैसे जाब से आप लोगों को बताय�
8:23
मुझे नहीं लगता कि आपको नहीं आए समझने ना समझने का कोई सवाली नहीं है अपर ठीक ह�
8:27
तो अब हमें करना क्या है अब हम context बनाएंगे और उसको इस्तेमाल करके देखेंग�
8:33
एक बात और मैं आपको बताओ क्या context API को use किये भी ना react application नहीं बनेग�
8:38
हाँ यार बनेगी लेकिन मैंने आपलोगों को बताया ना कि जब components आपकी application में बहुत सारे बढ़ जाएंग�
8:43
तो आप एक component से दूसरे component में दूसरे से तीसरे में और तीसरे से चौथे में चौथे से पांच वे में पांच वे से साथ वे में डेटा को भेजते रहोगे तो चांस गलती का या कुछ मैसब करने का बहुत जादा बढ़ जाएगा उसी के साथ साथ अगर आपको किसी को ट्रैक करना है किसी भी एक पर्टि�
9:15
� prosecute पर आपको सी फोर में जाना पड़ेगा फिर आपको सी थ्री में जाना पड़ेगा देखने के लिए फिर आप जैसे में आप जाओगे त�
9:21
इस तरह से हम लोग इस चीज को इस्तेमाल करेंगे यह हम लोग देखेंगे इन कोड तो अगले वीडियो में हम लो�
9:51
context को बनाएंगे और समझेंगे इस चीज को कि किस तरह से context
9:55
बनाना आपकी सिंदगी को आसान बनाने वाला है लेकिन तब तक के लिए अगर आप लोगों ने इस playlist क�
9:59
अभी तक access नहीं किया तो जरूर करें यहां क्लिक करके save करें इस playlist को और यहां क्लिक करक�
10:03
bookmark करें, अभी के लिए इस वीडियो में इतना है guys thank you so much guys for watching this video
10:07
and I will see you next time