हाँ जी कैसे हैं आप सभी उमीद करता हूँ अच्छे ही होंगे और अगर अच्छे हैं तो चलिए आप से एक देखिए इस चैनल पर मैं थोड़ा सा ना अनफॉर्मली पढ़ाता हूँ मज़ा आता है मुझे भी इसलिए इसलिए तो इतने सारे वीडियोज आ जाते हैं इस वीडियो को स्टार्ट करने से पहले सबसे पहली बात तो इस वीडियो का जो टार्गेट है ना वो है हजार कमेंट्स हाँ इससे नीचे तो चलेगा ही नहीं इस वीडियो उनको पता है ये topic कितना difficult होता है और कुछ किस से भी बताता हूँ इसके ये जो topic हम यहाँ पे लेंगे वो लेंगे context का अब देखिए अक्सर लोग context को ना directly context API को या react के documentation से वहाँ से पढ़ने लग जाते हैं जबकि वो starting point होता ही नहीं है इस topic का starting point आता है props से अगर props समझ में आता है तो props की problem को समझोगे फिर उसके बाद आपका context API आता है इसी का ही further जो version आपका redux, redux toolkit, just and वगरा यहाँ से आता है तो interesting बात क्या है नाम तो मैं नहीं लूँगा किसी का, देखिए professional courtesy होती है, नाम तो नहीं लेना चाहिए किसी का भी, पर क्या है कि ये topic मैंने सिर्फ YouTube वगरा पे अपने courses में या अपनी company के लिए नहीं, कई औरों के लिए भी पढ़ाया है, हाँ, जब मैं किसी company से associated नहीं था, तब एक बार न तो student काफी surprise हो गए थे, कि थे sir आप यहाँ पर कैसे, मैंने कहा हम जैसे भी हैं यहाँ पर, आप पढ़ाने तो आए हैं तो पढ़ लीजे, और एक बार तो एक institute ऐसा, जो कि लाखों में चार्ज करता है, वहाँ से request गई एक international company को, कि हमें यह topic अपने internal company के लिए करवाना है, as a तो जहां भी जाओगे, पाओगे तो हमें ही, तो बड़ा interesting topic है, interesting subject है, और मुझे अच्छा भी लगता है help करना, कि ताकि और teachers भी सीख पाएं, student भी सीख पाएं, और सिखा पाएं, तो context API के अंदर बहुत मज़ा आता है, तो इस वीडियो के अंदर हम ना दो projects बनाएंगे, क् कि कॉन्टेक्स टेपिए के लिए अगर आपने पहले से कोई वीडियो वगैरह देख रखे हैं थोड़ा बहुत कुछ रखा है हटा दो सब दिमाग से एकदम एमटी कैनवस चाहिए तब जाकर हमारा काम कर पाएंगे थोड़ा से हमारे स्पेक्स लगा लें वरना आखें वापिस से हमारी एकदम लाल हो जाएगी ठीक है जी बड़ा फॉर्मली पढ़ाता है इसलिए अपने साथ में बैठ के किसी को पढ़ा रहा हूं हिंदी चैनल पर ऐसी फील आती है तो चलिए हजार कमेंट्स चैले क्यों वो ज़रूरी है वो सब तो चले screen share करता हूँ आपके साथ तो ये आगे हम basic बनाने क्या जा रहे हैं ये बनाने जा रहे हैं बड़ा ही basic सा है theme toggler है आपको लगेगा अरे sir ये तो बहुत ही basic था लेकिन बड़ा interesting project है ये कुछ नहीं light mode dark mode है अब आप कहेंगे sir ये तो 5 minute में बन जाएगा लेकिन लेकिन context API जैसे आप introduce करते हो ना कुछ भी 5 minute में नहीं होता और ये project ले रहा हूँ इसलिए मैं इसको समझा पाऊँगा अगर मैं यहाँ पे कोई e-commerce या कोई भी complex project ले लेता एक बिदिन context API नहीं समझ में आएगा हाँ इस बात की guarantee है ये अपने आप में एक बड़ा interesting और challenging option है तो चलिए सबसे पहले start करते हैं कि suppose करिए मैंने बनाया है यहाँ पे card ठीक है अब मैंने ये मेरी app है अब इस app के थूँ मेरे को इस card के अंदर कोई data pass करना है ठीक है तो ये तो हो गया हमारा ये लीजे app self closing ठीक है थोड़ा सा दिखने में हाँ आप देख रहा है ये हो गया हमारा app ठीक है तो यह तो आगे हमारे पास एप का ओके कोई प्रॉब्लम नहीं है यह आया हमारे पास में कार्ड तो ठीक है आपने कार्ड कंपोनेंट बनाया तो यह लीजिए हमने कार्ड कंपोनेंट बना दिया कैपिटल सी से बनाएंगे वरना एरर आ जाएगी ठीक है अब इसके अब देखे इससे हुआ क्या कि यहाँ पे कार्ड के अंदर जो भी values यह accept कर रहा था तो props की जैसे accept कर रहा था कोई दिक्कत थी नहीं और उसने यहाँ पे print कर दिया है तेश ठीक है तो अभी तक तो इतना काम हो रहा था अभी कार्ड actually में जो है यह पूरा का पूरा material जा रहा है तो क्या प्रॉब्लम आती है कि देखिए सबसे पहले आप एक कंपोनेंट बनाया आपने इस तरह का जिसका नाम था आपके पा यह लीजिए dashboard अब dashboard कैसा दिखता है dashboard कैसा दिखता है dashboard कुछ ऐसा दिखता है ठीक है इस dashboard के अंदर दो parts हैं एक part है हमारा left side navigation bar और एक side है top ये right side bar left side bar और right side bar इस right side bar के अंदर भी दो portion हो रखे हैं एक portion ये हो रखा है और एक portion ये हो रखा है ये सब component है अपने आप में ठीक है वो ही same card use कर रहे हैं तो ये आपके पास card है जहाँ पे आपको username display करना है अब कैसे display करोगे और जो username है वो आपके पास चाय के अंदर रखा हुआ है ठीक है ये चाय का component है अब जरूरी नहीं कि यही रखा हुँ हो सकता है कोई state के अंदर हो ठीक है तो इस card के अंदर data पास कैसे करोगे देखे सबसे पहले तो dashboard के पास जाओगे उस dashboard को बोलोगे कि एक काम करो ये लो title और ये लो हमारा title जो है चाय है ठीक है कि अब डैशबोर्ड के अंदर हमने एक लेफ्ट साइड बना रखी है कंपोनेंट एक राइट साइड बना रखी है चलिए इसको भी बनाते हैं तो यह हो गया हमारा लेफ्ट साइड ओके और इसी तरह से हो गया हमारे पास में राइट साइड यह हैं अब तो यह हमने लिया टॉप कॉम्प फॉर टॉप कंपोनेंट और उसके अंदर फिर हमारा कार्ड है तो यह लीजिए वही सेम कार्ड मान लीजिए वही का वही एक्सेक्ट सेम कार्ड हम यूज कर रहे हैं पर इस कार्ड के अंदर तो डेटा है नहीं क्योंकि एक्चुली में डेटा तो डैशबोर्ड के पास है तो डैशबोर्ड से कहां जाएगा यह जो डेटा है हमारे पास में टाइटल जो है चाहे तो वाले से पास करोगे टॉप में और टॉप से पास करोगे फाइनली कार्ड में तब आपके पास कार्ड में डेटा आएगा पर हमने यह देखा कि इस right वाले को जरूत तो थी नहीं उस title की, और इस top component को उसको भी जरूत नहीं थी, बट उसको लेना पड़ा क्योंकि आगे पास करना है न, अब उसके अंदर क्योंकि यह component है, इसलिए हमें उसको पास करना पड़ा, अगर individual अलग से भी कहीं होता, तो data कोई पास करने का तरीका ही नहीं है हमारे पास, react का design ही यही है, तो props के अंदर props, कोई और option है ही नहीं, और इसी तरह से हम काम कर रहे थे, जब react starting initial days में आ, बट आविसी बात है ये थोड़ा unoptimized approach day 1 पे किसी को भी पता लगी जाएगा, ऐसी कोई बात है ही नहीं इसके अंदर, सब को पता लग जाएगा कि इसके अंदर usage है ही नहीं, फिर भी आप एक data handle कर रहे हो, इसके अंदर भी usage नहीं है, data handle कर रहे हो, बट सिर्फ इसलिए handle कर इस global object के अंदर क्या आ गया, suppose करी एक title होता यहाँ पे, जिसकी value होती कुछ chai, या string के अंदर value होती, जिसके अंदर भी value लेनी है, ऐसे कोई दिक्कत वाली बात है ही नहीं, तो chai ले ली, तो क्या ऐसा कुछ mechanism हो सकता था, कि ये जो मेरे पास chai है, ये directly यहाँ पे आके, और तो अब क्या है कि हमारे पास यह कार्ड जो है डिरेक्टली इस ग्लोबल कंपोनेंट से या जो भी वेरिबल वाली फाइल है यहां से सब कुछ पूछ लेता और मेरा काम आसान हो जाता तो ना इदर पास करने की जरूरत थे यह चीज़ें तो यहां से भी हट जाती यहां भी assume करता हूँ मैं चली है कि app ने कोई database से request मारी और वहाँ से username लिया तो ठीक है app ने बोला लेकिन app actually मैं अच्छा होता ना कि app भी कुछ ऐसा ही काम करती कि यहां से directly इसके अंदर pass कर देती data है कि नहीं अगर app भी इसी तरह से directly pass कर देती तो मुझे कोई tension वाली बात pass ही मत करो तो आप इसको क्या करो सीधा इसको जाओ और बोलो कि हाँ data pass करोगे लेकिन prop में नहीं आप direct component level से यहां data pass कर दो तो सिर्फ एक global file बना के हमारे पास कितना advantage है कि हमें data इदर सो इदर फालतू फैलाना नहीं है और यह जो पूरा रायता हमारा फैला है यह problem में नहीं आता तो जो concept है इसको बोला जाता है prop drilling बट क्या है कि prop drilling से actually मैं समझ में कुछ नहीं आता कि हो क्या रहा है तो यह जब कभी interviewer को इस तरह से आप explain करोगे तो obvious बात है interview क्या हर चीज आराम से crack करोगे बड़ी post भी crack करोगे SD 23 सब ठीक है अब इतना तो समझ में आ गया कि ठीक है, तो इसके लिए क्या-क्या available है, अब इसके लिए अक्सर लोग कहते हैं कि इसके लिए ही available है आपकी context, context API, सही बात है, लेकिन थोड़ा और additional information तो होना ही चाहिए न, क्योंकि चाय और code पे हो, और इससे ज़दा in-depth कहीं नहीं होता है, उसके अंदर भी यही same problem थी, तो context API तो क्या है, देखिए context API associated है pure और pure react से, यह react के बाहर exist नहीं करता है, लेकिन क्योंकि problem सिर्फ react की नहीं है, तो और भी चीज़े exist करती होगी, जो exact same problem को solve करती है, और उसी का नाम हमार पास Redux है, हाँ जी Redux भी हम देखेंगे इसके अंदर, जैसे Redux तो अकेला एक standalone library है, लेकिन React Redux के लिए क्या होता है, कि React के अंदर काम कराना है, तो हमारे पास है React Redux, तो इसको भी हम use कर लेते हैं, in fact इस Redux का ही एक और easier version आजकल market में है, जिसको बोला जाता है Redux Toolkit, और इसी को short form में आप सुनोगे कई जगे से, RTK, हाँ जी, Redux Toolkit अच्छा और भी है क्या इस तरह के हाँ जी और भी state management इस तरह के काम है जैसे मैंने काफी पहले एक वीडियो बनाया था English Channel पे है The Stand तो The Stand भी एक easy library है state management के लिए और भी है और भी बहुत libraries हैं हम सारे दिन बैठ के उनको count कर सकते हैं बट कोई फाइदा नहीं है जाधा तर आप Redux पे काम करोगे या कोई अगर नया startup है जो नया code base वगरा लिखा जा रहा है उसमें हो सकता है आप The Stand यूज़ कर लो लेकिन एक बार आपको context API समझ में आ गया तो almost easily आपको Redux और Redux Toolkit पे समझ में आ जाएगा और ये समझ में आ गए तो The Stand भी समझ में आ जाएगा, इनके लिए हर बार tutorial देखने की जरूरत नहीं पड़ेगी, ठीक है, अब वैसे तो मैं सोच रहा था, इसका एक अलग से वीडियो कर लें, कि इतना की what is state management वगरा, तो हम सोच रहे हैं कि यहाँ पे करी लें इस वीडियो है अब आते हैं हम यहां पर इसको तो हम करते हैं अब लीन और यहां से इसको हटाते हैं वापस से लाते हैं अब एक सबसे पहले नया प्रोजेक्ट बनाएंगे हम उस नए प्रोजेक्ट के अंदर यह सारा का सारा काम करेंगे एक बेसिक बताइए सर्च लिस्ट में नहीं आ रहे, deeply with context, react.dev पर देखना है, react.dev, official documentation ही चाहिए मेरे को तो, ठीक है, यह है आपका context या use context, यही पूरा हम समझेंगे, इसी एक line को समझने के लिए ना इतना time लगता है, इसलिए तो problem है कि इसका documentation ना इतना best नहीं है, इसलिए लोगों को time कि बस एक use context यहां दे दिया है, और यह सारी बस, हाँ, आप देखेंगे तो बस इतना सही है, usage यह रहा, पता लगा लो अगर आपको लग पाए तो, किस तरह से theme, हाँ, यह भी example theme का ही देता है, बट यह वाला example इनका समझ में नहीं आता है, थोड़ा update किया जा सकता था यहाँ पे, तो, npm, create, at the rate, latest, ओके, project का नाम क्या दे, इस project का नाम देंगे mini context, मिनी कॉन्टेक्स्ट इन फैक्ट नंबर के साथ देंगे बिना नंबर के तो कैसे एट प्रोजेक्ट है तो जी रो एट वैसे तो सब्सक्राइब बोलूंगा इसको मैं मिनी कॉन्टेक्स्ट ओके पैकेज नेम भी है हम जाएंगे अपने और रियाट के अंदर और जावास्क्रिप्ट के अंदर और बस इसमें तो हम टेल विंडर कुछ भी इंस्टॉल नहीं करने MPN install चलिए होई है इंस्टॉल होई है फटा-फट उसके बाद हम अच्छा एडिशनल कुछ भी आपको इंस्टॉल करने की जरूरत नहीं है जो कॉन्टेक्स्ट है यह कॉन्टेक्स्ट एपिआई वह रियाट के साथ में आता है यह स्टेट मैनेजमेंट ना इतना वन प्रॉब्लम था कि रियाट ने इवेंचुअली सोचा डेवन पर नहीं था इवेंचुअली सोचा कि ऐसा कुछ हमारे अंद एनपी एन रन डेव और कर लेते हैं डेव को रन और देख लेते हैं ये रहा हमारा प्रोजेक्ट ठीक है कोई दिक्कत नहीं है अच्छा आप इसको देखते कैसे हैं सोचते कैसे हैं वो सबसे इंपोर्टेंट है देखिए कॉंटेक्स्ट का क्या है आप कभी भी किसी भी प्र एक्सपेशियल अगर आप कोई सर्वर से डील कर रहे हो एपिआइस से डील कर रहे हो थोड़ा कॉंप्लेक्स प्रोजेक्ट है रिजिमे में एड लाइक है उसमें कोई ना कोई स्टेट मैनेजमेंट होता ही है ओके तो अभी चलते हैं यहां पर अच्छा आप इसको डील कैसे करना है देखिए सोर्ट के अंदर हमारे पास जो है वह ठीक है कोई दिक्कत नहीं है अब हम सबसे पहले क्या करेंगे इस प्रोजेक्ट को पहले बेर मिनिम और सबसे जरूरी statement लिखेंगे हम यहाँ पर H1 के अंदर react with chai and share is important क्योंकि आप लोग share कम कर रहे हैं इसलिए लिखना जरूरी है ठीक है तो ठीक है message आ गया है बड़ा बड़ा इसी message का chai तो screenshot ले लो पर share करना जरूरी है ठीक है अब देखें कैसे किस तरह से handle करते हैं हमें handle करना है context API को context API मतलब एक global variable बना रहा हूँ उस variable के अंदर सारा data जाएगा, but क्योंकि react है, state हमने देखा, इतनी असानी से update नहीं हो जाता है, अगर होता, तो मैं direct ही एक global.variable नाम से file बना लेता है,.js वहाँ से values ले लेता, but वो अच्छा syntax नहीं है, आप eventually जाके उसी same problem में फ़स जाओगे, कि state mismatch है, synchronization नहीं है, global.js और उसी के अंदर सारे variables रख लो, क्योंकि कोई भी variable इसको update कर देगा, और जहाँ आप नहीं चाहते, वहाँ भी update हो जाएगा, यह एक problem आता है, तो सबसे पहले source में new folder एक बनाईए, और इस folder का नाम हम रखेंगे यहाँ पे context, इसी नाम से ज़ाधा तर यह folder रखा जाता है, बट as such कोई naming restriction नहीं है, क्योंकि framework नहीं है, library है, तो naming convention इतना ज़ाधा strong नहीं होता है, user context.js, x नहीं है यहाँ पे, सिर्फ jsa क्योंकि इसमें pure and pure javascript ही होती है अकसर, अब यह जो context है न, अभी हम दो files के अंदर बनाएंगे, break करके, user context है, उसी तरह से देखिए, login का भी context हो सकता है, products का भी context हो सकता है, cart का भी context हो सकता है, multiple context आप बना सकते हो, ऐसे आगे वाले जितने projects हो ये लीजिए react from और react ये लीजिए, अब क्या करना है, अब बनाना है आपको एक context, context कहां से मिलेगा, इसी react के अंदर ही आपको context मिल जाता है, तो आप जैसे ही देखेंगे.context, यहाँ पर आपको मिल जाएगा, create context, ये लीजिए, ये create हो गया आपका context, अब ये क्या है, एक method है इस variable को आप output में throw कर दो, ठीक है, export, default और user context, तो एक बात बताओ, अभी तक जो हमने काम किया, इसमें कोई दिक्कत है क्या, comments में बताओ मुझे फटा फट, होनी तो नहीं चाहिए, क्योंकि as such कुछ rocket science हमने किया ही नहीं है, एक variable बनाया और उसको throw कर दिया output और हमारा context मिल गय क्योंकि context है क्या, आपको variable provide ही तो कर रहा है, तो हर एक context एक provider होता है, तो user context भी अपने आपने एक provider है, जो सारे हम क्या करेंगे, end of the day, इसको एक wrapper लगाएंगे, जैसे आपने देखा होगा कई जगे हम div को भी as a wrapper use करते हैं, कि यह हमारा div हो गया है, इस तरह से लिखते हैं न, एक आपका कोई card component हो गया, या उनके अंदर भी कोई component हो सकते थे, card के अंदर हो सकता है आपके पास यहाँ पर, जैसे हमारे पास suppose करी dashboard था, तो हो सकता है dashboard आपके पास आ जाए, या data नाम से कुछ आ जाए, जो भी आपको रखना है, हम इन सबी को wrap करा देंगे हमारे इस user context से, प्रोवाइडर से मेरा मतलब है, अब कोई भी इसके अंदर जो component है, उन सारे components को इस global user context का access मिल जाएगा, इस context क्या है, context को global variable की तरह ही मानो, इस साथ और कुछ नहीं है, ठीक है, तो एक बार repeat करता हूँ, कुछ भी नहीं है, बहुत basic सा है, context एक बार आपका बन गया, तो इस वो components directly user context के थुरू सारी states का access ले सकते हैं, बस यही कानी है, तो अभी तक तो हमने देखा इतना कुछ जादा complex था नहीं, हमने एक user context बना लिया, अब इसके पास, इसके बाद हमें क्या करना पड़ेगा, एक provider भी बनाना पड़ता है, इसको बनाने के दो तरीके होते हैं, अभ अभी तक जो था,.js था, क्योंकि वहाँ पे कोई JSX return नहीं कर रहे थे, लेकिन जैसे ही आपने context provider बनाया, अब हमें JSX बनाना पड़ेगा, क्यों? अभी तो जस्ट बताया था, कि जो हम fragments ले रहे थे, top level पर इसको रखना पड़ेगा, तभी तो आपके सारे variables में access हो पाएगा कि इतना तो आ गया अब क्या करो एक यूजर कॉन्टेक्स्ट प्रोवाइडर यह हमने बनाया यूजर कॉन्टेक्स्ट प्रोवाइडर यह क्या है कुछ नहीं है जी एक मेथड है और कुछ भी नहीं है से ज्यादा ठीक है इतना ही बेसिक हमारा एक मेथड एक्सपोर्ट डिफॉल्ट यूजर कांटेक्स प्रोवाइडर ठीक है अभी तक कोई दिक्कत नहीं जी कोई दिक्कत नहीं है अब मैं क कि अगर आपको याद होता है, हमने कुछ outlet वगरा सीखे थे, कि जो भी values हो, header as it is रखो, footer as it is रखो, और outlet जो भी है, वो उस display करा दो, उसी तरह का एक और concept होता है, कि आपके पास जो भी prop आ रहे हैं, children, उसको as it is आप यहाँ पर use कर लो, कैसे use करते हैं, वो भी बताता हूँ एस सच कोई ज़रूरी नहीं है कि इसको नाम हम children ही दे, बट क्योंकि states वगरा सब में already use होता था, तो हमने भी सोचा कि यही use कर लेते हैं, ठीक है, अब हमें करना क्या है, हमें क्या देना है, इस तरह से कुछ value देनी है return, और return के अंदर हम क्या करेंगे, देखें, यह हमने दिया as it is, वो children हम as it is render करवा देंगे, अब इसके अंदर हो सकता है card component आए, हो सकता है card के अंदर dashboard आए, dashboard आए, children लिखने का मतलब यही था, कि जो भी आ रहा है, वो as it is लिख दो, ठीक है, पर हमने यह देखा था, कि उसको wrap करना पड़ेगा, wrapping ही तो providing है, तो यह जो user context है न, यह सिर्फ अकेला यहाँ पर लिखने से, actually में काम नहीं होता है, क्योंकि इसकी एक आपको value access करनी पड़ती है, एक property, context. हाँ, literally provider ही बोलते हैं उसको, यह provider हमने यहाँ पर pass कर दी, क्योंकि ठीक है, provide तो कर दिया, लेकिन, क्या चीज एक्सेस करेगा यह कोई डेटा भी तो देना पड़ेगा ना साथ में हां जी तो डेटा कैसे देंगे हम क्या करते हैं डेटा के लिए सिंपली ओके रिटर्न यहां पर आ गया है ठीक है तो हम यहां पर जाते हैं और एक हम यहां पर स्टेट करना लेते हैं अब मैंने एक नाम दे दिया यूजर और इसके अंदर एक मेथड दे दिया सेट यूजर और इसको हम लेते आप ऐसे भी लिख सकते हैं, कोई प्रॉब्लम नहीं है वहाँ पे, और by default मैं उसके अंदर value क्या, null दे देता हूँ, आप चाहे तो square, bracket वगरा, या जो भी कुछ आपको देना है, वो आप दे सकते हैं, इस तरह से काम हो जाएगा, अब क्या है, देखे, error को देखते हैं, ये क तो उसके लिए हमें provider के अंदर एक property मिलती है, prop, हाँ जी, हाँ पे भी आप prop ही pass कर रहे हैं एक तरह से, वो है value, तो जो भी आपको data pass करना हो, आप इसको pass कर सकते हैं, अब मैं क्या है, सिर्फ value इस तरह से pass नहीं करूँगा, एक object pass कर दूँगा, जिसके अंदर मेरा जो मन चा कि यह हो गया हमारा ऑलमोस्ट आदा काम कि जिस तरह से हमारा यह काम होता है और ठीक है मोस्टली हमारा काम हो गया यहां पर कि ठीक है यही है आपका सेट अप तो देखिए ज्यादा कुछ था नहीं समझने लाइक चीजें थी बट यह तो और सीधा का सीधा यहाँ पे store करके ये लीजे value अच्छा ये तो काम हो गया कि हमारा store बन गया है सब के पास आ गया लेकिन ये store का access कैसे मिलेगा देखे कुछ लोग store का access direct main.jsx में देते हैं कोई आपत्ती वाली बात नहीं है कुछ लोग app.jsx में देते हैं काम क्या होगा कि आपको पहले ये user context provider ना इसको import करना पड़ेगा हम auto import पे थोड़ा से rely करेंगे क्योंकि ठीक है कर सकते हैं है तो अब आप क्या करो सीधा लेकर आओ यूजर कॉन्टेक्स्ट यूजर शॉट में क्या यूजर देखते एक बार एक्सपोर्ट कैसे किया है मैंने नहीं कैपिटल में है तो मिलना चाहिए मुझे एक्सेस यूजर कॉन्टेक्स्ट प्रोवाइडर तो आप कई जगह ऐसा देखेंगे कि user context और यहाँ पर लिख रखा है उन्होंने dot provider, वो भी एकी बात है, वहाँ से file से export होके है, चाहिए यहाँ लिखो, और फिर यहाँ पर देते हैं access value वगरा, जो देना है यहाँ पर देते हैं, देखिए गलत कुछ भी नहीं है, सबके अप कि यह आ गया अब मेरे पास क्या है कि अब के अंदर में यहां पर जो भी यहां पर कंपोनेंट कह लीजिए जो भी कंपोनेंट आप लेंगे वह कंपोनेंट के पास आपको डिरेक्टली एक्सेस मिलेगा ठीक है तो हम क्या करते हैं कुछ कि एक कंपोनेंट बनाते हैं अपना लॉग इन डॉट जेएस एक्स और एक बनाते हैं हम प्रोफाइल बना लेते हैं प्रोफाइल डॉट जेएस एक्स तो एक में हम क्या करेंगे डाटा किस तरह से एक्स होता है वह देख लेंगे एक में डाटा किस तरह से अब login का component आ गया तो obvious ही बात है, login वाली चीजे भी चेहेगी, लेकिन उससे पहले आपको सबसे पहले, क्योंकि data भेजना भी तो है, तो कुछ चीजे आपको import करनी ही पड़ेगी, देखे एक चीज तो हम काम में लेने वाले है, use state, जिसका नाम है use context, और इसी के साथ से ही आपका documentation यहाँ से start होता है, use context एक hook है, वहाँ से आप directly access ले सकते है, इसके अलावा क्या लेंगे, हम अपना user context भी ले आते हैं, यूजर कांटेक्स्ट अब इस यूजर कांटेक्स्ट को कैसे यूज करना है अभी बताते हैं कोई चिंता वाली बात ही नहीं है सबसे पहले क्या करो आप अपना हम काम करते हैं यूआई डिफाइन कर लेते हैं ज्यादा टाइम नहीं लेंगे यूआई में इसको कर देते हैं डिव बना देते हैं और यहां पर उपस आप हटिए यहां से और ठीक है एच टू लेते हैं उसके अंदर लिख देते हैं लॉग इन ठीक है और फिर हम क्या करते हैं कि इनपुट लेते हैं यह लीजिए इनपुट है और सब्सक्राइब करने के अंदर कुछ वैल्यूज टाइप हमारा जो है वह है टेक्स्ट और क्या चीज है प्लेस होल्डर ले लेते हैं प्लेस होल्डर के अंदर यूजर नेम डाल रहे हैं आपका जो मन करें डालिए हमें तो कि यह लीजिए बटन और जिस बटन के अंदर हो जाएगा मेरे पास सबमेट फॉर्म नहीं ले रहे हैं हम बटन पर ऑन क्लिक पर ले लेते हैं वैल्यूज तो सबसे पहले तो ऑन क्लिक तो ऑन क्लिक पर हो जाएगा हैंडल सबमेट हैंडल सबमेट अब आप इस तरह से आ जाइए यह लीजिए इसकी कम्प्लेन हो गई बन लेकिन अब यह जो प्लेस होल्डर यूजर नेम और पासवर्ड लिए इनके लिए एक स्टेट तो लगेगी और स्टेट के अंदर वैल्यूज अपडे है और फिर बोलते हैं सेट यूजर नेम स्टेट से यादिंग तो ठीक है जी यूज स्टेट और यह लीजिए डिफॉल्ट एमटी वैल्यू बाय दे वे आप यह भी यूज कर सकते हैं यूज स्टेट का स्निपिट भी आपके पास होता है और यहां पर आप प्रेटली लिख सकते हैं तो पासवर्ड और सेट पासवर्ड और यहां पर जाकर हम इसको भी एमटी ओके अब ये value यहाँ पे control कैसे होगी क्योंकि अभी तक ये control नहीं हो रही है ये सिर्फ state हवा में है तो वो control कैसे होती है बड़ा ही basic सा है यहाँ पे आईए और उसको बोलिए कि जो आपकी value है वो आप govern करेंगे कहां से username से ये लीजे कर ली लेकिन उसके इस field में अगर कोई change username को call कीजे और वहाँ पे इस value को pass कर दीजे event.target.value ये सारी कहानिया तो हमने जाउसकेट में बहुत अच्छे से बहुत in-depth देखी थी तो उसमें कोई दिक्कत नहीं है इतना काम हो गया हमारे पास अब क्या करेंगे कुछ नहीं copy-paste करेंगे और क्या करेंगे ये लीजे यहाँ पे भी आ जाते हैं जहां आपका मन करें वहाँ पे रख दीजे, यह value किस से govern होगी, obvious ही बात है password से govern होगी, और target.value ठीक ही है, और यहाँ पे set username की जगे set password, यह लीजे, ठीक है, values हो गई govern, ठीक है, इतना काम तो हमें भी आता था, कोई वहाँ पे दिक्कत नहीं थी, but actually मैं जो process सीखना था, कि इस user context के अंदर जो values है, वो कैसे fetch करूँगा मैं, उसके लिए आपको help करता है आपका यह use context, कैसे करता है?
जिस तरह से आपने use state होक use करा है, उसी तरह से इसको भी use करेंगे, तो यह लीजिए हमारे पास यहाँ गया, अब हम क्या करेंगे, यहाँ पर एक object ले लेते हैं यहाँ से, इसको लेंगे set user, ठीक है जी, set user लिया आपने, और यहाँ पर क्या लिया, use context, और उस context के अंदर value क्य उनको मैं recommend करूँगा context में वापिश जाईए, और यह जो user context है, आपको अगर याद हो, तो हम यह pass कर रहे थे, तो यह दोनों values, इसलिए तो यहाँ से pass करिए props से, ताकि उस value से कोई data चीज़े, तो मैं सिर्फ user से लेके वो data ले लूँ, लेकिन अगर इस field में, context हो, API call context हो, तो properly right context देना पड़ेगा आपको, तो वो properly context दोगे, तब ही तो उससे आप वो set user ले पाऊगे, ठीक है, अब set user आपने अगर ले ही लिया है, तो यहाँ पे करना क्या है, कुछ भी तो नहीं करना, पहले तो आपके पास event आएगा एक, यह लीज़े handle submit में event आ गया, अब इस event का क्या करना है, default behavior prevent करना है, prevent default, अगर मैंने typo नहीं किया हो तो, default prevent क्यों किया, क्योंकि by default जब भी आप submit करते या फिर post method के थूँ चली जाती है, तो वो नहीं चाहता मैं जाये, और set user method अब मिली गया है, तो उसके अंदर क्या करो, कुछ नहीं, यह आपका username पास कर दो, आपका मन करे तो password भी पास कर दो, यह लीजे, तो हमें data भेजना तो आ गया कि किस तरह से data भेजना है, बड़ा ही simple लेकिन आप दूसरी चीज और समझने की, ये तो बात हुई data भेजने की, अब data लेना कैसे है, अगर आप ये सोचने की data लेने के लिए बस exact same कारण करना पड़ेगा, set user की जगह user ले लूँगा और वहाँ से data extract कर लूँगा, तो एकदम सही हो आप, आप सीख गए हो किस तरह स ठीक है और उसके अलावा यूजर कॉन्टेक्स तो लेना ही पड़ेगा यूजर कॉन्टेक्स पर ना बताऊंगा कैसे कि कौन से कॉन्टेक्स की बात कर रहा हूं 5-6 कॉन्टेक्स अक्सर 10-10 कॉन्टेक्स भी होते हैं ठीक है तो अब यहां से क्या करना है कुछ नहीं जो सेम क अब यह यहां पे आ है तो इसको हम रिटर्न कर देते हैं एक्चुली में रिटर्न भी नहीं करते हैं एक्चुली में यहां पर कंडीशनल रिटर्न कर देते हैं यह भी कई जगह पड़ते हैं कई लोग इसको अलग टॉपिक में डिस्कस करते हैं मैं तो नहीं करता यहां पर सिंटेक्स एक इफ को चेक कर लेते हैं हम कि अगर कोई यूजर हो ही नहीं तो क्या बोलो अगर देखिए कोई इतना कोई load वाली बात ही नहीं है तो एक काम करता है यहाँ पे एक div ले लेते हैं हम और div के अंदर लिख देते हैं please login ठीक है अब इसी तरह से अगर है तो यहाँ पे हम return कर देते हैं normally एक simple सा div लेते हैं div यह div और यहाँ पे बोल देते हैं welcome welcome के बाद जो भी user का name है तो user में से extract कर लेंगे user name बस इतना सा ही तो काम है अब देखिए कुछ magical हो नहीं रहा है, वोई return अपने, return कोई भी value return कर देता है, उसके बाद execute होता ही नहीं है, तो यहां मैं कभी पहुंचूंगा ही नहीं, और यदि case false है, तो मैं अपने आप यह return कर दूँगा, ठीक है, E भी लगा लेते हैं, welcome, ठीक है, तो देखा आपने कि और वो component कैसे data access करेंगे, वो हमने component के अंदर ही handle कर लिया है, यहाँ पे मुझे कुछ नहीं करना है, अब जैसे suppose करेंगे मैं top पे एक login वाला component import करा लेता हूँ, यह लीज़े, और उसके बाद आपकी profile वाला component import करा लेता है, यह लीज़े, अब देखें, हो सकता है आपने app.jsx कि जब भी आपको लेना हो डेटा जिस भी कंपोनेंट में तो यूज कांटेक्स यूज करो डेटा ले लो बस इतना से तो काम है अंजी ठीक है अब इसको रन करके देखते हैं देखते हैं कितने बग्स इंटरड्यूस कर दिए हैं तो करीदी होंगे और एक भी नहीं अभी तक तो ठीक है जी अच्छी बात एक भी नहीं है तो एक क्या करते हैं तो उस चुका सा मियापे एक और लॉग इन के अंदर कुछ स्पेस इंटरड्यूस करते हैं बस आधा तो कुछ नहीं हम बातें डिरेक्टली यह इंटरड्यूस कर देते हैं ठीक है ठीक है थोड़ा सा space आ गई ज्यादा space तो आईगी नहीं है actually मैं थोड़ा सा हम यहाँ पर non-breaking space characters एक space ही लेता है दिखतो रहा है यह zoom कर लेंगे ठीक है अब देखे बात क्या है अब यह बोल रहा है please login यह इसी बात का fact है क्योंकि वहाँ पर user नहीं है अभी अब मैं जैसे यह कई लोग को अगर जो लोग directly कूद पड़े हैं यहाँ पे जिनको नहीं समझ में आ रहा तो आपको comment में मिल जाएंगे कई लोग ऐसे करते हैं यह कौन सी बड़ी बात थी हमने तो हितेश यहाँ से इतना सब करने की ज़रूरती क्या थी हम अगर app.jsx में directly पास कर देते प्रॉप हितेश आजी fact है तो अगर ऐसा कोई कहता वाँ मिले तो please इसको कहिएगा अरे भाई इतनी मेहनत से इतने प्रेम से और free time में बैट के देखा करो ताकि आपको कहानी तो समझ में आये जो हमने पूरी Netflix की यहां series चला रखी है react की आपको समझ में तो आए और वीडियोस को 4K वगरा में देख लिया करो तो और अच्छे से कोड समझ में आ जाएगा, तो ये तो रही आपकी कहानी कि किस तरह से आपका कॉंटेक्स्ट होता है, ओके जी, ठीक है, अब आपको क्योंकि कॉंटेक्स्ट की पूरी कहानी समझ में क्योंकि अब आपको समझ में आ रही है इसलिए आप इस lecture के part 2 में अब जा पाओगे लेकिन part 2 में जा रहे हैं इतना लंबा वीडियो बना है तो ये बताओ मुझे हजार comments हो रहे है नहीं हो रहे है और फटाफट करो यार क्या कब तक देखेंगे 100k subscriber cross करें लोग support कर रहे हैं ठीक है तो अब चलते हैं हमारे 9th project पे ताकि आपको सारी details और values मिल जाए तो यहां पर हम बोलते हैं context API discussion यह discussion ही था project भी था actually मैं project okay context API का हमने यहां पर project commit कर दिया है ठीक है जी push भी करी देते हैं ताकि आपको सारा data मिल जाए okay तो आप जिनको जिनको पता है कि कहां पे हमारे सारा code base जाता है मेरे GitHub account पे, वो क्या करें, सीधा GitHub पे जाएं, in fact, I think मैं भी होंगा कहीं ना कहीं, GitHub पे, ये रहा GitHub, है ओके तो यहां पर रिपोजिटरी इसमें मैंने पिन नहीं कर रखी रिपोजिटरी एक्चुली में ढूंढनी पड़ेगी चाहिए और रिएक्ट आप पर यह तो अभी तक तो आगे जाकर अब इसलिए बात है आपको देखनी पड़ेगी तो यहां पर मैंने आपको कॉन्टेक्स के नोट्स भी दे दिये हैं अब कॉन्टेक्स के जो नोट्स है कुछ नहीं है थीम बटन का यूआई है कार्ड यूआई है कार्ड का य� अच्छा अब इस कहानी को समझने के लिए ना क्योंकि हम यहाँ पर tailwind वगरा यूज़ करेंगे तो आपको एक कहानी और समझ में नहीं चाहिए कि जब आप tailwind पर जाते हैं तो आपको actually में tailwind ना यहाँ पर allow करता है कि आप directly CDN वगरा के थूँ आप इसको play कर लो tailwind का actually में play ground कि आपके पास एक top में button है, जो कि क्या कर रहा है, light mode और dark mode में switch कर रहा है, अब वैसे तो हो सकता है, मैं आपको पूरा एक HTML वगड़ा बना के दिखा दा, बट actually मैं जरूरत नहीं, आप कहीं पे भी यहाँ top पे right click, अच्छा बीच में right click मत करिएगा, top navigation बार पे right click करके, जहाँ पे HTML लिखावा है, अब उस HTML के अंदर आपको क्या है, तो last जो class है न, वो है dark, बस यही कहानी है tailwind की, tailwind कैसे detect करता है dark mode है or light mode है, क्योंकि जो CSS लिखी जाती है, आप देख रहे होंगे यहाँ पर CSS, जादा ता मैं CSS की बात नहीं करना चाहरा अभी, बस आपको क्या करना होता है, यहाँ पर एक switch enable करना पड़ता है, यह dark की जगह यहाँ पर मुझे light करना पड़ता है, यह देखे, light लिखते है, light हो गया पूरा mode, और यहाँ पे हम dark जैसे ही लिखेंगे, तो अववेसी बात है dark mode हो जाएगा, तो tailwind के अंदर इसी तरह से काम किया जाता है, अलग-अलग libraries, अगर आप core CSS लिख रहे हैं, तो अववेसी बात है, आपको पूरा ही styling change करना पड़ेगा, javascript वगरा से, काफी कुछ, वहाँ पे circus ह तो ये dark वगरा हमने directly include कर रखा है, ये देखिए, यहाँ पे ये dark, peer, focus, ring, तो ये सारे dark mode के हमने CSS लिख रखी है, आपको almost सबी जगए ये दिख जाएगी किस तरह से dark mode की CSS है, तो हमने ये project जो बनाया है, ये जो CSS लिखी है tailwind की, वो कुछ इसी तरह से लिखी है कि dark mode हो अगर है लेकिन अगर एक अलग कंपोनेंट बनाएंगे स्विच का तो हमारे कार्ड को कौन बताएगा कि टॉप हो चुका है उसके अंदर स्टेट अपडेट हो गई आपके एचटेमल की और अगर कार्ड को पता लग गया है तो वापिस अगर टॉप है तो टॉप हो चुका है तो वापिस अगर ताकि आपको एक दूसरा variation मैं दे पाऊं यहां पर ठीक है जी तो यहां पर हम आ गए हैं और npm create वीट एट लेटस्ट ओके यहां पर हम इस प्रोजेक्ट को नाम देंगे हमारा कॉन्टेक्स टीपीआई है तो थीम स्विचर उसको नाम दे देंगे ठीक है जी यह हमारा 09 देखा मैंने 10 प्रोजेक्ट कहे थे बट दस तो बहुत आगे जाने वाले हैं थी थीम स्विचर ठीक है जी और अविस्सी बात है react यूज़ करना है, javascript यूज़ करनी है, और cd करके उसके अंदर जाना है, इतना काम तो सभी को पता है, उसके बाद जाके npm install करना है, ठीक है जी, npm install के बाद क्या करना है, tailwind पर जाना है, tailwind पर नहीं जाएंगे, तो कुछ काम नहीं करेगा, क्योंकि इतना स्लो कैसे हो रहा है इंटरनेट तो नहीं गया मेरा नहीं नहीं कहते ही मान लेते हैं बाद जैसे आप लोगों को कहना पड़ता है ना हर बार कितने कमेंट करिए शेयर करिए वैसे कई लोग कहने के बाद ही मानते हैं है ओके अभी हम हां थीम स्विचर के अंदर है एलएस करके देख लें आज ही वहीं है पेस्ट कर देता है यह लीजिए पेस्ट हो गया है थीम स्विचर का और यह हमारे पास कंटेक्स्ट है एजिटिज को कॉपी कर लेते हैं और टेलविंड के कंफि कि यह हमारा कंटेक्स्ट है इसको चेंज कर दिया यह लीजिए और बताइए क्या करें अच्छा यह भी करना है ठीक है यह भी कर देता है आप कहते तो इसमें कौन सी बड़ी बात है ठीक है टेलविन की सोर् कि index.cs सब कुछ हटाओ यह पेस्ट कर दो बस इतना साइड काम है कोई दिक्कत वाली बात थोड़ी अभी तक नहीं ना इतना तो इजी काम है चलिए थोड़ा सा आगे चलते हैं और एक बार इसको रन करके देख लेते हैं एक्चुली में एप डॉट जीएस एक्स के अंदर आते हैं और सारे के सारे सब को हटाइए कुछ भी नहीं चाहिए है और इसको क्या करिए आप पहले तो पैड़िंग दीजिए नहीं ऐसे तो मत दीजिए क्लास नेम के अंदर दीजिए पैड़िंग दीजिए पहले तो इसको फोर की उसके बाद इसकी बीजी डेश पिंक लेते हैं इस बार क्यों लेते हैं पता नहीं पिंक लेंगे और टेक्स्ट टेक्स ब्लैक रहता बाई डिफॉल्ट मुझे चले गए था टेक्स्ट डेश और थ्री एक्सएल ठीक है आप इसको रन करके बताइए मुझे कि क्या चल रहा है कि नहीं एनपीएम रन डेव यह लीजिए अ है और बताइए कि मामला चल रहा है कि ���ां चल तो रहा है एकदम बढ़िया से चल रहा है अच्छा आप आते हैं बैक और जो फाइल है प्लीज मैं तो यहीं से ले सकता हूं डिरेक्टली क्योंकि मेरे पास कॉन्टेक्स नोट्स है मैं नहीं बना तो डिरेक्ट लिखा दे दो विश आना चाहिए था तो यह लीजिए हमने डिरेक्ट लिखा दे दिया अब यहां पर एक कमेंट लिख देते हैं यहां पर अक्शली में हमें एक दूसरा कंपोनेंट हम लाएंगे अभी हमारा जो थीम बटन होगा वो वाला कंपोनेंट इसके है और यहां पर आएंगे हमारे कार्ड ठीक है और सीएसस वगैरह सब दे रखिए हमें इन सब की कुछ जरूरत नहीं अभी बड़ा ही बेसिक से चल रहे हैं और यह सब सब अटाइए ओके ठीक है इतना काम तो हो रहा है अच्छे से हो रहा इन फैक्ट आपने देखा अभी तक कि हमने ये जो app.jsx है इसके अंदर हमने क्या करा है सीधा ही ये div class वगरा introduce कर दिया है लेकिन हमें कोई ना कोई theme provider या कुछ ना कुछ login provider, user provider कुछ ना कुछ तो चाहिए ही था तो वो भी नहीं हमारे पास अच्छा हमारा CSS indentation भी बहुत बि को कंटेक्स ज्यादा ठीक है अब हम बनाएंगे एक फाइल और इस फाइल का नाम देंगे हम थीम डॉट जेएस एक्स अच्छा थीम जेएस एक्स इंपोर्ट करने वाले हैं यह क्यों यह भी बताता हूं आपको सबर तो रखिये थोड़ा सा, ठीक है, अब हम यहाँ कर रहे हैं थोड़ा सा different approach, अच्छा different approach क्या है, गौर से देखेगा, सबसे पहले तो, देखे react वैसे आपको import करने की जरूरत है नहीं फाइलों में, हम कर रहे थे, ठीक है, अच्छी बात है, एक तो चाहिए आपको create context, व थीम कॉन्टेक्स्ट को वहां पर भी कर रहे थे इजैक्टली से मैं अक्शनी में उसको ओपन कर लेता हूं ताकि हम साइड बाइसाइड कंपेयर भी करते जाएं कंपेरेजन अच्छा होता है चीजें समझ में आती है उससे जल्दी ठीक है यह था यहां पर यहां पर अच्छी में डिफॉल्ट वैल्यू डाली जा सकते हैं सकती है हां जी किस तरह से डाली जा सकते हैं और कैसे यूज हो सकती है वह भी बताता हूं आपको कि यह थोड़ा से डिफरेंट सिंटैक्स है काम हुई है लेकिन वह बताया जैसे मैंने आपको राउटर में समझा था कि दो तरीके है उस object के अंदर क्या हो? एक तो आपके पास हो theme mode थी मोड की वैल्यू क्या हो लाइट क्योंकि मैं चाहता हूं जब भी कोई भी थी मोड कांटेक्ट करें अगर डिरेक्टली कॉल कर देगा तो क्योंकि मैं उसके अंदर कोई वैल्यू ऐड ही नहीं करी है तो कुछ नहीं होगा उसके अंदर क्रैश हो जाएगा या तो नल आए ठीक है, इसी तरह से आपके पास एक light theme का यह function हो, वैसे तो हम एक ही function से काम कर सकते थे, toggle करवा के, but मैं यहाँ पे दो use कर लेता हूँ, एक light theme, अब यह क्या है, दोनो method है, ठीक है, यह method मुझे कहा से मिलेंगे, जब भी कोई context call करेगा, यह theme भी मिल जाएगा आपको, और दो method जो बात उनको वहाँ पे clear नहीं हुई थी कि यहाँ पे जब context provider के अंदर यह जो दे रहे थे यह actually वहाँ variable और method दे रहे थे उनको और अच्छे से समझाने के लिए कि आप यहाँ पे theme भी दे variable भी दे सकते हो और उनके method आप कुछ भी पास कर सकते हो क्योंकि react का कोई magic है ही नहीं जो है javascript का है अब क्या कर रहे हैं वो तो export करी दिया पर और मैं क्या लिख रहा हूँ यहाँ पे एक theme provider but provider तो हम अलग class में लिखते हैं ना नहीं, ज़रूरी नहीं है, कई लोग actually में theme context dot provider यही से ही export कर देते हैं अब यहाँ से export करने का फाइदा क्या? फाइदा कुछ नहीं है, syntax है, अलग अलग तरीके के style है user context provider हमने directly ही access ले लिया था कैसे लिया था? याद है? कि आप यहां से ले रहे थे और फाइल का यूजर कॉन्टेक्स्ट तो हमने क्या करा था यह यूजर कॉन्टेक्स्ट प्रोवाइडर लिया और यह रहा आपका यूजर कॉन्टेक्स्ट प्रोवाइडर उसके अंदर हमने चिल्डरन पास कर दिये थे तो एक्चुली में एंड अफ दे डे काम तो यह हो रहा है कि हमारा जो एप है वो भी अब यहां पर रेंडर हो रहा है और उसके अंदर और कंपोनेंट रेंडर हो र कि यह थीम प्रोवाइडर एक्चुली में है क्या है तो यह ना एक वेरिबल इसे एक्सपोर्ट कर रहे हो और करके रहे इसके अंदर ठीक है अच्छा इतना ही नहीं आप चाहो तो यहां पर अपने कस्टम हुक्स भी बना सकते हो जो अक्सर लोग बनाते हैं ठीक है उसको भी एक्सपोर्ट किया जाता है तो एक्सपोर्ट डीफॉल्ट और हम क्या करते हैं फंक्शन के यह रेटर्न करता है आपको अब यूज कोंटेक्स में कॉंटेक्स तो देना पड़ेगा हां जी इसलिए तो इंपोर्ट किया हमने यह हमारा थीन कॉंटेक्स्ट इंपोर्ट तो क्या किया है एक्शनी में ऊपर से तो लिया यहां से बस तो अब क्या हो गया अब आपको हर ज� और इसके साथ user context भी चाहिए अब ये actually मैं दो-दो काम ना करके क्योंकि वो context वहीं पे set हो गया है तो मुझे क्या करना है बस यहां से एक use theme ही तो import करना है use theme अपने आप ये use context वगरा सब तो context के अंदर जो भी values है उसका access मेरे को दे देखा directly तो ये भी एक coding syntax है coding structure है जो काफी लोग use करते हैं तो देखे theme provider मैं ले लूगा wrap कर दूँगा ठीक है जी काम हो जाएगा मेरा और उसके बाद क्या करना है कभी भी इन में से जिस भी values का या कुछ भी access चीज़ेगा काम वो ही हो रहा है, लेकिन ये इसलिए मैंने पार्ट 2 पे आपको कहा कि यहां से चीजे थोड़ी सी complex है, जो नहीं समझाय जाती अकसर, जब आप बहुत सारे पैसे दे देते हैं तब भी, बट यहां पे share या subscribe करके ही आपको मिल जाता है, अकसर production code में ये एक ही फाइल में किया जाता है, क्योंकि जादा better approach है, काम वही है बस थोड़ा सा easy कर लिया हमने इसी वज़े से user confused हो जाते हैं या फिर students confused हो जाते हैं ठीक है इतना काम तो हमारे पास हो गया अब हमें करना क्या है करना कुछ नहीं है अपने पहले जाना है app.jsx के अंदर ठीक है जी app.jsx में गए अब मुझे पता है कि ये सारा जो काम है कभी card आएगा वो आएगा क्या तो उसको access थोड़े ना मिलेगा, हाँ जी, तो किस तरह से काम मिलेंगे इसको, लेकिन सबसे पहले तो क्या करिए, इसको कर दीजे minimize, और इसको बोले कि चलिए आप मैं पूरे कोई wrap कर देता हू थीम प्रोवाइडर ठीक है और यह लीजिए थीम प्रोवाइडर और इसको करते हैं कट और यहां पर कर देते हैं इसको पेस्ट अब इससे हुआ क्या अब इससे हुआ यह किसके अंदर जो भी कंपोनेंट आते हैं एप के अंदर या अगर हो सकता आपका मन हो निकट नहीं है एक ही तो बात है कई पर राप करो अब सारी चीजें राप हो गई है लेकिन हमने यह देखा था कि सिर्फ यूजर डॉट प्रोवाइडर थीम डॉट प्रोवाइडर वह लगाने से थोड़ा काम होता है आपको वैल्यूज भी देनी पड़ती है क्योंकि जब तक आप वैल्यू नहीं दोगे किस चीज का एक्सेस सबको है किसका नहीं है वो तो हमें पता ही नहीं है पर उन सब चीजो और बोलते हैं कि आप मुझे value का access दो, क्या-क्या value है आपके पास, तो suggest कर दीजिए मेरे को, एक तो आपका रहा है theme mode है, ठीक है जी, direct access मिल गया है, एक मेरे पास access है light mode, ठीक है direct access मिल रहा है, और एक है मेरे पास dark theme, dark mode, dark theme, देख लेता हूँ एक बार मैंने क्या नाम दिया थ थीम बटन को भी इनका एक्सेस मिलेगा, कार्ड को भी इनका एक्सेस मिलेगा, ठीक है, लेकिन अब क्या है, अक्चुली मैं थीम मोड यहाँ पे और ये सब है क्यों, चले ये भी आपको बताते हैं, थोड़ा सा यहाँ पे काम करना पड़ेगा, वो जो बटन सा रहे हैं, वो यह लीजे use state और use state में by default है light तो अब एक बात तो मुझे समझ में आ गई कि theme mode के अंदर direct value में पास light है लेकिन एक चीज़ और ध्यान रखे आपके पास इन methods का access है ठीक है यह methods तो है आपके पास पर यह method कुछ कर नहीं रहे हैं अभी यहाँ पे हमने इनकी functionality वो मेरे को नहीं पता तो ऐसी जब भी situation हो ऐसी कई बार situation आएगी आपके पास तो आप क्या करो इन methods को सिर्फ इसी तरह से लो as it is और exactly इसी नाम के आप methods define कर दो वो functionality अपने आप उनके अंदर चली जाती है यह बड़ा interesting concept है तो हमने बनाया क्या बनाया एक पहले बनाते हैं य कि यह हमने लिया और इसको कर दिया लाइट मोड के अंदर क्या रहेगा लाइट रहेगा ओके और इसी तरह का एक और मेथड है वैसे तम एक ही में काम कर सकते थे कि ट्रू फॉल्स लेते टॉगल कर देते हम ठीक है पर ठीक है नहीं लेते हैं और यहां पर हम आ गया डार्क थी और यहां पर उसको लिख देते हम सिंपली डार्क ओके तो अब दो मेथड automatically ऐसा नहीं है कि HTML के अंदर inject हो जाएगी ऐसा कुछ नहीं होगा, वो functionality आपको है लिखनी पड़ेगी but वो functionality क्योंकि हमने यहाँ पे code लिख दिया और यहाँ से change भी हो रही है तो सिर्फ इनके नाम से, हाँ यहाँ पे use करेंगे इनको हम लेकिन कभी भी आपको change करनी है कोई भी theme तब तो access लेना पड़ेगा अच्छा यह तो ठीक है लेकिन actually में theme कैसे change होती है वो भी तो बताओ एक्ट्रेल चेंज इन थीम हां वह आपको क्लासिक जावास्क्रिप्ट से करनी पड़ती है हां उसमें कोई रियल का सचको रोल आता नहीं है यूज एफेक्ट लेते हैं ताकि जैसे यह रन हो वैसे हमारे पास आ जाए स्निपिट ही ले लेते हैं ठीक आते हैं पहले हम कोड लेते हैं तो कोड के अंदर क्या करना है सिंपल से अपना डॉक्यूमेंट का एक्सेस लो क्योंकि तो simply document के अंदर जाके आपको query selector से आपको कोई भी element मिल सकता है, तो अभी तो हमने देखा था, just कि HTML का access ले लो, और उसके अंदर क्या लो, class list का access ले लो, और वहाँ से remove कर दो, क्या remove कर दो, जो भी light या dark उसमें जो भी लिख रखा है, साबी remove कर दो, तो light भी remove कर दो, और उसके अंदर, अगर dark हो तो dark भी remove कर दो, अच्छा remove क्यों करा क्योंकि मुझे add करना है मुझे नहीं पता था पहले से इसके अंदर क्या value हो तो change करने का मैंने load ही नहीं लिया यहाँ पर ठीक है document.querySelector actually उसका variable मैं hold कर लेना चाहिए था ठीक है आप ही कर लेंगे इ एचटीएमल और उसके बाद यह क्लास लिस्ट का एक्सेस ले लो और उसके बाद बोल दो एड अच्छा एड क्या करना है देखिए एड मुझे क्या करना है सिंपल सा थीम मोड हां मैं डार्क और यह भी ले सकता था बट मुझे पता है यह सारा काम तो आप इसके अंदर और वह चेंज करा दो अब क्योंकि मेरी एक डिपेंडेंसी है कि थीम मोड में कोई भी चेंज थीम मोड ठीक है अब जैसे से आप कोड लिखेंगे ना जैसे मेरे को एक इंट्यूशन आ गया कि नहीं एक डिपेंडेंसी तो है वैसे अभी आपको नहीं आएगा एवेंचुली आप दस पंदर आबीस प्रोजेक्ट बनाएंगे दो चार साल देंगे रियाट के साथ तब आ है और यहां पर बनाते हैं सोर्स के अंदर एक नया फोल्डर और इस फोल्डर का नाम होगा कंपोनेंट्स ओके कंपोनेंट्स के अंदर हमारे पास क्या क्या होंगे ज्यादा कुछ खास होंगे नहीं एक कार्ड है और एक थीम बटन है तो दोनों को बना लेते हैं एक फाइल बना फोल्डर बना फाइल बना लेते हैं सीधे लिखिए तो सरी सीधा ही बना लेते हैं कार यह लीजिए कार्ड बन गया और एक बना लेते हैं बटन इसका नाम देंगे हम थीम बटन थीम चाहिए पिटल लिखना पड़ेगा थीम बटन डॉट चीज एक्स यह लीजिए तो हमारे पास थीम बटन आ गया थीम बटन का भी ऐसा कुछ रोल है नहीं आरफसी देखिए काम हो गया बस अब चाहे तो बेसिक बटन भी बना सकते थे नहीं थोड़ा सा फैंसी जाना है तो थ है तो इसका कुछ रोल तो है नहीं एडिटिजाएगा और यहां पर कॉपी पेस्ट हो जाएगा यह लीजिए थींग बटन एक्सपोर्ट भी हमने एक लाइन में कर दिया ठीक है यहां पर हमारे पास थींग बटन इसमें थोड़ा सा काम अभी करना पड़ेगा और वह तो करेंगे बट कार्ड के अंदर तो आई टो थिंग तो ऐसा कुछ काम है बट ठीक है इसको हम करते हैं यहां से अभी तो कॉपी का दे रहे थे अभी तो तारीफ करी थी मैंने यहां पर नहीं है यह तो गलत बात है अब आया है कि कॉपी स्क्रॉल करने के बाद आएगा ठीक है यह भी जेल लेंगे ठीक है यह जी कार्ड आगे आपका ठीक है कार्ड के अंदर हमारे पास ऐसे को फंक्शनलिटी हमने लिखी नहीं है बस डार्क थीम लाइट थीम देखिए डार्क थीम वगरा यह तो कैसे load हो जाएगा अपने आप तो यहाँ पे आते हैं और theme button को लेके आते हैं theme button आप आजाईए self closing हो जाईए ठीक है जी card आप भी आजाईए ये लीजे card भी आगए आप देखते हैं कैसा देख रहा है तो ठीक है तो कुछ होगा नहीं क्योंकि कोई functionality included ही नहीं है toggle के अंदर लेकिन इतना मुझे पता है कि अगर मैं right click करके inspect करके जाओं है तो मुझे पता है एचटीएमल के अंदर अभी क्लास एक लाइट है लेकिन इसको जाकर चेंज करके अगर मैं डार्क कर दूं तो यह डार्क है और मैं यहां पर चेंज कर दूं तो यह लाइट है ठीक है अब देखिए लाइट और डार्क आपने सच कोई डिफिकल्ट इतना है नहीं है है ठीक है सबसे पहले हमारे थीम बटन के अंदर अगर हमारा थीम बटन यह अब थीम बटन के अंदर सबसे पहले क्या काम करना है हमारा हुक इसी दिन के लिए तो बनाया था और किसके लिए बनाया था यह राप का हुक यूज थीम इसको हाँ जी आ गए देखिए ये लीजे use theme अब इसमें से क्या क्या निकालना है वो आपके उपर है और ये लीजे बस अब आपके उपर है देखिए theme mode निकाल लेते हैं इसमें से सब ही निकाल लेते हैं ये लीजे light theme निकाल लिया और ये dark theme निकाल लिया ये लीजे सब आ गए आ� ये लीजे value हमने दे दी यहाँ पे कि वैल्यू क्या करते हैं बाई डिफॉल्ड देते हैं इसको एमटी कि कुछ नहीं है ठीक है वैल्यू एक्चुली में ऑलरेडी है तो वैल्यू देने की जरूरत भी नहीं है अब हमें तो दो काम करने एक तो करना है ऑन चेंज और एक ऑन चेंज अरे ऑन चेंज बटन ऑन चेंज बटन तो है नहीं इसलिए चलाएगा बोलेगा अरे मेरे पास तो पता ही नहीं ऐसा भी कुछ है और चेंज बटन यह लीजिए उसको एक बटन दे दिया और उसने चिलनाना बंद कर दिया कुछ नहीं कर रहा बटन वह बात अलग है ठीक है इतना तो हो गया लेकिन अब अगर वो चेक्ड रहे तो कौन सी थीम हो तो अगर वो चेक्ड रहे तो हम क्या करेंगे वहाँ पर थी कि कुछ नहीं करना बस मेथड को कॉल करेंगे और वैल्यू चेंज करा देंगे तो ठीक है यहां पर आते हैं तो एक क्या करते हैं सबसे पहले डार्क मोड स्टाइटस लेना तो पड़ेगा ना भी वैल्यू क्या है तो उसकी वैल्यू तो लेनी पड़ी रखते हैं इसमें चेक बॉक्स में इवेंट डॉट करंट टारगेट हमने डॉम के अंदर डिस्कस करा था यह सब चीजें अगर आपको याद होता दॉट चेक यह लीजिए अब आपके पास स्टेट आ गया कि अक्शनल में अभी क्या उसका स्टेट है चेक का वह है डार्क ठीक है जी अब स्टेट को चेक करना चेंज करना है तो कैसे चेंज होगा बड़ा ही आसान काम है इफ डार्क मोड स्टेटस अगर उसके अंदर कोई वैल्यू है तो हम क्या करेंगे सीधा डार्क मोड कॉल कर देंगे यह लीजिए तो हम कर देंगे डार्क थीम ओके और वरना हम क्या करेंगे थोड़ा सा और अच्छे से लिख देते हैं इसको ताकि समझ में कोड क्वालिटी थोड़ सी इंप्रूव कर देता है यह लीजिए डार्क थीम और एल्स केस में आपके पास हो अब जिनने ने डॉम वगरा जावस के टच्चे से नहीं पड़ी होगी मेरे साथ वहाँ पर, या जिनने ने कहीं और से देखी होगी, उनको एक प्रॉबलम आएगी, तो उसके लिए मैं थोड़ा सा एक समराइज रिविजिन करा दू.
तो हम क्या करेंगे यहाँ से, कि अगर वो dark mode status यहाँ से ले लेंगे, अगर true होगा dark mode status वहाँ पे, तो हम उसको डार्क थीम में डाल देंगे अगर फॉल्स होगा तो लाइट थीम में डाल देंगे बस बेसिक वाला काम है कुछ नहीं चेक अनचेक कर रहे हैं और कुछ भी नहीं इतना ठीक है इतना काम तो हो गया हमारे पास लेकिन अभी हमारे कार्ड को एक्चिली में नहीं थीम मोड के अंदर अगर कोई भी change हो तो use effect हो इसलिए वो सारा अपने आप run हो जाएगा तो interesting बात यह है कि आपके जो UI developer उसने जो भी आपको CSS वगरा लिखे दिये dark mode वगरा को आपको उसके अंदर changes ही नहीं करने है यही तो सबसे interesting बात है इसलिए तो एक ही button आता है उपर क्योंकि यह जो काम है वो आपके react engineers कर रहे हैं जो HTML के अंदर सिर्फ एक value change कर देते हैं और हर चीज रैब्ड है context API से, तो आपने, आपको पता नहीं था, बट आप exactly tailwind की ही functionality बना रहे थे, अब मैं इस वीडियो को अगर देता नाम की, build your own tailwind clone, तो बहुत सारे views आते, लेकिन actually मैं, करा आपने यही है, मैं नहीं चाहता uninterested audience भी हो यहाँ पे, simple सी dark mode, light mode theme, ओके, I think कोई bug है, यह हमने कुछ save करना भूल गए, एक बार देखते हैं, कौन-कौन से bugs हैं हमारे पास में, एक बार इसको restart कर लेते हैं, NPM run dev, open करके देखते हैं, ओके, I think छोटा-मुटा कोई bug है, मैं एक second देखके इसको fix करते हैं, इस bug को भी, हाँ जी, हो गया है fix, इतना एक्चुली में हमारे कोड में कोई इशू ही नहीं था इशू कहां पर था इशू था टेलविंड के अंदर हां जी वो भी बताता हूं आपको वैसे तो इतना जादा कोई डिस्कस करने लिए बात है नहीं बट फिर भी चिंता मत कीजिए सब बताएंगे कुछ भी बेहाइंड तो देखें सबसे पहले मैंने देखा कि मैं toggle कर रहा हूँ और कुछ भी काम नहीं हो रहा है, तो मैंने right click करा, inspect के अंदर गया, और simple सा यहाँ पे देखा कि class अभी यहाँ पे light है, लेकिन मैं जैसे ही toggle करता हूँ, तो class तो मेरी change हो रही है, light और dark, तो at least जो code functionality है, जितना भी ह टेलविंट प्लेगराउंड पर चलते हैं वापिस से, तो यहाँ पर भी हमने यही करके देखा था कि इंस्पेक्ट करके देख रहा हूँ, और हमारे पास elements के अंदर यही dark था हमारे पास मैं, इसी को मैं अगर change करके light कर रहा था तो काम हो रहा था, और होता भी ऐसे ही है, क्य tailwind की configuration में कुछ दिक्कत है क्योंकि अभी तक हम boilerplate configuration कर रहे थे तो actually मैं tailwind config के अंदर मैं गया और देखा कि हाँ मैं configuration करना ही भूल गया क्योंकि ये जो functionality है ना कि HTML से आपके पास आती है ये functionality enable करने के लिए जिसका नाम है dark mode अब dark mode में दो properties आपको मिलती है एक मिलती है आपको media के basis पे एक class के basis पे तो हम नहीं चाहते कि आपका जो system है उसके basis पे चले जो चलता है by default मैं चाहता हूँ क्लास के बेसिस पर चलें, तो हमने क्लास बस, जैसे ही मीडिया डार्क मोड को क्लास के बेसिस पर कहा कि चलिए, रीस्टार्ट करना पड़ा प्रोजेक्ट, और उसके बाद, दैट्स इट, बस इतना ही तो काम था हमारा, अब इसको रिफ्रेश करके देखते है तो हमारे पास क्या है और भी बड़े चैलेंजेस आएंगे उन चैलेंजेस के टाइम अगर मैं इतना ज्यादा टाइम अगर सिर्फ कॉंटेक्स टीपीआई को समझाने में लगा रहा हूं तो बन लिया प्रोजेक्ट कभी नहीं बनेगा क्योंकि आगे चैनल पर इन सब के बारे में डिस्कस करना ना इतना कोई समझदारी वाला काम नहीं है क्योंकि उसके लिए डिरेक्टली है तो बस इतना सा ध्यान रखेगा में लिए कि आपको टेलविंड के अंदर एक छोटी सी कंफिग्रेशन करनी है तो यह हो गया हमारा थीम स्विचर और इसको भी कर देते हैं कमेंट और कमेंट करके पुष्ट कर देते हैं ताकि आपको भी notes में भी मैं आपको यह दे ही देता हूँ actually मैं और यह हमारा basic और मैं क्या करता हूँ आपके जो notes मैंने यहाँ पर लिखे हैं उसके अंदर भी लिख देता हूँ ताकि सबको आसानी रहे context notes के अंदर तो context notes यह रहे हमारे context notes और इसके अंदर भी लिख देते हैं remember to change config in tailwind है और जावास्क्रप्ट के फाइल में आपको देता हूं था कि इजीली आप यह लीजिए अब आपके पास यह भी पहुंच जाएगा तो इसको भी हम पुष्ट कर देते हैं हां जी मैं यहीं से पुष्ट करता हूं यूजिली कमेंड लाइन से कर सकते हैं टेलवेंड कंफिग एडट ट और इसको भी कर देता है push, हाँ जी, तो अच्छे से आपको notes भी बना के दे रहा हूँ, actually मैं ऐसे ही notes होते हैं, और भी notes होते हैं, कई लोग कहते हैं, हमें handwritten notes दीजे, exam ही pass करना है न, तो और बहुत सारे channel हैं, जहां पर exam pass करवाया जाता है, simply तो उनको देख लीजे, यहां त तो प्लीज शेयर करिएगा वरना क्या होगा इतना important और valuable content जो बनाया है इंटरनेट की कहीं भीड में, इंटरनेट की कहीं हाइप में ये सब खो जाएगा तो ऐसा मत करिए, इसको मत खोने दीजे, valuable content है, golden content है, सब तक पहुँचने दीजे इसको