ReactJs Crash Course: Master the Basics in One Video! Ignite Your Front-End Mastery Series!

वापसी वापसी नहीं होता वापसी होता है भैया सी वापसी का अभी तो शादी भी नहीं हुई आज फाइनली यह दिन देखना पड़ गया दोस्तों तुम लोगों को रिएक्ट पढ़ने आए हो मतलब शर्म नहीं आ रही थोड़ी सी नहीं सही जगह आए हो बस बता रहा हूं क्या हुआ पता दिक्कत क्या है ये बल्ब बल्ब जिसने बनाया अच्छा खासा क्या था सुबह उठो दो-तीन जानवर मारो खाओ पियो जानवर नहीं मार पाए कोई बात नहीं बैरी बैरी तोड़ लो पेड़ से खाओ पियो रात को वो करके तुम समझ रहे हो क्या करके बढ़िया सो जाओ और फिर

सुबह उठो फिर दो तीन जानवर मारो अच्छा समय था लेकिन नहीं इनको बनाना था बल्ब इनको बनाना था रिएक्ट जेएस और आज देखो क्या दिन आ गया तुम जैसे लोगों को आज रिएक्ट जेएस पढ़ने के लिए इस वीडियो का सहारा लेना पड़ रहा है सही जगह आ हो वैसे म मजाक कर रहा हूं बात सुन रहा हूं तो इस वीडियो में मेरा नाम इस वीडियो में मेरा नाम नहीं इस वीडियो में क्या मेरा नाम हमेशा हर्ष शर्मा है और इस वीडियो के अंदर हम लोग कवर कर रहे हैं रिक्ट जेएस लन व्ट मैटर्स और मैं

तुम्हें एक छोटी सी टिप दे देता हूं टिप ये है मुझे लगता है कि रि जए में बेसिकली दो हिस्से हैं पहला है रि जस की स्क्रीन को रेडी करना और ये समझना कि कैसे चेंजेज होते हैं स्टेट क्या है प्रॉप्स क्या हैं डेटा कैसे जाता है कंपोनेंट्स क्या है रिएक्ट का मेन मेन हार्ट कैसे काम करता है उसके अलावा दूसरा पार्ट है व्हिच इज बैक एंड से डेटा लाना ठीक है डाटा को शोकेस करना स्टेट को बहुत ही अलग लेवल पे एडवांस चीजों में मैनेज करना वो सारी चीजें मैंने इस वीडियो के अंदर वो

सब कुछ कवर किया है जो आप कह सकते हो बिगनर स्टफ है राइट एंड बहुत हल्का सा खरीदा है मैंने इंटरमीडिएट स्टफ को बट ये वीडियो आपको सब कुछ सिखाएगा जो आपको गेट स्टार्टेड करेगा रिएक्ट के साथ मेरा नाम है हर्ष शर्मा इट्स टाइम वी शुड बिगिन लेट्स गो हेलो क्या हाल है दोस्तों आफ्टर अ लॉन्ग लॉन्ग टाइम वापस से लौट आया हूं पता है क्यों लॉन्ग ल लॉन्ग लॉन्ग टाइम हो गया वो इसलिए हो गया एक्चुअली मुझे बहुत ही तगड़े लेवल पे कोविड के सिम्टम्स दिख गए थे एंड मैं एकदम मौत को छू के

टक से वापस आ गया दोस्तों मजाक नहीं कर रहा हूं यहां पे पिपलानी के पास में मौत खड़ी हुई थी अ हम लोगों ने ऑलमोस्ट हाथ मिला ही लिया था लेकिन मैंने कहा सॉरी दोस्त अभी तुम लोगों को रिएक्ट सिखाना बाकी है और काफी सारे स्टूडेंट्स ने फीस दे रखी है तो वो लोग कहेंगे भैया फीस का पूरा पढ़ाया नहीं और मरमरा गए तो ऐसा मत करो तो इसलिए वापस लौट आया लेकिन आज मैं तुम्हारे पास क्यों आया हूं वो सुनो आज ना अपन लोग रिएक्ट जेएस लर्न व्हाट मैटर्स करने वाले हैं मैं मानता हूं

कि इस वीडियो में आपको बहुत ही तगड़े लेवल पे रिएक्ट की बहुत जबरदस्त अंडरस्टैंडिंग होगी एंड दैट माय प्रॉमिस टू यू ठीक है साथ ही साथ आप काफी कुछ सीख जाओगे रिएक्ट में कैसे काम करते हैं और फिर धीरे-धीरे तो इवेंचर करोगे अपने प्रोजेक्ट पे काम करोगे जरूरतें फील होंगी कि यार ना मुझे रिएक्ट में एक्स वाई जड में थोड़ी सी दिक्कत हो रही है देन यू विल सर्च अब अबाउट इट एंड धीरे-धीरे तुम बेहतर बन जाओगे ऐसे ही तो हर कोई सीखता है राइट सो आप एक अच्छे अमाउंट ऑफ कांटेक्ट को सीखते हो फिर

उसके बाद आप उसको यूज़ करते हो यूज़ करते वक्त आपको लगता है यार वाई नहीं आता मुझे देन आप वाई को देखते हो और वाई भी सीख जाते हो एंड दैट इज द बेटर अप्रोच टू लर्न ऑलमोस्ट एवरीथिंग हमने प्रूफ करके बताया लर्न व्हाट मैटर सीरीज से राइट तो चलो फिर आज मैं तुम्हें रिएक्ट सिखाता हूं मेरा वादा तुमसे मजा आ जाएगा चलें लेट्स गो सबसे पहले आज हम रिएक्ट लर्निंग करने वाले हैं राइट तो उसमें दो एस्पेक्ट में मैं चीजों को देखता हूं पहला रि जीएस से कोड करना कुल मिला के ऐसा समझो आप

कंपनी के अंदर पहुंच गए कंपनी के अंदर पहुंचने के बाद आपका जिम्मेदारी है रिएक्ट जेएस के हेल्प से म जैसा प्रोजेक्ट बनाना कंपनी के अंदर समझ रहे हो तो आपको वो करना आना चाहिए ठीक है ओके नंबर वन ओके कूल मतलब रिएक्ट का कोड लिख पाना हां बढ़िया तो रिट जेएस का इंटरव्यू क्रैक करना इसकी दूसरी जिम्मेदारी है जब आप रिएक्ट लर्निंग में जाते हो ऐसा क्यों मैं तुम्हें एक बात बताता हूं जैसे अभय मुझे इस वक्त देख रहा होगा तो अभय जब इंटरव्यू पे जाएगा तो अभय को प्रोबेबली क्या नहीं बोला जाएगा कि तुम

एक मिा का ऐप बना के दिखाओ अभय से बोला जाएगा अभय क्या तुमने रिएक्ट पढ़ा कहेगा यस अबे क्या तुम रिएक्ट में कंफर्टेबल हो हां अबे मुझे यह बताओ रिएक्ट में आप एक कंपोनेंट से डाटा दूसरे कंपोनेंट में कैसे भेजते हो ये एक बहुत ही बेसिक क्वेश्चन है रिएक्ट चस में समझ रहे हो तो क्वेश्चंस जो होंगे वो काफी थ्योरी बेस्ड एंड आई वुड से काफी रिएक्ट की वर्किंग बेस्ड होंगे तो इसीलिए रिएक्ट को पढ़ने में दो स्पेक्ट्स पे आपको काम करना है पहला है भाइयों रि जीएस का कोड करना सीखना है आई बिलीव आप

सीख जाओगे दूसरा है रि जीएस का थ्योरी पार्ट आंसर कर पाना और मुझ पे यकीन रखोगे तो ब्रो आई विल प्रॉमिस आई विल आई एम प्रॉमिसिफाई लेट्स गो वरीज क्यों क्योंकि बहुत सारे लोग वरी कर रहे हैं तो जब मैंने पढ़ा था इंग्लिश में बहुत सारे लोग चीजों को करते हैं तो उसे अ सिंगुलर की जगह प्लूरल में बोलना चाहिए इसीलिए दोस्तों वरी को वरीज कहेंगे तुम लोगों को इंग्लिश भी सिखा रहा हूं फ्री ऑफ कॉस्ट समझ रहे हो बात को चलो इट्स टाइम वी शुड स्टार्ट लेट्स गो तो फटाफट रिएक्ट लन वट रिएक्ट लन

व्हाट मैटर्स में रि लन व्ट वाटर्स क्या होता है रिएक्ट लोन व्हाट मैटर्स में व्हाट व्हाई हाउ वेयर एंड व्हेन सबसे पहले कवर करेंगे मुझे मैं सच बताऊं इस चीज के अंदर ना यह जो पांच क्वेश्चंस हैं इतनी क्लेरिटी मिलेगी तुमको इतनी क्लेरिटी मिलेगी मतलब लिटरली तुमने अभी तक जितने भी अच्छे-अच्छे क्रिएटर्स से पढ़ाई करी होगी सारी पढ़ाई एक तरफ यह वाली पढ़ाई एक तरफ नहीं क्योंकि एक तरफ तो सारी पढ़ाई है ना मतलब यह वाली पढ़ाई दूसरी तरफ मजेदार होगा मजा आएगा लेट्स गो नो डिसरेटर पढ़ा रहे हैं लोग youtube2 पढ़ा रहे हैं बट

अभी तक हमने अपना योगदान नहीं दिया है दोस्तों लेट्स गो फटाफट तो हम बातचीत करने वाले हैं व्हाट रिएक्ट चलो आओ मेरी बात सुनो चले लेट्स गो तो जल्दी से थ्योरी पढ़ो फ को एक प्रॉब्लम नजर आई प्रॉब्लम नजर आई कि रियल टाइम में वो नोटिफिकेशंस एंड रिएक्शंस को नहीं शो कर पा रहे हैं मेरे साथ पढ़ो बस मेरे साथ पढ़ो मैं तुम्हें समझा दूंगा य मेरा वादा ठीक है तुम्हें मजा भी आएगा और सच में बस मेरे साथ चलो और मैं तुम्हें ये समझा दूंगा मेरा वादा तुमसे तो रिएक्शंस नोटिफिकेशंस एंड अदर डाटा डिलीवर

करने में देखना डिलीवर करने में में पेज रीलोड करना पड़ रहा है एंड वह इसलिए क्योंकि दे वर यूजिंग समथिंग कॉल्ड पीएचपी ठीक है अब इस प्रॉब्लम से से निपटने के लिए इस प्रॉब्लम से प्रॉब्लम लिख दिया मैंने इस प्रॉब्लम से निपटने के लिए 2013 में ओए ओए ओए क्या लिख रहा हूं भाई 2013 में दोस्तों दोस्तों लिखने वाला था 2013 में एक एक लाइब्रेरी बनाई यह लाइब्रेरी खास थी कैसे खास थी क्योंकि यह डाटा को रियल टाइम में दिखा पा रही थी पर इस लाइब्रेरी के काम करने का तरीका डिफरेंट था ठीक है मैं

समझाता हूं इस लाइब्रेरी के काम करने का तरीका का डिफरेंट था मतलब कि पहले प्रॉब्लम समझते हैं पहले प्रॉब्लम समझते हैं मैं ये डिफ काम करने का तरीका डिफरेंट था यहां पे इसको रोक रहा हूं मैं तुम्हें थोड़ा दूर लेके चल रहा हूं ठीक है पहले मैं तुम्हें समझाना चाहता हूं कि प्रॉब्लम क्या है ब्राउजर्स ब्राउजर्स मतलब [संगीत] कुछ भी चेंज हो तो पूरा डोम ट्री रिफ्रेश करो अब ये ड्रोम ट्री क्या होता है जब तुम्हारी वेबसाइट तुम देखते हो उसमें जो भी चीजें दिखती है वो डॉम ट्री में होता है एक डॉम ट्री ऐसा

सोचो एक एलिमेंट उसकी ब्रांचेस पेड़ होता है ना पेड़ पेड़ में एक टहनी निकलती है उस टहनी की अपनी अपनी भी ब्रांचेस होती है फिर उन ब्रांचेस की अपनी अपनी भी ब्रांचेस होती है तो इस तरीके का जो ब्रांचेस होती है ना वैसे ही पेज में होता है एक डिफ के दो डिब्स हैं एक डिव के अंदर दो डिव हैं उन दोनों डिब्स में अपने-अपने डिब्स हैं तो ये एक काइंड ऑफ ब्रांचेस हैं तो और ये पूरा जो आप ब्रांचेस का कलेक्शन देखो इसको हम डॉम ट्री कहते हैं ठीक है पूरा डॉम ट्री रिफ्रेश करो

ब्राउजर्स का नेचर क्या होता है बाय डिफॉल्ट होता है जब भी पेज में कुछ चेंज होगा मतलब एक बटन है उसमें डाउनलोड नाउ लिखा है और वह लाल से नीला हो गया सिर्फ लाल से नीला हुआ है तो मेरी बात सुन भी रहे हो या नहीं क्या तुम मेरी बात सुन रहे हो कम ऑन तुम्हें मेरी बात सुननी है ठीक है हमें ये पढ़ना ही है हमें इसे कवर करना ही है ठीक है बहुत दूर नहीं भाग सकते अपन इससे लेट्स गो तो ब्राउजर में एक बटन दिख रहा है विच इज लाल कलर का हमने

उसे नीला कर दिया जैसे मेरा ये कपड़ा है नीला राइट हमने उसे नीला कर दिया तो होता क्या है पूरी वेबसाइट में सिर्फ एक बटन नीला हुआ है लेकिन फिर भी ब्राउजर का नेचर होता है जब भी पेज में कुछ भी चेंज होगा तो पूरा डॉम ट्री रिफ्रेश करो अच्छा जिसकी वजह से पूरा पेज री रेंडर ये टेक्निकल वर्ड है री रेंडर मतलब रिफ्रेश रीलोड नहीं रिफ्रेश री रेंडर होगा जो कि काफी इनएफिशिएंट है ठीक है मतलब कि सोचो अगर एक चेंज पर एक चेंज पर पेज सॉरी पेज नहीं डॉम एक बार रिफ्रेश हो रहा

है तो एक लाख चेंज पर एक लाख बार रिफ्रेश होगा क्या यह समझ आया एंड इसके वजह से तुम्हारा ब्राउजर इसकी वजह से ब्राउजर क्रैश हो जाएगा या फिर सकता है समझ रहे हो अगर वेबसाइट तुमने खोली उस वेबसाइट प बहुत सारी चीजें लगातार चेंज हो रही है लाइक तुरंत बढ़ रहे हैं मैसेज आ रहे हैं दुनिया भर की चीजें नोटिफिकेशन ये वो और इतने सारे चेंजेज एक साथ हो रहे हैं तो तुम्हारा ब्राउजर ही क्रैश हो जाएगा बात समझे क्योंकि इतनी सारी चेंजेज करने के लिए इतनी बार रिफ्रेश करना पड़ेगा पर सेकंड एंड ब्राउजर

क्रैश हो सकता है एंड दैट इज वई अब सुनो पर इस लाइब्रेरी के काम करने का तरीका डिफरेंट था यह मेन डॉम ट्री को अपडेट नहीं करती है अपडेट नहीं करती है डायरेक्टली मतलब की सुनना सुनना सुनना मतलब कि अगर पेज में कुछ भी चेंज हुआ तो डायरेक्टली डायरेक्टली मेन डॉम ट्री अपडेट नहीं होगा सुनना ठीक है और अब आया टेक्निकल वर्ड इस लाइब्रेरी का खुद का एक डॉम ट्री है उसका नाम है वर्चुअल डॉम ठीक है मैं सारे हम जब ये थ्योरी एक बार में पढ़ेंगे ना तब तुम्हें बिल्कुल क्लियर हो जाएगा तुम्हें मुझ

पर भरोसा रखना पड़ेगा और मेरे साथ चलना पड़ेगा ट्रस्ट मी मैं तुम्हें धोखा नहीं दूंगा लेट्स गो तो इस लाइब्रेरी का खुद का एक डॉम ट्री है उसका नाम है वर्चुअल डॉम ठीक है यह यह डॉम ट्री एग्जैक्ट कॉपी है एज्ट है रियल डॉम ट्री का बस एक डिफरेंस है वह है कि जब भी वर्चुअल डॉम में कुछ चेंज होगा तो सिर्फ उसे चेंज किया जाएगा जो कि चेंज हुआ है ना कि पूरे ट्री को रिफ्रेश किया जाएगा ठीक है अब लुक्स लाइक बहुत सारा टेक्स्ट है ब्रो गोलू यह रिएक्ट जो मैंने अभी लिखा है

ना यह रिएक्ट की पूरी मानसिकता है ठीक है मैं तुम्हें समझाता हूं रियल टाइम में वो नोटिफिकेशन एंड रिएक्शंस को शो नहीं कर पा रही है ओके मतलब यह है वेबसाइट खुली हुई है उस पर नोटिफिकेशन आया लेकिन दिख नहीं रहा है ओके ठीक है ऐसा नहीं हो पा रहा था पहले ठीक है फिर उसके बाद उन्हें रिएक्शन नोटिफिकेशन अदर डाटा डिलीवर करने में पेज रीलोड करना पड़ रहा था ओके अगर जैसे मुझे नोटिफिकेशन देखना है तो मैं रीलोड बटन दबांग पेज रीलोड होगा और फिर मुझे नोटिफिकेशन दिखेगी ठीक है समझ गया एंड वो इसलिए

क्योंकि दे वर यूजिंग समथिंग कॉल्ड पीएचपी एट बैक एंड ओके ठीक है ठीक है फिर उसके बाद सर फिर क्या हुआ अब इस प्रॉब्लम को से निपटने के लिए अब इस प्रॉब्लम अ अ अब इस प्रॉब्लम से निपटने के लिए 2013 में के काम करने का तरीका डिफरेंट था कैसे ये मेन डॉम ट्री को अपडेट नहीं करती है डायरेक्टली डायरेक्टली आपका डॉम ट्री अपडेट नहीं करेगी कि पूरा रिफ्रेश हो जाए नहीं करेगी मतलब कि अगर पेज में कुछ कुछ भी चेंज हुआ तो डायरेक्टली मेन डॉम ट्री अपडेट नहीं होगा इस लाइब्रेरी का खुद का एक

डॉम ट्री है उसका नाम है वर्चुअल डॉम यह डॉम ट्री एग्जैक्ट कॉपी है रियल डॉम ट्री का बस एक डिफरेंस है व है कि जब भी वर्चुअल डॉम में कुछ चेंज होगा तो सिर्फ उसे चेंज किया जाए जाएगा जो कि चेंज हुआ है ना कि पूरे ट्री को रिफ्रेश किया जाएगा सुनो मेरी बात हमारा बेसिक एक नॉर्मल वेबसाइट में कुछ भी चेंज होता है पूरा रिफ्रेश होता है रीलोड नहीं रिफ्रेश वो आपको देखेगा नहीं होते हुए बट बिहाइंड द सींस पूरा डॉम ट्री रिफ्रेश होता है ओके लेकिन वर्चुअल डॉम में अगर कोई भी पार्ट चेंज

होता तो सिर्फ वो पार्ट चेंज होगा एंड दैट्ची सो फेमस एंड यूजफुल फॉर बेग एप्लीकेशंस समझ आया क्या यह ज्यादा एफिशिएंटली ब्राउजर को यूज करता है ज्यादा एफिशिएंटली आपने अपने एप्स को क्रिएट करता है और आप ज्यादा बेहतर एक्सपीरियंस यूजर को डिलीवर कर पाते हो इसके कुछ अच्छे फीचर्स हैं जब आप रिएक्ट से वेबसाइट बनाते हो पहला वेरी वेरी इवन एक और वेरी लेस पेज रीलोड्स ऑलमोस्ट एक भी नहीं जब तक आपको जरूरत ना पड़े देयर आर जीरो पेज रीलोड्स ठीक है मतलब अभी हम देखेंगे एक भी पेज रीलोड नहीं होगा जब आप रिएक्ट पर

रिएक्ट से वेबसाइट बनाओगे ओके ठीक है और एक्सट्रीम यूज ऑफ रीयूज बल कंपोनेंट्स मतलब अभी मैं आपको दिखाऊंगा अी दिखाऊंगा दो मिनट रुक जाओ चलते हैं अपन और तीसरा ध्यान से आप दिस इज कॉल्ड अ इसको मैं कैसे डिफाइन करूं तो अपन इसको बोलते हैं वेरी वेरी एफिशिएंट वेरी वेरी एफिशिएंट एंड आप कह सकते हो इसको एक्सट्रीमली एक्सट्रीमली कह सकते हो अपॉर्चुनिटी एक्सट्रीम एक्सट्रीमली एक्सट्रीमली अपॉर्चुनिटी कैसे बोलेंगे लाइक बहुत सारी अपॉर्चुनिटी है हिंदी में बोल देता हूं सो इस तरीके का आपको गेम जो आप खेल रहे हैं वो कुछ इस इस तरीके से गेम है

राइट सबसे पहले बातचीत करते हैं वेरी वेरी वेरी लेस पेज रीलोड्स मैं आपको एक वेबसाइट प लेके चलता हूं ठीक है और इसका नाम है अ वैसे तो यह भी है बट इसको तेल लेने जाने दो हम लोग चलते हैं जरा flipkart.com नाइस सो क्या इंटरनेट आ रहा है एक्चुअली आ रहा है चलो अब तुम्हें बस एक काम करना है यहां पे देखना है कि कितनी बार पेज रीलोड होगा ठीक है यह एग्जांपल है बस अभी के लिए एक एग्जांपल है मैं मोबाइल्स पर क्लिक करूंगा पेज लोड हुआ ठीक है मैं इस पर जाऊंगा देखना

ठीक है मैं यहां पे फॉर एग्जांपल इलेक्ट्रॉनिक्स में ए प जाऊंगा पूरा यूआरएल बदल गया पर पेज रीलोड नहीं हुआ राइट तो अगर अपन समझे बाय द वे मेरे हिसाब से दीज गाइस दीज गाइस आर यूजिंग रिएक्ट यस दे आर पहले फ पहले [संगीत] पप जैसा फील होगा पप मोबाइल प होता है मोबाइल पप रीलोड नहीं होता ब्रो आप क्लिक करोगे इट विल जस्ट ओपन नेक्स्ट अप राइट तो फटाफट चीजें खुलती हैं तो दैट इज बेसिकली आप बहुत अच्छा यूजर एक्सपीरियंस दे पाते हो अब आते हैं एक्सट्रीम यूज ऑफ रीजनेबल कंपोनेंट्स मैं आपको समझाता हूं

ये क्या है मैं एक वेबसाइट दिखाता हूं ये हम लोग हमारा जो कोर्स है ना फ्रंट एंड डोमिनेशन उसमें हमने रिएक्ट से ये बनवा रहे हैं हम लोग कैसे बनेगा इस लेवल पे हम लोग सिखा रहे हैं तो एनिमेटेड य हमारे बेसिकली वहां पे आई थिंक रि से हम लोग तीन या चार प्रोजेक्ट्स बनवा रहे हैं दो एनिमेटेड प्रोजेक्ट्स हैं क्योंकि कोई नहीं पढ़ा था एनिमेशन रिएक्ट से कैसे एनीमेशंस होते हैं मैंने मैंने तो नहीं देखा कोई कोर्स रिएक्ट से एनिमेशन पढ़ाने में इंटरेस्टेड हो पता नहीं रि से वो बोरिंग वेबसाइट्स क्यों बनाते हैं बट

दैट्ची साथ ये टाइप के वेबसाइट जो अब मैं आपको दिखाने वाला हूं ये कैसे बनते हैं राइट तो अगर मैं रीलो अगर मैं स्क्रॉल करता हूं तो स्क्रॉल बेस्ड एनीमेशंस यहां पे हैं बढ़िया और फिर आता है ये कैन यू सी दिस इज़ प्रिटी डोप राइट तो इन तरह की चीजें आप कैसे क्रिएट करते हो विथ विथ रिएक्ट इनफिट मार्की कैसे क्रिएट करते हो ये ग्रेडिएंट कैसे क्रिएट करते हो अब यहां पर देखो मैं तुम्हें रीयूज बल कॉम्पोनेंट समझा रहा हूं इन दोनों की [संगीत] शक्लेशा मुझे लगता है पर्सनली कि ये दोनों काफी सिमिलर हैं

तो मैं क्या करूंगा रिएक्ट में क्या करूंगा मैं सिर्फ एक एलिमेंट बनाऊंगा ऐसा और इसको दो बार यूज़ करूंगा रीयूज बल बात समझे मैं डेमो दूं देखना क्या आपको नहीं लगता कि ये दोनों काफी सेम है ये दोनों काफी सेम है देखना इसके यहां पे टेक्स्ट है इसके यहां पे टेक्स्ट है इसके यहां पे पैराग्राफ है इसके यहां पे पैराग्राफ है इस पे बटन है इस पे बटन है इसके सेंटर पे एक एलिमेंट है इसके सेंटर पे एक एलिमेंट है काफी सेम है राइट तो आप क्या नहीं करोगे जैसे आप एटीएल सीएसएस में डिब्स बनाते

जा रहे थे वो नहीं करोगे आप क्या करोगे एक बार बनाओगे और उसे कई बार रीयूज करोगे कॉपी पेस्ट करके नहीं फिर [संगीत] दैट्ची जें काफी ज्यादा यूज करते हो मैं दिखाऊंगा आपको डोंट वरी ओके तो हम लोग अगर समझे तो जो ऐसी चीजें जो बार-बार यूज हो रही है उनको आप बार-बार कॉपी पेस्ट नहीं करते बनाते एक बार हो और उन जगहों पे उन कंपोनेंट्स को रीयूज करते हो सर ये कंपोनेंट्स क्या होता है अभी हम आगे आके समझेंगे कूल ठीक है इस बटन को देखो हम देख लिया अब हां वो ये कि यह

बटन यहां भी है अच्छा हां है तो यहां भी है हां सही बोल रहे हो सिर्फ इतना ही नहीं वो बटन यहां भी है हां यार मतलब लग तो वैसे ही रहा है और वो बटन आई बिलीव ऊपर भी कहीं पर होगा नहीं है नहीं है तो ये बटन आगे भी रीयूज हो रहा है क्या आप देख सकते हो तो मैं इस बटन को एक बार बनाऊंगा और कई जगहों पे यूज करूंगा दैट्ची है बढ़िया ठीक है वेरी नाइस अब आते हैं वेरी वेरी एफिशिएंट वेरी वेरी एफिशिएंट का कोई बेंचमार्क नहीं होता बस इतना समझो

कि हां ब्राउजर पे दबाव कम आता है तो दैट्ची है रिएक्ट इज नॉट फ्रेमवर्क रिएक्ट इज नॉट लैंग्वेज रिएक्ट इज इज नॉट टेक्नोलॉजी इट्स अ लाइब्रेरी ठीक है तो व्हाट एगजैक्टली इट इज रिएक्ट इज अ लाइब्रेरी जावास्क्रिप्ट लाइब्रेरी टेक्निकली ठीक है जावास्क्रिप्ट लाइब्रेरी टू मेंटेन द फ्रंट एंड ठीक है टू मेंटेन द फ्रंट एंड टेक्निकली यह सिर्फ व्यू को संभालता है तीन चीजें होती हैं मॉडल व्यू कंट्रोलर तो रिएक्ट सिर्फ व्यू वाले पार्ट को संभालता है सिर्फ नहीं कहना चाहिए व्यू वाला पार्ट संभालता है ऐसा कहना चाहिए ओके जावास्क्रिप्ट लाइब्रेरी टू मेंटेन द फ्रंट एंड

ठीक है वेरी नाइस ओके फ्रंट एंड एफिशिएंटली और जोड़ लो ठीक है नाइस व्हाई वी वई वी वई वी या फिर वई कंपनीज आर आस्किंग पहले व्हाई वी वांट टू लर्न टू गेट अ जॉब भाई साहब पैसे चाहिए भैया जी रोल्स रॉय खरीदनी है वैसे इतना पैसा मिलेगा नहीं लेकिन ठीक है जॉब चाहिए भाई साहब घर जलाना है सबको तो ट्स व्हाई वी वांट टू लर्न बट कंपनीज व्हाई कंपनीज वांट के हम में रिएक्ट आना चाहिए देखो आजकल जो एप्लीकेशंस बनते हैं वो यूजुअली बिगर इन साइज ही होते हैं कोई छोटा सा डमी प तो

कोई बनवा आता नहीं है तो बिगर इन साइज होते हैं तो उसका फ्रंट एंड मेंटेनेबल रखने के लिए आपको रि जए एक बेहतर चॉइस होती है काफी छोटी सी लाइब्रेरी है सिंपल टू द पॉइंट एकदम काम से काम रखने वाली लाइब्रेरी ज्यादा ज्यादा क्लट चीज नहीं है और एक एवरेज या इंटरमीडिएट स्टफ के लिए एक एवरेज फ्रंट एंड के लिए एक इंटरमीडिएट लेवल बिगनर लेवल फ्रंट एंड के लिए इट्स अ डीसेंट लाइब्रेरी आप जैसे यूज कर सकते हो टू क्रिएट यू नो फ्रंट एंड सो [संगीत] दैट्ची एंड मेक डेटा मेक डाटा इफ यू नीड इट

ठीक है लिंक द डाटा एंड चेंज डाटा व्हेन एवर यू नीड व्हेन एवर यू वांट अभी तुम्हे बिल्कुल समझ नहीं आएगा मैं क्या लिख रहा हूं लेकिन ट्रस्ट मी थोड़ी देर बाद य सेंस करेगा और तगड़ा सेंस करेगा चेंज द डेटा व्हेनेवर यू वांट रिएक्ट विल रिएक्ट येय रिएक्ट विल रिएक्ट जब भी डटा चेंज होगा समझे रिएक्ट विल रिएक्ट जब भी डटा चेंज होगा ट सिपल वेरी नाइस ठीक है ओके कूल सो वेर कहां पर हम लोग यून नो इसको यूज करते हैं तो रिएक्ट में वेर वी यूज इट आई वड से आई वड से

लाइक वन एवर वेर थ बनता नहीं है क्वेश्चन वेन प चलना चाहिए जब आपको एक थोड़ा बड़े लेवल पे पर प क्रिएट करना हो करना हो जिसमें खूब सारी चीजें हो रही हैं खूब सारी चीजें हो रही है एंड खूब सारा रीयूज बल कंपोनेंट स्ट्रक्चर है ओके कूल ठीक है वेरी नाइस तो ये इसके आंसर्स है इसके थ्योरी पार्ट को लिख लेना और बिल्कुल ख्याल रखना हमें थ्योरी के लिए भी प्रिपेयर करना है राइट सिर्फ ऐसा नहीं करना है कि भाई कोडिंग कोडिंग आ गई इ थ्योरी वाले इंटरव्यू में हमने हक दिया ऐसा नहीं होना

चाहिए वेरी नाइस ठीक है दोस्तों कोड करने की जगह बनाना तो अब हमारी कोडिंग वाले पार्ट शुरू होता है यहां से तो कुछ काम कर लो कहते हैं इस फेस को कुछ काम कर लो ठीक है इस फेस का नाम है कुछ काम कर लो दोस्तों प्लीज एकदम से ठीक है वेरी नाइस तो क्या काम कर लो सबसे पहले हमें कोड करने की एक जगह बनानी जहां पे हम कोड लिख सके ठीक है फिर हमें कोड चलाने की जगह बनानी है जहां पर हमारा कोड चलेगा देखो यार कोडिंग करने के लिए ना आपको पहली चीज

क्या चाहिए जहां पे आप कोड लिखो कोड कहां लिख सकते हैं उसके लिए एक टूल है उसके लिए एक टूल है उसका नाम है वीएस कोड ठीक है ओके कूल कोड चलाने की जगह कहां है भाई उसका नाम है google2 ओके और एक इंपॉर्टेंट बात डिफॉल्ट कोड लेकर आना ठीक है तो सुनो मेरी बात सबसे पहले वीएस कोड तुम्हारे पास होना चाहिए ठीक है वेरी गुड आपके पास ब्रेव नाम का सॉफ्टवेयर या फिर कम नाम का सॉफ्टवेयर ब्राउजर्स कहते हैं उन्हें तो वो होना चाहिए वेरी नाइस अगर वो दोनों हैं और अब हम शुरू कर

रहे हैं हमारे कोडिंग वाला पार्ट फटाफट से जल्दी से जाओ और भागते दौड़ते अपना लैपटॉप चालू करो और अगर ऑलरेडी चालू है मेरी बोलती बंद कर दो कैसे बोलती बंद कर दो मेरी स्क्रीन पर ये जो तुम्हारी कंप्यूटर स्क्रीन है उस परे क्लिक करो और मेरी बोलती बंद कर दो प्लीज क्योंकि क्योंकि क्योंकि मैं चाहता हूं कि आप मेरे साथ कोट करो ठीक है सो अकेले कोटिंग में मजा नहीं आएगा तुम भी मेरे साथ चलोगे तो काफी साथ में मजा आएगा लेट्स गो तो सबसे पहले अब तुम मेरे साथ ये स्टेप्स फॉलो करोगे जो मैं

तुम्हें बता रहा हूं फटाफट न्यू नोट खोलेंगे ओके सुनो सुनो सुनो बात सुनो बात सुनो अ या ठीक है रिएक्ट कोडिंग में रिएक्ट कोड ओ रिएक कोडिंग में ओ प् प्लीज प्लीज रि कोडिंग में सारा कोड खुद से नहीं लिखना पड़ता है रिएक्ट वालों ने रिएक्ट वालो ने कौन फसबुक वालों ने आपको एक टूल दिया है उसका नाम है क्रिएट रिएक्ट प ठीक है और हम लोग क्या यूज करेंगे ओबवियसली वीट हैं हां क्यों क्योंकि क्रिएट रिएक्ट प जो टूल है मैं इसको सीआर बोल दे रहा हूं प टूल सॉर्ट ऑफ अभी थोड़ा सा अजीब

सा सिस्टम चल रहा है वहां पे नेक्स्ट जेएस इवॉल्व हुआ है अब ये नेक्स्ट जेएस क्या है बाद की बात है दोस्तों लेकिन अगर आप चाहते हो कि आपको एकदम रॉ फॉर्मेट में रिएक्ट सीखना है तो उसके लिए देयर इज कंपनी इसका नाम है वीट ठीक है यह खुद इनको वीट पढ़ते हैं बट हमारे यहां पे तो वीट का मतलब होता है बाल हटाने वाली क्रीम बट ठीक है तो यह इसे वीट पढ़ते हैं और वीट जो है वीट का मतलब है कि बेसिकली ये आप इससे रिएक्ट रॉ ऐप क्रिएट कर पाओगे जैसा हमें चाहिए

जिसमें कोई नेक्स्ट जेयस वगैरह इवॉल्व नहीं होगा और हम लोग बेसिक सा रिएक्ट प बना पाएंगे दैट्ची हमारा पहला स्टेप है उसके बाद वीट से नया ऐप बनाओ बहुत बढ़िया ठीक है ओके चलिए लेट्स गो ठीक है तो यहां पे आपको सर्च करना है ट वीट सर्च किया पहली वेबसाइट ओपन करो गेट स्टार्टेड पे आओ थोड़ा सा नीचे स्क्रॉल करो थोड़ा सा नीचे एंड यहां पे आपको मिलेगा स्कैफोल्डिंग योर फर्स्ट वीट प्रोजेक्ट वेरी नाइस तो अब आपको एनपीएम पे यहां पे जाके एनपीए क्रिएट वट @ लेटेस्ट चलाना है लेकिन एक इंपॉर्टेंट बात यह कमांड ओए

ओय यह कमांड सिर्फ तब चलेगा जब नोड एंड एनपीएम इंस्टॉल्ड होगा ठीक है अगर नहीं है अगर आपको लगता है कि आपने कभी नोड वगैरह इंस्टॉल नहीं किया गो यर नट जस सर्च करो और पहली वेबसाइट ओपन करो आपको नोट जस आने की जरूरत नहीं है बस नट जस इंस्टॉल्ड होना चाहिए एलटीएस वाले पर क्लिक और यह जनाब शुरू हो जाएंगे सेव और यह जनाब का डाउनलोड शुरू हो जाएगा क्लिक और ये जनाब खुल जाएंगे कंटिन्यू कंटिन्यू और एग्री इंस्टॉल और ये मुझसे कहेंगे पासवर्ड बताओ मैं पासवर्ड बता दूंगा एंड [संगीत] दैट्ची करना है एनबीएम

माइनस व और जब आप यह टाइप करोगे तो यहां पर वर्जन लिख के आना चाहिए ठीक है और अगर नहीं आ रहा है तो इसका मतलब एनपीएम इंस्टॉल्ड नहीं है और अगर नहीं है तो जाओ फिर कमेंट करो बड़े भाई तो मैं आपको बता दूंगा क्या प्रॉब्लम्स आ रही है ठीक है लेट्स गो तो सबसे पहले आपको यह कमांड कॉपी करना है अब कॉपी और अब मैं जो कह रहा हूं उसे करना है ठीक है सुनो विंडोज वाले जो विंडोज वाले दोस्त है सीएमडी टाइप करो सीएमडी टाइप करने के बाद वहां पर तुम लिखोगे सीडी

डी और टैब होता है कीबोर्ड पे एस्केप के नीचे एक की उसके नीचे टैब की होती है तो टैब दबाना देखो मैं बता देता हूं वेट जैसे टर्मिनल मैं ओपन करूंगा तो यहां पे हम लिखेंगे सीडीडी मैक में कैपिटल डी लिखना पड़ता है और जैसे मैं टैब दबांग तो ये डेस्कटॉप में कन्वर्ट हो जाएगा अगर तुम्हारे मैक में मैक में तो हो जाएगा लेकिन अगर तुम्हारे विंडोज में विंडोज में डेस्कटॉप में कन्वर्ट नहीं हो रहा है उसका मतलब है कि तुम्हें पहले ये लिखना पड़ेगा सीडी व टैब दबाओगे तो ऐसा लिख के आ जाएगा वन

ड्राइव फिर एंटर प्रेस करना फिर लिखना सीडी स्पेस डी टैब तो डेस्कटॉप आ जाएगा समझे तो ये विंडोज में कई बार य बनती चलती रहती है सो यू नीड टू टेक केयर ऑफ दैट लेट्स गो तो मैं यहां पे सीडी डी डेस्कटॉप ओए भाई हो जाए यार प्लीज थैंक यू तो मेरा डेस्कटॉप खुल चुका है स्क्रीन यहां पे अगर आप देखोगे तो मैं इस वक्त डेस्कटॉप पे हूं अब दो तरीके हैं पहला आप यहीं पर अपना ऐप बना सकते हो मैंने एक्चुअली क्या किया हुआ है डेस्कटॉप पे मैंने एक फोल्डर बनाया उसका नाम है कोड

यहां पे और मैं सारे अपने एप्लीकेशंस उसी फोल्डर में मैं बनाता हूं तो मैं तो एक लेवल और जाऊंगा अभी बट अगर आप डेस्कटॉप पे बनाना चाहते हो तो आप डेस्कटॉप पे भी लिख सकते हो ठीक है तो बाय द वे मैक में कमांड होता है क्लियर और विंडोज में कमांड होता है सीएलएस ठीक है तो मैं इस वक्त कहां पे आ चुका हूं कोड नाम के फोल्डर पे अब मुझे यहां पे मेरा ऐप बनाना है तो इसको कॉपी करो लाइन को यहां पे करो बड़े भाई को पेस्ट और फिर आपको लगाना है एंटर एक

इंपॉर्टेंट बात मेरे में डायरेक्ट प्रोजेक्ट नेम पूछ रहा है क्योंकि मेरे में इंस्टॉल्ड है आपके में ऐसा बोलेगा कि ये इंस्टॉल नहीं है तो इंस्टॉल करना है तो आपको y लिख के एंटर मार देना है दैट्ची है तो ये इंस्टॉल हो जाएगा पहले तो और फिर उसके बाद अगर ये प्रोजेक्ट नेम ना पूछे तो एक बार कमांड को फिर से चलाना ठीक है तो आपको प्रोजेक्ट नेम पूछेगा मैं यहां पे इसका नाम रख रहा हूं गोलज रिएक्टिंग गोलू इज रिएक्टिंग वेरी नाइस एंड आई विल एंटर और अब ये मुझसे ऑप्शन पूछेगा रिएक्ट बढ़ना है क्या

रिएक्ट बनाना रिएक्ट रिएक्ट अच्छा ठीक है एंड जावास्क्रिप्ट पे क्लिक कर दोगे दैट्ची गोलज रिएक्टिंग एनपीएम इंस्टॉल वेरी वेरी नाइस वेरी गुड ठीक है लो हो जाओ इंस्टॉल थैंक यू प्लीज ये लोग वेट कर रहे हैं ब्रो थैंक यू वेरी नाइस और अब यहां पे क्लियर या सीएलएस कर सकते हो वेरी नाइस और इसको बंद कर लो मैंने ऑलरेडी बना लिया है तो मैं उसे ओपन करूंगा कोड पे जाऊंगा यहां पे मेरे पास गोलज रिएक्टिंग है मुझे इसे ओपन करना है वीएस कोड में ठीक है तो वीएस कोड मेरे पास ऑलरेडी है ये वीएस कोड

है मेरा फाइल ओपन फोल्डर और मैं डेस्कटॉप पे जाऊंगा वर इज माय डेस्कटॉप डेस्कटॉप पे जाऊंगा एंड देयर इज दिस गाय अ डेस्कटॉप पे कोड कोड में है गोलज रिएक्टिंग एंड मैं इसे करूंगा ओपन और गोरु रिएक्टिंग वाला ये ओपन हो जाएगा एक इंपॉर्टेंट बात बहुत ज्यादा जरूरी यहां पे नट मॉड्यूल नाम का फोल्डर होना चाहिए और अगर नहीं है तो क्या करो टर्मिनल पे जाओ न्यू टर्मिनल पे जाना और यहां पे लिखना एनपीएम स्पेस इंस्टॉल इंस्टॉल के लिए आप सिर्फ आई लिख सकते हो इंटरनेट से कनेक्टेड होना चाहिए लैपटॉप और जैसे ही आप एंटर

प्रेस करोगे तो नोड मॉड्यूल फोल्डर जरूर बन जाएगा और फिर भी नहीं बन रहा है जाओ फिर कमेंट करो वेरी नाइस वी विल रिजॉल्व इट बढ़िया चल रहे है यहां तक इट्स टाइम कि अब हम लोग कोडिंग शुरू करें लेकिन हमारा नोटपैड जरा ओपन करो क्या-क्या लिखा था हमने वीट इंस्टॉल करो हो चुका है ट से नया ऐप बनाओ हम लोग बना चुके हैं ठीक है तो हमारे ये टास्क कंप्लीट हो गए ओके वेरी नाइस तो हम ये कह सकते हैं कोड करने की जगह बनाना जो हम बना चुके हैं कोड चलाने की जगह बनाना

ब्रेव सॉफ्टवेयर वो हमारे पास ऑलरेडी है अब डिफॉल्ट कोड लेकर आना यह भी हम कर चुके हैं ये जो आप देख रहे हो ना ये ये डिफॉल्ट कोड है अच्छा ओके अब आता है कोड चलाना कैसे है बहुत सिंपल है एनपीएम रन डेफ ये कमांड है जब भी आप ये कमांड टाइप करोगे तो ये कोड चल जाएगा दिक्कत है यार क्या टाइप कहां करें हां यार ये तो बड़ा क्वेश्चन है भाई टाइप कहां करें यार ये कहीं तो दिख तो नहीं रहा एक्चुअली क्या करो एस्केप की देखो अपने लैपटॉप या सिस्टम पे कीबोर्ड पे एस्केप

की है एस्केप के नीचे एक और की है वो ऐसा ऐसा बना हुआ है शिन शन जैसा राइट ऐसा कुछ तो आपको कंट्रोल और वो प्रेस करना है ठीक है या फिर कम जो मैक टर्मिनल में है अ मैक में है तो आई थिंक इट्स या तो ऑल्ट या तो कमांड या तो कंट्रोल एक बार ट्राई कर लेना तो वो कंट्रोल के साथ अब बैक टिक कहते हैं उसे बैक टिक कंट्रोल बैक टिक प्रेस करोगे तो ये टर्मिनल ओपन हो जाएगा आपको यहां पे अपना कमांड लिखना है एनपीएम रन डेव और स्पेलिंग देख लेना एंटर

प्रेस करोगे तो यहां पे चालू हो जाएगा फिर उसके बाद कंट्रोल दबा के रखना कंट्रोल दबा के रखना एंड एंड आई थिंक कंट्रोल ही दबा के रखना पड़ेगा एंड जब आप इस पे क्लिक करोगे कमांड ऑन मैक ठीक है अगर आप इस पे क्लिक करोगे तो यह सीधा आपका यूआरएल ओपन कर देगा जो कि यहां पे लिखा है और नहीं तो आप खुद के हाथ से भी टाइप कर सकते हो लोकल होस्ट कोलन 5173 अपने ब्रेव ब्राउजर या कम ब्राउजर पे अगर आप देखोगे यहां पे इट इज वर्किंग इट्स वर्किंग वेरी फाइन बढ़िया चल रहा

है कोई दिक्कत परेशानी नहीं है एंड आप क्लिक करके यहां पे वैल्यूज बढ़ा सकते हो इट्स वर्किंग जस्ट फाइन बढ़िया तो हमारा यहां पे एक बेसिक ऐप क्रिएट हो चुका है इट्स टाइम कि अब हम एक स्टेप आगे लेके चले जर्नी को लेट्स गो बढ़िया तो अब मेरी बात सुनो हमें करना ये है कि ये टर्मिनल क्लोज कैसे होगा पहला तरीका तो ये है क्रॉस दबा दो और फिर वापस कैसे ओपन होगा वही कंट्रोल बैक टेक और दूसरा तरीका है कि कंट्रोल बैक टेक से खुलेगा भी और कंट्रोल बैक टेक से बंद भी हो रहा

है तो आप ऐसे भी कर सकते हो ठीक है ये आपकी मर्जी बढ़िया एक स्टेप आगे बढ़े लेट्स गो हमारी जरा लिस्ट ओपन करो कोड करने की जगह बनाना था बन गया अब हमें कोड चलाना है कोड चल रहा है बढ़िया आउटपुट दिखाना है आउटपुट हम दिखा सकते हैं बिल्कुल आप जो भी लिखोगे वो आउटपुट दिख रहा है इस वक्त आप देखो यहां पर ब्रेफ ब्राउजर प आउटपुट दिख रहा है बढ़िया सही है अब क्या है अगला स्टेप क्या है आउटपुट दिखाना और अगला स्टेप एक और रखते है उसका नाम है कोड के फोल्डर स्ट्रक्चर

को समझना फोल्डर स्ट्रक्चर मजा आएगा पक्का मजा आएगा फोल्डर स्ट्रक्चर को समझना ठीक है कोड के फोल्डर स्ट्रक्चर को समझना ओके तो ये कह सकते हैं कि यहां पे ये जो आपको दिख रहा है एरिया ये एरिया जो आपको दिख रहा है दिस इज कोड का फोल्डर स्ट्रक्चर राइट कि एगजैक्टली चीजें कैसे हैं सुनो मेरी बात तुम्हें बिल्कुल मेरी बात ध्यान से सुननी है ब्रो मैं तुम्हें एकदम ऑनेस्ट बात बताता हूं नोड मॉड्यूल से हमें कोई लेना देना नहीं है इग्नोर मारो आंख बंद करके बिल्कुल इग्नोर ठीक है पर सर ये फिर भी है क्या

ये ये वो फाइल्स हैं ये वो फाइल्स एंड फोल्डर्स हैं जो आपके रिएक्ट आपको चाहिए रिएक्ट आपको चाहिए चलने के लिए अच्छा तो हमें वो आना नहीं चाहिए नहीं तो रिएक्ट अपना देख लेगा बिहा सीस हां पर फिर भी मतलब इंटरव्यू में तो पूछ सकते ना नहीं पूछेंगे नहीं पूछेंगे हा नहीं पूछेंगे पक्का 100% सूट बोल अरे मैं बोल तो रहा हूं नहीं पूछेंगे ब्रो ठीक है पब्लिक पे आओ पब्लिक में आप आपके ऐसी चीजें आप डालोगे इमेजेस एसवीजी यू नो वीडियोस यह सब आप स्टेटिक डाटा को पुट कर सकते हो पब्लिक में ठीक है

कोई बात नहीं एसआरसी प आओ एसेट में भी आप स्टेटिक डाटा पुट कर सकते हो बढ़िया फिर उसके बाद ये ए सीएसएस ये सब क्या है गोलू जितने जेएस एक् दिख रहे हैं यही सब कॉम्पोनेंट्स है क्या कंपोनेंट्स कॉम्पोनेंट्स अच्छा क्या होता है ये हां अब वही समझने चल रहे हैं चलो फिर ओके तो मैं आपको आर्किटेक्चर समझाता हूं इस लाइन को पढ़ना हो ठीक है लेट्स गो तो मैं एक नई फाइल बना रहा हूं और यहां पर बस इसको पढ़ना जो मैं लिख रहा हूं आप कंपोनेंट्स बनाते हो मैं समझाऊ और यह सारे कंपोनेंट्स

यह सारे कंपोनेंट्स जाते हैं एक पैरेंट कंपोनेंट पे ठीक है आप कंपोनेंट्स बनाते हो और यह सारे कंपोनेंट जाते हैं पैरेंट कंपोनेंट पे ठीक है ओके अच्छा है यह काफी अच्छा है और पैरेंट कंपोनेंट को बॉडी में पुट कर दिया जाता है नाइस तो आप ये कह रहे हो भैया कि वेबसाइट है जैसे तो नेविगेशन बार जो है वो कंपोनेंट है हां अच्छा उसके नीचे जो हीरो सेक्शन है वो भी कंपोनेंट है हां ठीक है ओके और फिर उसके नीचे जो प्रोडक्ट सेक्शन है वो भी कंपोनेंट है हां अच्छा मतलब बस ऐसे ही मतलब कंपोनेंट

बनाते रहो हर चीज को कंपोनेंट बना दो हर चीज को नहीं फिर एक बड़े चंक को कॉम्पोनेंट बनाइए थोरी अच्छा मतलब कोई बड़ा एरिया है तो उसको कंपोनेंट बना दो हा ठीक है और और दूसरी दूसरी पोर्टेंट बात ऐसा कुछ देखो जो बारबार रिपीट हो रहा हो वो भी कंपोनेंट है अच्छा मतलब जो बारबार रिपीट हो रहा बटन रिपीट हो रहा है जैसे बारबार हा तो कंपोनेंट है वो तो बहुत छोटी चीज होती है ना तो क्या होगा रिपीटेबल तो कंपोनेंट बनेगा फ फॉर शर अच्छा मतलब ओके मतलब जो जो चीज रिपीट हो रही बारबार

वो तो कंपोनेंट बनना तय है हा वो तय है हा और साथ साही साथ अगर कोई बड़ा एरिया बड़ा चंक है तो वो भी अपन उसको भी कंपोनेंट सर्ट बना सकते हैं हा बिल्कुल ठीक है नाइस बढ़िया है और मेरी बात सुनो बिल्कुल ध्यान से ठीक है इसको जूम कर ले तो यहां पर जो सोर्स स्ट्रक्चर है सबसे पहली बात पड सीएस की हमें जरूरत नहीं है डिलीटेड बढ़िया एडज में जो कुछ लिखा है इसे हटा दो और आपको मेरे साथ एक काम और करना है परफॉर्म काम बता रहा हूं ध्यान से सुनना सबसे पहले

अपना लैपटॉप ओपन करो हमें कुछ एक्सटेंशन चाहिए बिना उन एक्सटेंशन के आगे बढ़ना बहुत डिफिकल्ट होगा हमारे लिए हमें कुछ एक्सटेंशन चाहिए चलो जल्दी रेडी हो फटाफट ठीक है और यहां पर इंटरनेट को कनेक्ट करो अपने लैपटॉप अपने डेस्कटॉप को एक्सटेंशन प जाओ और यहां पर टाइप करो यह जो मैं तुम्हे दिखा रहा हूं वेट कहां गया प्रेटर ठीक है तो पहला पहला तो ये चाहिए प्रेटर बंद करो इसे दूसरा चाहिए es7 प् रिएक्ट रिडक्स रिएक्ट नेटिव स्पिट्स इस बंदे का नाम है अ डीएस सेड नजदी इन भाई का हमें एक्सटेंशन चाहिए याद रखना ठीक

है ये दो एक्सटेंशंस डाउनलोड करो फटाफट एंड यहां पर लिखो रफ सी रफ सी लिखोगे और एंटर प्रेस करोगे तो आपको कुछ ऐसा दिखने लगेगा और नहीं दिख रहा है तो वीएस कोड एक बार रीस्टार्ट करके फिर लिखना किसी भी app.js एक फाइल में जाके रफ सी लिखना रफ सी और एंटर प्रेस करना तो यह आपको कोड मिले पूछो यह क्या है मैं तुम्ह बताता हूं यह है कंपोनेंट हां पर सर आपने तो बता नहीं कंपोनेंट क्या होता है आप चल रहे ना दोस्त लेट्स गो तो मैं य पर लिख रहा हूं कंपोनेंट एक फंक्शन

है क्या है अच्छा कंपोनेंट फंक्शन है हां जो कि रिटर्न करेगा जस एकस मतलब क्या क्या कैसा हा जस एक क्या हैय तो समझ आ रहा है रिटर्न भी समझ आ रहा है पर जीएस एकस क्या है जीएस एकस एचटीएमएल की तरह दिखने वाला सिंटेक्स है बट उसके पास कुछ सुपर पावर्स है जो एचटीएमएल के पास नहीं है मैं डम देता हूं वेट आप अगर h1 टैग के अंदर जैसे आपने यहां पे एक h1 टैग बनाया आपने उसके अंदर लिख दिया 2 प्लस 2 और h1 टैग क्लोज कर दिया तो इसका आंसर क्या आएगा अगर

आपने एचटीएल पढ़ा है तो आपको पता है उसका आंसर आएगा 2 प् 2 सही है लेकिन ज में आप यह कर सकते हो h1 ऐसा कहीं पर भी आप एक कली ब्रेसस ओपन करो और जो भी आप उसके अंदर लिख दोगे तो इसका आंसर पता क्या आएगा इसका आंसर आएगा h1 टग फ ओके मतलब आप ओके वेट आप यह कह रहे हो कि कहीं पर भी आप कैलकुलेट कर सकते हो हां सिर्फ कैलकुलेट नहीं इसको पढ़ो इस लाइन को पढ़ो जेस एक्सस ऐसा कह लो वेरी सिमिलर टू एटील विथ सुपर पावर्स याद रखना य एचटीएमएल

नहीं होता है यह दिखता एचटी जैसा है बट कन्वर्ट होता है जावास्क्रिप्ट में कैसे वो तेल लेने जाने दो बस अभी के लिए इतना समझो जब तुम एचव लिखोगे तो य लग बिल्कुल एचटीएमएल जैसा र है लेकिन यह एचटीएमएल नहीं है यह एचटीएमएल जैसा दिखने वाला है सर मैं समझ नहीं रहा हूं सुनो मेरी बात यहां पर फाइल का फाइल का एक्सटेंशन पढ़ो क्या लिखा है सर जेएस एकस एटली क्या वो डॉट एचटीएम लिखा है नहीं तो फिर क्या आप इसके अंदर एटील लिख सकते हो नहीं पर यहां तो लिखा हुआ है हां यह बात

तो सच अे मतलब यहां पे फंक्शन भी लिखा है विच इज जावास्क्रिप्ट रिटर्न भी लिखा है विच इज जावास्क्रिप्ट और [प्रशंसा] [संगीत] क्रिएट ओ जस्ट अ सेकंड क्रिएट एलिमेंट h1 सॉरी डेव ठीक है एंड देन इसके आगे कुछ और कोड जो कि रिएक्ट को चाहिए ओके तो आप यह कह रहे हो कि यहां पर यह जो कोड लिखा है यह बाद में जाके रिएक्ट डॉट क्रिएट एलिमेंट और इस तरीके जावास्क्रिप्ट कोड में कन्वर्ट होगा हां और अगर मैं h1 लिख दूं तो तो वो भी कन्वर्ट होगा मतलब आप जो भी कोड एचटीएल जैसा लिखोगे वो

बाद में जाकर जावास्क्रिप्ट में कन्वर्ट हो जाएगा हां ओके तो हम ऐसा क्यों लिख रहे क्योंकि गोलू h1 लिखना मेरे लिए ज्यादा इजी है यह मैं एचटीएमएल जैसा दिख रहा है तो मैं ये पहचान पा रहा हूं कि मैंने h1 बनाया है पर मैं हाथ से रिड कट एलिमेंट बारबार नहीं लिखना चाहता क्योंकि एक h1 बनाना तो मैं रिड कट एलिमेंट h1 करके बना रहा हूं ना उससे बेहतर है कि मैं यह तरीका आजमा अच्छा ओके और इसी चीज को हम जेएस एक कहते हैं ओके मतलब यह जो दिखने जैसा एचटीएमएल है यह जेएस एक

है हां समझ स गया मैं समझ स गया मैं क्या है ओके कूल ठीक और धीरे-धीरे आप आगे बढ़ो तो सीख जाओगे ओके कॉम्पोनेंट सर क्या है कॉम्पोनेंट है फंक्शन जो कि रिटर्न करे कुछ जेएस एक ओके तो हम ये कह सकते हैं कि एक ऐसा कोई फंक्शन जो रिटर्न कर रहा हो जेएस एक बिल्कुल इस फंक्शन को पढ़ो हां फंक्शन है रिटर्न कर रहा है ओके तो j रिटर्न कर रहा है तो ये फंक्शन एक कंपोनेंट है एगजैक्टली बस बस नहीं यार और भी होगा बस इतना ही है कोर में इतने ही है जैसे

क्रिकेट कोर में क्या है सी द बॉल हिट द बॉल एंड रन बिटवीन द विकेट्स यही है ना क्रिकेट एंड जो सामने वाली बॉलिंग बॉलिंग टीम है जो फील्डिंग टीम है फील्ड द बॉल बॉल द बॉल टेक द विकेट्स एंड मेक द टीम जो भी खेल रही है जो बैटिंग टीम है मेक देम ऑल आउट इतना ही है ना भाई यही है ना गेम हिट द बॉल लाइक सीधा हिट करोगे इट्स अ सिक्स अगर वो सिंगल टिप या या मोर देन वन टिप्स प जाता है बाउंड्री के पार ट्स फोर पॉइंट समझ गए ना इतना

ही है ना क्रिकेट रूल्स लगभग इतने ही है अगर आपकी आपका पैर बाहर निकल जाता है इट्स अ नो बॉल अगर आप लाइन के इस साइड डालते हो इट्स अ वाइड इतने ही रूल्स है राइट वैसे यहां है दोस्त इट्स अ वेरी बेसिक थिंग एक फंक्शन जो कि कुछ रिटर्न करता है और रिटर्न क्या होना चाहिए जीएस एक ट्स अ कंपोनेंट राइट देयर ट्स अबाउट इट दैट्ची डी ठीक है यह बना दिया मैंने फंक्शन और अंदर जाके मैंने रिटर्न कर दिया एक ऐसा h1 जस्ट अ सेकंड ना तो तो आप ऐसा h1 मैंने रिटर्न कर

दिया तो आप ये कह रहे हो कि ये फंक्शन ए बी सीडी मेरा पोनेंट है हां नहीं यार हां अच्छा तो फिर यह दो लाइन क्यों लिखी है यह दो लाइन मत लिखो फिर अगर आप नहीं लिखोगे तो दिक्कत सुनो क्या आप मानते हो कि ये बाद में जाकर रिएक्ट डॉट क्रिएट एलिमेंट में कन्वर्ट होगा हां मैं मानता हूं और इसीलिए गोलू शुरुआत में यह लाइन लिखी थी इंपोर्ट रिएक्ट ताकि जब यहां पर ये लाइन आए यह रिएक्ट डॉट क्रिएट एलिमेंट तो वो यहां से इंपोर्टेड रिएक्ट को यूज कर पाए अच्छा ओके मतलब कल को

क्योंकि ये कन्वर्ट होगी रिएक्ट में तो हमने इसीलिए रिएक्ट को इंपोर्ट कर लिया है ओके समझ गया और फिर यह क्यों किया है अब उसका रोल आता है सुनो आपका जो प कंपोनेंट है वह मेन जेएस एकस में जाकर इंपोर्ट किया जाएगा और उसे रिएक्ट आपके रूट डिव के अंदर रख देगा सुनो यहां पर एक डिव बना हुआ है एटीएल फाइल प उसका नाम है रूट और आपका सारा रिएक्ट कोड मेन जेएस एक कहां पर रख देता है रूट नाम के डेफ के अंदर सारा कोड आपका ऐप का रख देता है तो ऐप के अंदर

जो भी कोड आपके पास होगा वह कहां दिखेगा आपको आपके वेबसाइट के पेज पे एक सेकंड तो मैं जो ऐप में लिखूंगा वो वेबसाइट प दिखेगा बिल्कुल ओके कहीं और लिखूंगा तो तो नहीं दिखेगा उसे प में होना जरूरी है हां ओके तो मतलब मैं यहां पे दो एव बना दूंगा तो दोनों दिखेंगे बिल्कुल समझ गया ठीक है तो इसको चला के देखें बिल्कुल देखो कैसे भाई टर्मिनल ओपन करो ना आ ये तो ऑलरेडी चल रहा है देखो इस वक्त ऑलरेडी चल रहा है ठीक है तो फिर आपको कुछ नहीं करना है ब्रेफ ब्राउजर प

जाइए एंड रीलोड एंड यू विल सी एच ई वाई कैन यू सी दैट ग्रेट यार ये तो बहुत बढ़िया है इंडेक्स ससस प आओ यह जो कोड लिखा है इसे हटा दोगे तो स्क्रीन वाइट हो जाएगी और एक नॉर्मल टेक्स्ट आने लगेगा जैसा आप चाहते हो ठीक है अब अगर आप यहां पर लिख देते हो फॉर एग्जांपल स्टार ठीक है मार्जिन जीरो डिंग जीरो एंड आई विल गो विद बॉक्स साइजिंग बॉड बॉक्स html4 ठीक है हाइट 100 v ए ठीक है बैकग्राउंड कलर इज आई विल गो विद एनीथिंग लाइक 2 22 ठीक है डार्क ब्लैक

कलर है और अगर आपने यहां पे एक डिव बनाया डिव चलो डेव बढ़िया तो आपने उसको नाम दे दिया मेन तो आपको यहां पे इस तरीके का डिव दिखेगा सर एक छोटी सी गड़बड़ है आपने यहां पे क्लास नेम क्यों लिखा है वो तो डिव में तो क्लास होती है गोलू या क्या तुम ये मानते हो कि ये एटीएमएल नहीं है हां मानता हूं ये तो जेएस एक है बिल्कुल और यह बाद में जाकर रिड क्रिएट एलिमेंट में कन्वर्ट होगा बिल्कुल सही बात है और अगर आपने यहां पे क्लास लिखा तो दिक्कत क्या होगी क्लास

नाम की चीज ऑलरेडी जावास्क्रिप्ट में कुछ होती है आप ये जावास्क्रिप्ट लिख रहे हो टेक्निकली हां तो क्लास नाम की चीज ऑलरेडी जावास्क्रिप्ट में कुछ होती है हां पर आप यहां पर जो क्लास लिख रहे हो ये वो क्लास नहीं है जो जावास्क्रिप्ट की क्लास है ये एचटीएमएल वाली क्लास है हां तो रिएक्ट वालों ने इसका नाम चेंज करके क्या रख दिया यहां पे क्लास नेम ओके तो मतलब जब मैं ये जो ब्लैक दिख रहे है ये डेवी है आप ही ने तो लिखा है कि मेन डेफ फुल विड्थ फुल हाइट बैकग्राउंड कलर ब्लैक तो

111 कर दोगे तो और डार्क हो जाएगा ऐसा वाओ ये तो बहुत बढ़िया है सर आप ये एक स्क्रीन से दूसरी स्क्रीन पे कैसे जा रहे हो कमांड टैब और आपके जो विंडोज लैपटॉप आई थिंक ऑल्ट टैब इज द की ऑल्ट टैब के थ्रू आप जा सकते हो नहीं तो आप नीचे जाके इस तरीके से ब्रेव और इस तरीके से विजुअल कोड भी खोल सकते हो इट्स अप टू यू ठीक है तो अगर अपन समझे तो यहां पे ये चीजें अपन ने बना के देख लि ओके ठीक है सर एक छोटा सा बात क्या बात

है सर अगर मुझे जैसे यहां पर डिफ के अंदर मुझे एक h1 देना है दे दो ना अच्छा दे सकते हैं बिल्कुल सर कहां आ रहा है नहीं आ रहा है एक्चुअली आ रहा है व ब्लैक कलर में ओके तो मैं यहां प जाके सीएसएस में लिख दूं य मतलब कलर वाइट बिल्कुल लिख दो अरे बहुत बढ़िया सर यह तो बहुत बढ़िया बात है और यहां पर फंट लिख दू लिख दो अरे वेरी गुड यार यह तो बहुत बढ़िया है यह तो बहुत बढ़िया है और अच्छा अच्छा मतलब मैं यह चीज़ कर सकता हूं बिलकुल

कर सकते हो यह तो गजब हो गया भाई साहब बिल्कुल गजब हो गया अच्छा तो सर अगर जैसे मुझे मुझे एक डिव रेंडर करना है यह डिव शो करना है और डिव के बाद मुझे एक h1 भी शो करना है तो मैं वह कर सकता हूं नहीं क्यों क्योंकि रिटर्न कर रहे हो हां तो तो दो चीजें रिटर्न नहीं कर सकते अरे यार यह तो बहुत गड़बड़ हो गया भाई अगर मुझे करना है तो हां तो फिर आपको यह करना पड़ेगा हमारे पास दो ऑप्शंस है पहला आप एक डिव बनाइए जस्ट अ सेकंड एक डिव

बनाइए और इन दोनों को उस डेव में डाल दीजिए अगर आप देखेंगे तो इस वक्त एक ही एलिमेंट है हां यस और दूसरा तरीका जानना चाहोगे इस तरीके के ब्लैक ब्रैकेट्स बनाओ यह बन गए और आपके कोड को उस ब्लैंक ब्रैकेट के अंदर डाल दो अा ये भी चलेगा बिल्कुल चलेगा यह तो बहुत बढ़िया कर लिया सर आपने बिल्कुल सही बात है तो इसको क्या कहते हैं इसको हम कहते हैं रिएक्ट फ्रेगमेंट मैं सिर्फ अभी ऊपर ऊपर से चीजें आपको बता रहा हूं इन डेप्थ बहुत ज्यादा मैं लेकर नहीं जा रहा हूं वो मैंने ऑलरेडी

हमारे फ्रंट एंड डोमिनेशन कोर्स में कवर किया है एंड हमने बहुत अच्छे से एक रिएक्ट का कोर्स भी बना रहे हैं आने वाला है तो आप उसमें भी बहुत इन डेप्थ चीजों को देख पाओगे ठीक है तो मुझे ये बताओ कि ये कितना अंडरस्टैंडिंग है काफी अंडरस्टैंडिंग है तो ये दो तरीके बढ़िया मजा आ रहा होगा तुम्हें राइट तो आ तो रहा है यार अरे वाह दोनों आ रहे हैं डिफ भी आ रहा है और h1 भी आ रहा है दिस इ वेरी गुड तो हमने अभी तक यह सीख लिया है अगर इस लिस्ट को

हम देखें हमने यह सीख लिया है कि भाई आप डिफॉल्ट कोड कैसे लेकर आते हो आप कोड चलाते कैसे हो आप आउटपुट कैसे दिखाते हो आप कोड के फोल्डर स्ट्रक्चर को समझते कैसे हो समझ लिया है स्टाइलिंग करना है अब रिएक्ट में तो स्टाइलिंग कैसे करें भाई देखो दो फेमस तरीके पहले का नाम है मॉड्यूल सीएसएस और दूसरे का नाम है टेल विंट सीएसएस और तीसरे का नाम है मटेरियल य एक्चुअली तीन है ठीक है हम जो यूज करेंगे उसका नाम है हम जो यूज करेंगे उसका नाम है टेल विंड सीएसएस ऐसा क्यों भाई टेल

विंड सीएसएस काफी सिंपल पड़ता है तो मैं चाहता हूं कि आप मेरे साथ चले इसमें और फिर अपन जल्दी से देखते हैं कैसे स्टाइलिंग करते हैं है ना लेट्स गो सबसे पहले आपको यहां पे सर्च करना है tcs.com फटाफट गेट स्टार्टेड पे आएंगे यहां पे आपको फ्रेमवर्क गाइड्स पे जाना है ट पे जाना है अब यह जो क्रिएट यो प्रोजेक्ट है यह नहीं चलाना है क्या चलाना है इंस्टॉल टेल विन सीएसएस बढ़िया तो पहला कमांड अपन ने कॉपी किया कॉपी यहां पे आई और पेस्ट करके अपन आगे बढ़ेंगे जस्ट अ सेकंड कुछ गड़बड़ हो गई

बढ़िया और अगर मैं एंटर प्रेस करूं तो यह इंस्टॉल हो जाएगा बढ़िया अगला कमांड आपको ये चलाना है जो यहां पे लिखा है फटाफट यह चला दिया ओके फिर आपको क्या करना है यह कंटेंट को कॉपी करना है ये और इसे लिखना कहां है टेल विंट कॉन्वेक्स कॉन्वेक्स जीएस पे तो यहां पे आओ टेल विं कन्फ जीएस पे आओ कंटेंट वाले पार्ट को सिलेक्ट करके पेस्ट कर दो ट्स इट इसे बंद करो फिर आपको यह वाला पार्ट कॉपी करना है कहां पे पेस्ट करना है इंडेक्स सीएसएस में यहां पे आओ पूरा हटाओ पेस्ट करो अच्छा

पूरा हटा के अपना पेस्ट कर दे हां अच्छा अब एप र ये तो हमें पहले से ही पता है हां बिल्कुल पता है तो हम ये चला के देखें बिल्कुल चला के देखो चले चलो अच्छा तो सर ये हटा दूं हटा दो ओके डिव मैंने बनाया है तो टेलन सीएसएस बेसिकली क्या है आपको हाथ से पूरा सीएसएस नहीं लिखना पड़ेगा सिर्फ क्लास लिखना पड़ेगा जैसे विड्थ फुल करने से विड्थ फुल हो जाएगी डब्लू फुल का मतलब फुल विड्थ हाइट स्क्रीन का मतलब स्क्रीन के बराबर हाइट ठीक है और अगर मैं बीजी बीजी मतलब बैकग्राउंड जिंक

जिंक मतलब ब्लैक कलर और उसमें अगर मैं 900 सेट करूं तो ये डार्क कलर सेट होगा जस्ट अ सेकंड हा मुझे एक बार ऐप को चलाना पड़ेगा एनपीएम रनव और अगर अब मैं आपको दिखाऊं तो यहां पे एक डार्क कलर सेटअप हो गया है अच्छा तो अगर मैं इसको 700 कर दूं तो तो लाइटर कलर से सेट हो जाएगा ये तो बढ़िया है एक्चुअली बढ़िया है ये देखो हम इंटरेस्टिंग इंटरेस्टिंग काफी बढ़िया तो सर मैं जैसे यहां पे सीएसएस चला पा रहा हूं तो अगर मैं इसके अंदर कोई डेव बनाना चाहूं बिल्कुल बनाऊ ये डेव

बनाया हां ठीक है सर विड्थ कैसे देंगे अगर जैसे मुझे छोटी सी विड्थ देनी है एक अच्छी चीज सिखाऊं जो चीज तुम्हें ना पता हो लविन सीएसएस पे जाओ क्विक सर्च पे जाओ वहां पे टाइप करो जैसे तुम्हे विड्थ नहीं पता कैसे देंगे विड्थ टाइप करो ओपन करो इसको कहते हैं डॉक्यूमेंटेशन रीड करना ये तुम्हें सीखना ही है जैसे w-2 जस्ट अ सेकंड हां मैं वेबसाइट को जूम नहीं अपने स्क्रीन को जूम कर रहा हूं विड्थ टू का मतलब है आ पिक्सेल विड्थ ओके जैसे 160 पिक्सल विड्थ है विड्थ 40 समझ गया सर विड्थ 44

है 176 ओके तो सर याद करने पड़ेंगे शुरुआत में तो याद नहीं करने पड़ेंगे मतलब शुरुआत में आपको देखना पड़ेगा वहां पे जाके नाम क्या है लेकिन बाद में जाके फिर देखना भी नहीं पड़ेगा फिर आपको सॉर्ट ऑफ याद सा हो जाएगा कि क्या है अच्छा ओके हाइट मैंने 30 दे दी और बैकग्राउंड कलर मैं दे रहा हूं रेड का मान लेते हैं 600 तो अगर आप देखेंगे तो वहां पे आपको एक डिफ दिखना चाहिए बट वो नहीं दिख रहा है क्योंकि 30 नहीं होता 32 होता है ओके यह तो बहुत बढ़िया है यार हां

अगर आपको राउंड करना है तो राउंडेड में एक क्लास है उसका नाम है एमडी मुझे कैसे पता मैंने काफी यूज किया है तो मुझे आईडिया है बाकी आप यहां जाके आप चर्च कर लो कि भाई बॉर्डर रेडियस कैसे आता है बॉर्डर बॉर्डर रेडिस तो आपको वहां पर मिल जाएंगी सारी क्लासेस मिल जाएंगी आप क्या-क्या परफॉर्म कर सकते हो ठीक है राउंडेड एक्सल करोगे तो और राउंडेड हो जाएगा बढ़िया दिस इ वेरी गुड ठीक है वेरी नाइस यहां तक अच्छा चल रहा है अगर मैं यहां प पैरेंट को p4 दे दूं p4 मतलब पडि फोर चारों

दिशाओं में तो ये एलिमेंट अंदर पुश हो जाएगा यह तो बहुत अच्छा है मतलब काफी तेज काम हो जा रहा है इसमें तो बिल्कुल सही बात है और अगर मैं हेलो कैसे हो लिख दूं तो यहां प हेलो कैसे हो लिख जाएगा बहुत बढ़िया और अगर मैं यहां पे p4 p3 दे दूं तो ये कंटेंट अंदर पुश हो जाएगा दिस इज ग्रेट अगर मुझे यहां पे फॉर एग्जांपल टेक्स्ट वाइट कर दूं तो टेक्स्ट वाइट हो जाएगा यार ये तो यार बहुत आसान है एक्चुअली एक्चुअली आपको बस वहां प जाके चीजें देखनी है यहां लिखनी है

देखनी है लिखनी है मैं तुमसे एक बात बताऊं अगर तुम एक भी वेबसाइट एक भी अपनी चॉइस की टेलमेंट के साथ रिएक्ट में बनाओगे ना सिर्फ यूआई वाले पार्ट पे बात कर रहा हूं तुम्हारा काफी कॉन्फिडेंस बिल्ड हो जाएगा समझ रहे हो बात को तो टेल विन को जरूर ट्राई करो ठीक है सो दैट इज व्हाट टेल विंड इज ऑल अबाउट ट्रस्ट मी इससे ज्यादा है नहीं जस्ट सी द क्लास अप्लाई सी द क्लास अप्लाई ें सीएसएस आनी चाहिए ओबवियसली राइट सो स्टाइलिंग करना कैसे होता है रिएक्ट में तीन तरीके हैं उसमें से हमने एक

सीखा है मैं जो कोर्स है हमारा उसमें हमने ये दोनों बताए हैं मॉड्यूल मॉड्यूल ससस एंड टेलन ससस मटेरियल यूआई ये काफी अ आई वुड से बस सब्जेक्टिव है या तो टेल विन या तो मटेरियल यूआई सॉर्ट ऑफ ऐसा चलता है या तो चलता है तो इसलिए हमने अ बेस लेवल मॉड्यूल सीएसएस भी कवर किया है और टेलन सीएसएस भी कवर किया है वहां पे बहुत अच्छे तरीके से कवर किया है सो डोंट वरी अबाउट इट अगर आप वहां पर बाइंग ऑप्शन की तरफ देख रहे हो तो बिल्कुल अनडाइन बाय करो बहुत बढ़िया बहुत बढ़िया

तरीके से कवर किया है राइट सो अब आते हैं जरा फटाफट कॉम्पोनेंट पे तो कॉम्पोनेंट बनता कैसे है हमने अभी-अभी बनाया कंपोनेंट बनाना बहुत आसान है कैसे बनाएंगे चलो मैं आपको बना के दिखाता हूं सोर्स के अंदर आप गए एक फाइल बनाओ और इसका नाम रख दो अ लेट्स से मैंने इसका नाम रख दिया प्रोडक्ट्स प्रोडक्ट्स ड ठीक है आपको जेएस नहीं रखना है जेएस एक रखना है बढ़िया तो अब जो यहां पे एक फाइल बनी है यह आपका कंपोनेंट है आ ओके [संगीत] दैट्ची लिखो बेहतरीन यह तो बहुत जबरदस्त है मतलब पूरा लिख के

मिल गया मुझे एगजैक्टली पर सर यह कहीं मुझे मेरे वेबसाइट प दिख क्यों नहीं रहा है मतलब कहीं पे दिख क्यों नहीं रहा है प्रोडक्ट्स लिखा हुआ मैंने तुम्हें एक चीज समझाई थी क्या तुम्हें याद है कि सिर्फ वो देखेगा जो प में है हां क्या प्रोडक्ट्स इस वक्त पप पे है नहीं है तो क्या वह दिखेगा अच्छा नहीं दिखेगा नहीं तो अगर मैं इस दिव के बाद प्रोडक्ट लाना चाहूं तो कैसे लाऊंगा आप इस तरीके से टैग बनाइए प्रोडक्ट्स अब देखो यहां पर ये इंपोर्ट हो रहा है ऑटोमेटिक ऐड इंपोर्ट अगर मैं इस पर

क्लिक कर दूंगा तोय ऑटोमेटिक इंपोर्ट भी हो जाएगा और ये इस तरीके से बन भी जाएगा बस एक चीज इस टैग को कंप्लीट कर देना सेल्फ क्लोजिंग टैग है ये सेल्फ क्लोजिंग ठीक है अगर आप आप देखोगे तो ये कार्ड भी आ रहा है उसके नीचे आपको प्रोडक्ट्स लिखा हुआ दिखेगा क्यों क्योंकि आपने प्रोडक्ट जीएस एक में क्या लिखा है प्रोडक्ट अच्छा अच्छा मतलब जैसे मैं यहां पे टेक्स्ट वाइट कर दूंगा तो वहां पे टेक्स्ट वाइट हो जाएगा बिल्कुल ओके तो जैसे अगर मैं यहां पे एक डिफ बनाऊ जिसमें मैंने क्लास दी हुई हो विड्थ

फुल और हाइट दी हुई हो लेट्स से हाइट दी हुई मैंने 90 या जो भी है 90 कितनी होती है देखना पड़ेगा जस्ट अ सेकंड इस पर चल देंगे और फटाफट हाइट देख लेते हैं कितनी होती है हाइट ओपन करो एंड वी विल ट्राई टू गो फॉर 96 ठीक है अच्छा तो सर जैसे अगर मैं ये लिखूं और मैं यहां पे एक ग्रे कलर दूं तो वो दिखेगा बिल्कुल दिखेगा क्या बात कर रहे हो अरे 100% यार अरे हां यार दिख तो रहा है ये दिस इज ग्रेट मतलब आप ये कह रहे हो वेट कि

हम कितनी भी सोर्स के अंदर फाइल्स बनाए हां बना लो कितनी भी बनाए हां बना लो और वो सारी फाइल्स को इंपोर्ट कर ले ऐप में हां और अपने आर्किटेक्चर में यूज करें हां ऐसे ही करना है हां बड़े भाई तुम झूठ क नहीं मैं सच कह रहा हूं ऐसे ही करना है ओके और साइंस नहीं होती होती है इससे थोड़ी सी ज्यादा हां तो वो हम कवर अभी नहीं कर रहे अभी नहीं क्योंकि वो वो थोड़ा सा ऊपर लेवल की चीज है बट अभी के लिए दिस वट थिंग्स आर ये बेसिक्स है इनको अच्छे

से सीखो ठीक है इट्स टाइम आगे बढ़ते लेट्स गो तो फटाफट यहां जाएंगे एंड कंपोनेंट जोड़ना हमने सीख लिया है इंपोर्ट करो और कंपोनेंट जोड़ो बढ़िया कॉम्पोनेंट में रिएक्शन ऑफ डाटा कंपोनेंट रिएक्शन ऑफ डेटा चेन समझना अब मैं तुम्हें एक कुछ दिखाना चाहता हूं उसे समझो फिर अपन आगे बढ़ते हैं तो भाई देखो मैं तुम्हें कहां लेकर आया हूं कहां आज यह दिन देखने पड़ रहे हैं क्यों क्योंकि तुम्हें रिएक्ट सीखना है बेटा मैं फिर कह रहा हूं बात सुनो तो मैं तुम्हें बस जो बताना चाह रहा हूं उसको समझना जैसे ये हमारे वेबसाइट है

ठीक है ये वेबसाइट है अब वेबसाइट पे दिख रहा है 12 क्या दिख रहा है 12 तो ये 12 पता है कहां से आ रहा होगा स्टेट से मैं तुम्हें समझा रहा हूं मेरी बात सुनो हर कॉम्पोनेंट का अपना खुद का डाटा हो सकता है तो कॉम्पोनेंट में क्या सेव है 12 हम यहां पे 12 हाथ से नहीं लिखेंगे मतलब कैसे नहीं लिखेंगे h1 के अंदर खुद से 12 लिख दिया नहीं ऐसा नहीं करना है ठीक है ऐसा नहीं करना है कैसा करना है h1 लिखा जीए एक के ब्रैकेट लगाए इसका नाम मान लेते a

है तो हम यहां पे जीएस एक के अंदर a लिखेंगे समझे मतलब जो डाटा है ये डाटा ये यहां से आ रहा होगा क्या ये समझ आया तो स्टेट में डाटा होगा और वो डाटा हम यहां रखेंगे ठीक यहां तक पिक्चर क्लियर है अब बात सुनो आपको फॉर एग्जांपल यहां पे सेसे 12 को 13 करना है कैसे करोगे भाई पहले तो हम क्या करते थे डॉक्यूमेंट डॉट क्वेरी सेलेक्ट ये वो ये वो डॉट टेक्स्ट कंटेंट ऐसे करके कर देते थे लेकिन दिक्कत है क्यों रिएक्ट में ये जो आप h1 देख रहे हो ये h1 तो

होता ही नहीं है ये तो रिएक्ट डॉ क्रिएट एलिमेंट होता है तो आप क्रिएट एलिमेंट पे ट डॉ क्वेरी सेलेक्टर कैसे चला दोगे भाई हां तो फिर हम कहां चेंज करेंगे यहां हम इस 12 को 13 यहां बनाएंगे स्टेट में रिएक्ट विल रिएक्ट व्हेन स्टेट चेंजेज तो रिएक्ट कहता है कि मैं तब रिएक्ट करूंगा जब स्टेट का डाटा बदलेगा स्टेट में वैल्यू क्या लिखी थी 12 इसलिए 12 दिख रही थी अब स्टेट में वैल्यू क्या हो गई 13 तो अब यहां पर ऑटोमेटिक रिएक्ट चेंज करके उसे क्या कर देगा 13 तो क्या नहीं करना है

आप हाथ से चेंज नहीं करना है आपको स्टेट में वैल्यू लिखनी है वैल्यू को यहां रेफरेंस करना है और चेंज यहां करना है जैसे ही स्टेट बदलेगी रिएक्ट ऑटोमेटिक उससे वैल्यू को यहां प बदल देगा सीधे चल रहे हैं कोड में जरा वहां देखते हैं चलो फिर तो अपन जरा देखते हैं इसको एक्शन में मैं इस प्रोडक्ट वाले को बंद कर रहा हूं तो यहां पे मैंने रफ सी कर दिया तो यह बेसिक सा कुछ हो गया ठीक है कहानी समझना मुझे एक स्टेट बनानी पड़ेगी स्टेट मतलब डाटा ठीक है यूज स्टेट आप जब यूज

स्टेट करेंगे तो ये ऑटोमेटिक इंपोर्ट हो जाएगा और अगर नहीं हो रहा है तो यह करना ऐसे लिखना यूज अगर नहीं हुआ इंपोर्ट सिर्फ तब यूज और जब स्टेट दिखने लगे तो उसपे क्लिक कर देना तो इंपोर्ट जरूर हो जाएगा और ना हो तो फिर हाथ से लिखना पड़ेगा वैसे तो 99.9 हो जाएगा यू स्टेट एक फंक्शन है जिसके अंदर आपको दो चीजें देनी है जो आपका मन करे मैंने 10 ले लिया फॉर एग्जांपल लिटरली आप कुछ भी ले सकते हो ब्लैंक अरे ले सकते हो अरे में नंबर्स ले सकते हो आपकी मर्जी जो डाटा

रखना हो आपको फॉल्स रखना फॉल्स रखो ठीक है आपको ये ऑब्जेक्ट रखना कोई भी डाटा आपकी मर्जी जैसे वेरिएबल होता है जिसमें वैल्यू सेट करते हैं वैसे ही समझ लो कोई वैल्यू जो तुम्हारा मन करे 69 ले ली मैंने ठीक है ओके तो अब इसका मुझे दो आंसर्स मिलते हैं यूज स्टेट मुझे दो चीजें देता है तो मैं इसलिए यहां पे डिस्ट्रक्चरिंग यूज कर रहा हूं डिस्ट्रक्चरिंग आपको थोड़ी बहुत आनी चाहिए और अगर नहीं आती तो बस ऐसा समझो आप अगर a b लिखोगे तो a में ये वैल्यू आएगी और b में b में इस

वैल्यू को अपडेट करने के लिए एक फंक्शन आएगा अच्छा तो मैं a के थ्रू यह वैल्यू एक्सेस कर सकता हूं बिल्कुल और b के थ्रू आप इसको अपडेट कर सकते हो अच्छा हां कैसे ऐसे देखना अभी देखते हैं तो बाय द वे अभी मुझे प दिख रहा है और मैं स्क्रीन को ब्लैक कर दे रहा हूं ताकि तुम्हारी आंखें ना फट जाए तो बीजी जिंक 900 टेक्स्ट वाइट अ एक्चुअली मुझे फुल स्क्रीन करना पड़ेगा विड्थ फुल फगुल की जगह फुल एंड हाइट स्क्रीन वेरी नाइस एंड मोर लाइक दैट बढ़िया तो अगर हम समझे तो ए

विल ए विल एक्चुअली एक्सेस व्हाट ए विल एक्सेस 69 एंड वी विल अपडेट दिस वैल्यू राइट ठीक है तो कैसे करेंगे बहुत आसान है एक्चुअली h1 बनाया और यहां पे जए एक ओपन करो ये क्यों किया अगर मैं डायरेक्ट a लिखूंगा ना तो वो एक्चुअली मुझे a प्रिंट करके दे देगा हां ओके समझ गया और ऐसा क्यों है सर ऐसा क्यों है हो सकता है ना कि आपको एक्चुअल में a लिखना हो हां ऐसा हो सकता है पर अगर सोचो हर बार a लिखने पे वो इस a की वैल्यू देने लगे तो हम a तो

कभी लिख ही नहीं पाएंगे हां क्योंकि उसे उसे मतलब रिएक्ट को पता कैसे चलेगा कि कब एक्चुअली a लिखना है और कब इस a की वैल्यू चाहिए सही बात है तो फिर पता करने का तरीका है रिएक्ट में बोला गया है कि अगर आप डायरेक्ट a लिखोगे तो मैं मानूंगा कि आपको a लिखना है पर अगर आप जेएस एक में a बोलोगे जेएस एक के ब्रैकेट्स में इंटरपोलेशन के अंदर ए बोलोगे हां तो तो मतलब हा तो फिर क्या होगा तो फिर ये ए कन्वर्ट हो जाएगा किसम इस a की वैल्यू में a की वैल्यू

क्या है सर 69 है तो 69 आएगा एक्चुअली आ रहा है मत करो यार भैया यार मत करो कम ऑन नहीं एक्चुअली मैं सच बता रहा हूं अच्छा तो मैं यहां पर प्लस वन कर दूं प्लस वन कर दूं कर दो झूठ अरे यार कैसे बढ़िया एक्चुअली भाई बटन में अगर मैं य प कह क्लिक हां तो मतलब क्लिक पर बटन तो है ही नहीं हां तो बटन जैसा बनाना पड़ेगा भाई आपको यहां प क्लास देना पड़ेगा px3 प वाव बीजी ग्रीन 500 एंड अगर आप देखेंगे तो वो ऐसा दिखेगा राउंडेड एमडी टेक्स्ट स्मॉल या

एक्स्ट्रा स्मॉल ठीक है तो अब बटन जैसा दिख रहा है हां अब दिख रहा है मैं इस पे क्लिक करना चाहता हूं ठीक है और इसकी वैल्यू बढ़ानी है हां बिल्कुल ये एक्स्ट्रा वन जो है इसे हटा दो तो अभी वो 69 है तो जब मैं इस पर क्लिक करूंगा तो ये 70 हो जाना चाहिए क्या बात कर रहे हो कर सकते हां तो रिएक्ट की थ्योरी सुनो रिएक्ट का नाम रिएक्ट इसलिए है क्योंकि वह रिएक्ट करता है जब भी स्टेट चेंज होती है और यही मेन मॉडल है पूरे रिएक्ट का पूरे रिएक्ट का यही

उसका आ है और यही उसके काम करने का तरीका है ठीक है कहने का मतलब बस क्या करना है बस क्या करना है यहां पे अगर तुम इस वैल्यू को बदलना चाहते हो तो तुम क्या नहीं करोगे h1 को सिलेक्ट करा और फिर जाके यू नो क्यों क्यों क्यों नहीं करेंगे क्योंकि क्या ये h1 है नहीं हां h1 है नहीं ये j एक h1 है हां तो हां तो ये रिट ड कट एलिमेंट में कन्वर्ट होगा h1 जैसा कुछ है ही नहीं हां तो क्या आप h1 को सेलेक्ट कर पाओगे डायरेक्टली नहीं एगजैक्टली तो आप

डॉक्यूमेंट ड कट स्क्वेरी सिलेक्टर नहीं कर सकते ओके तो आ वेट इसका मतलब मैं डॉक्यूमेंट क् सिलेक्टर नहीं कर सकता तो मैं वैल्यू कैसे पुट करूंगा एगजैक्टली तो बता ना कैसे करूंगा वो बता एगजैक्टली क्या बोल रहा है हां मैं बता रहा हूं वो यह है कि जब मैं इस बटन पर क्लिक करूं तो मुझे सिर्फ स्टेट को बदलना है अच्छा फिर रिएक्ट कहता है कि अगर स्टेट बदली तो जहां जहां पे स्टेट यूज हुई थी जैसे यहां रिएक्ट उसे खुद बदल देगा एक मिनट आप यह कह रहे हो कि यह 69 लिखा है हां

मैं इसे अगर 70 कर दूं यहां पे यहां पे हां तो रिएक्ट उसे यहां पे ऑटोमेटिक बदल देगा हां झूठ बोल रहे हो मैं सच बोल रहा हूं करके बताओ करके बताता हूं बटन पे ऑन क्लिक अब मैं जो लिख रहा हूं इसे ध्यान से देखिए बटन प जब क्लिक हो तो एक फंक्शन चलाओ ये एरो फंक्शन है ठीक है ओके तो बटन प जब क्लिक हो ये फंक्शन चलाओ और अंदर आप ये जो बी अपडेटर है बी का नाम है अपडेटर जो इस वैल्यू को अपडेट करता है तो बी के अंदर वो वैल्यू पास

कर दीजिए जो आपको करनी हो क्या पास करा मैंने 70 तो अब ये 69 बढ़ के क्या हो जाएगा 70 पर नहीं हुआ एक्चुअली आपने लिखा है बटन के क्लिक प ऐसा होना चाहिए ओके तो मैं क्लिक करूंगा वैल्यू बढ़ जाएगी हां स्टेट में बढ़ जाएगी हां और फिर स्टेट बदली हां बदली तो रिएक्ट रिएक्ट करेगा किस चीज पे स्टेट पे कैसा रिएक्ट स्टेट बदली तो जहां-जहां स्टेट यूज हुई होगी वहां सब जगह पे 70 हो जाएगा रियल टाइम में सच में एगजैक्टली देखना वन टूथ मत करो बड़े भाई मत करो ये तुम क्या कर

रहे हो मैं फिर से क्लिक करूंगा तो अब क्या होगा अब कुछ नहीं होगा क्यों क्योंकि आपने वहां पे हाथ से लिखा 70 स्टेट बादल नहीं रही है ओके ओके वो ऑलरेडी 70 हो चुकी है हां तो मतलब फिर मैं कैसे करूं इसे ऐसे a की वैल्यू क्या थी a की वैल्यू 69 थी [संगीत] प्व अच्छा हां तो ये हो जाएगा कितनी हो गई 70 अब भाई साहब मजा आ गया ब्रो मजा आ गया अच्छा ओके a + 1 सेट हुआ तो अब नई वैल्यू 70 हो गई तो अगली बार a की वैल्यू 70 होगी

और उसमें वन जोड़ेगा तो अच्छा ओके अगली बार 71 हो जाएगा समझ गया मैं बढ़िया बढ़िया यार मजेदार मतलब एक सेकंड आप ये कह रहे हो a इस वैल्यू को पॉइंट करता है एगजैक्टली क्योंकि इस वक्त वैल्यू 69 है तो a 69 को पॉइंट करता है बिल्कुल और यहां से 69 वैल्यू हो गई 70 हां तो ये 70 हो गई हां तो अब a 70 को पॉइंट करता है हां समझ गया ओके तो अगली बार जब 70 प् 1 होगा तो अगली बार 71 होगा गई तो a अब 71 को पॉइंट करता है हां तो

71 में वन जोड़ा तो 72 हो गया समझ गया सर समझ गया समझ गया मतलब कुल मिला के सर अपन को बस स्टेट बदलना है और वो यहां बदल जाएगी बिल्कुल मजा आया सर ये मजा आया मुझे बढ़िया लगा और मैं खुश हूं बिल्कुल ठीक है तो अगर अपन समझे अगर अपन समझे तो कंटेंट में रिएक्शन ऑफ डाटा चेंज समझना कैसे आप रिएक्शन होता है अब स्टेट बदलो चीजें बदल जाएगी बहुत सिंपल है रिएक्ट क्या का को कॉम्प्लिकेट करना फालतू ठीक है तो कंपोनेंट में डाटा भेजना एंड रिसीव करना अब ये क्या है भाई सर

ये क्या है मतलब ये क्या बोल रहे हो आप मैं दिखाता हूं ना आपको दिखाता हूं वेट चले यहां पर 69 डेटा है तो का में ए में और बी क्या है अपडेटर हा एक कंपोनेंट बनाओ सर ऑलरेडी बनाए ना प्रोडक्ट वाले बनाए बिल्कुल ठीक है चलेगा तो ये प्रोडक्ट वाला अपन ने कंपोनेंट बनाया है एंड यहां पर मैं क्या कर रहा हूं मुझे य डिव नहीं चाहिए मान लेते हैं मैं यहीं पर लिख दे रहा हूं विड्थ फुल और हाइट हाइट जो है वो स्क्रीन के बराबर है और जो बैकग्राउंड है वो है जिंक

900 ताकि अजीब सा ना लगे ठीक है और हाइट स्क्रीन के बराबर नहीं कर रहा हूं यार मैं हाइट कर रहा हूं 60 ठीक है देखते हैं अभी और जिंक 900 की जगह मैं इसे 800 कर रहा हूं ठीक है अभी मैंने यहां पे हाथ से 67 लिख दिया और अगर मैं यहां पे प पे से इंपोर्ट करूं तो मुझे वो दिखना चाहिए सो आई विल गो प्रोडक्ट्स प्रोडक्ट्स और ऊपर देख लो बस इंपोर्ट हो गया है या नहीं इंपोर्ट हो गया है ठीक है तो इस वक्त मुझे वहां पर वो दिखेगा दिख रहा है

67 बढ़िया दिख रहा है सर बिल्कुल दिख रहा है ठीक है नाइस अब क्या करना है सर अब ये करना है देखना मुझे ये जो ए का डाटा है वो प्रोडक्ट्स में भेजना है मतलब यहां भेजना है आपको हां कैसे भेजोगे सुनो मेरी बात क्या आपको यहां पे प्रोडक्ट टैग दिख रहा है हां आप इस टैग में कोई भी डाटा पास कर सकते लिटरली मतलब उसका नाम लिखो इक्वल के आगे जो मन में आए वैल्यू लिखो जो मन में आए और नाम क्या रख सकते है कुछ भी सच में हां बस ये नाम याद रखना

क्या नाम है नाम ठीक है प्रोडक्ट्स पे जाओ आपने यहां से भेज दिया प्रोडक्ट्स में तो आप प्रोडक्ट प जाओ और वहां पे एक्सेप्ट करो कैसे यहां पे फंक्शन के अंदर कली ब्रेसस लगाओ और लिख दो वो नाम जो आपने वहां रखा था क्या नाम रखा था नाम तो अब यहां क्या लिखोगे नाम अच्छा तो मैं यहां प मतलब नाम लिख दूं फिर वही गलती तुमने करी अब तुमने यहां पे नाम लिखा है तो रिएक्ट को समझ थोड़ी आ रहा कि नाम लिखना है या नाम की वैल्यू लिखनी है तो रिएक्ट तो नाम लिख देगा

ओके तो यह ज वाले ब्रैकेट में लाना पड़ेगा मतलब हा अब वैल्यू आ चुकी होगी 100% तुमने वैल्यू नाम की क्या भजी थी वैल्यू तो यहां पर नाम में क्या था वैल्यू यहां पर नाम तुमने जीस के अंदर लिखा तो क्या प्रिंट होगा वैल्यू समझ गया समझ गया समझ गया मतलब यहां पर मैं ए लिख दूं यहां पर 25 लिख दूं जैसे तो मैं 25 लिख दूं और यहां पर जाकर मैं ए एक्सेप्ट कर लू और कहीं पर भी फिर जाकर जज को यूज कर लू एटली अरे यार य तो बहुत आसान है एक्चुअली आप

और भी डटा भेज सकते हो जैसे कि आपने य भेज दिया डाटा समझ रहे बात को आपने डेटा बेज दिया और डेटा क्या है डटा है लेट्स से लेट्स से लेट से लेट से ए 25 ठीक है और डटा है लेटस से लेट्स से क्या नेम हर्ष तो लगता है कि कोई एरर आ रहा है वो इसलिए कि आप डायरेक्टली ये ऑब्जेक्ट ऐसे नहीं भेज सकते ये तो जेएस एक का ब्रैकेट है ये जो आपने अभी ब्रैकेट लगाया ये तो जस का ब्रैकेट है पर मैं तो सर ऑब्जेक्ट भेजना चा रहा हूं ना हां तब

फिर आपको उसे एक और ब्रैकेट के अंदर रैप करना पड़ेगा अच्छा मतलब ओके समझ गया सर आप ये कह रहे हो ये जो ब्रैकेट है ये जए एक का है बिल्कुल और इसके अंदर मैं अपना ऑब्जेक्ट डाल दूं हां समझ गया सर तो डाटा मतलब ये आपका ऑब्जेक्ट है तो यहां पर मैं डाटा एक्सेप्ट कर लूं बिल्कुल करूं ठीक है तो मैं यहां पे यूज़ कर लूं बिल्कुल करूं सर उसमें डाटा में एज और वो था मेरा मतलब करो यूज़ करो टा डट एज टा डॉट नेम करो एज 25 नेम हर्ष जो आपने यहां से

भेजा था डाटा जिसमें अंदर दो चीजें थी एज एजर नेम अरे यार ये तो बहुत आसान था एक्चुअली है एक्चुअली आसान है अब आता है कॉम्पोनेंट में खुद का डाटा बनाना कंपोनेंट में आप खुद का डाटा कैसे बनाते हो ठीक है कंपोनेंट में खुद का डेटा बनाना इज बेसिकली स्टेट आप स्टेट कहीं भी किसी भी कंपोनेंट में बना सकते हो फॉर एग्जांपल आपने यहां पे स्टेट बना ली कंस्ट ठीक है यूज स्टेट बस ध्यान रखना ऊपर इंपोर्ट हो जाए ठीक है और यहां पे आपको क्या करना है आपने फॉर एग्जांपल बोल दिया फाल्स तो आप

यहां पर आओ आपने बोल दिया a बी अब यहां पर आ जाओ फटाफट h4 जिसमें आपने यहां पे प्रिंट करा है a तो अब आप यहां पे बेसिकली a की वैल्यू यूज कर रहे हो राइट अच्छा थोड़ा सा कॉम्प्लिकेटेड केसेस क्या होते हैं अरे रखना यू स्टेट में ऑब्जेक्ट रखना मैंने फ्रंट एंड डोमिनेशन में जो यह वाला कोर्स है इसमें शेरिस का जो कोर्स है वेबसाइट पे उसमें मैंने बहुत ही तगड़े लेवल पे ना प्रैक्टिस कराई है क्योंकि मुझे पता था मेरे वो जो स्टूडेंट्स हैं उनको प्रॉब्लम होगी या किसी भी स्टूडेंट को प्रॉब्लम होगी

यार व्हेन इट कम्स टू क्योंकि इतनी प्रैक्टिस होती नहीं है देखो जितनी प्रैक्टिस लोग जावास्क्रिप्ट में जितनी प्रैक्टिस वो एटीए सीएस में करते उतनी प्रैक्टिस जावास्क्रिप्ट में करते नहीं है लोग तो उन्हें प्रॉब्लम इस चीज में होगी कि यार अरे अपडेट कर रहे हैं ऑब्जेक्ट अपडेट कर रहे हैं कैसे कर रहे हैं डायरेक्टली नहीं करना मूटेड नहीं होना चाहिए देर इज अ लॉट तो हमने उसमें काफी ज्यादा प्रैक्टिस कराई है पहले कि आप कैसे यू नो म्यूटेशन के बिना चीजों को करते हो क्योंकि रिएक्ट कहता है डायरेक्ट आके आपको मूटे नहीं करना है अब मुझे

पता है आप थोड़ा सा कंफ्यूज हो रहे होंगे बट वो थोड़ा सा थोड़ा सा ऊंचे लेवल की चीज हो जाएगी राइट नाउ वी आर कीपिंग थिंग्स सिंपल ठीक है तो अगर हम यहां पे एक बटन बनाए तो यहां पे मैं लिख सकता हूं जैसे कि h या फिर काम करते हैं बटन बनाते हैं बटन ठीक है चेंज तो इस वक्त तक अगर आप देखोगे जस्ट अ सेकंड फॉल्स की जगह फॉल्स की जगह यहां पे मैं लिख देता हूं अभी के लिए हेलो तो मुझे चाहिए मुझे चाहिए अगर वैल्यू फॉल्स हो जस्ट मिनट कुछ गड़बड़ हो

रही है राइट अगर वैल्यू फॉल्स हो तो हेलो आई और अगर वैल्यू ट्रू हो जाए तो हाई आई तो कैसे लिखेंगे ऐसे लिखेंगे आपको लिखना पड़ेगा a की वैल्यू अगर फॉल्स है तो फिर क्या वैल्यू दो हेलो इसको हम टोनरी ऑपरेटर कहते हैं यह प्योर जावास्क्रिप्ट वाला गेम है दिस इज जावास्क्रिप्ट यहां पे आप चेक कर रहे हो और अगर यह फॉल्स होगी तो क्वेश्चन मार्क के बाद जो भी होगा वो आएगा हेलो आएगा ठीक है क्योंकि इस वक्त वैल्यू एक ही क्या है फॉल्स है तो हेलो आएगा बढ़िया कलन और उसके बाद आप जो

भी लिखोगे वो तब आएगा जब यह वाली वैल्यू जब ये फॉल्स नहीं होगी कहने का मतलब a की वैल्यू अगर फॉल्स नहीं होगी ट्रू होगी तो ये कंडीशन फेल हो जाएगी फेल हो जाएगी तो कोलन के बाद जो लिखा होगा वो आएगा इस वक्त क्या आ रहा है हेलो आ रहा है और अगर मैं यहां पे ट्रू कर दूं तो हे आएगा हम और इसको हम कहते हैं कंडीशनल रेंडरिंग ठीक है ये हमने और डेप्थ में समझाया हुआ है वहां पे लेकिन स्टिल दिस इज द आईडिया दिस इज द आईडिया राइट मैं आपको सारी चीजों

के दर्शन करा देता हूं सो डोंट वरी लेट्स गो फटाफट तो अगर हम एक स्टेप आगे लेकर जाए इसको ध्यान से सुनना ठीक है तो मैं य प कंडीशनल रेंडरिंग ऑफ क्लास भी कर सकता हूं तो मैं य जीस ले रहा हूं बढ़िया बैक टेक लगाया एंड इसके अंदर मैं लिख रहा हूं अगर बाय द वे मैं य पर राउंडेड एमडी कर रहा हूं ठीक है और राउंडेड नहीं राउंडेड नहीं मैं यहां पर लेट्स से लेट्स से लेट्स से लेट्स से मुझे चाहिए कि य पर मैंने ईस के ब्रैकेट्स ओपन किए 6 के आम सॉरी

और फिर मैं यहां पर लिख रहा हूं कि अगर ए की वैल्यू फॉल्स है अगर a की वैल्यू फॉल्स है तो फिर क्या करना तो फिर क्लास देना टेक्स्ट रेड 600 ठीक है नहीं तो क्लास देना टेक्स्ट ब्लू 600 ठीक है अगर आप देखोगे इस वक्त जस्ट अ सेकंड अगर आप वैल्यू देखोगे इस वक्त क्योंकि रेड है क्योंकि फाल्स है तो यहां पर रेड आ रहा है राइट अब मैं दिखाता हूं जादू बटन पे क्लिक करने से हमने एक फंक्शन रन किया और हम b के थ्रू उसकी वैल्यू अपडेट कर देंगे कैसे अगर मैं डायरेक्ट

ट्रू लिखूंगा तो सिर्फ एक बार चेंज होगी ऐसा समझे वो देखो रेड से ब्लू हो गया लेकिन फिर वो बार-बार चेंज नहीं होगी तो मैं क्या करूं मैं कहूंगा जो भी a की वैल्यू है उसका उल्टा इसका मतलब होता है a की पिछली वैल्यू का उल्टा सेट करो तो अगर मैं यहां पे क्लिक करूंगा तो उल्टा सेट होगा क्या आप समझ रहे हो तो a की पिछली वैल्यू क्या थी फाल्स तो उसका उल्टा क्या होगा सेट ट्रू क्योंकि इसका इसका मतलब होता है a की जो वैल्यू है उसका उल्टा उल्टा फॉल्स का क्या होगा ट्रू

ट्रू किसके अंदर गया बी बी कौन है अपडेटर बी के अंदर क्या गया ट्रू तो यहां पे क्या सेट हो जाएगा ट्रू ऐसा गेम है समझे तो दिस इज हाउ वी यू नो अ खुद का डाटा बनाते हैं एंड कंडीशनल रेंडरिंग परफॉर्म करते हैं कंपोनेंट में बने हुए डाटा को अपडेट करना वो हम ऑलरेडी सीख चुके हैं अपडेटर के थ्रू ये जो सेकंड फंक्शन है इसके थ्रू आप चीजों को अपडेट कर सकते हो अब यहां से कहां की तरफ आपको जाना है यहां से फॉर्म हैंडलिंग की तरफ हम जाते हैं बैक एंड कैसे कनेक्ट होता

है उसकी तरफ हम जाते हैं राइट और कैसे आप प्रॉप्स ड्रिलिंग प्रॉपर्ली और डेप्थ पे आप समझते हो आप स्टेट को कैसे अपडेट करते हो अरेज ऑब्जेक्ट्स के साथ एंड साथ ही साथ आपको बैक एंड से जो आया हुआ डाटा है उसको कैसे यूज इफेक्ट के थ्रू शोकेस करना है एनीमेशंस कैसे परफॉर्म होते हैं फ्रेम मोशन क्या है सो देयर इज आप कह सकते हो इसके आगे की जो चीजें हैं दोज आर इंपॉर्टेंट डेफिनेटली दे आर इंपॉर्टेंट बट वो इन चीजों को सीखने के बाद ही है पॉइंट समझे तुम्हें इनके साथ प्रैक्टिस करनी पड़ेगी एंड

देन उसके बाद ही आगे बढ़ना है बेशक बेशक मुझे बहुत खुशी होगी अगर आप शेरिस के साथ जुड़ते हैं और आप हमारे रिएक्ट के कोर्स या फिर फ्रंट एंड डोमिनेशन के कोर्स में जुड़ते हैं बट ट्स कंप्लीट ओके ट्स कंपलीटली ओके हम लोग अगर नहीं भी जुड़ते हैं राइट तो हम लोग स्टिल यहां पे कंटेंट लेकर आएंगे ओबवियसली हम उन लोगों को धोखा नहीं दे सकते भाई जो हमारा घर चलाने में हेल्प कर रहे हैं हम लोग भी मेहनत करते हैं तो वी आल्सो वांट के हमारा भी घर चले राइट सो ट्स अबाउट इट दोस्तों

आई बिलीव आपको वैल्यू मिली होगी एंड जो हमारे बिल्कुल एब्सलूट बिगिनर्स हैं उनको काफी कुछ सीखने को मिला होगा थैंक यू वेरी मच फॉर वाचिंग आई एम वेरी श्यर कि इस वीडियो ने काफी कुछ चेंज किया होगा थैंक यू वेरी मच मिलते हैं आपसे अगले वीडियो में हैव अ ग्रेट टाइम अहेड बा बाय