हां जी कैसे हैं आप सभी उम्मीद करता हूं अच्छा ही होंगे और अगर अच्छे हैं तो चलिए आपसे एक देखिए इस चैनल पर मैं थोड़ा सा ना अनफॉर्मली पढ़ना हूं मजा आता है मुझे भी इसलिए तो इतने सारे वीडियो ए जाते हैं इस वीडियो को स्टार्ट करने से पहले सबसे पहले बात तो इस वीडियो का जो टारगेट है ना वो है हजार कमेंट्स आए इससे नीचे तो चले गए ही नहीं इस वीडियो पे क्योंकि इस वीडियो के साथ ना बहुत साड़ी किस कहानी जुड़ी हुई है यह जो टॉपिक है ना जो लोग ऑलरेडी रिएक्ट सिख के ए रहे हैं उनको पता है ये टॉपिक कितना डिफिकल्ट होता है और कुछ किस भी बताता हूं इसके ये जो टॉपिक हम यहां पे लेंगे वो बोलेंगे कॉन्टेक्स्ट का अब देखिए अक्सर लोग कॉन्टैक्ट्स को ना डायरेक्टली कांटेक्ट के डॉक्यूमेंटेशन से वहां से पढ़ने ग जाते हैं जबकि वो स्टार्टिंग पॉइंट होता ही नहीं है इस टॉपिक का इस टॉपिक का स्टार्टिंग पॉइंट आता है प्रॉप से अगर प्रोब समझ में आता है तो प्रॉप्स की प्रॉब्लम को समझोगे फिर उसके बाद आपका कांटेक्ट जो वर्जन आपका रीडर जस्ट स्टैंड वगैरा यहां से आता है तो इंटरेस्टिंग बात क्या है नाम तो मैं नहीं लूंगा किसी का देखिए प्रोफेशनल कट सी होती है नाम तो नहीं लेना चाहिए किसी का भी पर क्या है की ये टॉपिक मैंने सिर्फ युटुब यहां पर अपने कोर्सेज में अपनी कंपनी के लिए नहीं कई औरों के लिए भी पटाया है हां जब मैं किसी कंपनी से एसोसिएटेड नहीं था तब एक बार नहीं दो बार ऐसा हुआ की एक बार तो डायरेक्टली इंस्टिट्यूट ने मुझे बोला की ये टॉपिक बच्चे सेटिस्फाई नहीं हो रहे हैं और हमने काफी भर भर के मोती फीस ले ली है तो प्लीज क्या ये टॉपिक आप उनसे उनको पढ़ा सकते हैं तो मैंने कहा हां जी पढ़ा देंगे कोई दिक्कत नहीं स्टूडेंट काफी सरप्राइज हो गए थे की थे सर आप यहां पे कैसे मैंने कहा हम जैसे भी हैं यहां पे अब पढ़ना तो आए हैं तो पढ़ लीजिए और एक बार तो एक इंस्टिट्यूट ऐसा जो की लाखों में चार्ज करता है वहां से रिक्वेस्ट गई एक इंटरनेशनल कंपनी को की हमें ये टॉपिक अपने इंटरनल कंपनी के लिए करवाना है आज एन कॉरपोरेट ट्रेनिंग तो मैं वहां पे गया था वहां पे टीचर्स दे के हरण परेशान किया थे आप यहां पे कैसे मैंने कहा उनके साथ भी मैं ही हूं जहां भी जाओगे मुझे भी पाओगे तो मैंने उनके टीचर्स को ये समझाया फिर उनके टीचर्स ने जाके स्टूडेंट को समझाया तो जहां भी जाओगे तो हमें तो बड़ा इंटरेस्टिंग टॉपिक है इंटरेस्टिंग सब्जेक्ट है और मुझे अच्छा भी लगता है हेल्प करना की ताकि और टीचर्स सिख पे स्टूडेंट भी सिख पे और शिखा पे तो कांटेक्ट एपी के अंदर बहुत मजा आता है तो इस वीडियो के अंदर हम ना दो प्रोजेक्ट्स बनाएंगे क्योंकि एक प्रोजेक्ट से कांटेक्ट एपी को समझना बहुत ही डिफिकल्ट है दो प्रोजेक्ट्स इसलिए क्योंकि आप दो कोड वर्जन देखोगे वर्जन तो नहीं का सकता कोडिंग स्टाइल देखोगे किस तरह से देखा जाता है और इसके बाद आपको कोई कांटेक्ट एपी का वीडियो देखने की जरूर नहीं है और हां कांटेक्ट एपी के लिए अगर आपने पहले से कोई वीडियो वगैरा देख रखें हैं थोड़ा बहुत कुछ सिख रखा है हटा दो सर दिमाग से एकदम एम्टी कैनवस चाहिए तब जाकर हम हमारा कम कर पाएंगे थोड़ा सा हमारे स्पेस लगा ले वरना आंखें वापस से हमारी एकदम लाल हो जाएगी ठीक है जी हां बड़े फॉर्मली पड़ा था ऐसे लगता है मैं अपने साथ में बैठ के किसी को पढ़ा रहा हूं हिंदी चैनल पे ऐसी फूल होती है तो चलिए 1000 कमेंट्स आ चैलेंज है प्लीज फटाफट से स्टार्ट कर दीजिएगा मैं आपको पहले बेसिक बताता हूं की हम कहां से स्टार्ट होंगे और एक्चुअली में बनाएंगे क्या और क्यों वो जरूरी है वो सब तो चलिए स्क्रीन शेर करता हूं आपके साथ तो ये ए गए हम बेसिक बनाने क्या जा रहे हैं ये बनाने जा रहे हैं बड़ा ही बेसिक सा है थीम टैगलर है आपको लगेगा अरे सर ये तो बहुत ही बेसिक था लेकिन बड़ा इंटरेस्ट प्रोजेक्ट है यह कुछ नहीं लाइट मोड डार्क मोड है अब आप कहेंगे सर ये तो 5 मिनट में बन जाएगा लेकिन लेकिन कॉन्टेक्स्ट एपी जैसे आप इंट्रोड्यूस करते हो ना कुछ भी पांच मिनट में नहीं होता और ये प्रोजेक्ट ले रहा हूं इसीलिए मैं इसको समझा पाऊंगा अगर मैं यहां पे कोई ए कॉमर्स से कोई भी परिसर प्रोजेक्ट ले लेट ना आप 5 दिन इस चैनल पे बैठे रहिए लेकिन आपको एक भी दिन कांटेक्ट नहीं समझ में आएगा हां इस बात की गारंटी है ये अपने आप में एक बड़ा इंटरेस्टिंग और चैलेंजिंग ऑप्शन है तो चलिए सबसे पहले स्टार्ट करते हैं की सपोज करिए आ मैंने बनाया है यहां पे कार्ड ठीक है अब मैंने ये मेरी अप है अब इस अप के थ्रू मेरे को इस कार्ड के अंदर कोई डाटा पास करना है ठीक है तो इसको हम बनाते भी जाते हैं साथ के साथ में तो ये तो हो गया हमारा ये लीजिए अप सर्च क्लोजिंग ठीक है थोड़ा सा दिखने में हां आप देख रहा है ये हो गया हमारा अप ठीक है तो ये तो ए गया हमारे पास अप का ओके कोई प्रॉब्लम नहीं है ये आया हमारे पास में कार्ड तो ठीक है आपने कार्ड कंपोनेंट बनाया तो ये लीजिए हमने कार्ड कंपोनेंट बना दिया कैपिटल सी से बनाएंगे वरना ए जाएगी ठीक है अब इसके अंदर मैं आपको डाटा पास करना था तो बहुत ही आसन था ऐसा कोई कॉम्प्लिकेटेड नहीं था जैसे मैं यहां पे एक डाटा पास कर देता हूं तो मैंने बोला टाइटल जो है या फिर यूजर नाम पास कर देते हैं थोड़ा अच्छा रहेगा समझना में यूजर नाम आपने इसको दे दिया की यूजर नाम है आपके पास में आ ओबवियस सी बात है चाय तो पास करेंगे तो ये हमने दे दिया अब देखिए इससे हुआ क्या की यहां पे कार्ड के अंदर जो भी वालुज ये एक्सेप्ट कर रहा था तो प्रॉप्स की जैसे एक्सेप्ट कर रहा था कोई दिक्कत ही नहीं और उसने यहां पे प्रिंट कर दिया है हितेश ठीक है तो अभी तक तो इतना कम हो रहा था अब ये कार्ड एक्चुअली में जो है ये पूरा का पूरा मटेरियल जा रहा था हमारे इस अप के अंदर ठीक है यहां तक कोई प्रॉब्लम नहीं थी अब क्या है आपके पास एक और नया सिनेरियो आया की ठीक है इतना तो कम हमारे पास चल रहा है अभी कोई दिक्कत नहीं है लेकिन अब मेरे पास ये जो अप है अबकी बार में बना रहा हूं सपोज करिए कोई एडमिन डैशबोर्ड बना रहा हूं किसी वेबसाइट के लिए तो क्या प्रॉब्लम आई है की देखिए सबसे पहले आप एक कंपोनेंट बनाया आपने इस तरह का जिसका नाम था आपके पास डैशबोर्ड तो ऑब्वियस सी बात है डैशबोर्ड लिखेंगे यह लीजिए डैशबोर्ड अब डैशबोर्ड कैसा दिखता है डैशबोर्ड कैसा दिखता है डैशबोर्ड कुछ ऐसा दिखता है ठीक है इस डैशबोर्ड के अंदर दो पार्ट्स हैं एक पार्ट है हमारा लेफ्ट साइड नेवीगेशन बार और एक साइड है टॉप ये राइट साइड बार लेफ्ट साइड बार और राइट साइड बार इस राइट साइड बाहर के अंदर भी दो पोर्शन हो रखें हैं एक पोर्शन ये हो रखा है और एक पोर्शन ये हो रखा है ये सब कंपोनेंट है अपने आप में ठीक है और अब क्या है यहां पर आपके पास एक कार्ड है हां जी वही से कार्ड उसे कर रहे हैं हम तो ये आपके पास कार्ड है जहां पे आपको यूजर नाम डिस्प्ले करना है अब कैसे डिस्प्ले करोगे और जो यूजर नाम है वो आपके पास चाय के अंदर रखा हुआ है ठीक है ये चाय का जो कंपोनेंट है जरूरी नहीं की यही रखा हो हो सकता है कोई स्टेट के अंदर हो ठीक है मां लिया स्टेट के अंदर वेरिएबल है तो इस कार्ड के अंदर डाटा पास कैसे करोगे देखिए सबसे पहले तो डैशबोर्ड के पास जाओगे उसे डैशबोर्ड को बोलोगे की कम करो ये लो टाइटल और यह लो हमारा टाइटल जो है चाय है ठीक है अब डैशबोर्ड के अंदर हमने एक लेफ्ट साइड भी बना राखी है कंपोनेंट एक राइट साइड भी बना राखी है चलिए इसको भी बनाते हैं तो यह हो गया हमारा लेफ्ट साइड ओके और इसी तरह टॉप और बॉटम ठीक है इसको टॉप ले लेते हैं वाटर लेने के भी जरूर नहीं क्योंकि आप समझ ही गए हैं अब तो ये हमने ले लिया टॉप कंफर्ट आप कंपोनेंट और उसके अंदर फिर हमारा कार्ड है तो यह लीजिए वही से कार्ड ही मां लीजिए बट वही एग्जैक्टस इन कार्ड हम उसे कर रहे हैं पर इस कार्ड के अंदर तो डाटा आया नहीं क्योंकि एक्चुअली में डाटा तो डैशबोर्ड के पास है तो डैशबोर्ड से कहां जाएगा यह जो डाटा है हमारे पास में टाइटल जो है चाय तो पहले देखिए अप से अपने पास कर डैशबोर्ड में डैशबोर्ड से पास करोगे राइट साइड वाले में राइट साइड वाले से पास करोगे टॉप में और टॉप से पास करोगे फाइनली कार्ड में तब आपके पास कार्ड में डाटा आएगा पर हमने ये देखा की राइट वाले को जरूर थी बट उसको लेना पड़ा क्योंकि आगे पास करना है ना अब उसके अंदर क्योंकि ये कंपोनेंट है इसलिए हमें उसको पास करना पड़ा अगर इंडिविजुअल अलग से भी कहानी होता तो डाटा कोई पास करने का तरीका ही नहीं है हमारे पास रिएक्ट का डिजाइन ही यही है तो प्रॉप्स के अंदर प्रॉप्स प्रॉप्स के अंदर प्रॉप्सी पास करने पढ़ेंगे कोई और ऑप्शन है ही नहीं और इसी तरह से हम कम कर रहे थे जब रिएक्ट स्टार्टिंग इनिशियल डेज में इनफैक्ट कई ऐसे प्रोजेक्ट है बट ऑब्वियस सी बात यह थोड़ा यूनोप्टिमाइज अप्रोच टेबल पर किसी को भी पता ग जाएगा ऐसी कोई बात है ही नहीं इसके अंदर सबको पता ग जाएगा की इसके अंदर यूजेस है ही नहीं फिर भी आप एक डाटा हैंडल कर रहे हो इसके अंदर भी यूजर्स नहीं है डाटा हैंडल कर रहे हो बट सिर्फ इसलिए हैंडल कर रहे हैं हम क्योंकि ये डाटा आगे पास करना है ठीक है लेकिन एक बटर अप्रोच हो शक्ति है हां जी बिल्कुल हो शक्ति है कैसे हो शक्ति है की मैं अगर यहां पे एक टाइटल बना देता हूं इस तरह से यह सपोर्ट करिए हमारा एक ग्लोबल ऑब्जेक्ट है इस ग्लोबल ऑब्जेक्ट के अंदर क्या ए गया आ सपोज करिए एक टाइटल होता है यहां पे है जिसकी वैल्यू होती कुछ चाय ले ली तो क्या ऐसा कुछ मेकैनिज्म हो सकता था की यह जो मेरे पास चाय है ये डायरेक्टली यहां पे आके और इससे पूछ लेट अगर ये साड़ी वालुज तो मुझे पास करने की जरूर नहीं पड़ती हांजी तो इसको हम एसोसिएट कर देते हैं इसके साथ में तो ये लीजिए तो अब क्या है की हमारे पास ये कार्ड जो है डायरेक्टली इस ग्लोबल कॉम्पोनेंट्स से या जो भी वेरिएबल वाली फाइल है यहां से सब कुछ पूछ लेट और मेरा कम आसन हो जाता तो ना इधर पास करने की जरूर थी यह चीज है तो यहां से भी है जाति यहां भी पास करने की जरूर नहीं थी यहां से भी है जाति है साड़ी चीज और डैशबोर्ड में मैं कभी पास करना है फिर अगर डायरेक्टली कॉल हो सकता है डायरेक्टली अगर उसके बड़े में अवेयर हो सकता है तो यहां से हो शक्ति है इनफैक्ट आपको जरूर तो यहां भी नहीं पास करनी थी बट एडम करता हूं मैं चलिए की अप ने कोई डेटाबेस से रिक्वेस्ट मेरी और वहां से यूजर नाम लिया तो ठीक है आपने बोला लेकिन अप एक्चुअली में अच्छा होता था की अप भी कुछ ऐसा ही कम करती की यहां से डायरेक्टली इसके अंदर पास कर देती डाटा है की नहीं अगर अप भी इसी तरह से डायरेक्टली पास कर देती तो मुझे कोई टेंशन वाली बात नहीं थी की आपके पास डाटा आया आप टॉप में पास ही मत करो तो आप इसको क्या करो सीधा इसको जो और बोलो की आप भी यहां से ये डाटा हटाओ हां डाटा पास करोगे लेकिन क्रॉप में नहीं आप डायरेक्टली कंपोनेंट लेवल से यहां डाटा पास कर दो तो सिर्फ एक ग्लोबल फाइल बना के हमारे पास कितना एडवांटेज है की हमें डाटा इधर से उधर फालतू फैलाना नहीं है और ये जो पूरा रायता हमारा फैला है ये प्रॉब्लम में नहीं आता तो जो कॉन्सेप्ट है इसको बोला जाता है प्रोब ड्रिलिंग बट क्या है की प्रोब ड्रिलिंग से एक्चुअली में समझ में कुछ नहीं आता की हो क्या रहा है तो ये जब कभी इंटरव्यू को इस तरह से आप एक्सप्लेन करोगे तो ऑब्वियस सी बात इंटरव्यू के हर चीज आराम से क्रैक करोगे बड़ी पोस्ट भी क्रैक करोगे एचडी 2 3 सब ठीक है अब इतना तो समझ में ए गया की ठीक है तो इसके लिए क्या-क्या अवेलेबल है अब इसके लिए अक्सर लोग कहते हैं की इसके लिए ही अवेलेबल है आपकी कांटेक्ट एपी सही बात है लेकिन थोड़ा और एडिशनल इनफॉरमेशन तो होना ही चाहिए ना क्योंकि चाय और कोर्ट पे हो और इससे ज्यादा इंडीप कहानी नहीं होता है ठीक है तो कांटेक्ट एपी अकेला नहीं है एक्चुअली में और भी लाइब्रेरीज है जो ये कम कर रहे हैं क्योंकि ये कोई प्रोपराइटरी प्रॉब्लम रिएक्ट की प्रॉब्लम थोड़ी ना है व्यू में भी थी और ये सब रिएक्ट वगैरा पॉपुलर है उससे पहले एक बैकबोन जीएस भी चला था उसके अंदर भी यही से प्रॉब्लम थी तो कांटेक्ट टेप है तो क्या है देखिए कांटेक्ट एपी एसोसिएटेड है पूरे और पूरे रिएक्ट से ये रिएक्ट के बाहर एक्जिस्ट नहीं करता है लेकिन क्योंकि प्रॉब्लम सिर्फ रिएक्ट की नहीं है तो और भी चीज एक्जिस्ट करती होगी जो एग्जैक्ट से प्रॉब्लम को सॉल्व करती है और इस का नाम हमारे पास रिडक्शन है हां जी रिडक्स भी हम देखेंगे इसके अंदर तो रिडक्शन का कम ये है की ये जो स्टेट मैनेजमेंट है इसको कम में करना यानी की जो डाटा इधर से उधर पास हो रहा है उसका एक ऑर्गेनाइज वे में पास करना अब रिडक्स की क्या है कई वर्जंस आपको दिखेंगे जैसे रिडक्शन तो अकेला एक स्टैंडर्ड ऑन लाइब्रेरी है लेकिन रिएक्ट रिडक्शन के लिए क्या होता है की रिएक्ट के अंदर कम करना है तो हमें हमारे पास है रिएक्ट रिडक्शन तो इसको भी हम उसे कर लेते हैं इनफैक्ट इस रिडक्स का ही एक और इजी और वर्जन आजकल मार्केट में है जिसको बोला जाता है रिडक्शन टूल किट है और इसी को शॉर्ट फॉर्म में आप सनोज कई जगह आर टी के हां जी रेडॉक्स टूल किट तो कई लोग फैंसी होने के लिए रिडक्शन बोल देते हैं अच्छा रिएक्ट रिकेट्स की तो यह कहानी है ठीक है अच्छा और भी है क्या इस तरह के हां जी और भी स्टेट मैनेजमेंट इस तरह के कम है जैसे मैंने काफी पहले एक वीडियो बनाया था इंग्लिश चैनल पर है जस्ट स्टैंड तो जस्ट स्टैंड भी एक इजी लाइब्रेरी है स्टेट मैनेजमेंट के लिए और भी है और भी बहुत लाइब्रेरीज हैं हम सर दिन बैठकर उनको काउंट कर सकते हैं बट कोई फायदा नहीं है ज्यादातर आप रिडक्स पर कम करोगे या कोई अगर नया स्टार्टअप है या जो नया कोड बेस वगैरा लिखा जा रहा है उसमें हो सकता है बस स्टैंड उसे कर लो लेकिन एक बार आपको कॉन्टैक्ट्स अप है समझ में ए गया तो ऑलमोस्ट इजीली आपको रिडक्शन और रिडक्शन किट भी समझ में ए जाएगा और ये समझ में ए गया तो जस्ट स्टैंड भी समझ में ए जाएगा इनके लिए हर बार ट्यूटोरियल देखने की जरूर नहीं पड़ेगी ठीक है अब वैसे तो मैं सोच रहा था इसका एक अलग से वीडियो कर लेने की इतना की व्हाट इस स्टेट मैनेजमेंट वगैरा तो हम सोच रहे हैं की यही पर कर लेने इस वीडियो को सेपरेट पार्ट में या फिर चलने दे अभी चलिए चल नहीं देते हैं वीडियो को थोड़ा लॉन्ग कर लेंगे ठीक कोशिश करेंगे की हम इस वीडियो को चाप कर लेने एडिटर से कटवा लेने यहां पे और एक सेपरेट वीडियो अलग से कस्टम लॉन्च करते हैं ओके अब आते हैं हम यहां पर इसको तो हम करते हैं क्लीन और दी यहां से इसको हटाते हैं वापस चलते हैं अब एक सबसे पहले एक नया प्रोजेक्ट बनाएंगे हम उसे नए प्रोजेक्ट के अंदर ये सर का सर कम करेंगे एक बेसिक अप्रोच से अच्छा इससे पहले मैंने आपको एक चीज तो बता ही नहीं वो तो बताने जरूरी है कांटेक्ट एपी तो गूगल पे जाइए और लिखिए कांटेक्ट एपी और ये आपको रिएक्ट नहीं लगे इसी पे नहीं देखेंगे इसी एक लाइन को समझना के लिए नहीं इतना टाइम लगता है हां जी इसीलिए तो प्रॉब्लम है की इसका डॉक्यूमेंटेशन इतना बेस्ट नहीं है इसलिए लोगों को टाइम लगता है सबको समझना के लिए की बस एक उसे कॉन्टैक्ट्स यहां दे दिया है और ये साड़ी बस हां आप देखेंगे तो बस इतना सही है यूजेस ये रहा पता लगा लो अगर आपको लगता है तो किस तरह से थीम है ये भी एग्जांपल थीम कर देते हैं बट ये वाला एग्जांपल इनका समझ में नहीं आता है थोड़ा अपडेट किया जा सकता था यहां पे तो चलिए अब हम बनाते हैं अपना एक प्रोजेक्ट तो नम क्रिएट अब तक प्रोजेक्ट का नाम क्या दे इस प्रोजेक्ट नंबर्स के साथ देंगे अपने और रिएक्ट के अंदर और जावास्क्रिप्ट के अंदर और बस इसमें तो हम तेल वगैरा कुछ भी इंस्टॉल नहीं करने वाले इसके अंदर चलते हैं इंस्टॉल चलिए होइए इंस्टॉल होइए फटाफट उसके बाद हम अच्छा एडिशनल कुछ भी आपको इंस्टॉल करने की जरूर नहीं है जो कांटेक्ट है यह कांटेक्ट के साथ में आता है यह स्टेट मैनेजमेंट ना इतना आम प्रॉब्लम था की रिएक्ट में ऐवेंंचुअली सोचा दे वन पर नहीं था ऐवेंंचुअली सोचा की ऐसा कुछ हमारे अंदर भी होना चाहिए डायरेक्टली स्टेट मैनेजमेंट लाइब्रेरी को और सस्टेनेबल बनाने के लिए तो इसलिए उन्होंने डायरेक्टली वहां पे इसको एड कर दिया है और कर लेते हैं देव को रन और देख लेते हैं ये रहा हमारा प्रोजेक्ट ठीक है कोई दिक्कत नहीं है अच्छा अब इसको देखते कैसे हैं सोचते कैसे हैं वो सबसे इंपॉर्टेंट है देखिए कांटेक्ट का क्या है आप कभी भी किसी भी प्रोजेक्ट में बाद में भी इंजेक्टर कर सकते हैं और पहले भी कर सकते हैं अगर आपको पता है आपका प्रोजेक्ट थोड़ा सा परिसर होने वाला है या गुड प्रैक्टिस वगैरा फॉलो करनी है तो ऑलमोस्ट सभी रिएक्ट के प्रोजेक्ट में स्टेट मैनेजमेंट लगता है ऑलमोस्ट सभी मेजर जरूरी नहीं है की सब में हूं बट ऑलमोस्ट सभी में लगता है स्पेशली अगर आपको सर्वर से डील कर रहे हो एपी से डील कर रहे हो थोड़ा परिसर प्रोजेक्ट है रिज्यूम में एड लाइक है उसमें कोई ना कोई स्टेट मैनेजमेंट होता ही है ओके तो अभी चलते हैं हम यहां पे अच्छा अब इसको डील कैसे करना है देखिए सोर्स के अंदर हमारे पास जो है वो है ठीक है कोई दिक्कत नहीं है अब हम सबसे पहले क्या करेंगे इस प्रोजेक्ट को पहले बियर मिनिमम बनाते हैं तो app.js के अंदर जाएंगे ये सब हमें स्टेट वगैरा की जरूर नहीं है और इसको हम मिनिमाइज करके रिमूव करेंगे यहां से और सबसे जरूरी स्टेटमेंट लिखेंगे हम यहां पर हा वन के अंदर रिएक्ट विद चाय और शेर इस इंपॉर्टेंट क्योंकि आप लोग शेर लिखना जरूरी मैसेज का चाहे तो स्क्रीनशॉट ले लो पर शेर करना जरूरी है ठीक है ओके इतना कम तो हो गया अब देखिए कैसे किस तरह से हैंडल करते हैं हमें हैंडल करना है कॉन्टेक्स्ट एपी को कांटेक्ट मतलब एक ग्लोबल वेरिएबल बना रहा हूं उसे वेरिएबल के अंदर सर डाटा ए जाएगा बट क्योंकि रिएक्ट है स्टेट हमने देखा इतनी आसानी से अपडेट नहीं हो जाता है अगर होता तो मैं डायरेक्टली एक ग्लोबल डॉट वेरिएबल नाम से फाइल बना देता है डॉट जीएसएमए से वालुज ले लेट बट वो अच्छा से टैक्स नहीं है आप ऐवेंंचुअली जा के इस से प्रॉब्लम में फैंस जाओगे जो रिएक्ट सॉल्व करने की कोशिश कर रही है की स्टेट मिस मैच है सिंक्रनाइजेशन नहीं है इसीलिए हां ये आइडिया आपका बिल्कुल ठीक है की ग्लोबल फाइल बना लो ग्लोबल जस और सी के अंदर सारे वेरिएबल रख लो रख सकते हो लेकिन आपका प्रोजेक्ट हर जगह से प्रॉब्लम में ए जाएगा क्योंकि कोई भी वैरियेबल्स को अपडेट कर देगा और जहां नहीं चाहते वहां भी अपडेट हो जाएगा ये एक प्रॉब्लम आता है तो सबसे पहले सोर्स में न्यू फोल्डर एक बनाया और इस फोल्डर का नाम हम रखेंगे यहां पे कांटेक्ट इसी नाम से ज्यादातर रखा जाता है सच कोई नमिंग रिस्ट्रिक्शन नहीं है की फ्रेमवर्क नहीं है लाइब्रेरी है तो नमिंग कन्वेंशन इतना ज्यादा स्ट्रांग नहीं होता है ठीक है तो सबसे पहले यहां पे हम एक नई फाइल बनाएंगे जी फाइल का नाम होगा हमारे पास में यूजर कांटेक्ट ग्स एक्स नहीं है यहां पे सिर्फ जैसा क्योंकि इसमें पूरे और पूरे जावास्क्रिप्ट ही होती है अक्सर अब ये जो कॉन्टेक्स्ट है ना अभी हम दो फाइल्स के अंदर बनाएंगे ब्रेक करके यूजर कांटेक्ट है इस तरह से देखिए लॉगिन का भी कॉन्टेक्स्ट हो सकता है प्रोडक्ट्स का भी कॉन्टेक्स्ट हो सकता है कार्ड का भी कांटेक्ट हो सकता है मल्टीपल कांटेक्ट आप बना सकते हो ऐसे आगे वाले जितने प्रोजेक्ट्स ऑन सब में मैंने कांटेक्ट रीडर स्कूल बहुत कुछ उसे कर है तो आपको रिवीजन होता रहेगा चिंता मत कीजिए ठीक है तो सबसे पहले क्या करना है हम क्या करते हैं रिएक्ट को इंपोर्ट कर लेते हैं ये लीजिए रिएक्ट फ्रॉम और रिएक्ट ये लीजिए ओके अब क्या करना है अब बनाना है आपको एक कांटेक्ट कहां से मिलेगा इसी रिएक्ट के अंदर ही आपको कांटेक्ट मिल जाता है तो आप जैसे देखेंगे डॉट कांटेक्ट यहां पर आपको मिल जाएगा क्रिएट कांटेक्ट यह क्रिएट हो गया आपका कांटेक्ट अब यह क्या है एक मेथड है जी तरह से उसे स्टेट वगैरा मेथड होते थे वही मेथड है इसको स्टोर कर लो एक वेरिएबल के अंदर ये लीजिए इसको बोल देते हैं यूजर कांटेक्ट स्टोर में इस वेरिएबल को आप आउटपुट में थ्रो कर दो ठीक है एक्सपोर्ट डिफॉल्ट और यूजर कांटेक्ट तो एक बात बताओ अभी तक जो हमने कम किया है इसमें कोई दिक्कत है क्या कमेंट्स में बताओ मुझे फटाफट हनी तो नहीं चाहिए क्योंकि आज सच कुछ रॉकेट साइंस हमने किया ही नहीं है एक वेरिएबल बनाया और उसको थ्रो कर दिया आउटपुट और हमारा कॉन्टैक्ट्स मिल गया है हमें ठीक है ये तो हो गया हमारा पार्ट वन अगर आप नोट्स भी लिख रहे हो तो स्टेप में इसके नोट्स लिख लेना ठीक है जी अब क्या होता है जैसे आपने कॉन्टैक्ट्स बनाया तो कॉन्टैक्ट्स क्या होता है आपको एक मेजर चीज देगा प्रोवाइडर क्योंकि कांटेक्ट है क्या आपको वेरिएबल प्रोवाइड ही तो कर रहा है तो हर एक कॉन्टेक्स्ट एक प्रोवाइडर होता है तो यूजर कॉन्टैक्ट्स भी अपने आप में एक प्रोवाइडर है जो सारे हम क्या करेंगे और ऑफ डी दे इसको एक रैपर लगाएंगे जैसे आपने देखा होगा कई जगह हम देव को भी आज एन रैपर उसे करते हैं की ये हमारा हो गया इस तरह फ्रेगमेंट्स को भी उसे करते हैं इस तरह से और इसके अंदर जो भी लिखने हैं तो हम क्या करेंगे जाके जितने भी ये हैं अब यहां पे सपोज करिए आप अलग-अलग कॉम्पोनेंट्स बना रहे हैं जैसे सपोज करिए लॉगिन बना रहे हैं ये लीजिए लॉगिन कंपोनेंट हो गया एक आपका कोई कार्ड कंपोनेंट हो गया या उनके अंदर भी कोई कंपोनेंट हो सकते थे कार्ड के अंदर हो सकता है आपके पास यहां पे जैसे हमारे पास सपोज करिए डैशबोर्ड था तो हो सकता है डैशबोर्ड आपके पास ए जाए या डाटा नाम से कुछ ए जाए जो भी आपको रखना है हम इन सभी को रेप कर देंगे हमारे इस यूजर कांटेक्ट से कुछ इस तरह से तो जैसे ही मैंने इसको रेप कर दिया इस तरह से तो क्या होगा ये बन जाएगा एक प्रोवाइडर प्रोवाइडर से मेरा मतलब है अब कोई भी इसके अंदर जो कंपोनेंट है उन सारे कॉम्पोनेंट्स को इस ग्लोबल यूजर कांटेक्ट का एक्सेस मिल जाएगा ये कॉन्टैक्ट्स क्या है कॉन्टैक्ट्स को ग्लोबल वेरिएबल की तरह ही मानो के साथ और कुछ नहीं है ठीक है तो एक बार रिपीट करता हूं कुछ भी नहीं है बहुत बेसिक सा है कांटेक्ट स्टेप का एक बार आपका बन गया तो इस कॉन्टैक्ट्स के साथ एक प्रोवाइडर भी बनाना पड़ता है प्रोवाइडर क्यों क्योंकि डाटा प्रोवाइड करेगा उसको उसे कैसे करेंगे इस तरह से टॉप लेवल पे हम इसको लगा देंगे ताकि अंदर जितने भी हैं और इसके अंदर फर्डर और जितने आप कॉम्पोनेंट्स बनाना चाहे बना सकते हो वो कॉम्पोनेंट्स डायरेक्टली यूजर कॉन्टैक्ट के थ्रू सारे स्टेटस का एक्सेस ले सकते हैं हां जी बस यही कहानी है तो अभी तक तो हमने देखा इतना कुछ ज्यादा परिसर ठाणे हमने यूजर कॉन्टैक्ट्स बना लिया अब इसके पास इसके बाद हमें क्या करना पड़ेगा एक प्रोवाइडर भी बनाना पड़ता है इसको बनाने के दो तरीके होते हैं अभी हम फर्स्ट तरीका ही देख रहे हैं फिर मैं आपको एक शॉर्ट वे भी बताऊंगा इसका ठीक है ये हो गया हमारा यूजर कांटेक्ट प्रोवाइडर और यहां पर डॉट जेएस अभी तक जो tha.gs था क्योंकि वहां पर कोई जीएस रिटर्न नहीं कर रहे थे लेकिन जैसे आपने कांटेक्ट प्रोवाइडर बनाया अब हमें जीएस बनाना पड़ेगा क्यों अभी तो जस्ट बताया था की जो हम फ्रेगमेंट्स ले रहे थे टॉप लेवल पर उसको रखना पड़ेगा तभी तो आपके सारे वैरियेबल्स में एक्सेस हो पाएगा जीएस लिखने थे जैसे हम इसीलिए हमने इसको जीएस बनाया है तो सबसे पहले क्या कम है रिएक्ट ले आओ ठीक है जी रिएक्ट तो ले आएंगे तो इसमें दिक्कत वाली बात ही नहीं है उसके बाद आप अपना यूजर कॉन्टैक्ट्स भी ले आओ वो भी ले आएंगे जी कोई दिक्कत है ही नहीं ठीक है जी इतना तो ए गया अब क्या करो एक यूजर कांटेक्ट प्रोवाइडर यह हमने बनाया यूजर कांटेक्ट प्रोवाइडर यह क्या है कुछ नहीं है जी एक मेथड है और कुछ भी नहीं है इससे ज्यादा ठीक है इतना ही बेसिक हमारा एक मेथड ए गया है अब इस मेथड को एक्सपोर्ट भी कर लो ठीक है जी एक्सपोर्ट भी कर देंगे इतना कौन सा रॉकेट साइंस का कम है अभी तक कोई दिक्कत नहीं थी कोई दिक्कत नहीं है अब मैं क्या छह रहा हूं की अगर आपको याद हो तो हमने कुछ आउटलेट वगैरा सीखे थे की जो भी वालुज वो हेडर एक आईटी इस रखो फूटर आज आईटी इस रखो और आउटलेट जो भी है उसे डिस्प्ले कर दो इस तरह का एक और कॉन्सेप्ट होता है की आपके पास जो भी प्रॉप ए रहे हैं चिल्ड्रन उसको आज आईटी इस आप यहां पे उसे कर लो कैसे उसे करते हैं वो भी बताता हूं अच्छा चिल्ड्रन जो है ना ये कुछ मैजिकल नहीं होता है जैसे आप अपना देव वगेरा देते हो बस वही चल रहा है एक तरह से कुछ चिल्ड्रन एक जेनेरिक नाम है की जो भी आपके पास ए रहा है उसको आज आईटी इस आगे पास कर दो हां बस इसलिए एक जेनेरिक नाम हम उसे करते हैं आगे सच कोई जरूरी नहीं है की इसको नाम हम चिल्ड्रन नहीं दे बट क्योंकि स्टेटस वगैरा सब में ऑलरेडी उसे होता था तो हमने भी सोचा की यही उसे कर लेते हैं ठीक है अब हमें करना क्या है हमें क्या देना है इस तरह से कुछ वैल्यू देनी है रिटर्न और रिटर्न के अंदर हम क्या करेंगे देखिए ये हमने दिया आगे आईटी इसे अब जो मैंने आपको बताया था एक्जेक्टली वो का वो कम करेंगे मैंने आपको बताया था की हम रेप करेंगे इस तरह से और उसके अंदर क्या देंगे उसके अंदर जो भी मेरे पास ए रहा है वो चिल्ड्रन हम आज आईटी इस रेंडर करवा देंगे अब इसके अंदर हो सकता है कार्ड कंपोनेंट आए हो सकता है कार्ड के अंदर डैशबोर्ड है डैशबोर्ड है चिल्ड्रन दिखने का मतलब यही था की जो भी ए तू आगे आईटी इसे लिख दो ठीक है पर हमने ये देखा था की उसको रेप करना पड़ेगा रैपिंग ही तो प्रोविजनिंग है तो ये जो यूजर कांटेक्ट है ना ये सिर्फ अकेला यहां पे लिखने से एक्चुअली में कम नहीं होता है क्योंकि इसकी एक आपको वैल्यू एक्सेस करनी पड़ती है एक प्रॉपर्टी तो वो प्रॉपर्टी क्या है कांटेक्ट हां लिटरली प्रोवाइडर ही बोलते हैं उसको ये प्रोवाइडर हमने यहां पे पास कर दी लेकिन क्या है सिर्फ यहां पे आप इस तरह से कांटेक्ट प्रोवाइडर पास करोगे तो एक्चुअली में कम नहीं हो पाएगा क्योंकि ठीक है प्रोवाइड तो कर दिया लेकिन क्या चीज एक्सेस करेगा ये कोई डाटा भी तो देना पड़ेगा ना साथ में हां जी तो डाटा कैसे देंगे हम क्या करते हैं डाटा के लिए सिंपली ओके रिटर्न यहां पे ए गया है ठीक है तो हम यहां पे जाते हैं और एक हम यहां पे स्टेट बना लेते हैं अब मैंने एक नाम दे दिया यूजर और इसके अंदर एक मेथड दे दिया सेट यूजर और इसको हम ले लेते हैं है आप ऐसे भी लिख सकते हैं कोई प्रॉब्लम नहीं है वहां पर उसके अंदर वैल्यू क्या नल दे देता हूं आप चाहे तो स्क्वायर ब्रैकेट वगैरा या जो भी कुछ आपको देना है वो आप दे सकते हैं इस तरह से कम हो जाएगा अब क्या है देखिए एरर को देखते हैं ये क्या का रहा है जीएस एलिमेंट यूजर कॉन्टैक्ट्स और प्रोवाइडर हस नो कॉरस्पॉडिंग क्लोजिंग टाइम ठीक है जी आपके पास क्लोजिंग टैग नहीं है तो हम यहां पे पहले क्लोजिंग तगते हैं ठीक है जी अब ये तो अभी तक सेटिस्फाइड है लेकिन प्रॉब्लम तो वही है ना की आपने प्रोवाइडर्स से रेप तो कर दिया बट एक्चुअली में कौन सी वैल्यू को एक्सेस दे रहे हो वो भी तो आपको बताना ही पड़ेगा तो उसके लिए हमें प्रोवाइडर के अंदर एक प्रॉपर्टी मिलती है प्रॉपर हां जी यहां पे भी आप प्रॉपर पास कर रहे हैं एक तरह से वो है वैल्यू तो जो भी आपको डाटा पास करना हो आप इसको पास कर सकते हैं अब मैं क्या है सिर्फ वैल्यू इस तरह से पास नहीं करूंगा एक ऑब्जेक्ट पास कर दूंगा इसके अंदर मेरा जो मां चाहे मैं डाटा दे सकता हूं मैं यूजर का एक्सेस भी यहां से दे रहा हूं मैं सेट यूजर का भी एक्सेस दे रहा हूं और भी आपके पास पांच चीज हैं तो पांच छह चीजों का एक्सेस दे दो ठीक है यह हो गया हमारा ऑलमोस्ट आधा कम की जी तरह से हमारा ये कम होता है और ठीक है मोस्टली हमारा कम हो गया यहां पे की ठीक है यही है आपका सेटअप तो देखिए ज्यादा कुछ था नहीं समझना लायक चीज थी बट ये तो बड़ा बेसिक था क्रिएट कांटेक्ट और बस अब नेक्स्ट टाइम मिलेंगे तो ऐसा स्पीड में बनाएंगे प्रोवाइडर भी अब नेक्स्ट टाइम बताएंगे तो स्पीड में बनेगा की जो भी आपको एपी कॉल्स करनी है जो करनी है यहां पे कर लो और यहां के बाद जो एक्सेस मिल गया है वो सीधा एक्सेस यहां पे थ्रोइंग कर दो ठीक है वेरिएबल बना देंगे स्टेटमेंट स्टोर कर लेंगे उसे ऑफ फैक्टर या जो लगाना लगाइए कोई दिक्कत नहीं है और सीधा का सीधा यहां पे स्टोर करके ये लीजिए वैल्यू अच्छा ये तो कम हो गया की हमारा स्टोर बन गया है सबके पास ए गया है लेकिन ये स्टोर का एक्सेस कैसे मिलेगा देखिए कुछ लोग स्टोर का एक्सेस डायरेक्ट मैं डॉट जीएस में दे देते हैं कोई आपत्ती वाली बात नहीं है कुछ लोग ऍप डॉट जेएस में देते हैं कोई आपत्ती वाली बात नहीं है वहां पे भी से ही कम होगा कम क्या होगा की आपको पहले ये यूजर कॉन्टैक्ट्स प्रोवाइडर ना इसको इंपोर्ट करना पड़ेगा हम ऑटो इंपोर्ट पर थोड़ा सा लाइक करेंगे क्योंकि ठीक है कर सकते हैं और ये सब चीज यहां से हटा देते हैं है तो अब आप क्या करो सीधा लेकर आओ यूजर कांटेक्ट यूजर शॉर्ट में है क्या यूजर देखते हैं एक बार एक्सपोर्ट कैसे किया मैंने नई कैपिटल में है तो मिलन तो चाहिए मुझे एक्सेस यूजर कांटेक्ट प्रोवाइडर यह लीजिए ऑटो इंपोर्ट भी हो गया तो अगर ये यहां पे आपने ले लिया है तो ऑब्वियस सी बात है यहां पे लेंगे अच्छा आप कई लोग क्या करते हैं इसमें एक और सिंटेक्स मैं आपको बताऊंगा कई लोग यूजर कॉन्टैक्ट्स को है ना दूसरे तरह से एक्सपोर्ट करते हैं वो भी हम देखेंगे तो आप कई जगह ऐसा देखेंगे की यूजर कॉन्टैक्ट्स और यहां पे लिख रखा है उन्होंने डॉट प्रोवाइडर हां वो भी एक ही बात है वहां से फाइल से एक्सपोर्ट हो के यहां लिखो और फिर यहां पे देते हैं एक्सेस वैल्यू वगैरा जो देना है यहां पे देते हैं देखिए गलत कुछ भी नहीं है सबके अपने अपने उसे कैसे है मैं आपको दोनों उसे कैसे बताऊंगा इसके अंदर तो ये तो हो गया हमारा अभी यूजर कॉन्टैक्ट्स प्रोवाइडर ठीक है अब यहां पे एरर है ओके हस नो कॉरस्पॉडिंग क्लोजिंग टैग अच्छा क्लोजिंग टैग है बार-बार यहां कैसे शिफ्ट हो जाता है ठीक है ये ए गया अब मेरे पास क्या है की अप के अंदर मैं यहां पे जो भी यहां पे कंपोनेंट का लीजिए जो भी कंपोनेंट आप लेंगे वो कंपोनेंट के पास आपको डायरेक्टली एक्सेस मिलेगा ठीक है तो हम क्या करते हैं कुछ कॉम्पोनेंट्स बना लेते हैं जिससे की हमें एक्चुअली में पता ग जाए हम क्या-क्या करने वाले हैं तो पहले कंपोनेंट एक्चुअली मैं फोल्डर बना लेते हैं और फिर हम देखते हैं और दो मैं आपको बना के दिखाऊंगा तीन कर पांच आप बनाइएगा जिसमें आपको पता ग जाए की हां हम सब के अंदर से तरीके से एक्सेस लेते हैं तो ये लीजिए फोल्डर और इसका नाम रखते हैं कॉम्पोनेंट्स एक कंपोनेंट बनाते हैं अपना लॉगिन डॉट जेएस और एक बनाते हम प्रोफाइल बना लेते हैं profile.js तो एक में हम क्या करेंगे डाटा किस तरह से एक्सेस होता है वह देख लेंगे एक में डाटा किस तरह से सेंड होता है वो देख लेंगे तो दोनों ही हमारी यहां पे कहानी क्लियर हो जाएगी ठीक है तो हम लेते हैं आईएफसी रिएक्ट फंक्शनल कंपोनेंट लॉगिन का कंपोनेंट ए गया अब लॉगिन का कंपोनेंट ए गया तो ऑब्वियस सी बात है लोग इन वाली चीज भी चाहिए की लेकिन उससे पहले आपको सबसे पहले क्योंकि डाटा भेजना भी तो है तो कुछ चीज आपको इंपोर्ट करनी ही पड़ेगी देखिए एक चीज तो हम कम में लेने वाले हैं उसे स्टेट वो तो आपको पता होगा अब तक ठीक है एक हम यहां पे हक कम में लेते हैं जिसका नाम है उसे कांटेक्ट और इसी के साथ से ही आपका डॉक्यूमेंटेशन यहां से स्टार्ट होता है जो रिएक्ट वाला है उसे कॉन्टेक्स्ट होकर वहां से आप डायरेक्टली एक्सिस ले सकते हो लेकिन वो सेटअप वाला प्रोसेस भी है इसके अलावा क्या लेंगे हम अपना यूजर कॉन्टैक्ट्स भी ले आते हैं यूजर कांटेक्ट अब इस यूजर कॉन्टैक्ट को कैसे उसे करना है अभी बताते हैं कोई चिंता वाली बात ही नहीं है सबसे पहले क्या करो आप अपना हम एक कम करते हैं अपना यूआइडीएआइ डिफाइन कर लेते हैं ज्यादा टाइम नहीं लेंगे यू आई में इसको कर देते हैं देव बना देते हैं है और यहां पर यहां से और ठीक लेते हैं उसके अंदर लिख देते हैं और फिर हम क्या करते हैं इनपुट लेते हैं इनपुट यह लीजिए अब इस इनपुट के अंदर कुछ वालुज टाइप हमारा और क्या चीज है प्ले लेते हैं प्लेस होल्डर के अंदर यूजरनेम दाल देते हैं आपका जो मां करें डालिए हमें तो वालुज कॉन्टैक्ट्स के अंदर प्रोवाइड करनी है वहां पर सर्च करनी है उससे देखते हैं अच्छा ठीक है इसी तरह से इनपुट हो जाएगा हमारा यूजर नाम एक इनपुट हो जाएगा हमारा पासवर्ड ठीक है और एक हमारे पास हो जाएगा बटन यह लीजिए बटन और जी बटन के अंदर हो जाएगा हमारे पास सबमिट फॉर्म नहीं ले रहे हैं हम हम बटन पर ले लेते हैं वालुज तो सबसे पहले मेथड भी बनाना पड़ेगा और स्टेट के अंदर वालुज अपडेट करनी पड़ेगी तो स्टेट भी ले लेते हैं तो इसको बोलते हैं यूजर नाम है और फिर बोलते हैं सेट यूजर नाम स्टेट से आएंगे तो ठीक है जी उसे स्टेट और यह लीजिए स्टेट का एनआईपीआईडी भी आपके पास होता है और यहां पे आप डायरेक्टली भी लिख सकते हैं तो पासवर्ड और सेट पासवर्ड और यहां पर जाकर हम इसको भी एम्टी कर देते हैं ठीक है इतना तो वैल्यू हो गई हमारे पास ओके अब यह वैल्यू यहां पर कंट्रोल कैसे होगी क्योंकि अभी तक यह कंट्रोल नहीं हो रही है यह सिर्फ स्टेट हवा में है तो वो कंट्रोल कैसे होती है बड़ा ही बेसिक सा है यहां पर आई और उसको बोलिए की जो आपकी वैल्यू है वो आप गवर्मेंट करेंगे कहां से यूजरनेम से ये लीजिए कर ली लेकिन उसके इस फील्ड में अगर कोई चेंज हो तो वो स्टेट भी तो अपडेट हनी चाहिए तो हम यहां पर लिख देते हैं कॉल बैक फायर कर देते हैं और बोलते हैं उसको की कोई भी अगर इवेंट हो आपके पास तो सीमेंट को लीजिए और क्या करिए आप अपना सेट यूजरनेम को कॉल कीजिए और वहां पर वैल्यू को पास कर दीजिए तो इवेंट डॉट वही अपना इवेंट डॉट टारगेट .कॉम अब क्या करेंगे कुछ नहीं कॉपी पेस्ट करेंगे और क्या करेंगे यहां पर भी ए जाते हैं जहां आपका मां करें वहां पर रख दीजिए और टारगेट डॉट वैल्यू ठीक है सेट पासवर्ड यह लीजिए ठीक है वालुज हो गई गवर्नमेंट ठीक है इतना कम तो हमें भी आता था कोई वहां पर दिक्कत नहीं थी बट एक्चुअली में जो प्रोसेस सीखना था किस यूजर कांटेक्ट के अंदर जो वालुज है वो कैसे फेच करूंगा मैं उसके लिए आपको हेल्प करता है आपका यह उसे कॉन्टेक्स्ट कैसे करता है जी तरह से आपने उसे स्टेट को उसे कर है इस तरह से इसको भी उसे करेंगे तो यह लीजिए हमारे पास ये ए गया अब हम क्या करेंगे यहां पे एक ऑब्जेक्ट ले लेते हैं यहां से इसको लेंगे सेट यूजर ठीक है आपने और यहां पर क्या लिया उसे कांटेक्ट और उसे कॉन्टेक्स्ट के अंदर वैल्यू के पास कारी इसलिए तो हमने यूजर कांटेक्ट लिया था अब जो लोग भूल गए हैं थोड़ा बहुत क्योंकि होता है अक्सर ऐसा भूल जाते हैं हम कोई दिक्कत वाली बात नहीं है कुछ लोग सोच रहे होंगे की सेट यूजर कहां से ए गया हमने तो यहां पे कभी लिया ही नहीं है उनको मैं रिकमेंड करूंगा कॉन्टैक्ट्स में वापस जाइए और ये जो यूजर कांटेक्ट है आपको अगर याद हो तो हम ये पास कर रहे थे तो ये दोनों वालुज इसीलिए तो यहां से पास कर ये प्रूफ से ताकि उसे वैल्यू से कोई डाटा चाहिए तो मैं सिर्फ यूजर से लेक वो डाटा ले लूं लेकिन अगर इस फील्ड में स्टेट के अंदर कोई वैल्यू एड करनी हो तो मेरे पास मेथड है ना सेट यूजर तो ये सेट यूजर का जो एक्सेस है मेरे को कहां से मिल रहा है इस उसे कॉन्टेक्स्ट से इस यूज्ड कॉन्टैक्ट्स के अंदर वो कांटेक्ट देना पड़ता है क्योंकि अभी तो आपका एक कांटेक्ट है हो सकता है लोग इन कांटेक्ट हो प्रोडक्ट कॉन्टेक्स्ट हो एपी कॉल कांटेक्ट हो तो प्रॉपर्ली राइट कांटेक्ट देना पड़ेगा आपको तो वो प्रॉपर्ली कॉन्टैक्ट्स डॉग तब ही तो उससे आप वो सेट यूजर ले पाओगे ठीक है अब सेट यूजर आपने अगर ले ही लिया है तो यहां पे करना क्या है कुछ भी तो नहीं करना पहले तो आपके पास इवेंट आएगा एक ये लीजिए हैंडल सबमिट में इवेंट ए गया अब इस इवेंट का क्या करना है डिफॉल्ट बिहेवियर प्रीवेंट करना है प्रीवेंट दी फॉल्ट अगर मैंने टाइप हो नहीं किया हो तो डिफॉल्ट प्रीवेंट क्यों किया क्योंकि बाय डिफॉल्टर जब भी आप सबमिट करते तो वैल्यू यूआरएल के थ्रू जाति है या फिर पोस्ट मेथड के थ्रू चले जाते हैं तो वो नहीं चाहता मैं चाहे और सेट यूजर मेथड मिल ही गया है तो उसके अंदर क्या करो कुछ नहीं ये आपका यूजरनेम पास कर दो आपका मां करें तो पासवर्ड भी पास कर दो ये लीजिए तो हमें डाटा भेजना तो ए गया की किस तरह से डाटा भेजना है बड़ा सिंपल सा था आपने देखा कुछ भी रिएक्ट एक्स्ट्राऑर्डिनरी हमने नहीं पढ़ा है ये इसी इसलिए ग रहा है क्योंकि इसी बनाया गया है कभी देखिए और ऑनलाइन जाके आपको पता लगेगा कितना परिसर है ये ठीक है एक वालुज तो हमें समझ में ए गई लेकिन अब दूसरी चीज और समझना की यह तो बात हुई डाटा भेजना की अब डाटा लेना कैसे है अगर आप यह सोच रहे हैं की डाटा लेने के लिए बस एग्जैक्ट से कम करना पड़ेगा सेट यूजर की जगह यूजर ले लूंगा और वहां से डाटा एक्सट्रैक्ट कर लूंगा तो एकदम सही हुआ आप हां जी एकदम सही हो आप आप सिख गए हो किस तरह से कम करना है तो प्रोफाइल के अंदर आते हैं आईएफसी ही लिखने हैं लीजिए अपना आईएफसी प्रोफाइल आगे आईटी इसे है आगे आईटी इसे रिएक्ट के अंदर हम लेते हैं तो वही सबसे एक इंपॉर्टेंट तो उसे कांटेक्ट से जो हम पढ़ रहे थे वही हमने लेना है ठीक है और उसके अलावा यूजर कांटेक्ट तो लेना ही पड़ेगा कैसे की कौन से कॉन्टैक्ट्स की बात कर रहा हूं पांच-छह कॉन्टेक्स्ट अक्सर 10-10 कॉन्टैक्ट्स भी होते हैं ठीक है तो अब यहां से क्या करना है कुछ नहीं जो से कम हमने वहां किया था वही यहां कर लो चाहे तो कॉपी पेस्ट भी कर सकते हो कोई दिक्कत वाली बात नहीं ये लोग जो कॉपी कर देते हैं और प्रोफाइल में इसको पेस्ट कर देते हैं कोई दिक्कत नहीं कोई दिक्कत नहीं है बट दिक्कत यहां है की आप ये सेट यूजर मत लीजिएगा यूजर लीजिएगा जो भी डाटा आपको लेना है वो डाटा क्योंकि मेथड नहीं चाहिए मुझे यहां पे अब ये यहां पे ए गया है है तो इसको हम रिटर्न कर देते हैं एक्चुअली में रिटर्न भी नहीं करते हैं एक्चुअली हम यहां पर कंडीशनल रिटर्न कर देते हैं यह भी कई जगह आप पढ़ने हैं कई लोग इसको अलग टॉपिक में डिस्कस करते हैं मैं तो नहीं करता मैं तो बोलना हूं की देखिए बड़ा इफल्स वाला सिंटेक्स है कोई रिएक्ट ए गया इसलिए कुछ स्पेशल हो नहीं रहा है यहां पे सिंटेक्स एक आईएफ को चेक कर लेते हैं हम की अगर कोई यूजर हो ही नहीं तो क्या बोलूं अगर देखिए कोई यूजर है ही नहीं और वहां पे यूजर है ही नहीं है तो आप सिंपल सा रिटर्न कर दो ये रिटर्न कोई मैजिकल रिटर्न थोड़ी ना है जीएस तो रिटर्न कर रहा है वो तो हमने खुद नहीं बना के देख लिया था ताकि लोड वाली बात ही नहीं है तो एक कम करते हैं यहां पे एक देव ले लेते हैं हम और दीव के अंदर लिख देते हैं प्लीज लॉगिन ठीक है अब इसी तरह से अगर है तो यहां पे हम रिटर्न कर देते हैं नॉर्मली एक सिंपल सा डेवलप लेते हैं और यहां पे बोल देते हैं वेलकम वेलकम के बाद जो भी यूजर का नाम है तो यूजर में से एक्सट्रैक्ट कर लेंगे यूजर नाम बस इतना सही तो कम है वही रिटर्न अपने रिटर्न कर देता उसके बाद एग्जीक्यूट होता ही नहीं है तो यहां मैं कभी पहुंचूंगा ही नहीं और घर के फल सा है तो मैं अपने आप ये रिटर्न कर दूंगा ठीक है आई भी लगा लेते हैं वेलकम ठीक है तो देखा आपने कितना आसन है कितना भी ज्यादा डिफिकल्ट है नहीं अब इंटरेस्टिंग बात क्या है अब हम चलते हैं अपने app.js के अंदर क्योंकि यहां पे काफी कुछ हो रहा है लेकिन हमने कुछ किया नहीं है अभी तक ये हमारे पास वैल्यू ए गई हा वन वाली ये सब ठीक है अब यहां पे दो कंपोनेंट आपको इंपोर्ट करने हैं और वो कंपोनेंट कैसे डाटा एक्सेस करेंगे वो हमने कंपोनेंट के अंदर ही हैंडल कर लिया है यहां पे मुझे कुछ नहीं करना है अब जैसे सपोज करिए मैं टॉप पे एक लॉगिन वाला यहां पे कंपोनेंट इंपोर्ट कर लेट हूं ये लीजिए और उसके बाद आपकी प्रोफाइल वाला कांटेक्ट कंटेंट कंपोनेंट इंपोर्ट कर लेते हैं ये लीजिए अब देखिए हो सकता है आपने अप डॉट जीएस के अंदर एक एपी कॉल करियो कोई दिक्कत वाली बात नहीं आप यूजर कांटेक्ट लो वही उसे कॉन्टेक्स्ट उसे करो और डाटा वहां पर सर्च कर दो जब भी आपको लेना हो डाटा जी भी कंपोनेंट में है तो उसे कांटेक्ट उसे करो डाटा ले लो बस इतना सही तो कम है ठीक है अब इसको रन करके देखते हैं देखते हैं हमने कितने बैग्स इंट्रोड्यूस कर दिए हैं और एक भी नहीं है अभी तक तो ठीक है जी अच्छी बात है एक भी नहीं है तो एक क्या करते हैं छोटा सा हम यहां पे एक और लॉगिन के अंदर कुछ स्पेस इंट्रोड्यूस करते हैं हम यहां पर डायरेक्टली इंट्रोड्यूस कर देते हैं ठीक है थोड़ा सा स्पेस ए गई ज्यादा स्पेस तो आएगी नहीं एक्चुअली मैं थोड़ा सा हम यहां पर नॉन ब्रेकिंग स्पेस करैक्टर है देख तो रही है जूम कर लेंगे ठीक है अब देखिए बात क्या है अभी ये बोल रहा है प्लीज लॉगिन ये इसी बात का फैक्ट है क्योंकि वहां पे यूजर नहीं है अभी अब मैं जैसे यहां पे यूजर नहीं लिखना हूं हितेश पासवर्ड में कुछ भी लिखूं कोई चेक तो है नहीं वहां पे और जैसे ही करता हूं सबमिट तो इंपॉर्टेंट और इंटरेस्टिंग बात ये है की यहां पे हितेश ए गया अच्छा क्यों को अगर जो लोग डायरेक्टली कूद पड़े हैं यहां पे जिनको नहीं समझ में ए रहा तो आपको कमेंट में मिल जाएंगे फेल लोग ऐसे करते ये कौन सी बड़ी बातें हमने तो हितेश यहां से इतना सब करने की जरूर ही क्या थी हम अगर app.jxx में डायरेक्टली पास कर देते प्रोफेसर इसका मतलब ये आपको लेक्चर समझ ही नहीं आया तो अगर ऐसा कोई कहता हुआ मिले तो प्लीज उसको कहिएगा अरे भाई इतनी मेहनत से इतने प्रेम से पढ़ा रहे हैं की प्लीज लेक्चर को शुरू से ही देख लिया करो और फ्री फ्री टाइम में बैठ के देखा करो ताकि आपको कहानी तो समझ में आए जो ये हमने पुरी नेटफ्लिक्स की यहां सीरीज चला राखी है रिएक्ट की आपको समझ में तो आए और वीडियो करो तो और अच्छे से कोर्ट समझ आपकी कहानी की किस तरह से आपका कांटेक्ट होता है ओके जी ठीक है अब आपको क्योंकि कांटेक्ट की पुरी कहानी समझ में ए गई है बट एक और इंपॉर्टेंट चीज है अक्सर लोग ट्यूटोरियल यही रॉक देते हैं लेकिन मैं एक स्टेप और आगे लेकर जाऊंगा क्योंकि आपको एक और सिंटेक्स एक और तरीका समझना जरूरी है वरना अगर आप किसी और का कोड बेस देखोगे स्पेशली कॉरपोरेट वगैरा में जाओगे तो पक्का फस गया अब ये जो कॉन्टेक्स्ट मैंने लिखा है ना यूजर कांटेक्ट सॉरी कॉन्टैक्ट्स ये जो कर लाइन है क्योंकि अब आपको समझ में ए रही है इसलिए आप इस लेक्चर के पार्ट तू में अब जा पाओगे लेकिन पार्ट तू में जा रहे हैं इतना लंबा वीडियो बना है तो ये बताओ मुझे हजार कमेंट्स हो रहे हैं नहीं हो रहे हैं ये तो दो-तीन घंटे में हो जान चाहिए अब इतने लोग देख रहे हैं और फटाफट करो यार क्या कब तक देखेंगे 100 के सब्सक्राइबर क्रॉस करें कुछ सिल्वर बटन आए हैं कुछ हम भी देखें की हां मजा ए रहा है लोगों को लोग सपोर्ट कर रहे हैं ठीक है तो अब चलते हैं हमारे नाइंथ प्रोजेक्ट पे हां जी इसी के अंदर ही हम अपना 9th प्रोजेक्ट बनाएंगे बट उससे पहले मैं क्या है ये सबको मैं पुश करना चाहूंगा ताकि एक्चुअली मैं आपको साड़ी डीटेल्स और वालुज मिल जाए तो यहां पर हम बोलते हैं कांटेक्ट एपी डिस्कशन ये डिस्कशन ही था प्रोजेक्ट भी था एक्चुअली में प्रोजेक्ट ओके कांटेक्ट कर दिया तो अब जिनको पता है की कहां पर हमारे सर कोड बेस्ड जाता है मेरे गेट अप अकाउंट पर जाइए इनफैक्ट आई थिंक मैं भी होगा| ओके तो यहां पर रिपोजिटरीज में मैंने पी नहीं कर राखी रिपोजिटरी में ढूंढनी पड़ेगी चाहे और रिएक्ट टॉप पे ही अभी तो अभी तक तो आगे जाके आप व्यक्ति बात है आपको देखनी पड़ेगी तो यहां पे मैंने आपको कॉन्टैक्ट्स के नोट्स भी दे दिए हैं अब कॉन्टैक्ट्स के जो नोट्स है कुछ नहीं है थीम बटन का यू आई है कार्ड यू आई है कार्ड का यूआई क्यों दिया है थोड़ा सा अच्छा लगे क्योंकि हम जो बनाने जा रहे हैं थोड़ा सा ठीक-ठाक भी तो लगे और आपके अंदर भी थोड़ा सा कस लिखा है ज्यादा कुछ नहीं है अच्छा अब इस कहानी को समझना के लिए ना क्योंकि हम यहां पर तेल विद वगैरा उसे करेंगे तो आपको एक कहानी और समझ में आनी चाहिए की जब तालेबान पे जाते हैं तो आपको एक्चुअली में तेल वेद है ना यहां पे अलाउ करता है की आप डायरेक्टली सीडीएन वगेरा के थ्रू आप इसको प्ले कर लो तेल वी एक्चुअली में प्लेग्राउंड भी है एक सेकंड डॉक्यूमेंटेशन में देखा हूं यही पे अवेलेबल था है की तेल का एक तेल प्ले करके आता है तो यहां पर देखेंगे की आपके पास एक टॉप में बटन है जो की क्या कर रहा है लाइट मोड और डार्क मोड में स्विच कर रहा है वैसे तो हो सकता है मैं आपको पूरा एक एचटीएमएल वगैरा बना के दिखता था बट एक्चुअली में जरूर नहीं आप कहानी पे भी यहां टॉप पे राइट क्लिक अच्छा बीच में राइट क्लिक मत करेगा ये अलग आई फ्रेम के अंदर चला है टॉप नेवीगेशन बार पे राइट क्लिक करके और इंस्पेक्टर कीजिएगा अब जैसे आपने इंस्पेक्टर किया तो आप इसके टॉप पे जाइए जहां पर एचटीएमएल लिखा हुआ है अब उसे एचटीएमएल के अंदर आपको क्या है कुछ क्लासेस दिखेगी जैसे मैं यहां पे लता हूं तो लास्ट जो क्लास है ना वो है डार्क बस यही कहानी है टेलमेंट की टेलमेंट कैसे डिटेक्टर करता है डार्क मोड या लाइट मोड है क्योंकि जो कस लिखी जाति है आप देख रहे होंगे यहां पे कस ज्यादातर में कस की बात नहीं करना छह रहा अभी आ बट आप देखेंगे की यहां पर फिक्स वगैरा सब लिखा है लेकिन कुछ के आगे डार्क कॉलर है तो ऑटोमेटिक ही तलविन के अंदर हम जब क्लासेस लिखने हैं उसे तरह से लिखने हैं की अगर डार्क मोड हो तो ये क्लासेस एक्टिव हो जाए लाइट मोड हो तो ये क्लासेस एक्टिव हो जाए बस आपको क्या करना होता है यहां पे एक स्विच इनेबल करना पड़ता है ये डार्क की जगह यहां पर मुझे लाइट करना पड़ता है ये देखिए लाइट लिखने लाइट हो गया पूरा मोड और यहां पर हम डार्क जैसे लिखेंगे तो तेल के अंदर इसी तरह से कम किया जाता है अलग-अलग लाइब्रेरीज अगर आप कोर्स कस लिख रहे हैं तो ऑब्वियस सी बात है आपको पूरा स्टाइलिंग चेंज करना पड़ेगा जावास्क्रिप्ट वगैरा से काफी कुछ आ वहां पे सर्कस होता है बहुत लेकिन अभी आपको पता ग गया की इस तरह से हमारा ये कम होता है ठीक है जी आ ये कहानी जान ने इसलिए जरूरी थी क्योंकि जब यहां पे आप आएंगे तो हमने एक्चुअली में कस इसी तरह से लिख राखी है आप कई बार देखेंगे की हमने जो कस लिख राखी है गौर से तो ये डार्क वगैरा हमने डायरेक्टली इंक्लूड कर रखा है ये देखिए यहां पे ये डार्क पीर फॉक्स रिंग तो ये सारे डार्क मोड के हमने कस लिख राखी है आपको ऑलमोस्ट सभी जगह दिखे जाएगी किस तरह से डार्क मोड की कस है तो हमने ये प्रोजेक्ट जो बनाया है ये जो कस लिखी है टेलीविजन की वो कुछ इसी तरह से लिखिए की डार्क मोड हो अगर तो डार्क मोड डिटेक्टर कर ले और लाइट मोड हो तो लाइट मोड तो हमें करना क्या है एक्चुअली में हमें सिर्फ एक स्विच टॉगल करना है जो की एक ये जो एचटीएमएल है इसके अंदर डार्क और लाइट मोड टॉवल कर दें लेकिन अगर एक अलग कंपोनेंट बनाएंगे स्विच का तो हमारे कार्ड को कौन बताया की टॉगल हो चुका है उसके अंदर स्टेट अपडेट हो गई आपकी एक्सटर्नल की और अगर कार्ड को पता ग गया तो वापस से अगर टॉगल गए तो स्टेट उसको बटन को कौन बनाएगी तो वही से वाली कहानी है लॉगिन वाली और प्रोफाइल वाली की दोनों एक दूसरे के साथ सिंक तो रहने चाहिए डाटा शेर करना चाहिए तो बस वही कहानी है यहां पे तो थीम बटन का यूआई आपको दे रखा है कार्ड का यूआई दे रखा है आपका भी वही आपको दे रखा है तो सबके बीच में हमें बात करनी है लेकिन इस बार हम जो बात करेंगे थोड़ी सी अलग स्टाइल में करेंगे है ताकि आपको एक दूसरा वेरिएशन में देता हूं यहां पर ठीक है जी तो यहां पर हम ए गए हैं और नम क्रिएट लेटेस्ट ओके यहां पर हम इस प्रोजेक्ट को नाम देंगे हमारा कांटेक्ट आने वाले हैं थीम थीम फीचर्स ठीक है जी और ऑब्वियस सी बात है रिएक्ट उसे करना है जावास्क्रिप्ट उसे करनी है और सीडी करके उसके अंदर जाना है इतना कम तो सभी को पता है उसके बाद जाके नम इंस्टॉल करना है ठीक है जी नम इंस्टॉल नहीं जाएंगे तो कुछ कम नहीं करेगा क्योंकि सब कुछ टेल विंड पे बेस है यहां पे तो कुछ नहीं करना है तेलविन के फ्रेमवर्क गाइड में जाइए जैसे हम अभी तक जाते हैं वीट के अंदर जाइए ये सब कम हम कर चुके हैं अब क्या करना है इसको कॉपी कीजिए बैग चाहिए आज इतना स्लो स्लो कैसे हो रहा है जैसे आप लोगों को कहना पड़ता है ना हर बार कितने कमेंट करिए शेर करिए वैसे कई लोग क्या खाने के बाद ही मानते हैं ओके अभी हम हातिम फ्यूचर के अंदर पेस्ट कर देते हैं यह लीजिए पेस्ट हो गया है थीम फ्यूचर का और यह हमारे पास कांटेक्ट है और तेलविन के कनफ्लिक्ट के अंदर यह हमारा कांटेक्ट है इसको चेंज कर दिया यह लीजिए और बताइए क्या करें अच्छा ये भी करना है ठीक है जी ये भी कर देते हैं आप कहते हैं तो इसमें कौन सी बड़ी बात ठीक है तेलविन की सोर्स के अंदर कस सब कुछ हटाओ ये पेस्ट कर दो बस इतना सा कम है कोई दिक्कत वाली बात थोड़ी है अभी तक नहीं है ना इतना तो इजी कम है चलिए थोड़ा सा आगे चलते हैं और सारे के सारे सबको हटाइए कुछ भी नहीं चाहिए जो चाय के साथ ए जाए और इसको क्या करिए आप पहले तो वेडिंग दीजिए नहीं ऐसे तो मत दीजिए क्लास नाम के अंदर दीजिए पेंडिंग दीजिए पहले तो इसको फोर की उसके बाद क्यों लेते हैं यह लीजिए और बताइए की मामला चल रहा है क्या चल तो रहा है एकदम बढ़िया से चल रहा है अच्छा अब आते हैं बैक और जो फाइल है प्लीज मैं तो यही से ले सकता हूं डायरेक्टली क्योंकि मेरे पास कांटेक्ट नोट्स है मैं नहीं इसलिए मेरे पास ही एक्सेस है आपको अगर यहां से नहीं लेने हैं तो आप यहां पर जाइए पॉप के अंदर और यहां से एक-एक करके ले लीजिए और देखिए सबसे लास्ट में हमारे पास अप का यूआई है तो ठीक है यही से ले लेते हैं अच्छा यहां तो कॉपी बटन भी आता है ये सबसे अच्छा लगता है मुझे आ हमारे होम नोट्स में नहीं आता भैया स्कॉट में भी नहीं है की अगर आपका एमडीएस है कोड है तो डायरेक्टली काफी दे दो विश्व आना चाहिए था तो ये लीजिए हमने डायरेक्टली यहां दे दिया अब यहां पे एक कमेंट लिख देते हैं यहां पे एक्चुअली में हमें एक दूसरा कंपोनेंट हम लेंगे अभी हमारा जो थीम बटन होगा वो वाला कंपोनेंट इसके अंदर आएगा तो एक बार हम क्या करते हैं थीम बटन वाला कंपोनेंट ले आते हैं यहां पे मतलब लेक आते हैं कमेंट में लिख देते हैं तो और यहां पर भी एक आएगा यहां पे भी ओके तो यहां पर तो आएंगे हमारे थीम बटन और यहां पर आएंगे हमारे कार्ड ठीक है इतना कम तो हो रहा है अच्छे से हो रहा है कोई दिक्कत नहीं है अब चलते हैं एक्चुअली बटन क्या बनाते हैं पहले कॉन्टेक्स्ट बनाते हैं सबसे पहले क्योंकि एक्चुअली में हम कांटेक्ट से तो देख रहे हैं लेकिन इस बार कांटेक्ट जो हम बनाएंगे थोड़ा सा अलग तरीके से बनाएंगे इनफैक्ट आपने देखा अभी तक की हमने ये जो अप डॉट जीएस है इसके अंदर हमने क्या कर है सीधा ही ये दीव क्लास वगैरा इंट्रोड्यूस कर दिया है लेकिन हमें कोई ना कोई थीम प्रोवाइडर या कुछ ना कुछ लोग इन प्रोवाइड यूजर प्रोवाइडर कुछ ना कुछ तो चाहिए ही था तो वो भी नहीं हमारे पास अच्छा हमारा कस इंडेंटेशन भी बहुत बिगड़ा हुआ है ये तो बिल्कुल ठीक बात नहीं है हां अभी ठीक है थोड़ा सा तो सबसे पहले बनाते हम कांटेक्ट चलिए जी ओके तो सोर्स के अंदर बनाएंगे एक नया फोल्डर उसका नाम देंगे कांटेक्ट कॉन्टैक्ट्स ज्यादा ठीक है अब हम बनाएंगे एक फाइल और इस फाइल का नाम देंगे हम theme.jsx अच्छा theme.jxx डायरेक्टली theme.js पे ए गए हां जी theme.js पर डायरेक्टली ए गए अब एक बार बताइए थीम डॉट जेएस पे डायरेक्ट ए रही है और फैक्ट जेएस की भी जरूर नहीं है हमें यहां पे डायरेक्टली जीएस ही लिख सकते हैं हम एक बार करके देखते हैं क्योंकि आज सच में मुझे लगता नहीं हम इसमें कुछ जीएस इंपोर्ट करने वाले हैं ये क्यों ये भी बताता हूं आपको सब्र तो रखिए थोड़ा सा ठीक है अब हम यहां कर रहे हैं थोड़ा सा डिफरेंट अप्रोच अच्छा डिफरेंट अप्रोच क्या है गौर से देखिएगा सबसे पहले तो देखिए रिएक्ट वैसे आपको इंपोर्ट करने की जरूर है नहीं इन फिल में हम कर रहे थे ठीक है अच्छी बात है एक तो चाहिए आपको क्रिएट कांटेक्ट वैसे हम react.com टैक्स बोल रहे थे वो भी ठीक है और एक चाहिए हमें उसे कॉन्टेक्स्ट ये तो हमें समझ में ए चुका है ऑलमोस्ट सभी फाइल्स में ठीक है उसके बाद हम क्या करते हैं देखिए किस तरह से हम कर रहे हैं पहले हम एक्सपोर्ट करते हैं एक थीम कांटेक्ट हो वहां पर कर रहे थे एक्जेक्टली से एक्चुअली में उसको ओपन ही कर लेट हूं ताकि हम साइड बाय साइड कंपेयर भी करते जैन कंपैरिजन अच्छा होता है चीज समझ में आई है उससे जल्दी ठीक है यह था हमारा यूजर कांटेक्ट तो वही आपने क्रिएट कॉन्टैक्ट्स बनाया था ये यूजर कॉन्टैक्ट्स और इसको एक्सपोर्ट कर दिया था ठीक है ऑलमोस्ट सिमिलर कम हम करेंगे और ये लीजिए हमने क्या कर क्रिएट कॉन्टैक्ट्स बनाया और यह लीजिए अब क्रिएट कांटेक्ट में उसे टाइम पे हम क्या दे देते हैं उसके अंदर हम कोई वैल्यू नहीं दाल रहे थे यहां पे लेकिन यहां पे एक्चुअली में डिफॉल्ट वैल्यू डाली जा शक्ति है हां जी किस तरह से डाली जा सकते हो और कैसे उसे हो शक्ति है वो भी बताता हूं आपको क्योंकि ये थोड़ा सा डिफरेंट सिंटेक्स है कम वही है लेकिन वो बताया ना जैसे मैंने आपको राउटर में समझाया था की दो तरीके हैं चीजों को करने की और वो काफी कंफ्यूज कर देते हैं तो क्रिएट कॉन्टैक्ट्स को जब आपका कॉन्टैक्ट्स बनेगा यानी की इनिशियल जो आपकी स्टेट हो गई तो वहां पे भी आप कुछ वैल्यू दे सकते हो की कॉन्टैक्ट्स जब पहले बार बने तो उसके अंदर क्या-क्या वैल्यू ऑलरेडी फीड हो जो पिछला वाला हमने एग्जांपल लिया था वहां पे हमने कोई वैल्यू नहीं दी थी हमने उसके अंदर लेकिन यहां पे मैं चाहता हूं इसके अंदर टेक ऑब्जेक्ट प्रेजेंट हो ऑब्जेक्ट के अंदर क्या हो एक तो आपके पास हो थे मोड थे मोड की वैल्यू क्या हो लाइट क्योंकि मैं चाहता हूं जब भी कोई भी थीम मोड कांटेक्ट करें अगर डायरेक्टली कॉल कर देगा तो क्योंकि मैंने उसके अंदर कोई वैल्यू एड ही नहीं कारी है तो कुछ नहीं होगा उसके अंदर क्रश हो जाएगा आप या तो नल आएगा कुछ ना कुछ करना पड़ेगा तो मैं चाहता हूं की हर बार यूजर को जब भी तीन सेट करनी हो एटलिस्ट एक डिफॉल्ट वेरिएबल वहां पे हो अच्छा ठीक है उसके बाद मैं क्या चाहता हूं एक ये डार्क थीम नाम का फंक्शन यहां पे उसके पास अवेलेबल हो ये फंक्शन करता क्या है कुछ भी नहीं करता है जस्ट एक फंक्शन है अभी हमारे पास ये ठीक है इसी तरह से आपके पास एक लाइट थीम का ही फंक्शन होगा वैसे तो हम एक ही फंक्शन से कम कर सकते थे टॉगल करवा के बट मैं यहां पे दो उसे कर लेट हूं एक लाइट तीन अब ये क्या है दोनों मेथड हैं ठीक है ये मेथड मुझे कहां से मिलेंगे जब भी कोई कॉन्टैक्ट्स कॉल करेगा ये तार लाइट ये थीम भी मिल जाएगा आपको और दो मेथड भी मिल जाएंगे ठीक है अभी क्या करेंगे अभी हमें नहीं पता है बट हम दो मेथड तो ये सिर्फ इस बात को बताने के लिए क्योंकि आगे जाके कैसे परिसर एग्जांपल है जहां पे हम फ्लो पे और डिस्कस करेंगे बट ये सिर्फ इतना बताने के लिए की आप वैरियेबल्स भी दे सकते हो प्लस अपने मेथड भी दे सकते हो जो बात उनको वहां पे क्लियर नहीं हुई थी की यहां पे जब हम कॉन्टैक्ट्स प्रोवाइडर के अंदर ये जो दे रहे थे ये एक्चुअली में हम वेरिएबल और मेथड दे रहे थे उनको और अच्छे से समझने के लिए की आप यहां पे थीम भी दे वेरिएबल भी दे सकते हो और उनके मेथड भी दे सकते हो जरूर ये उन्हें का मेथड हो कुछ भी दे सकते हैं कई लोग क्या होता है और स्टेट का नाम सुनकर स्टेट ही दे सकते नहीं ऐसा नहीं है कुछ भी पास कर सकते हो क्योंकि रिएक्ट का कोई मैजिक है ही नहीं जो है जावास्क्रिप्ट का है ओके अब क्या कर रहे हैं वह तो एक्सपोर्ट कर ही दिया पर और एक्सपोर्ट क्या लिख रहे हो देखते जाइए मैं क्या लिख रहा हूं यहां पे एक थीम प्रोवाइडर बट प्रोवाइडर तो हम अलग क्लास में लिखने हैं ना नहीं जरूरी नहीं है कई लोग एक्चुअली में थीम कॉन्टैक्ट्स डॉट प्रोवाइडर यही से ही एक्सपोर्ट कर देते हैं अब यहां से एक्सपोर्ट करने का फायदा क्या फायदा कुछ नहीं है सिंटेक्स अलग-अलग तरीके के स्टाइल है आप जैसे हम यहां पे जाके देखेंगे इसको रेप करना पड़ेगा तो आपने देखा था पिछली बार किस तरह से रेप किया था वो भी आपको बता देते हैं तो पिछली बार f.gsx के अंदर आपको पता हो तो यूजर कॉन्टैक्ट्स प्रोवाइडर हमने डायरेक्टली ही एक्सेस ले लिया था कैसे लिया था याद है आप यहां से ले रहे थे और फाइल कहां गई यूजर कांटेक्ट तो हमने क्या कर था ये यूजर कॉन्टैक्ट्स प्रोवाइडर लिया था और ये रहा आपका यूजर कॉन्टैक्ट्स डॉट प्रोवाइडर उसके अंदर हमने चिल्ड्रन पास कर दिए थे तो एक्चुअली में एंड ऑफ डी दे कम तो ये हो रहा है की हमारा जो अप है वो भी अब यहां पे रेंडर हो रहा है उसके अंदर और कंपोनेंट रेंडर हो रहे हैं अगर आप नहीं चाहते की इतना सर नहीं करना मुझे तो आप डायरेक्टली ये कम भी कर सकते हैं की मैं यही से एक्सपोर्ट कर देता हूं इसको तो अब क्या करेगा ये थ्री प्रोवाइडर एक्चुअली में है क्या है तो यही ना एक वेरिएबल तो एक्सपोर्ट कर रहे हो और कर क्या रहे हो इसके अंदर ठीक है अच्छा इतना ही नहीं आप चाहे तो यहां पे अपने एक कस्टम हुक्स भी बना सकते हो जो अक्सर लोग बनाते हैं ठीक है उसको भी एक्सपोर्ट किया जाता है तो एक्सपोर्ट डिफॉल्ट और हम क्या करते हैं एक फंक्शन के कस्टम अपने आप में एक फंक्शन ही है उसे उनके साथ कीवर्ड हम लगाते हैं और उसको बोलते हैं उसे थीम अच्छा उसे थीम करता क्या है ये करता कुछ खास नहीं है ये आपको एक जस्ट रिटर्न करता है क्या रिटर्न करता है ये जो उसे कॉन्टेक्स्ट है ना ये रिटर्न करता है आपको अब उसे कॉन्टेक्स्ट में कॉन्टैक्ट्स भी तो देना पड़ेगा हां जी इसीलिए तो इंपोर्ट किया है हमने ये हमारा थीम कांटेक्ट इंपोर्ट तो क्या किया है एक्चुअली मैं ऊपर से ही तो लिया यहां से बस तो अब क्या हो गया अब आपको हर जगह ना दो-दो इंपोर्ट की जरूर नहीं है क्योंकि अभी तक हमने फाइलों में देखा था अगर आपको याद हो हमने कॉम्पोनेंट्स वगैरा में देखा था प्रोफाइल में तो आप हर जगह उसे कांटेक्ट ले रहे थे फिर आप दो-दो फाइल्स इंपोर्ट कर रहे थे की उसे कॉन्टेक्स्ट तो चाहिए चाहिए यूजर कॉन्टैक्ट्स भी चाहिए लॉगिन में भी हमने देखा था की आपको उसे कॉन्टैक्ट्स भी चाहिए ये तो हक है ही और इसके साथ यूजर कॉन्टैक्ट्स भी चाहिए अभी एक्चुअली में दो सामना करके क्योंकि वह कांटेक्ट वहीं पर सेट हो गया है तो मुझे क्या करना है बस यहां से उसे थी तो इंपोर्ट करना उसे थे अपने आप या उसे कॉन्टेक्स्ट वगैरा सब तो कॉन्टैक्ट्स के अंदर जो भी वालुज है उसका एक्सेस मेरे को दे देगा डायरेक्टली तो ये भी एक कोडिंग सिंटेक्स है कोडिंग स्ट्रक्चर है जो काफी लोग उसे करते हैं तो देखिए थीम प्रोवाइडर मैं ले लूंगा रेप कर दूंगा ठीक है जी कम हो जाएगा मेरा और उसके बाद क्या करना है कभी भी इनमें से जी भी वालुज का या कुछ भी एक्सेस चाहिएगा तो उसे थे उसे कर लूंगा इसमें से जो चाहिए वो एक्सट्रैक्ट कर लूंगा कम वही हो रहा है लेकिन ये इसीलिए मैंने पार्ट तू पे आपको कहा की यहां से चीज थोड़ी सी परिसर है जो नहीं समझाया जाति अक्सर जब आप बहुत सारे पैसे दे देते हैं तब भी बट यहां पे शेर या सब्सक्राइब करके ही आपको मिल जाता है ओके ठीक है तो ये तो हो गई हमारी कहानी अब देखो ये सर कम हमने एक फाइल में कर दिया अक्सर प्रोडक्शन कोड में ये एक ही फाइल में किया जाता है क्योंकि ज्यादा बटर अप्रोच है लेकिन क्योंकि कभी किसी ने आपको बताया नहीं की किस तरह से वो जो दो फाइलों में हमने कम किया था उसको हमने एक फाइल के अंदर भी प्रोडक्शन में हम कम कर लेते हैं कम वही है बस थोड़ा सा इजी कर लिया हमने इसी वजह से यूजर कंफ्यूज हो जाते हैं या फिर स्टूडेंट कंफ्यूज हो जाते हैं ठीक है इतना कम तो हमारे पास हो गया अब हमें करना क्या है करना कुछ नहीं है अपने पहले जाना है app.gs के अंदर ठीक है जी आप डॉट जेएस में गए अब मुझे पता है की ये सर जो कम है ये एक्चुअली मैं रेप करना ही पड़ेगा वरना इसके अंदर जो भी आप कंपोनेंट यहां जो ख्वाइश ये करके बैठे हो की कभी थीम बटन आएगा कभी खाद आएगा वो आएगा क्या नहीं कभी ऐसे आएगा ही नहीं है और अगर ए भी गया तो उसको एक्सेस थोड़ी ना मिलेगा सबसे पहले और इसको करते हैं कट और यहां पर कर देते हैं अप के अंदर या अगर हो सकता है आपका मां हो की नहीं मैं तो में डॉट जीएस में इसको यही रेप कर दूंगा ताकि आपके अंदर ही सर ए जाए हां वो भी कर सकते हो कोई दिक्कत नहीं है लेकिन हमने यह देखा था की सिर्फ थीम प्रोवाइडर लगाने से क्योंकि वो user.com होता है आपको वालुज भी तो देनी पड़ती है क्योंकि जब तक आप वैल्यू नहीं डॉग किस चीज का एक्सेस सबको है किसका नहीं है वो तो हमें पता ही नहीं है पर उन सब चीजों को एक्सेस लेने के लिए एक्चुअली मैं पहले उनको लाना भी तो पड़ेगा तो लेंगे कैसे हां जी वो लेंगे कैसे हम वो भी बहुत आसन कम है देखिए ओके तो टॉप पर जाते हैं थीम प्रोवाइडर तो हमारे पास ए गया है लेकिन अब सबसे पहले क्या करते हैं इन वालुज को एक्सेस लेते हैं ठीक है जी तो यहां पर आते हैं और बोलते हैं क्या-क्या वैल्यू है आपके पास तो सजेस्ट कर दीजिए मेरे को एक तो आपके पास थीम मोड है ठीक है जी डायरेक्ट एक्सेस मिल गया एक मेरे पास एक से लाइट मोड ठीक है डायरेक्ट एक्सेस मिल रहा है और एक है मेरे पास डार्क थीम डार्क मोड डॉट थीम देख लेट हूं एक बार मैंने क्या नाम दिया था आ थीम डॉट जेएस हां जी डार्क थीं लाइट थीं और थीं मोड ठीक है थोड़ा इनकंसिस्टेंस ये नाम में बट चलेगा ठीक है तो ये हमारे पास वैल्यू ए गई ठीक है अब ये वालुज का आपके पास डायरेक्ट एक्सेस है आप जब चैन का एक्सेस ले सकते हैं ठीक है थीम बटन को एक्सेस मिलेगा कार्ड को भी एक्सेस मिलेगा ठीक है लेकिन अब क्या है एक्चुअली में थ्री मोड यहां पे और ये सब है क्यों चलिए ये भी आपको बताते हैं थोड़ा सा यहां पे कम करना पड़ेगा वो जो बटंस ए रहे हैं वो सब ए रहे हैं उनके लिए तो सबसे पहले क्या करता हूं एक यहां पर मैं बना देता हूं थीम बटन थी मोड बना देते हैं ओके और इसको बोलते हैं सेट थीम मोड यह क्यों कर रहे हैं वह भी बताते हैं लेकिन एक चीज और ध्यान रखिए आपके पास इन मैथर्ड का एक्सेस है ठीक है ये मैथर्ड तो है आपके पास पर ये मेथड कुछ कर नहीं रहे हैं अभी यहां पे हमने इनकी फंक्शनैलिटी डिफाइन नहीं कारी है पिछली बार वाले में ऑलमोस्ट फंक्शनैलिटी मतलब जो भी छोटी सी थी वो डिफाइन तो थी एटलिस्ट की वैल्यू जस्ट प्ले करनी है एड करनी है यहां पे आपके पास उनकी फंक्शनैलिटी डिफाइन है ये मुझे पता है ये मेथड है लेकिन ये मेथड करते क्या हैं वो मेरे को नहीं पता तो ऐसी जब भी सिचुएशन हो ऐसी कई बार सिचुएशन आएगी आपके पास तो आप क्या करूं इन मैथर्ड को सिर्फ इसी तरह से लो आगे आईटी इसे और एग्जकताली इसी नाम के आप मैथर्ड डिफाइन कर दो वो फंक्शनैलिटी अपने आप उनके अंदर चली जाति है हां जी ये बड़ा इंटरेस्टिंग कॉन्सेप्ट है तो हमने बनाया क्या बनाया एक पहले बनाते हैं ये लीजिए लाइट थीम जो की एग्जैक्ट से ना नाम से होना चाहिए जरूरी है तो उसको हमने कहा ये लीजिए और क्या करना है आपको जो हमारे पास सेट थी मोड है ये हमने लिया और इसको कर दिया लाइट मोड के अंदर क्या रहेगा लाइट रहेगा ओके और इसी तरह का एक और मेथड है वैसे तो हम एक ही में कम कर सकते थे अगर ट्रू जल लेते पागल कर देते हैं ठीक है नहीं करते हैं और यहां पर हम ए गया है और यहां पर उसको लिख देते हम सिंपली डार्क ओके तो अब दो मेथड है आपके पास जो की डायरेक्टली कम कर रहे हैं लेकिन एक्चुअली में क्या है की यह मेथड सिर्फ होने से यहां पे टॉगल करने से उनसे कम नहीं होगा एक्चुअली मैं आपको ये फंक्शनैलिटी ऑटोमेटेकली ऐसा नहीं की एचटीएमएल के अंदर इंजेक्टर हो जाएगी ऐसा कुछ नहीं होगा वो फंक्शनैलिटी आपको यहां लखनी पड़ेगी बट वो फंक्शनैलिटी क्योंकि हमने यहां पे कोड लिख दिया और यहां से चेंज भी हो रही है तो सिर्फ इनके नाम से हां यहां पे उसे करेंगे इनको हम बाकी जो हमारे वो है वहां पे सिर्फ हम थे मोड का एक्सेस लेंगे ताकि मुझे पता ग जाए डायरेक्टली कैसे हो लेकिन कभी भी आपको चेंज करने कोई भी थीम तब तो एक्सेस लेना पड़ेगा अच्छा ये तो ठीक है लेकिन एक्चुअली में थीम कैसे चेंज होती है वो भी तो बताओ एक्चुअल चेंज इन ए थीम है वो आपको क्लासिक जावास्क्रिप्ट से ही करनी पड़ती है हां उसमें कोई रिएक्ट का असेट्स को रोल आता नहीं है उसे इफेक्ट ले लेते हैं ताकि जैसे ये रन हो वैसे ही हमारे पास ए जाए स्नाइपरिटी ले लेते हैं ठीक है डिपेंडेंसी हमारी कोई है नहीं डिपेंडेंसी एक्चुअली में होगी तो सर एक अभी देखते हैं डिपेंडेंसी पर इसको हटाते हैं पहले हम कोड लिखने हैं तो कोड के अंदर क्या करना है सिंपल सा अपना डॉक्यूमेंट का एक्सेस लो क्योंकि ये सर कोड क्लाइंट साइड पर रन हो रहा है अभी हम सर्वर साइड की बात ही नहीं कर रहे हैं तो सिंपली डॉक्यूमेंट के अंदर जाकर आपको क्वेरी सिलेक्ट से आपको कोई बेल्ट मिल सकता है तो अभी तो हमने देखा था जस्ट स्टैमर का एक्सेस ले लो और उसके अंदर क्या लो क्लास लिस्ट का एक्सेस ले लो और वहां से रिमूव कर दो क्या रिमूव कर दो जो भी लाइट है डार्क उसमें जो भी लिख रखा है सभी रिमूव कर दो लाइट भी रिमूव कर दो और उसके अंदर अगर डार्क हो तो डार्क रिमूव कर दो या दोनों हो तो दोनों रिमूव कर दो ठीक है तो जितना इसको मिलेगा वहां से रिमूव कर देगा अच्छा रिमूव क्यों कर क्योंकि मुझे एड करना है मुझे नहीं पता था पहले से उसके अंदर क्या वैल्यू है तो चेंज करने का मैंने लोड ही नहीं लिया यहां पे ठीक है डॉक्यूमेंट वापस से वही एक वारी सिलेक्ट एक्चुअली में इसका वेरिएबल में हॉल कर लेना चाहिए था अब ठीक है आप ही कर लेंगे तो एचटीएमएल और उसके बाद ये क्लास लिस्ट का एक्सेस ले लो और उसके बाद बोल दो एड अच्छा एड क्या करना है देखिए एड मुझे क्या करना है सिंपल सा थीम मोड हां मैं डार्क और ये भी ले सकता था बट मुझे पता है ये सर कम एक्चुअली में थ्री मोड मेरे स्टेट के अंदर तो जा रहा है तो जो भी मेथड ने जो भी सेट किया वो मेथड का कम है मेरा कम नहीं मेरे को तो देखना जो भी इसके अंदर होना और वो चेंज कर दो अब क्योंकि मेरी एक डिपेंडेंसी है की थीम मोड में कोई भी चेंज हो तो उसे इफेक्ट वापस रन होना चाहिए तो ऑब्वियस सी बात उसे डिपेंडेंसी का नाम लिख दो थे मोड ठीक है अब जैसे आपको लिखेंगे तो है वैसे अभी आपको नहीं आएगा दो-चार साल देंगे रिएक्ट के साथ तब आपको भी ऐसे इंशन आने लगेंगे ठीक है अब ये जो कोड है ना इसका कोई वास्ता नहीं है ठीक है इसका हमारा कांटेक्ट है कोई वास्ता नहीं है ये बेसिक हमारा कोड है लेकिन अब चलते हैं हमारे पास हम बटन और ये सब बनाने के लिए तो बेसिक हमारा कर फंक्शनैलिटी हो गई है अब चलते हैं इसको भी हम मिनिमाइज कर देते हैं अपने मिनी प्रोजेक्ट को भी और यहां पे बनाते हैं सोर्स के अंदर एक नया फोल्डर और इस फोल्डर का नाम होगा कंपोजिट ओके कॉम्पोनेंट्स के अंदर हमारे पास क्या-क्या होंगे ज्यादा कुछ खास होंगे नहीं ये कार्ड है और एक थीम बटन है तो दोनों को बना लेते हैं एक फाइल बनाएं फोल्डर बनाएं फाइल बना लेते हैं सीधे लिखिए तो सही सीधा ही बना देते हैं कार्ड डॉट जी एस एक्स का नाम देंगे थी बटन डॉट चेयर सेक्स रोल है नहीं आईएफसी लिख दीजिए कम हो गया बस अब चाहे तो आप बेसिक बटन भी बना सकते थे नहीं थोड़ा सा फैंसी जाना है तो थोड़ा सा फैंसी चल जाएगी एक-एक करके लेक आते हैं ये रहा हमारा थीम बटन तो इसका कुछ रोल तो है नहीं आगे आईटी इसे आएगा और यहां पर कॉपी पेस्ट हो जाएगा ये लीजिए थे बट बटन एक्सपोर्ट भी हमने एक ही लाइन में कर दिया ठीक है ये ए गया हमारे पास तीन बटन इसमें थोड़ा सा कम अभी करना पड़ेगा ऑब्वियस सी बात है वो तो करेंगे बट कार्ड के अंदर तो आई डोंट थिंक सो आई सच कुछ कम है बट ठीक है इसको हम करते हैं कॉपी यहां से अरे अभी तो कॉपी का दे रहे थे अभी तो तारीफ कारी थी मैंने अरे ये क्या बात है यहां कॉपी का है और यहां पे नहीं है यह तो गलत बात है हां अब आया कॉपी स्क्रॉल करने के बाद आएगा ठीक है ये भी जेल लेंगे ठीक है आपका ठीक है ये सब हमने लिख रखा है अब इसको नहीं पता की क्या थीम है कैसे क्या है तो एक बार देखते हैं क्या-क्या हमारे पास प्रॉब्लम ए रही है किस तरह से ए रहा है यहां पे थोड़ा सा हमारे पास आना तो चाहिए प्रॉब्लम क्योंकि हमारा कोड फिनिश नहीं हुआ है तो एक बार जाते हैं आपके अंदर और यहां पर हमने कभी इसको लोड ही नहीं कर तो कैसे लोड हो जाएगा अपने आप तो यहां पर आते हैं और थीम बटन को लेकर आते हैं टीम बटन आप ए जाइए ठीक है जी कार्ड आप भी ए जाइए यह लीजिए कार्ड भी ए गए अब देखते हैं कैसा दिखे रहा है तो ठीक है यह तो ए गया हमारे पास लेकिन अभी मैं इसको टॉगल करता हूं तो कुछ होगा नहीं क्योंकि कोई फंक्शनैलिटी इंक्लूड ही नहीं है टॉगल के अंदर लेकिन इतना मुझे पता है की अगर मैं राइट क्लिक करके इंस्पेक्टर करके जाऊं तो मुझे पता है एचटीएमएल के अंदर अभी क्लास एक लाइट है लेकिन मैं इसको जाके चेंज करके अगर मैं डार्क कर डन तो यह डार्क है और मैं यहां पे चेंज कर डन तो ये लाइट है ठीक है अब देखिए लाइट और डार्क आपने मैन्युअल कर दिया बट इसको कौन बताया की लाइट है या डार्क है इसके पास तो इनफॉरमेशन पहुंची नहीं है कभी तो इनफॉरमेशन पहचाने जरूरी है ठीक है वो इनफॉरमेशन कैसे पहुंचेगी ऑब्वियस सी बात है हमारे पास कॉन्टैक्ट्स वगैरा के थ्रू ही पहुंचेगी तो एक-एक करके चीजों को हैंडल करते हैं की किस तरह से और ये सर का सर कम होगा सच कोई डिफिकल्ट इतना है नहीं है ठीक है सबसे पहले आते हैं हमारे थीम बटन के अंदर कहां गया हमारा थीम बटन ये रहा अब तीन बटन के अंदर सबसे पहले क्या कम करना है हमारा हक इसी दिन के लिए तो बनाया था और किसके लिए बनाया था ये रहा आपका हक उसे थे इसको लो और आपके पास थीम कॉन्टैक्ट्स मिल जाएगा तीन टेक्स्ट में से क्या-क्या निकालना है थीम निकाल लो डार्क मोड लाइट मोड जो निकालना निकालो आपके ऊपर है तो हम चलते हैं थीम बटन पर हां जी थीम बटन पे थे तो सबसे पहले उसे थीम ले आते हैं ऑटो इंपोर्ट हो ही जाएगा अपने आप तो हम इसको बोलते हैं उसे थीम जी ए गए देखिए ये लीजिए उसे थे अब इसमें से क्या-क्या निकालना है वो आपके ऊपर है और ये लीजिए बस अब आपके ऊपर है देखिए थ्री मोड निकाल लेते हैं इसमें से सभी निकाल लेते हैं ये लीजिए लाइट निकाल लिया और ये डार्क थीम निकाल लिया ये लीजिए सब ए गए आपके पास अब क्या करना है अब यहां पे एक्चुअली मैं ये रहा इनपुट बटन तो इनपुट बटन पे वैल्यू चेंज हनी चाहिए तो वैल्यू चेंज होने पर क्या होगा वो सब भी हमें देखना पड़ेगा तो एक मेथड लगाना पड़ेगा हां जी और ये इनपुट फील्ड है तो इसकी वैल्यू क्या हनी चाहिए ये लीजिए वैल्यू हमने दे दी यहां पे वैल्यू क्या करते हैं इसको मत कुछ नहीं है ठीक है वैल्यू एक्चुअली में ऑलरेडी है तो वैल्यू देखने की जरूर भी नहीं है अब हमें तो दो कम करने हैं एक तो करना है ऑन चेंज और एक चेक इनपुट बॉक्स है चेक वाला है ठीक है तो सबसे पहले तो देते हैं ऑन चेंज ये लीजिए ऑन चेंज पर क्या हो ऑन चेंज अरे ऑन चेंज बटन तो है ही नहीं इसलिए चलाएगा बोलेगा और मेरे पास तो पता ही नहीं ऐसा भी कुछ है ऑन चेंज बटन यह लीजिए उसको एक बटन दे दिया और उसने चिल्लाना बैंड कर दिया कुछ नहीं कर रहा बटन वह बात अलग है ठीक है इतना तो हो गया तो हम क्या करेंगे वहां पर थी मोड जो है हमारा वो हो जाएगा तो इतना कम तो हो गया लेकिन थे जब चेंज होगी तब क्या करना है कुछ नहीं करना बस मेथड को कॉल करेंगे और वैल्यू चेंज कर देंगे तो ठीक है यहां पे आते हैं तो एक क्या करते हैं हम सबसे पहले डार्क मोड स्टेटस लेना तो पड़ेगा ना अभी वैल्यू क्या है तो उसकी वैल्यू तो लेनी पड़ेगी तो हम क्या करते हैं वैल्यू कैसे लेंगे ए डॉट करंट अच्छा हमारे पास इवेंट तो आया ही नहीं इवेंट तो आना चाहिए ये लीजिए इवेंट यहां पर एक्चुअली हमारे पास इस तरह से इवेंट एक्चुअली में लेने की जरूर ही नहीं है डायरेक्टली आप इवेंट को ले सकते हैं इसमें चेक बॉक्स इसमें इवेंट डॉट करंट टारगेट हमने दो के अंदर डिस्कस कर था ये सब चीज अगर आपको याद हो तो चेक ये लीजिए अब आपके पास स्टेटस ए गया की एक्चुअली में अभी क्या उसका स्टेटस है चेक का वो है डार्क ठीक है जी अब इस स्टेटस को चेक करना है तो कैसे चेंज होगा बड़ा ही आसन कम है डार्क मोड स्टेटस अगर उसके अंदर कोई वैल्यू है तो हम क्या करेंगे सीधा डार्क मोड कॉल कर देंगे तो हम कर देंगे और वरना हम क्या करेंगे थोड़ा सा और अच्छे से लिख देते हैं जिन्होंने कहानी और से अच्छी होगी उनको कोई प्रॉब्लम आएगी तो उसके लिए मैं थोड़ा सा एक समुराई रिवीजन कर डन देखिए यह है आपके चेक बॉक्स के अंदर स्टेटस होती है या तो चेक है या अनचेक्ड है तो हमने क्या कर उसके अंदर सीधा चेक दे दिया और इक्वल स्टार की यहां पे डार्क दी तो ओबवियस सी बात है वहां पर वालुज हो गई है कुछ ना कुछ की चेक के बाद आपकी डार्क वैल्यू ए जाएगी तो चेक है वो अभी तो हम क्या करेंगे यहां से की अगर वो डार्क मोड स्टेटस यहां से ले लेंगे अगर ट्रू होगा डार्क मोड स्टेटस वहां पर तो हम उसको डार्क थीम में दाल देंगे अगर जल होगा तो लाइट थी मैं दाल देंगे बस बेसिक वाला कम है कुछ नहीं चेक और चेक कर रहा है और कुछ भी नहीं इतना ठीक है इतना कम तो हो गया हमारे पास लेकिन अभी हमारे कार्ड को एक्चुअली में नहीं पता की ये सर कम हमने कर दिया है तो कार्ड को कौन बताया यही तो इंटरेस्टिंग बात है यही से तो एक्चुअली में बात आई है की इतने से हमारा कम हो गया है क्योंकि ये स्टेटस हैं और स्टेटस डायरेक्टली लिंक्ड है आपकी थीम से और थीम के अंदर हमने साड़ी वालुज ली है और जो app.j टैक्स है उसके अंदर हमने कहा की थीम मोड के अंदर अगर कोई भी चेंज हो तो उसे इफेक्ट हो इसलिए वो सर अपने आप रन हो जाएगा तो इंटरेस्टिंग बात यह है की आपके जो यूआई डेवलपर है उसमें जो भी आपको कस वगैरा लिख के दिए डार्क मोड वगैरा को आपको उसके अंदर चेंज ही नहीं करने हैं यही तो सबसे इंटरेस्टिंग बात है इसीलिए तो आप देखते हो टैलेंट वगैरा के अंदर सब में एक ही बटन आता है ऊपर क्योंकि ये जो कम है सर कोई और कर रहा है और ये जो कम है वो आपके रिएक्ट इंजीनियर कर रहे हैं क्योंकि उन्होंने सिर्फ एक बटन ऊपर डाला है जो एचटीएमएल के अंदर सिर्फ एक वैल्यू चेंज कर देते हैं और हर चीज रबड़ है कांटेक्ट एपी से तो आपने आपको पता नहीं था बट आप एक्जेक्टली तेलविंड की ही फंक्शनैलिटी बना रहे थे अब मैं इस वीडियो को अगर देता नाम की आ बिल्ड योर ऑन टेल विंड क्लोन तो बहुत सारे व्यूज आते हैं लेकिन एक्चुअली में खराब आपने यही है मैं नहीं चाहता इंटरेस्टेड ऑडियंस भी हो यहां पे और आप देखिए कितना बड़ा कम किया है आपने आ सिंपल सी आप डार्क मोड लाइट मोड थीम ये एग्जैक्ट आपने यह कहा यही बनाया है अभी अब इसको एक बार रन करके देखते हैं हम अब देखिए हमारे पास ये टॉगल थीम है नहीं चल रहा ओके आई थिंक कोई बैग है या हमने कुछ से करना भूल गए एक बार देखते हैं कौन-कौन से बग्स है हमारे पास में एक बार इसको रीस्टार्ट कर लेते हैं ओपन करके देखते हैं ओके आई थिंक छोटा मोटा कोई बैग है मैं एक सेकंड देख के इसको फिक्स करते हैं इस बैग को भी हांजी हो गया फिक्स इतना ज्यादा कुछ डिफिकल्ट था नहीं बट आपको भी बताएं क्या बताएंगे बिल्कुल बताएंगे चिंता मत करिए वो भी बताता हूं आपको वैसे तो इतना ज्यादा कोई डिस्कस करने वाली बात है नहीं बट फिर भी चिंता मत कीजिए सब बताएंगे कुछ भी बिहाइंड डी सीन नहीं छुपेंगे तो देखिए हमारा कम हो रहा है देखिए अब इसको क्या है की इन्वेस्टिगेट करते टाइम मैं पहले डिफॉल्ट पे ए जाता हूं की किस तरह से चल रहा था और कहां पे मेरे को इशू मिला तो देखिए सबसे पहले मैंने देखा की मैं टॉवल कर रहा हूं और कुछ भी कम नहीं हो रहा है तो मैंने राइट क्लिक कर इंस्पेक्टर के अंदर गया और सिंपल सा यहां पे देखा की क्लास अभी यहां पे लाइट है लेकिन मैं जैसे ही टॉगल करता हूं तो क्लास तो मेरी चेंज हो रही है लाइट और डार्क तो एटलिस्ट जो कोड फंक्शनैलिटी है जितना भी हमने लिखा है वो तो सही है यही तो करना छह रहे थे हम और तेलविन के अंदर हमने देखा था की किस तरह से फंक्शनैलिटी जो हम तेल वेट के अंदर भी देखते हैं हमने राइट इंस्पेक्टर यहां पे भी करके देखा था जो तेल वेट का था हमारे पास में अगर कहानी है तो अभी भी प्लेग्राउंड पर चलते हैं वापस से तो यहां पे भी हमने यही करके देखा था की इंस्पेक्टर करके देख रहा हूं और हमारे पास एलिमेंट्स के अंदर यही डर था हमारे पास में इसी को मैं अगर चेंज करके लाइट कर रहा था तो कम हो रहा था और होता भी ऐसा ही है क्योंकि तेल वन के बड़े में अभी हमने चर्चा नहीं कारी है बट हां होता भी इसी तरह से कोई ऐसी प्रॉब्लम नहीं है तो मैंने आपके काफी डर तो अपने कोड को खोज सबसे पहले की यार मैं ही मिस्टेक कर रहा हूं शायद अप डॉट अप डॉट कस के अंदर गया सब कुछ यहां से डिलीट कर फिर भी नहीं हो रहा फिर याद आया की शायद मेरी टेल विंड की कॉन्फ़िगरेशन में कुछ दिक्कत है क्योंकि अभी तक हम बॉयलर प्लेट कंफीग्रेशन कर रहे थे तो एक्चुअली में टेलमेंट कनफ्लिक्ट के अंदर में गया और देखा की हां मैं कॉन्फ़िगरेशन करना ही भूल गया क्योंकि ये जो फंक्शनैलिटी है ना की एचटीएमएल से आपके पास आई है ये फंक्शनैलिटी इनेबल करने के लिए तेल इवेंट के अंदर एक मोड होता है जो आपको इनेबल करना पड़ता है जिसका नाम है डार्क मोड अब डार्क मोड में दो प्रॉपर्टीज आपको मिलती है एक मिलती है आपको मीडिया के बेसिस पे एक क्लास के बेसिस पे तो हम नहीं चाहते की आपका जो सिस्टम है उसके बेसिस पे चलें जो की चला है भाई डिफॉल्ट मैं चाहता हूं क्लास के बेसिस पे चलें तो हमने क्लास जैसे मीडिया डार्क मोड को क्लास के बेसिस पे कहा की चलिए रीस्टार्ट करना पड़ा प्रोजेक्ट और उसके बाद थॉट्स आईटी बस इतना ही तो कम था हमारा अब इसको रिफ्रेश करके देखते हैं तो हम देख रहे हैं टॉगल थीम हमारा कम कर रहा है जैसे ही मैंने इनेबल कर तो ऑटोमेटेकली सब जगह अपडेट हो गया है और सब जगह सबको एक्सेस मिल गया की हां अब हम डार्क मोड में चल रहे हैं तो ये होने को बड़ा ही बेसिक कम है और जो हमने पहले किया था वो भी बड़ा ही बेसिक कम है लेकिन ऐवेंंचुअली क्या होगा की जैसे-जैसे हम आगे जाएंगे तो हमारे पास क्या है और भी बड़े चैलेंज आएंगे उन चैलेंज के टाइम अगर मैं इतना ज्यादा टाइम अगर सिर्फ कांटेक्ट एपी को समझने में लगा रहा हूं तो बन लिया प्रोजेक्ट कभी नहीं बनेगा क्योंकि आगे जाके हम लोग लॉगिन भी हैंडल कर रहे हैं ऑथेंटिकेशन भी कर रहे हैं कुछ सोशल मीडिया भी बना रहे हैं चाट एप्स भी बना रहे हैं तो वहां पे इन सब के बड़े में डिस्कस करना इतना कोई समझदारी वाला कम नहीं है क्योंकि उसके लिए एक डायरेक्टली सीरियस बन्नी चाहिए थी जो हम बना रहे हैं तो अभी हम क्या करते हैं नेक्स्ट स्टेप के अंदर सबसे पहले तो चलते हैं यहां पे और सर का सर कोड पुश करते हैं तो बस इतना सा ध्यान रखिएगा मेली की आपको टेल विंड के अंदर भी एक छोटी सी कॉन्फ़िगरेशन करनी है तो ये हो गया हमारा थीम स्विच ऑफ और इसको भी कर देते हैं कमेंट और कमेंट करके पूछ कर देते हैं ताकि आपको भी कोड मिल जाए अब जिनको भी दिक्कत ए रही है की कोड कहां पे मिलेगा क्या होगा प्लीज प्लीज उनकी हेल्प करेगा ताकि वो लोग भी अच्छे से सिख पे हैं और सारे इन सबको टैब को बैंड कर देते हैं बस इसके नोट्स में मैं इतना सा रखूंगा की आप ध्यान रखें की मोड क्या है और फैक्ट नोट्स में भी मैं आपको ये दे ही देता हूं एक्चुअली में है और यह हमारा बेसिक और मैं क्या करता हूं आपके जो नोट्स मैंने यहां पर लिखे हैं उसके अंदर भी लिख देता हूं ताकि सबको आसानी रहे कॉन्टैक्ट्स नोट्स के अंदर तो कॉन्टैक्ट्स नोट्स यह रहे हमारे कॉन्टैक्ट्स नोट्स और इसके अंदर भी लिख देते हैं रिमेंबर तू चेंज में आपको दे देता हूं ताकि इजीली आप यह लीजिए अब आपके पास ये भी पहुंच जाएगा तो इसको भी हम पुश कर देते हैं हां जी मैं यही से पुश करता हूं ओके जी यह कर देते हैं कमेंट और इसको भी कर देते हैं तो अच्छे से आपको नोट्स भी बना कर दे रहा हूं एक्चुअली में ऐसे ही नोट्स होते हैं और भी नोट्स होते हैं कई लोग कहते हमें हैंड रिटन नोट्स दीजिए एग्जाम में पास करना है ना तो और बहुत सारे चैनल हैं जहां पे एग्जाम पास करवाया जाता है सिंपली तो उनको देख लीजिए यहां तो प्रोडक्शन ग्रेट बातें होगी जो सिस्टम सिखाइए असली इंजीनियरिंग सिखाएगा ठीक है उम्मीद करता हूं आपको काफी मजा आया होगा इस वीडियो के अंदर टारगेट हमारा 1000 कमेंट्स का है कोशिश ये करेगा की एक ही दिन के अंदर पूरे हो जैन और अच्छे से अगर आपको मजा ए रहा है तो प्लीज शेर करेगा वरना क्या होगा इतना इंपॉर्टेंट और वैल्युएबल कंटेंट जो बनाया है इंटरनेट की कहानी भीड़ में इंटरनेट की कहानी हाइट में यह सब हो जाएगा तो ऐसा मत करिए इसको मत कोन दीजिए वैल्युएबल कंटेंट है गोल्डन कंटेंट है सब तक पहुंचने दीजिए इसको चलिए मिलते हैं आपसे अगले वीडियो के अंदर