Finding this tool useful? Bookmark us (cmd+D) for easy and fast access!

Get Another Transcript

Transcript [EN]: ReactJS Full Course | What is ReactJS | React JS Tutorial for Beginners | ReactJS Full Course #1

Summary

This video explains React from a fundamentals-first perspective, showing how React acts as a JavaScript object with prebuilt methods like createElement, rather than a library that directly manipulates the DOM. It demonstrates building elements and attaching them to the DOM via React DOM, clarifying the roles of React (UI description) and React DOM (actual DOM manipulation). The instructor emphasizes that React can render elements for web, mobile (React Native), and PDFs, through separate rendering engines, with React DOM specifically for browsers. A key focus is the difference between creating elements manually and using React’s abstraction to describe UI, and how the newer React 18 render approach shifts away from older direct DOM calls. The session also hints at future JSX-based syntax to simplify element creation.

हेलो कोडर आर्मी कैसे हैं आप सब लोग? आई होप आप सब अच्छे होंगे। आज से हमारी रिएक्ट की सीरीज हो रही है और हम बेस्ट सीरीज बनाने वाले हैं रिएक्ट के ऊपर ऑल ओवर द इंटरनेट। ऐसा मैं क्यों बोल रहा हूं? आज मैं आपको रिएक्ट की डेफिनेशन नहीं बताने वाला। हम रिएक्ट को पढ़ेंगे फर्स्ट थॉट प्रिंसिपल की हेल्प से। मैं आज के लेक्चर में आपको सीधा रिएक्ट बनाना सिखाऊंगा। मतलब आप हमें रिएक्ट का मीनिंग नहीं समझाओगे और सीधा रिएक्ट बनाना सिखा दोगे। हां जी आज हम रिएक्ट बनाना सीखेंगे। पर कैसे मैं आपके सामने लेके आऊंगा एक प्रॉब्लम स्टेटमेंट उसको हम सॉल्व करेंगे और जैसे ही हम उसको सॉल्व कर लेंगे आप खुद ब खुद रिएक्ट को डिस्कवर कर लोगे। हां जी यह है सही तरीका। मैं चाहता तो आपको हैवी डेफिनेशन आपके सामने ला सकता हूं कि रिएक्ट कॉम्प्लेक्स फ्रंट एंड बनाने को इस्तेमाल होती है। सिंगल पेज एप्लीकेशन है, कंपोनेंट बेस्ड आर्किटेक्चर है, प्रॉप्स होते हैं, हुक्स होते हैं। लेकिन यह सारे टर्म बहुत ही ओवरवेल्मिंग हो जाते हैं। इवन मैं आपके सामने वीट रिएक्ट ऐप को डाउनलोड करता, उसके फोल्डर स्ट्रक्चर को दिखाता। उससे भी बच्चे घबरा के भाग जाते हैं। तो, हम क्या कर रहे हैं? बिल्कुल जीरो ग्राउंड लेवल से इसको बनाना स्टार्ट करेंगे और आपको लगेगा भैया बहुत ही लेंी हो जाएगा इससे तो नहीं दोस्त लें्थी नहीं होगा आप एक बार समझ जाओगे जिंदगी भर याद रखोगे हर एक चीज रिएक्ट के अंदर ऑब्जेक्ट एंड फंक्शन ही होने वाला है आपके लिए हां जी आपको कभी भी किसी भी हुक को रटने की जरूरत नहीं पड़ेगी तो चलो फिर बिना किसी देरी के हवाबाजी तो बहुत कर ली है वीडियो को स्टार्ट करते हैं सबसे पहले वीडियो को लाइक कर दें एक प्यारा सा कमेंट ड्रॉप कर देना। चैनल को सब्सक्राइब कर देना। चलिए हम आते हैं अपनी स्क्रीन की ओर। तो देखिए रिएक्ट क्या है? आपने ये तो हर जगह देखा होगा कि इट इज अ जावास्क्रिप्ट लाइब्रेरी। हैं? जावास्क्रिप्ट की लाइब्रेरी है। पर ये लाइब्रेरी का मतलब क्या होता है भैया? हमें तो यही नहीं पता। तो डेफिनेशन में नहीं जाना। हम सीधा कोड की ओर चलते हैं। सबसे पहले हम एक रिएक्ट नाम का फोल्डर बनाते हैं। और इसको वीएस कोड में ओपन कर लेते हैं। इसके अंदर हम एक इंडेक्स बना लेते हैं और एक अपनी jवास्क्रिप्ट की हम फाइल बना लेते हैं। चलिए ये दो काम हमने कर लिए। अब इंडेक्स के अंदर कुछ कोड इसके अंदर हम एक डिव ले लेते हैं। आईडी उसकी रूट ले लेते हैं। एक बेसिक सा कोड मैं लिख रहा हूं यहां पे दोस्तों आपके हेलो कोडर्स। ओके। थोड़ा सा इसके ऊपर स्टाइलिंग कर देता हूं कि जैसे बैकग्राउंड कलर को मैंने ब्लैक कर दिया। कलर को वाइट कर दिया और जो इसकी हाइट होगी वो 100% ऑफ व्यूप हाइट होगी। चलिए और कैसे हम अपनी jaवास्क्रिप्ट फाइल को इसके साथ अटैच करा सकते हैं। इसके हेल्प से हम करा सकते हैं कि डॉट स्लश app डॉट जेs अब अगर इसको ओपन विद लाइव सर्वर करूं तो ये फाइल हमारी ओपन हो जाएगी ऐसे करके कि हेलो कोडर्स हमें नजर आ रहा है। ये हमारा एक बेसिक hटीml और जावास्क्रिप्ट का कोड है। ओके हां अब प्रॉब्लम क्या है? उसको एक बार भैया हमें बता दीजिए। चलिए, प्रॉब्लम को हम डिस्कस करते हैं। मैंने हेलो कोडर्स को हटा दिया, तो अब आपको ये स्क्रीन पे भी नजर नहीं आएगा। दोस्तों, मैं आपके सामने एक प्रॉब्लम स्टेटमेंट रख रहा हूं। प्रॉब्लम स्टेटमेंट क्या है? मैं बोल रहा हूं कि आपको जी हां, आपको एक एलिमेंट को जावास्क्रिप्ट की हेल्प से क्रिएट करना है। क्या बोल रहा हूं? क्रिएट अ h1 एलिमेंट यूजिंग जावास्क्रिप्ट। कर सकते हैं हम? हां भैया, कर सकते हैं। डॉक्यूमेंट डॉट क्रिएट एलिमेंट। इतनी जावास्क्रिप्ट तो मैंने पढ़ी है H1 टैग ओके कर लिया तो इसमें कौन सा भैया रॉकेट बना दिया आपने अभी-अभी इसके अंदर आपको कुछ कंटेंट डालना है ओके मान लो आप चाहते हैं इस H1 के अंदर लिखा हो हेलो कोडर आर्मी कैसे करेंगे कि एलिमेंट वन डॉट टेक्स्ट कंटेंट के अंदर हम जाएंगे और लिख देंगे हेलो कोडर आर्मी अच्छा चलिए ये कर दिया। मैंने कहा इसको कुछ क्लास का नेम भी दे दो। तो एलिमेंट वन डॉट क्लास नेम मैंने इसको दे दिया एलिमेंट। ओके? और मैंने कहा इसको ना कुछ आईडी भी दे दो। एलिमेंट वन डॉट आईडी इक्वल टू मान लो मैंने इसको आईडी दे दी फर्स्ट। ठीक है? ये मैंने कर दिया। अब मेरा एलिमेंट क्रिएट हो चुका है। वो H1 एलिमेंट है जिसके अंदर हेलो कोड आर्मी लिखा हुआ है। क्लास का नेम उसका एलिमेंट होगा और उसकी आईडी फर्स्ट होगी। ओके। अब इस एलिमेंट को मुझे अपने एचटीएमएल फाइल के साथ अटैच कराना है। अपने डोम के साथ क्या कराना है? अटैच कराना है। कहां पे? यहां पे। इसके अंदर। तो सबसे पहले मुझे इस एलिमेंट को सेलेक्ट करना पड़ेगा। करना पड़ेगा नहीं करना पड़ेगा? हां। तो डॉक्यूमेंट डॉट गेट एलिमेंट बाय आईडी नाम क्या है? रूट है। तो इसको मैं ले लेता हूं ऐसे करके। कॉनस्ट रूट और रूट के साथ उसको अपेंड करा दो। तो अपेंड से क्या होगा? वो उसका एक चिल्ड्रन बन जाएगा। एलिमेंट वन। तो अब अगर आप अपनी स्क्रीन पर जाओगे तो आपको यहां पर नजर आएगा हेलो कोडर आर्मी लिखा हुआ। जैसे ही आपने इस स्टेटमेंट को एग्जीक्यूट किया। यही तो होगा। हां ये देखो पहले हेलो कोड आर्मी नहीं दिखेगा हमें। हां जैसे ही मैं अपेंड करूंगा उसको अपने डोम के साथ वो मुझे यहां पे नजर आते हुए दिखेगा। चलिए यह तो हम अच्छे से समझ गए। अब आगे क्या? अब दोस्तों मैं आपसे बोल रहा हूं कि क्या मैं इसके अंदर और भी प्रॉपर्टीज अटैच करा सकता हूं। जैसे मान लीजिए मुझे इसके फों्ट के साइज को देना है। किसको देना है? फों्ट साइज 30 पिक्सल रखना है। मुझे इसका बैकग्राउंड कलर चेंज करना है। देखते हैं यार कर सकते हैं नहीं कर सकते। एलिमेंट वन डॉट स्टाइल डॉट फों्ट साइज मान लो मैं इसका दे रहा हूं 30 पिक्सल। ओके। एलिमेंट वन डॉट स्टाइल डॉट स्टाइल करके कर देना हम। हां। डॉट बैकग्राउंड कलर वो दे दिया मैंने ऑरेंज और एलिमेंट का जो कलर होगा टेक्स्ट का उसको भी दे देते हैं। एलिमेंट डॉट स्टाइल डॉट कलर उसको हम वाइट कर देते हैं। चलिए तो अब अगर आप यहां पे देखोगे तो ये इस तरीके से हमें नजर आएगा। क्लियर ये सारी प्रॉपर्टी इसके साथ अटैच हो चुकी हैं। अब यहां तक तो हमें समझ आ गया। पर रिएक्ट कहां है भैया? वो तो बताओ। अभी आएगा दोस्तों। मैं अब आपसे दूसरा सवाल पूछ रहा हूं। मुझे एक और एलिमेंट क्रिएट करना है। क्या करना है? एक और एलिमेंट क्रिएट करना है। जिसका नाम होगा H2 जिसके अंदर कंटेंट लिखा होगा कि स्ट्राइक इज लॉन्च और सेम ऐसे ही कुछ-कुछ प्रॉपर्टीज मैं उसके अंदर डाल दूंगा। तो कैसे करूंगा भैया? मैं इस कोड को कॉपी करता हूं और एक नया एलिमेंट टू बना देता हूं। तो मैं एलिमेंट टू लिख दूंगा। यहां पे मेरे पास H2 टैग आ जाएगा। एलिमेंट टू के टेक्स्ट के अंदर स्ट्राइक इज लॉन्च्ड। यह मैंने लिख दिया। क्लास नेम वही रहने देते हैं। आईडी चेंज करनी पड़ेगी। आईडी इसकी सेकंड रख देते हैं। इसका 20 पिक्सल रख देते हैं। इसको पिंक कर देते हैं। और इसको ग्रीन कर देते हैं। ओके? और उसके बाद एलिमेंट टू एलिमेंट टू। एलिमेंट टू एलिमेंट टू एलिमेंट टू। चलिए यह भी मैंने क्रिएट कर दिया और रूट के अंदर मैं उसको अपेंड करा दूंगा। रूट डॉट अपेंड एलिमेंट टू तो अब आपको स्क्रीन में यह भी नजर आएगा। हेलो कोडर आर्मी स्ट्राइक इज लॉन्च। अब आपका सवाल सबसेेंट ये होगा कि भैया स्ट्राइक क्या है? तो स्ट्राइक हमारा क्या है? एक पेड कोर्स है जिसमें हम डीएसए एंड जेएनआई को स्टार्ट कर रहे हैं। 1 दिसंबर से आपकी लाइव क्लासेस होंगी। मंडे टू फ्राइडे। अभी अगर आप इसका कॉम्बो खरीदते हो तो यह आपको मात्र 5600 का पड़ेगा। इसमें आपको लीड कोड जैसा प्लेटफार्म आपको मिलने वाला है। जहां पर आप कोडिंग की प्रैक्टिस कर सकते हैं। लाइव क्लासेस होंगी। रिकॉर्डेड लेक्चर आपके लिए अवेलेबल होंगे। पीएसए के अंदर भी हम दो प्रोजेक्ट्स करने वाले हैं और जेएनआई के अंदर तो हमारे पास बहुत सारे प्रोजेक्ट होने वाले हैं। तो आप इसके लिए एनरोल कर सकते हैं और मेरे साथ लाइव क्लास में आके टटपटे से जो भी आपके डाउट हैं उनको मुझसे पूछ सकते हैं। तो क्लासेस स्टार्ट होंगी 1 दिसंबर से रात 9:00 बजे को रिकॉर्डिंग सब कुछ आपके पास अवेलेबल होंगी। चलो भैया बहुत तारीफ कर ली अपने कोर्स की। वापस इस पे आते हैं। ओके। अब सवाल यह है कि हेलो कोड आर्मी हमने देख लिया। स्ट्राइक एज ल्च हमने देख लिया। ओके। अब मेरा सवाल अगला आपसे यह है कि अब आपको एक और एलिमेंट को क्रिएट करना है। थर्ड एलिमेंट जो कि H3 टैग का होगा। उसके अंदर होगा कोडल आर्मी इज बेस्ट कुछ भी और उसके अंदर भी ऐसी ही क्लास नेम आईडी आपको डालना है। तो क्या आप फिर से इस कोड को कॉपी करोगे फिर नीचे पेस्ट करोगे और फिर लिखोगे और ऐसे ही मान लो आपको 50 एलिमेंट बनाने हैं। तो 50 बार क्या आप इस कोड को कॉपी पेस्ट करते हुए लिखोगे? सवाल ये है ना? हां। तो इससे बेस्ट तरीका क्या हो सकता है मेरे पास? इससे बढ़िया क्या हो सकता है? क्या मैं यहां पे कोई एक फंक्शन बना दूं और मैं उस फंक्शन को कॉल करूं और वो सब कुछ मेरे को करके दे दे। क्योंकि फंक्शन हम क्यों बनाते हैं? क्योंकि मैं रयूजेबल सेम फंक्शन को बार-बार यूज़ कर सकता हूं। मान लीजिए मैंने यहां पे एक फंक्शन बना दिया क्रिएट एलिमेंट नाम का। तो बस मुझे इस फंक्शन को कॉल करना है और ये फंक्शन लाके मुझे ये एलिमेंट क्रिएट करके दे दे। जिसके लिए मैं इतनी सारी लाइन लिख रहा था। सेम इसके लिए कि मैं इस फंक्शन को कॉल करूं और वो मेरे लिए वो एलिमेंट क्रिएट करके दे दे। अब इसके अंदर मुझे क्या-क्या भेजना पड़ेगा? एक तो मुझे बताना पड़ेगा टैग कि भैया कौन सा टैग आपको क्रिएट करना है। क्लियर? हां। और क्या-क्या भेजना पड़ेगा? मुझे यहां पे एट्रिब्यूट्स भेजने पड़ेंगे कि मेरे एट्रिब्यूट्स क्या-क्या हैं? और आपके चिल्ड्रन कौन-कौन से हैं? ये मुझे तीन चीजें यहां पे भेजनी पड़ेंगी। फिलहाल के लिए मैं सिंपलीफाई करने के लिए अभी के लिए ये स्टाइलिंग वगैरह को कमेंट डाउन कर देता हूं। इनको मैं नहीं बना रहा हूं अभी कुछ देर के लिए इनको बाद में बनाएंगे। पर फिलहाल के लिए हम इन तीनों को कमेंट डाउन कर देते हैं। अभी मैं सिर्फ इस पोर्शन को बनाना चाह रहा हूं। तो इस पोर्शन में जो टेक्स्ट कंटेंट है हेलो कोडरामी वो मेरा चिल्ड्रन हो गया। जो मेरा टैग है वो H1 हो गया। और जो मेरा एट्रिब्यूट्स हो गए। एट्रिब्यूट्स कौन हो गए? कि क्लास नेम एलिमेंट है। आईडी मेरा फर्स्ट है। ये मेरे एट्रिब्यूट्स हो गए। एट्रिब्यूट्स देखे ना हमने एलिमेंट्स के अंदर जब हम एलिमेंट देखते हैं तो यह उसके एट्रिब्यूट्स में आ जाते हैं। क्लियर? हां। और जो इसके अंदर होता है वो उसका चिल्ड्रन हो जाता है। जैसे यहां पे क्या है? हेलो कोड आर्मी लिखा हुआ आएगा। एक H1 एलिमेंट होगा। उसके अंदर हेलो कोड आर्मी लिखा गया है। तो उसका चिल्ड्रन हो गया। अब इसको मैं कैसे कर पाऊंगा? मुझे अभी तक मैं जो इतना बड़ा कोड लिख रहा था। यह इतना सारा मैं यहां पे यह कर सकता हूं। इसको भी कुछ देर के लिए कमेंट कर देता हूं। मैं सिर्फ इन चारों के लिए। ठीक है? नीचे वाले के लिए भी बनाऊंगा। फिगर करने की जरूरत नहीं है। तो मैं यहां पर ऐसा कुछ कर सकता हूं कि कॉस्ट एलिमेंट वन इक्वल टू ओके मैं इस क्रिएट एलिमेंट फंक्शन को कॉल कर दूं और इसको बता दूं कि टैग मुझे H1 टैग को क्रिएट करना है जिसके अंदर मैं आपको एट्रिब्यूट्स दूंगा और चिल्ड्रन दूंगा एट्रिब्यूट्स अभी कॉमा करके छोड़ देता हूं और चिल्ड्रन में मैं लिख दूंगा हेलो कोडर आर्मी ओके ये मुझे क्रिएट करना है और एट्रिब्यूट्स में मैं पास कर दूंगा किस-किस को कि भैया भैया मेरा क्लास नेम क्या होगा और मेरी आईडी क्या होगी? दोनों को पास करना है तो मैं इसको एज अ ऑब्जेक्ट पास कर सकता हूं। जहां पे मैं लिख दूंगा कि भैया जो मेरी क्लास का नेम होगा वो मेरा एलिमेंट है और जो मेरी आईडी है वो मेरा फर्स्ट है। इस तरीके से मैंने इसको पास ऑन कर दिया। सिर्फ अब मैंने इस फंक्शन को कॉल करना है। इतना क्रिएट एलिमेंट यहां पे ये आर्गुमेंट पास करनी है और ये मुझे वो आंसर ला के दे देगा। वो एलिमेंट वो मुझे रिटर्न करके दे देगा। अब ये कैसे देगा? अब ये कैसे देगा? तो अगर अब अभी हम देखें H1 किसके अंदर जाएगा? टैग के अंदर जाएगा। तो सबसे पहले मुझे इस एलिमेंट को क्रिएट करना पड़ेगा। एलिमेंट क्रिएट कैसे करते हैं? डॉक्यूमेंट डॉट क्रिएट एलिमेंट। ये एक ऐसा फंक्शन है जो मेरे को एलिमेंट क्रिएट करके देगा। उसके अंदर जो भी एट्रिब्यूट्स है उनको अटैच कर देगा। जो भी उसके अंदर टेक्स्ट कंटेंट है उसको अटैच करके वो एलिमेंट फाइनली मुझे रिटर्न करके दे देगा। तो ये मुझे यह वाला टैग क्रिएट करके दे देगा। आपने अगर आपने H1 करा है तो H1 वाला आ जाएगा। तो कॉस्ट एलिमेंट ओके। अब एट्रिब्यूट्स के अंदर आपने क्या पास करा है? यह पूरा आपने एट्रिब्यूट्स के अंदर पास करा है। ठीक है? तो फिलहाल के लिए मैं चिल्ड्रन वाले को भी लिख देता हूं कि एलिमेंट डॉट टेक्स्ट कंटेंट इक्वल टू चिल्ड्रन जो आपने चिल्ड्रन भेजा है। ये लास्ट वाला आपने चिल्ड्रन भेजा था ना। हां ये हेलो कोडर आर्मी तो ये इसके टेक्स्ट कंटेंट पे चला जाएगा। अब मुझे इस एट्रिब्यूट्स वाले को डालना है। अब देखो यहां पर ना यह यह क्या है मेरा एज अ ऑब्जेक्ट पास हो रखा है। तो इसको ना आप ऐसा समझो कि एट्रिब्यूट्स इक्वल टू ये इस तरीके से आपको नजर आएगा। तो यहां पे मुझे क्या करना पड़ेगा? इस एलिमेंट के अंदर जाके एलिमेंट डॉट क्लास नेम के अंदर मुझे एलिमेंट को फिक्स करना पड़ेगा। एलिमेंट डॉट आईडी के अंदर मुझे फर्स्ट को रखना पड़ेगा। ओके? तो मुझे इसके ऊपर इटरेट करना पड़ेगा। इट ट्रेड करना पड़ेगा ना क्योंकि अभी तो मेरे पास सिर्फ यहां पे दो ही प्रॉपर्टी नजर आ रही हैं। एक ये एक ये ओके ये हजारों हो सकती हैं। 15 20 30 25 30 कितनी भी हो सकती है प्रॉपर्टी। अभी तो मैंने सिर्फ दो ही पास करी है। एक ये एक ये ओके तो मैं मैनुअली नहीं करूंगा कि एलिमेंट डॉट क्लास नेम ये ऐसे करके मत करना कि भैया जो एट्रिब्यूट्स का क्लास नेम होगा। नहीं क्योंकि यहां पे हजारों हो सकती हैं। हजारों प्रॉपर्टी मैं पास कर सकता हूं। ऐसा नहीं करेंगे। हम क्या कर सकते से बढ़िया इसके ऊपर इटरेट कर सकते हैं कि फॉर कॉस्ट की इन किसके ऊपर इस एट्रिब्यूट्स वाले के ऊपर मैं इट्रेट करूंगा इससे क्या होगा पहले की की वैल्यू बन जाएगी क्लास नेम की की वैल्यू क्या बन जाएगी क्लास नेम फिर अगले बार की की वैल्यू बन जाएगी आईडी ऐसे ही तो इट्रेट होता है फॉरेन लूप की हेल्प से ओके तो मुझे उसके किसके अंदर डालना है एलिमेंट के अंदर तो एलिमेंट की की अंदर आप डाल दीजिए एट्रिब्यूट्स की की को खत्म तो यहां पे ये जो एलिमेंट है ना अभी आपका एलिमेंट कुछ ऐसा दिख रहा होगा एलिमेंट ये भी आपका एक ऑब्जेक्ट टाइप का ही होगा जिसके अंदर आपका पास जो टैग है उसने लिख रखा है वो H1 है जो आपका टेक्स्ट कंटेंट है वो आपका क्या है हेलो कोडर आर्मी हां अब बाकी आपका कुछ अभी फिक्स हो नहीं रखा है अभी आपका अब आपको बाकी करने हैं फिक्स कि आप कह रहे हैं एलिमेंट के की के अंदर तो की अभी इनिशियली क्या होगी जब आप एट्रिब्यूट एट्रिब्यूट के ऊपर इट कर रहे हैं पहले की के बनेगी क्लास नेम तो यहां आपको क्लास नेम को क्रिएट करेगा हां उसके अंदर किसको डालना है एट्रिब्यूट के क्लास नेम एट्रिब्यूट का क्लास नेम क्या है? एलिमेंट। तो यहां पे एलिमेंट आ जाएगा। ऐसे ही आपका आईडी अब की बन जाएगी मेरी आईडी। तो एलिमेंट का की एलिमेंट का की का मतलब आईडी। उसके अंदर किसको डाल दो? एट्रिब्यूट के की को। एट्रिब्यूट का की क्या है? फर्स्ट है। इस तरीके से। इस तरीके से आपका एलिमेंट क्रिएट हो गया। हो गया नहीं हो गया? ओके। ये अब हम समझ चुके हैं। इसको मैं ऐसे ही लिख देता हूं। और इसको कमेंट डाउन कर देता हूं आपके लिए। चलिए। अब लास्ट में जब ये सब कुछ हो गया तो मैं रिटर्न कर दूंगा इस एलिमेंट को। खत्म। ये एलिमेंट मैंने क्रिएट कर दिया है। ये फंक्शन। अब मैं सिंपल अपने कोड को एग्जीक्यूट करा सकता हूं। मैं एलिमेंट टू को वाले को हटा देता हूं। सिर्फ अभी मैं एलिमेंट वन वाले के ऊपर फोकस कर रहा हूं। तो आप देखोगे मेरी स्क्रीन पे नजर आ रहा है मुझे हेलो कोडर आर्मी। सिर्फ अब मैंने इस फंक्शन को कॉल किया। और इस फंक्शन को मैं बार-बार इस्तेमाल कर सकता हूं। सेम अगर मुझे एलिमेंट टू क्रिएट करना हो। मुझे किसको क्रिएट करना हो? एलिमेंट टू। तो कॉस्ट एलिमेंट टू इक्वल टू क्रिएट एलिमेंट मुझे H2 टैग क्रिएट करना था। हां सेम यही क्लास नेम और आईडी क्लास नेम उसका एलिमेंट ही है। आईडी उसकी मैं सेकंड कर दूंगा। ओहो ये ब्रैकेट यहीं रह गया था। और इसके अंदर लिख दूंगा स्ट्राइक इज लॉन्च। अब आप अगर यहां पर मैजिक देखोगे तो यह भी यहां पर आ चुका होगा। एलिमेंट टू बी तो हेलो कोडर आर्मी स्ट्राइक इज ल्च तो देखो अब आप पहले आप इतना सारा कोड लिख रहे थे बार-बार बार-बार। अब आपको सिर्फ एक फंक्शन को कॉल करना है और उसके अंदर आपको आर्गुमेंट पैरामीटर वगैरह पास करने हैं। आपके लिए एलिमेंट खुद ब खुद क्रिएट हो जाएगा। अब आपको इतना बड़ा कोड लिखने की जरूरत नहीं है। अब अगर आपको एक और एलिमेंट क्रिएट करना हो तो सिंपल क्या करना है मुझे? इस फंक्शन को कॉल कर दो। यही तो करना होगा। हां भैया यही तो करना होगा। ओके अभी आपका डाउट ये होगा कि भैया इसमें स्टाइलिंग वगैरह कैसे अटैच कराऊं? जो ये स्टाइलिंग वगैरह है इसको कैसे अटैच कराऊं? जैसे यहां पे हमने देखा एलिमेंट वन डॉट क्लास नेम तो क्लास नेम को तो मैंने ऐसे भेज दिया। एलिमेंट वन डॉट आईडी आईडी को मैंने ऐसे करके भेज दिया। अब अगर मुझे स्टाइल वगैरह को कराना हो जैसे एलिमेंट वन डॉट स्टाइल डॉट फॉनट साइज़। तो फॉन्ट साइज़ किसके अंदर है? स्टाइल के अंदर है। बैकग्राउंड कलर किसके अंदर है? स्टाइल के अंदर है। कलर किसके अंदर है? स्टाइल के अंदर है। तो ये भी सब मेरी क्या है? एट्रिब्यूट्स हैं। तो इन सबको भी मैं यहां पे पास कर सकता हूं। कैसे? मैं यहां पे एक स्टाइल ले लूंगा। इसको हम एज अ ऑब्जेक्ट लेंगे। क्योंकि इसके अंदर मल्टीपल हैं। फॉन्ट साइज भी है स्टाइल के अंदर। बैकग्राउंड कलर भी है और कलर भी है। तो इसको मैं ऐसे करके भेज सकता हूं। मैं यहां पे बोल दूंगा कि भैया जो आपका फोंट साइज होगा वो कर देना आप 30 पिक्सल। जो आपका बैकग्राउंड कलर होगा। उसको कर देना आप ऑरेंज और जो आपका कलर होगा उसको आप कर देना वाइट ये लीजिए और सेम मैं नीचे वाले के लिए भी कर दूंगा इसके लिए भी कर सकता हूं कि यहां पे भी अगर मुझे करने हो क्योंकि प्रॉपर्टी मैं इसके अंदर ही भेज रहा हूं। ये देखो ये स्टाइल फॉन्ट साइज 20 पिक्सल कर दिया। बैकग्राउंड कलर मैंने इसका पिंक कर दिया और कलर मैंने इसका क्या कर दिया? ग्रीन कर देते हैं। चलिए देखते हैं क्या हमारा आंसर आया है। देखिए हमारे आंसर में कुछ भी नहीं हुआ है दोस्त। कुछ भी नहीं हुआ है। ऐसा क्यों हुआ? दोस्तों यहां पे अभी यह हुआ है कि जब मैंने इस एट्रिब्यूट को पास किया और मैंने जब यह लिखा तो एट्रिब्यूट्स के अंदर एक और प्रॉपर्टी आ गई होगी स्टाइल नाम की। हां जिसके अंदर अगर मैं पहले वाले को कॉल करता हूं इस वाले को तो उसके अंदर यह पूरा प्रेजेंट होगा ये वाला कि स्टाइल स्टाइल के अंदर हमारे पास ये सब कुछ है। उसका फों्ट साइज है उसका बैकग्राउंड कलर है और उसका कलर है। ओके। अब यहां पर अगर हम अपने कोड को खोल के देखें तो यहां पर हम क्या कर रहे थे कि अगर मैं एलिमेंट के स्टाइल के अंदर जाता हूं एलिमेंट के स्टाइल के अंदर एलिमेंट के स्टाइल के अंदर ये स्टाइल रहा हां इसके अंदर किसको डाल दो एलिमेंट के स्टाइल के अंदर क्योंकि एट्रिब्यूट्स को आप इट्रेट कर रहे हो तो आप कह रहे हो एट्रिब्यूट्स के की एट्रिब्यूट के स्टाइल को तो दोस्तों ये ना डायरेक्ट ऐसे कॉपी नहीं होता है इसके अंदर इसके अंदर ये ऐसे कॉपी नहीं होता है जैसे अभी हम यहां पे कर रहे थे ये आपको होने नहीं देगा मैं आपको दिखा भी देता हूं अगर आप अपने इस एलिमेंट को प्रिंट कराते हो आपको दिखा भी देता हूं। कंसोल डॉट log एलिमेंट वन स्टाइल के अंदर कुछ भी फिक्स नहीं हुआ होगा। ये देख लो स्टाइल सिर्फ खाली रह गया। जैसे क्लास एलिमेंट आ चुका है। आईडी फर्स्ट आ चुका है। स्टाइल के अंदर कुछ नहीं आया है। क्योंकि आप इस तरीके से करने की उसे कोशिश कर रहे थे। वो ऐसे करके असाइन नहीं होता है। क्योंकि जो मेरा ये स्टाइल होता है ये रीड ओनली प्रॉपर्टी होता है किसी भी एलिमेंट के अंदर। ओके? तो इसको अगर मुझे कराना है तो हम यहां पे एक ऑब्जेक्ट की प्रॉपर्टी को इस्तेमाल कर सकते हैं। कैसे? मैं यहां पे लिख देता हूं कि इफ की इक्वल टू इक्वल टू स्टाइल है तो आपको क्या करना है? आप यहां पे ऑब्जेक्ट को यूज़ करोगे कि ऑब्जेक्ट डॉट असाइन। आप यहां पर कह रहे हो कि एलिमेंट के स्टाइल के अंदर असाइन करा दो एट्रिब्यूट्स के स्टाइल को। हम देखते हैं हमारा रिजल्ट। अरे ये तो कुछ भी नहीं हुआ है। ये इसलिए नहीं हुआ है कि यहां पे हमने एल्स नहीं लिखा। ये लीजिए। अब जैसे ही हम करेंगे हमारे सारी प्रॉपर्टी यहां पे अटैच हो चुकी है। ऑब्जेक्ट डॉट असाइन क्या करता है? क्या हमको पता है ऑब्जेक्ट डॉट असाइन क्या करता है? वो क्या करता है? एक ऑब्जेक्ट की प्रॉपर्टी को दूसरे ऑब्जेक्ट की प्रॉपर्टी के अंदर कॉपी कर सकता है। तो यहां पर जब आपने असाइन लगाया ना तो उस केस में यह सब कुछ कॉपी यहां पे जाके पेस्ट हो गया। इससे वो आपका हो जाता है। किससे? ऑब्जेक्ट डॉट असाइन से। जब मुझे एक ऑब्जेक्ट की प्रॉपर्टी को दूसरे ऑब्जेक्ट की की प्रॉपर्टी में कॉपी करना होता है। तब हम असाइन का प्रयोग करते हैं। तो ये जो एट्रिब्यूट डॉट स्टाइल है ये क्या है? एट्रिब्यूट डॉट स्टाइल। यह क्या है? मेरा एक ऑब्जेक्ट है। तो इस ऑब्जेक्ट की प्रॉपर्टी को मुझे दूसरे ऑब्जेक्ट की प्रॉपर्टी में क्या करना था? पेस्ट करना था। एलिमेंट डॉट स्टाइल के अंदर मैंने उसकी प्रॉपर्टी को कॉपी पेस्ट कर दिया। तो ये आपके जब आप ऑब्जेक्ट के साथ डील अप करते हैं उस समय पे ये आपका इस्तेमाल होता है। क्लियर? हां। तो अब हम देख सकते हैं कि हमारा हेलो कोडर आर्मी और स्ट्राइक एज लॉन्च बिल्कुल अच्छे से हमें नजर आ रहा है। और यही हमारा क्या है? क्रिएट एलिमेंट है। अब आप देखिए मैं एलिमेंट टू क्रिएट एलिमेंट टू को भी इसी तरीके से सॉल्व कर सकता हूं। अब मुझे कोई भी एलिमेंट क्रिएट करना हो मैं बहुत आसानी से कर सकता हूं। बस मुझे इस फंक्शन को कॉल करना है। उसके अंदर मुझे स्टाइलिंग डालनी है। स्टाइलिंग डाल दूंगा। मुझे उसके अंदर क्लास डालना है। क्लास डाल दूंगा। मुझे उसके अंदर आईडी डालना है। तो मैं उसके साथ आईडी अटैच करा दूंगा। इतने ही आसान तरीके से आप पूरी प्रॉब्लम को सॉल्व कर सकते हैं। तो एक काम करते हैं। मैं इस पूरे कोड को यहां से लेके यहां तक इसको कॉपी करता हूं और इसको हम नीचे ले आते हैं यहां पे। ताकि हमें विज़िबिलिटी नजर आए। ओके? और यहां से मैंने इस एलिमेंट को रिटर्न करा दिया था। तो यह हमारा क्रिएट एलिमेंट रहा। इससे मैंने एलिमेंट वन को भी क्रिएट कर सकता हूं। एलिमेंट टू को भी क्रिएट कर सकता हूं। अब यहीं पे ये जो आपने फंक्शन यहां पे क्रिएट करा है, ये क्या बन गया? मेरा रीयूजेबल बन गया। क्या बन गया? रयूजेबल फंक्शन यहां पे हमने क्रिएट कर दिया है। ओके? अब यहां पे अब मैजिक कहां पे आता है रिएक्ट का? मैं अब आपको वह बताता हूं। देखिए दोस्तों, मैं यहां पर एक ऑब्जेक्ट बना रहा हूं। कॉनस्ट रिएक्ट। इक्वल टू यह मैंने एक ऑब्जेक्ट बनाया रिएक्ट का और उसके अंदर मेरे पास जो ये कोड था इसको मैंने कॉपी पेस्ट करके इस रिएक्ट के अंदर डाल दिया। ऐसे करके मैंने क्या करा? आप खुद भी देख सकते हैं। मैंने एक रिएक्ट नाम का रिएक्ट बनाया है जो कि क्या है? एक ऑब्जेक्ट है जिसके अंदर क्रिएट एलिमेंट नाम का मेथड प्रेजेंट है। है या नहीं है? मेरे पास रिएक्ट क्या है? एक ऑब्जेक्ट है जिसके अंदर क्रिएट एलिमेंट नाम का क्या है? एक फंक्शन एक मेथड एक्सिस्ट करता है। तो अगर मैं इसको कॉल करता हूं रिएक्ट डॉट क्रिएट एलिमेंट करके और इसको भी रिएक्ट डॉट क्रिएट एलिमेंट करके तो क्या कर रहा हूं मैं? इस ऑब्जेक्ट के किसी मेथड को कॉल कर रहा हूं। तो फिर आपको सेम आंसर मिलेगा। तो इससे हमने क्या देखा कि रिएक्ट कुछ नहीं है। रिएक्ट आपका एक जावास्क्रिप्ट का ऑब्जेक्ट है दोस्तों। रिएक्ट कुछ नहीं है। रिएक्ट यही है जो मैंने अभी आपको करके दिखाया। ये कि रिएक्ट मेरा एक जावास्क्रिप्ट का ऑब्जेक्ट है जिसके अंदर वेरियस मेथड प्रेजेंट है। जिसमें एक है क्रिएट एलिमेंट वाला। तो रिएक्ट डॉट क्रिएट एलिमेंट। इसके अंदर और भी फंक्शन होंगे और भी मेथड्स होंगे। अभी तो मैंने एक ही मेथड लिखा है। क्रिएट एलिमेंट, यूज़ स्टेट, यूज़ इफ़ेक्ट बहुत सारे हैं। पर अभी मैंने सिर्फ एक ही मेथड को डिस्कस किया है। तो रिएक्ट डॉट क्रिएट एलिमेंट को कॉल करके मैं उसके किसी भी एलिमेंट को क्रिएट कर सकता हूं। दोस्त इतना ही आसान है। रिएक्ट कुछ नहीं है। रिएक्ट सिर्फ क्या है? एक जावास्क्रिप्ट का ऑब्जेक्ट है। और कुछ नहीं है। और यह जो कोड होता है ना यह वाला अभी तो मैंने इसको मैनुअली लिखा है। इसी को कहते हैं। यही आपकी रिएक्ट की लाइब्रेरी बोला जाता है इसको। अभी हमने सुना ना यहां पर हमने डेफिनेशन देखी थी कि इट इज अ जावास्क्रिप्ट लाइब्रेरी। लाइब्रेरी का काम क्या होता है? मुझे बताइए लाइब्रेरी का काम क्या होता है? कि भैया मुझे जो कोड ऑलरेडी लिखा गया है उसको मैं डायरेक्ट इस्तेमाल कर लूं। उसको मुझे लिखने की जरूरत ना पड़े। मान लीजिए जब आप आपके पास कोई एरे होता है और मैं एरे डॉट सॉर्ट लिखता हूं तो मेरे पास वो एरे सॉर्ट हो जाता है। क्या वहां पे मैंने सॉर्ट वाले फंक्शन को खुद से लिखा या फिर वो सॉर्ट वाला फंक्शन पहले से लिखा हुआ था उसके अंदर। मेरे पास जब कोई एरे होता है आप C++ बैकग्राउंड से होगे आपने HTL के बारे में पढ़ा होगा स्टैंडर्ड टेंपलेट लाइब्रेरी वहां पर हमारे पास सॉर्ट सॉर्टिंग के लिए होते हैं कि मैं एक सॉर्ट फंक्शन इस्तेमाल करता हूं तो मेरा सॉर्ट हो जाता है पर उस सॉर्ट का कोड क्या मैंने खुद से लिखा है नहीं मैंने सिर्फ उस फंक्शन को कॉल किया मेरा काम हो गया सेम यहां पे कि ये वाला जो कोड है ये आपके लिए प्रीबिल्ट किसी ने लिख रखा है और किसने लिख रखा है वो आपके जो Facebook के डेवलपर हैं उन्होंने आपके लिए रिएक्ट का यह कोड लिखा हुआ है बस आपको इसको इसको कॉल करना है। आपको इसको लिखने की जरूरत नहीं है कि मैं हर बार इस कोड को ऐसे करके लिखूंगा। नहीं, आपको लिखने की जरूरत नहीं है। यह कोड पहले से लिखा हुआ है। बस आपको इसको कॉल करना है कि रिएक्ट डॉट क्रिएट एलिमेंट आपके लिए एलिमेंट क्रिएट हो जाएगा। आपने बोला अगला एलिमेंट रिएक्ट डॉट क्रिएट एलिमेंट आपके लिए अगला एलिमेंट क्रिएट हो गया। तो आज से अगर आपसे पूछे कि रिएक्ट क्या है? तो एक तो हो गया जावास्क्रिप्ट के लाइब्रेरी। दूसरा क्या बोलोगे कि भैया ये क्या है? सिर्फ एक जावास्क्रिप्ट का ऑब्जेक्ट है जिसके अंदर प्रीबिल्ट कुछ कोड लिखे हैं। कुछ एक ये कोई ये क्या है मेरे पास? ऑब्जेक्ट उसके अंदर कोई मेथड है। मुझे उस मेथड को कॉल करना है। मेरा काम हो जा रहा है। मेरे एलिमेंट क्रिएट हो जा रहे हैं। इससे मेरी कोडिंग लिखने की जर्नी क्या हो गई? आसान हो गई। पहले मुझे इतने बड़े-बड़े कोड लिखने पड़ रहे थे हर एक एलिमेंट को क्रिएट करने के लिए। ये देखो इतना सारा यह भी इतना सारा। अगर मैं और एलिमेंट को करूं तो भैया इससे बढ़िया एक रिय ने आपके लिए लिखा हुआ है। उसको इस्तेमाल करो। हां जी। अब इसके साथ ही ना हमारे पास एक और होता है। उसको हम कहते हैं रिएकम। उसके बारे में अभी मैं कुछ देर में आऊंगा। ठीक है? तो रिएक्ट डोम कुछ नहीं है। अभी मैं आपको दिखा देता हूं। इसके अंदर भी एक रेंडर नाम का फंक्शन प्रेजेंट है। मेथड प्रेजेंट है। जो कि आपसे दो आर्गुमेंट ले रहा है। एक चाइल्ड और एक आपका पैरेंट। ये कुछ नहीं है। ये अभी तो आपने यहां से एलिमेंट क्रिएट करा। अब इसको पैरेंट के साथ अटैच कराना। किसके साथ? इसके साथ अटैच कराना। वो रिएक्ट डाउन करेगा। तो अभी जो कोड मैं यहां पर ऐसे करके लिख रहा था ना इतना बड़ा यह ऐसे करके जो महाभारत मुझे कुछ नहीं करना मुझे यहां पर रिएक्ट डोम लिखना है डॉट रेंडर फंक्शन को कॉल करना है और यहां से मुझे किसको अटैच कराना है मुझे एलिमेंट वन को अटैच कराना है तो मैं एलिमेंट वन को भेज दूंगा ओके और पैरेंट कौन है किस पे कराना है रूट पे अटैच कराना है तो अब मेरे जिम्मेदारी यहां पे रेंडर फंक्शन के अंदर हो जाएगी कि पैरेंट डॉट अपेंड चाइल्ड तो सारा काम आपने ऐसे करके लिख दिया कि रिएक्ट डोम मेरे पास एक और क्या है? जावास्क्रिप्ट का ऑब्जेक्ट है जो कि मेरे लिए सारे जो भी डोम के ऑपरेशन है वह परफॉर्म कर देगा कि डोम के साथ इसको इस एलिमेंट को अटैच कराना था तो मैंने उस रूट को भी भेज दिया। हां और इस एलिमेंट को भी भेज दिया। इनको अटैच करा देना। आप देखोगे आपके आउटपुट में आ जाएगा। हेलो कोडर आर्मी। सेम अगर आपको दूसरे के लिए भी करना है तो आप इसको कॉपी करोगे। यहां पे पेस्ट करोगे और एलिमेंट टू को भेजोगे। ये आपका हो गया कि भैया उसके साथ मुझे अटैच कराना है। तो यहां पे रिएक्ट डाउन का काम क्या हो गया? ये भी एक अलग मेरे पास लाइब्रेरी है। इसको आप आप कॉल करोगे रडम डॉट रेंडर करके क्योंकि इसका इसका ये क्या है? प्रॉपर्टी है ना रेंडर। हां तो आपने इसको कॉल किया। आपने बता दिया भैया कौन सा चाइल्ड है और पैरेंट कौन है? पैरेंट आपने ऑलरेडी सेलेक्ट कर रखा था। ओके कि भैया इस चाइल्ड को इस पैरेंट के अंदर डाल देना। पैरेंट डॉट अपेंड। अब आपने बिल्कुल ये वाला कोड भी आपके लिए पहले से लिखा गया है। यह वाला कोड भी आपके लिए पहले से लिखा है। अब यह मत समझना भैया इसके अंदर सिर्फ इतना ही कोड होगा। इसके अंदर बहुत सारा कोड प्रेजेंट है दोस्त। और अभी आपके माइंड में डाउट आ रहा होगा भैया यह रिएक्ट डोम का जो रेंडर वाला कोड है इसको अलग से क्यों लिखा है? इसको रिएक्ट के अंदर क्यों नहीं लिखा? उसका आंसर थोड़ी देर में आपको मिल जाएगा। घबराने की जरूरत नहीं है। पर अभी जो हमारा पहला बेसिक काम था उस रिएक्ट के डर को हटाना कि ये है क्या? किस बला का नाम है? किसी बला का नाम नहीं है। वो ऑलरेडी किसी ने जावास्क्रिप्ट के अंदर रिएक्ट का कोड लिखा हुआ है। आप बस उसके फंक्शन उसके मेथड को इस्तेमाल करो खत्म। सेम यहां पे रिएक्ट डोम डॉट रेंडर वाइल को इस्तेमाल करो ताकि आपका वो एलिमेंट डोम के साथ अटैच हो जाए। जो पहले हम यहां पर मैनुअली कर रहे थे। यही है। यही है रिएक्ट। यही है रिएक्ट डाउन। भैया यार प्रूफ करो। अब मुझे ओरिजिनल वाले को देखना है। ओरिजिनल वाला रिएक्ट कैसा है? ये तो अभी हमने खुद के लिए लिखे ना ये मेरे कस्टम रिएक्ट हो गए। कस्टम रिएक्ट जो मैंने खुद से बनाया है। है ना? ओके। ओरिजिनल वाले को एक बार मुझे दिखाओ। तो एक काम करता हूं। इनको मैं कमेंट डाउन कर देता हूं। इस रिएक्ट को भी इस रिएक्ट डोम को भी। अब हम ओरिजिनल वाले रिएक्ट को लेके आते हैं। तो यहां से अगर मैं लिखूं रिएक्ट सीडीियन तो आपको यहां से रिएक्ट के सीरियन लिंक मिल जाएंगे। ठीक है? यहां से आप रिएक्ट को उठा के ला सकते हैं। ये देखो स्क्रिप्ट यहां पे रिएक्ट का कोड लिखा है। यहां पे रिएक्ट डॉन का कोड लिखा हुआ है। इसको आप अपने इंडेक्स. फाइल के अंदर ले आएंगे और इसको आप यहां पे अटैच करा देंगे। देखो यहां पर रिएक्ट का कोड लिखा गया है। अभी यह रिएक्ट का 18 वर्जन है। यह भी रिएक्ट का डोम का 18 वर्जन है। अभी रिएक्ट जो लेटेस्ट चली है 19 वर्जन उसको ही मैं आपको पढ़ाऊंगा। हां, घबराने की जरूरत नहीं है। जो 19 वर्जन है रिएक्ट का वही मैं आपको पढ़ाने वाला हूं। और अगर फ्यूचर में कोई इस वीडियो को देख रहा है जब 20 21 22 कोई भी वर्जन आए तब भी आप इस सीरीज को फॉलो कर सकते हैं। कोई घबराने की जरुरत नहीं है। इसको मैं वर्जन इंडिपेंडेंट बनाने वाला हूं। ओके? हां कांसेप्ट वही होने वाले हैं। अब हम यहां पे क्या कर रहे हैं कि भैया इस लिंक पे रिएक्ट का कोड लिखा गया है। उसको लेके आओ और इस वाले में रिएक्ट डम का कोड लिखा गया है। रिएक्ट का कोड लिखा गया है का मतलब क्या है? हैं? ये है वो रिएक्ट का कोड भाई। इतना बड़ा रिएक्ट का कोड है। ये इतना बड़ा है। देख रहे हो कि इस कोड को इस लिंक से उठा के मेरे सिस्टम के अंदर ले आओ। यह देखो ये स्क्रिप्ट टैग कि इस सोर्स से जाके इस कोड को ले आओ। और सेम रिएक्टम का भी कोड है। अब अगर आप अपने इस कोड को चलाते हो, इस कोड को चलाते हो, यह कोड बिल्कुल चलेगा। दिखा भी देता हूं। स्ट्राइक एज लॉन्च मैं इसको एक बार कमेंट डाउन कर देता हूं एलिमेंट टू वाले को। ओके, अभी हम सिर्फ एलिमेंट वन वाले को देख रहे हैं। आप देखोगे हेलो कोडर आर्मी हमें प्रिंट होते हुए नजर आ रहा है। ये कहां से आया है? अभी मैं सिर्फ रिएक्ट वाले की बात कर रहा हूं। एक एलिमेंट मैंने क्रिएट करा। हां जी। और उसको मैंने रिएक्ट डोम के अंदर अटैच करा दिया। यह देखो मैंने खुद के फंक्शन तो हटा दिए। इसका भी हटा दिया। इसका भी हटा दिया। तो यह आ कहां से रहा है? यह आ कहां से रहा है? जब यह था नहीं तब मेरा कोड एरर दे रहा था। अगर मैं इसको अगर कमेंट डाउन कर दूं तब यहां पे कुछ नहीं होगा। कुछ नहीं होगा। क्योंकि भैया यहां पे मेरे कोड को पता ही नहीं है इस कोड को कि रिएक्ट डॉट क्रिएट एलिमेंट है क्या? तो जैसे ही मैं इसको लेके आया। अब इसको बताया कि रिएक्ट क्या है? रिएक्ट डोम क्या है? रिएक्ट क्या है? और रिएक्ट डोम क्या है? और उसने मेरे को अटैच करा दिया। यहां पे तो मैंने कस्टम लिखे हुए थे ना खुद से। मैंने वो हटा दिए। ओरिजिनल वाले ले आया हूं। ओरिजिनल वाले कोड आपके यह रहा। आप इस कोड को रीड आउट कर सकते हैं। यहां से यह फंक्शन स्टार्ट हो रहा है। हां जी। यह आपको इफी टाइप का दिख रहा होगा। मैं अगर इसके ऊपर सर्च करूं तो यहां पे आपको एक क्रिएट एलिमेंट नजर आएगा। ये देखो फंक्शन क्रिएट एलिमेंट। इसके अंदर प्रेजेंट है ये फंक्शन। जहां से आपके एलिमेंट्स क्रिएट हो रहे हैं। ऐसे ही कुछ नहीं हो रहा दोस्त। हवा में यहां पर देखो प्रेजेंट है यह। सेम अगर मैं दूसरे वाले कोड पर चलता हूं। उसके अंदर भी रेंडर नाम का प्रेजेंट होगा। यह देखो यह रिएक्ट डोम है। अगर मैं यहां पर रेंडर ओहो ये तो बहुत जगह लिखा हुआ है। रेंडर ओहो ये तो बहुत जगह लिखा हुआ है। पर इसके अंदर भी रेंडर नाम का फंक्शन आपको नजर आ जाएगा। अभी तो इतनी जगह है। तीन ओके। हां। तो रेंडर इन्होंने बहुत जगह लिखा हुआ है। पर इसके अंदर रेंडर वाला भी प्रेजेंट होगा। इवन अगर आप इसके अंदर सर्च करोगे एक आता है इसके अंदर क्रिएट रूट नाम का। ओहो ये पेज तो हैंग हो गया दोस्तों। हैंग हो गया। हैंग हो गया। कोई नहीं कोई नहीं। ओहो क्रिएट रूट। यहां पर आप देखोगे आपको क्रिएट रूट नाम का एक फंक्शन नजर आएगा। ढूंढोगे आपको मिल जाएगा ऐसे करके। ठीक है? यह पता नहीं मेरा सिस्टम हैंग कर रहा है। ये रहा ये फंक्शन क्रिएट रूट। इसका भी आप बहुत ज्यादा इस्तेमाल करते हो रिएक्ट डॉम के अंदर। कैसे करते हैं? अभी हम कुछ देर में देखेंगे। उसको घबराने की जरूरत नहीं है। पर अभी मैंने आपको बोला यहां पे कि रिएक्ट कहां से आया है? कहां से आया? मैं इनको सीरियल लिंक के द्वारा अपने कोड के अंदर लेके आया हूं। मैंने खुद से पहले मैंने कस्टम खुद से रिएक्ट का कोड लिखा हुआ था। अब वो यहां से आ रहा है। इन रिएक्ट के अंदर से आ रहा है। वो रिएक्ट क्या है? एक ऑब्जेक्ट है। मैं आपको दिखा भी देता हूं। यहां पे अगर मैं इसके अंदर जाऊं इंस्पेक्ट के अंदर क्योंकि मेरे कोड के अंदर अब रिएक्ट आ चुका है ना? हां। तो अगर मैं यहां पे डालूं रिएक्ट तो देखो मेरे कोड के अंदर रिएक्ट आ चुका है। ये देख लो रिएक्ट आ चुका है। और अगर मैं यहां पे इसको बोलूं कि भैया ये जो रिएक्ट है इसका टाइप ऑफ बता दो। क्या आ रहा है? एक ऑब्जेक्ट ही आ रहा है। और अगर आप इस रिएक्ट को देखोगे इस रिएक्ट के अंदर हमारे पास क्या है? क्रिएट एलिमेंट नाम का क्या है? एक मेथड प्रेजेंट है। रिएक्ट डॉट क्रिएट एलिमेंट। मैं एलिमेंट को क्रिएट कर सकता हूं। सारे मेथड यहां पे प्रेजेंट है। सेम रिएक्ट डोम का अगर आप यहां पे करोगे। ये देखो यहां पे भी वो रेंडर नाम का फंक्शन प्रेजेंट है। मेथड प्रेजेंट है। रिएक्टम डॉट रेंडर ये यहां पे भी प्रेजेंट है। इतने आसान तरीके से आप सारा काम कर सकते हो। इसको मैं फिलहाल के लिए ऐसे कर देता हूं। अब अगर आपने एक इंटरेस्टिंग चीज यहां पर नोटिस करी हो क्या आपने नोटिस करने की कोशिश करी एक इंटरेस्टिंग चीज जो हमारे प्रीवियस है इसमें दिक्कत थी अगर आप यहां पे देखोगे जब मैं इस एलिमेंट टू वाले को ऐसे कर दे रहा हूं अब आप आउटपुट देखना क्या आ रहा है स्ट्राइक एज ल्च ऐसा क्यों हो रहा होगा ऐसा हो क्यों रहा होगा यहां पे अगर आप देखोगे मैंने दोनों एलिमेंट क्रिएट करे हैं हेलो कोडमी स्ट्राइक एज ल्च लेकिन मुझे आउटपुट में सिर्फ स्ट्राइक एज ल्च्ड ही क्यों दिखाई दे रहा है? अगर मैं इसको कमेंट डाउन कर दूं तब मुझे हेलो कोडर आर्मी नजर आ रहा है। लेकिन इसको मैं अगर ऐसा कर दूं तब मुझे स्ट्राइक एज ल्च नजर आ रहा है। ऐसा क्यों हो रहा है बताता हूं दोस्तों यहां पे क्या होता है जब भी आप रिएक्ट डम डॉट रेंडर करते हो इसकी देखो जो हमने कस्टम लिखी थी वो अलग है और जो एक्चुअल रिएक्ट है उसमें थोड़ा सा मॉडिफिकेशन है वो अभी हम डिस्कस करते हैं। वरना आप बोलोगे भैया तुम हवा में उड़ने लग जाओगे। तुम बोलोगे भैया मुझे आ गई रिएक्ट। नहीं दोस्त बहुत लोगों को लगता है उनको रिएक्ट आ चुकी है सिर्फ इतना देख के आपको बहुत खुशी हुई होगी मैं जानता हूं लेकिन अभी अगर मैंने आपको थोड़ा अंदर लेकर नहीं गया तो आपको पता कैसे चलेगा कि भैया ये रोहित भैया तो गुरु है हमारे ओके हां तो देखो यहां पे क्या होता है दोस्त मैं ये जो रूट एलिमेंट होता है हमारा ये रूट एलिमेंट ठीक है मैं अगर मान लूं फिलहाल के लिए इसके अंदर लिख देता हूं हां जी क्या हालचाल ओके और फिलहाल के लिए कुछ भी रेंडर नहीं करा रहा हूं। कुछ भी नहीं करा रहा हूं। तो आपको आउटपुट में हां जी क्या हालचाल नजर आएगा? क्या नजर आएगा? हां जी क्या हालचाल नजर आएगा? डिवाइडी रूट के अंदर। लेकिन जैसे ही मैं इसको लिखता हूं रिएक्ट डम डॉट रेंडर एलिमेंट डॉट रूट आप देखोगे मुझे हेलो कोडर आर्मी नजर आएगा। जो पहले इसके अंदर प्रेजेंट था कुछ भी वो हट जाएगा। वो हट जाएगा। अब मुझे हेलो कोडर आर्मी नजर आएगा। सेम यहां पर कहानी है। जब मैंने अगली बार रेंडर कराया अगली बार तो अभी उसके अंदर क्या लिखा हुआ होगा? हेलो कोड आर्मी। लेकिन मैंने एक नया रेंडर चलाया है। तो पहला वाला जो भी इस डिवाईडी रूट के अंदर प्रेजेंट होगा क्योंकि आप इसके अंदर रेंडर करा रहे हो उन सबको हटा के इसको लिख दिया जाएगा। तो इसीलिए आपको स्ट्राइक इज लॉन्च नजर आ रहा है। क्लियर है? मान लो मैं यहां पे कुछ भी लिख दूं यार। मान लो मैं यहां पे लिख दूं। एक पैराग्राफ लिख दूं ऐसे-ऐसे करके। एक मैं H3 टैग लगा दूं। ऐसे-ऐसे करके। एक मैं H4 टैग लगा दूं। ऐसे-ऐसे करिए। ठीक है? हां। तो आप देखोगे इनिशियली मुझे ये दिखेंगे जो उसके अंदर एक्चुअल में प्रेजेंट है। अगर मैंने कुछ भी रेंडर नहीं किया है ये तीनों। लेकिन जैसे ही मैं किसी एलिमेंट को रेंडर उसके अंदर करता हूं। मैं ये तो कह रहा हूं कि रूट के अंदर एलिमेंट वन वाले को डाल दो। तो इसका मतलब है कि रूट के अंदर जो पहले प्रेजेंट थे रूट के अंदर जो पहले प्रेजेंट थे उन सबका पत्ता साफ करो। उनको हटा दो। तो वो सब हटा दिए जाएंगे और सिर्फ इस वाले को रखा जाएगा। इसीलिए पहला वाला सब क्लीन आपको सिर्फ हेलोकड आर्मी नजर आया। जब आपने दोबारा रेंडर किया फिर से वही कहानी जो उसके अंदर पहले रखा गया है रूट के अंदर उन सबको हटा दो और इस नए वाले को उसके अंदर डालो। यह मुझे यहां पर ध्यान रखना है दोस्त। गोल क्लियर? हां। क्या यह बाकी किसी चीज को डिस्टर्ब करेगा? अगर मैं इसके ऊपर एक H1 टैग लगा दूं। मैं मस्त हूं। और यहां पर मैंने लिख दिया H4 मैं बढ़िया हूं। आप देखो आपका आंसर क्या आएगा। मैं मस्त हूं, मैं बढ़िया हूं। स्ट्राइक इज ल्च क्योंकि आप सिर्फ इस डिव आईडी रूट को टारगेट कर रहे हैं। आप इसको टारगेट नहीं कर रहे हैं। आप इसको टारगेट नहीं कर रहे हो। जब आपने ये लिखा मान लो आपने सिर्फ पहला वाला स्टेटमेंट चलाया तो ये किसके अंदर पहले सामान खाली करेगा? रूट वाले के अंदर। रूट क्या है? मेरा ये रहा। तो डीआई डी रूट के अंदर जो है उसको हटाया जाएगा। इसके बाहर वालों को नहीं हटाया जाएगा। सिर्फ इसको हटाया जाएगा। और उसकी जगह में क्या लिख दिया जाएगा? हेलो कोडर आर्मी। क्योंकि आप इसी को टारगेट कर रहे हो। जो उसके बाहर हैं उन पर कुछ भी छेड़खानी नहीं होगी। तो इसका मतलब क्या है? मैं रिएक्ट की हेल्प से पर्टिकुलर किसी एलिमेंट को एज अ कंटेनर टारगेट कर सकता हूं। उसको पकड़ूंगा। उसके आइटम को डिलीट मार मार सकता हूं। और जो नया एलिमेंट मैं लेके आया हूं उसको उसके साथ अटैच करा सकता हूं। क्या गोल क्लियर है? हां भैया गोल क्लियर है। चलिए अब थोड़ा लेवल अप करते हैं। समझने की कोशिश करते हैं कुछ और चीजें। फिलहाल के लिए मैं इसको हटा देता हूं। ओके। दोस्तों मैं क्या क्या अब करना चाहता हूं एक बार हम उसको देखने की कोशिश करते हैं। समझने की कोशिश करते हैं। मान लो दोस्त मैं यहां पे अगर कंसोल डॉट log एलिमेंट वन कराता हूं। मैंने क्या कराया? कंसोल डॉट log एलिमेंट वन। इसको एक बार देखते हैं कि रिएक्ट का एलिमेंट मेरे को एक्चुअल में क्या क्रिएट करके दे रहा है। तभी तो समझ आएगा। हां। तो अगर मैंने इसको कराया इसको इंस्पेक्ट पे लिखा। यहां पर अगर आप देखोगे यह मुझे एक ऑब्जेक्ट रिटर्न करके दे रहा है कंसोल log एलिमेंट वन जिसके अंदर टाइप ऑफ सिंबल रिएक्ट एलिमेंट प्रॉपर्टीज मेरी ये हो गई कि प्रॉपर्टीज के अंदर चिल्ड्रन हेलो कोड आर्मी लिखा हुआ है। क्लास नेम एलिमेंट लिखा गया है। आईडी फर्स्ट लिखा गया है। ओके और स्टाइल के अंदर जो जो उसकी स्टाइलिंग है। मतलब ये जो रिएक्ट का एलिमेंट है ये मुझे ये ये क्रिएट करके दे रहा है। लेकिन दोस्त जब मैंने खुद का रिएक्ट क्रिएट करा था। जब मैंने खुद का रिएक्ट क्रिएट करा था। अगर मैं इसको बोलूं अगर मैं इसको बोलूं क्योंकि रिएक्ट डॉट क्रिएट एलिमेंट अब इसको देखिएगा। उस टाइम पे मेरे पास क्या आ रहा है? इतने सारे एरर आ गए। इसको हटाते हैं पहले। हम इस पे ध्यान नहीं देते। इसको फिलहाल के लिए कमेंट डाउन सिर्फ इस पे फोकस रखते हैं। ओके। ओके। अब अगर मैं इस पे ध्यान दूं। अरे अरे क्या-क्या आ जा रहा है इसके अंदर? इसको भी हटाओ भाई। ओके। हां। तो अगर हम अपने एलिमेंट को देखो जब मैं खुद का रिएक्ट का एलिमेंट मैंने खुद से क्रिएट करा था जब मैंने खुद से रिएक्ट का एलिमेंट क्रिएट करा था तो वो मुझे H1 क्लास एलिमेंट आईडी फर्स्ट स्टाइल फोंट साइज ये बैकग्राउंड कलर ये इस तरीके से दे रहा है लेकिन दोस्त जब मैं ओरिजिनल रिएक्ट को इस्तेमाल कर रहा हूं अगर मैं इसको कमेंट डाउन कर दूं तो ये इस वाले रिएक्ट को इस्तेमाल करेगा उस समय पे मेरे पास इस तरीके से आंसर आ रहा है ऐसा क्यों आ रहा है जब मैंने कस्टम रिएक्ट लिखी उसमें तो मेरे लिए एलिमेंट क्रिएट हो जा रहा रिएक्ट का एलिमेंट। लेकिन जब मैं ओरिजिनल रिएक्ट को इस्तेमाल कर रहा हूं तो वहां पे एक रिएक्ट का एलिमेंट क्रिएट कर रहा है जो कि कुछ इस तरीके से दिख रहा है। इस तरीके से दिख रहा है ना आपको कि वहां पे टाइप ऑफ सिंबल रिएक्ट एलिमेंट यहां पे प्रॉप्स प्रॉपर्टीज वगैरह दे रखी हैं। यहां पे रेफरेंस वगैरह दे रखा है। टाइप वगैरह दे रखा है। ऐसा क्यों हो रहा है? ऐसा क्यों हो रहा है? जी हां। आपको एक चीज समझना पड़ेगा कि जो हमारी ओरिजिनल रिएक्ट है। समझिए दोस्तों ध्यान से सुनो। रिएक्ट का काम क्या है? मैंने यहां पे डेफिनेशन लिखी है। द वर्ड्स इट्स जॉब इज ओनली टू डिस्क्राइब व्हाट द यूआई शुड लुक लाइक। रिएक्ट का काम सिंपल सा यह है जो ओरिजिनल रिएक्ट है कि हमारा यूआई कैसा दिखना चाहिए। सिर्फ इतना काम है। वो इंप्लीमेंट वगैरह कुछ नहीं करेगा। वह कुछ आपके लिए डोम एलिमेंट वगैरह कुछ नहीं करेगा। वह ना ही आपके कोई एलिमेंट क्रिएट करेगा ना कुछ करेगा। यह सिर्फ आपको एक जावास्क्रिप्ट का ऑब्जेक्ट रिटर्न करके देगा जो सिर्फ यह इंफॉर्मेशन आपको बताएगा कि आपका यूआई कैसा दिखना चाहिए। अब उस इंफॉर्मेशन को मेरा रिएक्ट डोम कैच करेगा और मेरा रिएक्ट डोम जिसके साथ ही डोम अटैच हो रखा है इस डोम की जिम्मेदारी है उन एलिमेंट्स को क्रिएट करना जैसे डॉक्यूमेंट डॉट क्रिएट एलिमेंट उनके अंदर प्रॉपर्टी ऐड करना इस रिएक्ट डोम के काम है रिएक्ट का कोर जॉब है ही नहीं कि डोम के ऑपरेशन को कंफर्म करना कि डॉक्यूमेंट डॉट क्रिएट एलिमेंट जब हम अपने फर्स्ट थॉट प्रिंसिपल से गए थे जब हमने खुद से रिएक्ट बनाया वहां पे हम एलिमेंट्स को यहां पे रिएक्ट के अंदर क्रिएट कर रहे थे। ओरिजिनल रिएक्ट कहता है नहीं यह आपको नहीं करना है। क्योंकि अगर अभी हम इसका आउटपुट देखें जो ओरिजिनल रिएक्ट हमें ला के दे रहा है वो सिंपल हमें क्या आंसर दे रहा है? ये ये एक ऑब्जेक्ट आंसर दे रहा है। यह रिएक्ट आपके लिए कोई भी एलिमेंट इस तरीके से क्रिएट नहीं करेगा। डोम एलिमेंट यह क्रिएट नहीं करता है। यह सिर्फ आपको एक जावास्क्रिप्ट का ऑब्जेक्ट या फिर आप उसको बोल सकते हो एक रिएक्ट का एलिमेंट क्रिएट करके दे देगा जो सिर्फ यह बताएगा कि आपका यूआई कैसा दिखना चाहिए और फिर उस किसकी रिएक्ट डोम की जिम्मेदारी बन जाती है उस रिएक्ट एलिमेंट को पकड़ के उसको डोम में कन्वर्ट करना। क्या पॉइंट क्लियर है? मैं अगर आपको बताऊं यहां पर इसका सिंपल सा काम है जैसे अगर मान लो मैं यह स्टेटमेंट लिखी है रिएक्ट डॉट क्रिएट एलिमेंट H1 क्लास नेम तो ये जो रिएक्ट है ना इसका कोई काम ही नहीं है आपके लिए एलिमेंट वगैरह क्रिएट करना ये सिंपल सा आपको एक ऑब्जेक्ट रिटर्न करके दे देगा जहां पे वो बता देगा कि भैया जो मेरा टाइप है टाइप ही है ना वहां पे यहां पे ये टाइप ही लिख रहा है ना हां ये जो मेरा टाइप होने वाला है वो H1 टैग है इस तरीके से आपको इंफॉर्मेशनेशन दे देगा ये आपके लिए कुछ क्रिएटिव करके नहीं देगा ये आपके लिए एक रिएक्ट का एलिमेंट या फिर आप इसको आपको जावास्क्रिप्ट का एक ऑब्जेक्ट आपको दे देगा और उसके अंदर प्रॉब्स होंगे जिसके अंदर मल्टीपल चीजें आपके प्रेजेंट होंगी। जैसे कि भैया मेरा स्टाइल क्या है? जो स्टाइल वाले आपके एट्रिब्यूट्स होंगे वो यहां पे प्रेजेंट होंगे। मेरे चिल्ड्रन कौन से हैं? वो यहां पे आपके प्रेजेंट होंगे। मेरी क्लास का नाम क्या है? क्लास नेम क्या है? वो यहां पे प्रेजेंट होगा। मेरी आईडी क्या है? वो यहां पे प्रेजेंट होगी। इस ऑब्जेक्ट को क्रिएट करता है सिर्फ आपका रिएक्ट। आपके लिए कोई भी डोम का एलिमेंट रिएक्ट क्रिएट नहीं करता है। यह पॉइंट याद रखो। जब हमने खुद का रिएक्ट बनाया था वहां पे हम डोम एलिमेंट क्रिएट कर रहे थे। देख रहे हो डॉक्यूमेंट डॉट क्रिएट एलिमेंट ओरिजिनल रिएक्ट कहता है नहीं। आपको नहीं करना। आपको सिर्फ यह बताना है कि आपका यूआई कैसा दिखना चाहिए। आपको बस यह बताना है और उसको मैंने एक ऑब्जेक्ट की फॉर्म में दर्शा दिया कि टाइप H1। अब इस रिएक्ट डोम की जिम्मेदारी होती है कि इस एलिमेंट को पकड़ना और इसके ऊपर ऑपरेशन परफॉर्म करना कि अच्छा यहां पर टाइप H1 है तो मुझे इस एलिमेंट को क्रिएट करना है। ये डोम ऑपरेशन परफॉर्म करेगा कि डॉक्यूमेंट डॉट क्रिएट एलिमेंट इस इंफॉर्मेशनेशन को जब एक बार रिएक्ट डोम के पास चली जाएगी। रिय का काम है सिर्फ इस जावास्क्रिप्ट ऑब्जेक्ट या फिर इस रिएक्ट एलिमेंट को क्रिएट करना। इसका काम नहीं है। डोम के साथ इसका कोई काम नहीं है। यहां पे आपको डोम का कोई भी ऑपरेशन नहीं दिखेगा। डॉक्यूमेंट डॉट क्रिएट एलिमेंट नहीं दिखेगा। कुछ नहीं दिखेगा। वो सिर्फ इस ऑब्जेक्ट को क्रिएट करेगा जो अभी आपको यहां पे नजर आ रहा है। ये वाला ऑब्जेक्ट जिसके अंदर कीव, टाइप, ओनर इतनी सारी चीजें हैं। पर फिलहाल के लिए मैं सिर्फ टाइप और प्रॉप्स के ऊपर ध्यान दे रहा हूं। ये सिर्फ यह क्रिएट करेगा। ये आपके लिए डोम का कोई भी एलिमेंट क्रिएट नहीं करेगा क्योंकि उसका जिम्मेदारी होगी मेरे किसकी? रिएक्ट डोम की। रिएक्ट डोम पकड़ेगा इस इंफॉर्मेशन को और वो जाके आपके लिए ये सारी चीजें क्रिएट करेगा। अच्छा आपको H1 क्रिएट करना है। मैं आपके लिए H1 क्रिएट कर दूंगा। आपको क्या-क्या स्टाइलिंग डालनी है? वो प्रॉप्स के अंदर आपकी प्रेजेंट है। मैं वो कर दूंगा। चिल्ड्रन क्या-क्या है वो कर दूंगा। वो कौन करेगा? रिएक्ट डोम करेगा। रिएक्ट सिर्फ आपके लिए क्या करेगा कि आपको रिएक्ट सिर्फ यह बताएगा कि आपका यूआई कैसा दिखना चाहिए। सिर्फ आपको यह बताना है। आप कोई भी एलिमेंट को इसमें क्रिएट नहीं करने वाले। एलिमेंट क्रिएशन की काम कौन करेगा? आपका रिएक्ट डोम करेगा। अब वो सब ऑटोमेटिकली होगा। आपको ध्यान रखने की जरूरत नहीं है। आपको बस यह बताना है कि मेरा यूआई कैसा दिखना चाहिए। आपको कोई एलिमेंट क्रिएट नहीं करना। कोई भी डोम का एलिमेंट क्या नहीं करना? क्रिएट नहीं करना। डॉक्यूमेंट डॉट ये क्रिएट एलिमेंट आप यहां पे करें। बिल्कुल अलाउड नहीं है। आपको सिर्फ यह बताना है कि इट्स जॉब इज ओनली टू डिस्क्राइब व्हाट द यूआई शुड लुक लाइक कि मेरा यूआई कैसा दिखना चाहिए। आपको बस यह बताना है और उस ब्लूप्रिंट को मेरा रिएक्ट डोम पकड़ेगा और आपके लिए जो भी आपके डोम ऑपरेशन है उसको मेरा रिएक्ट डोम परफॉर्म करेगा। अब आपका सवाल यह होगा कि भैया ये रिएक्ट ही क्यों ये काम नहीं कर दे रहा है? रिएक्ट ये काम खुद से क्यों नहीं कर रहा है? इसने अलग से इस रिएक्ट डोम को क्यों लिया? दोस्तों आपको एक बात याद रखना है जो मेरी रिएक्ट है। रिएक्ट डोम की बात नहीं कर रहा हूं मैं। जो रिएक्ट है यह अलग-अलग जगह इस्तेमाल होती है। यह मेरे वेब में इस्तेमाल होती है। ठीक है जो हमारे ब्राउज़र हैं इसको यह मेरे मोबाइल के साथ रिएक्ट नेटिव अगर आपने नाम सुना होगा इसके साथ भी इस्तेमाल होती है इवन रिएक्ट आपके पीडीएफ के साथ पीडीएफ क्रिएट करने के लिए भी इस्तेमाल होती है रिएक्ट पीडीएफ इनके साथ भी इस्तेमाल होती है जो कौन होती है आपकी रिएक्ट यूज़ होती है जो रिएक्ट डॉट क्रिएट एलिमेंट आप लिखते हैं ना रिएक्ट डॉट क्रिएट एलिमेंट वो आप वेब के साथ भी लिख सकते हैं रिएक्ट के साथ भी लिख सकते हैं रिएक्ट पीडीएफ के साथ भी लिख सकते हैं। तो जो यह फॉर्मेट ये रिएक्ट क्रिएट करके देखता है देता है यह वाला फॉर्मेट इस फॉर्मेट को आपका वेब भी समझता है। आपका रिएक्ट नेटिव भी समझता है और आपका रिएक्ट पीडीएफ जो आपके लिए पीडीएफ क्रिएट करके देता है ये भी इसको समझता है। बस यहां पे जो रेंडरिंग की प्रोसेस होगी ये इंजन ये सबके लिए अलग होगा। रिएक्ट डोम क्या डोम को ये समझता है रिएक्नेटिव जो आपकी Android एप्लीकेशन है क्या वो डोम को समझती है? क्या उसको पता है कि डॉक्यूमेंट डॉट गेट एलिमेंट बाय आईडी क्या होता है आपका रिएक्ने? नहीं। उसके पास खुद का एक रेंडरिंग इंजन होगा रिएक्ट नीडी के पास। ऐसे ही रिएक्ट पीडीएफ के पास खुद का रेंडरिंग इंजन होगा। तो रिएक्ट आपके इनके साथ इस्तेमाल होती है तीनों के साथ। लेकिन रिएक्ट डोम जो है वो सिर्फ आपके वेब के साथ यूज़ होता है। रिएक्ट डोम जो कि जो आपके रिएक्ट ने आपको आउटपुट में दिया है उसको कन्वर्ट कर पाए आपके ब्राउज़र के हिसाब से। सेम रगने का भी एक रेंडरिंग इंजन होता है। जो भी रिएक्ट ने मुझे आउटपुट दिया उसको मैं समझ पाऊं और उसको आउटपुट दे पाऊं। सेम रिएक्ट पीडीएफ के साथ भी होता है। यह भी रिएक्ट को समझता है यह वाली रिएक्ट कि आप सिर्फ यही तो बता रहे हैं कि मेरा यूआई कैसा दिखना चाहिए। आप वहां पे कोई भी ऑपरेशन परफॉर्म नहीं कर रहे हो कि भैया इस एलिमेंट को क्रिएट करो। कैसे करना है? वो कौन कर रहा है? रिएक्ट डाउन। तो सेम यहां पे आप यहां पे भी जब आपको मोबाइल के लिए कोई एप्लीकेशन बनानी है तो वहां पे आप बता रहे हो कि मेरा जो यूआई है वो ऐसा दिखना चाहिए। आप कोई एलिमेंट क्रिएट नहीं कर रहे हो। आपने बता दिया वो इनफार्मेशन दे दी। वो आपने रग नेटिव के इंजन को दे दी। अब उसका इंजन पकड़ेगा और उस मोबाइल Android के लिए हो, iOS के लिए हो उसके लिए कैसे एलिमेंट को वहां पर क्रिएट करा जाता है। कैसे बटन को क्रिएट करा जाता है? किसी भी ऑपरेशन को क्रिएट करा जाता है। कैसे अपेंड करना है वो रिएक्ट नेटिव का जो भी इंजन होगा रेंडिंग इंजन होगा वो अपने हिसाब से कोड लिख के कर देगा। इसीलिए रिएक्ट को अलग रखा गया है और रिएक्ट डोम को अलग रखा गया है क्योंकि रिएक्ट हर जगह इस्तेमाल हो सकती है। रिएक्ट आपके मोबाइल में इस्तेमाल हो सकती है। रिएक्ट नहीं इसके मोबाइल ब्राउज़र और इवन पीडीएफ के क्रिएट करने के लिए भी हो सकती है। लेकिन रिएक्ट डम आपका हर जगह इस्तेमाल नहीं होगा। ये सिर्फ वेब पे इस्तेमाल होगा। जहां पे उसको पता होगा कि इससे ये जो इंफॉर्मेशनेशन है जो आप ये इनफार्मेशन क्रिएट करते हो ना ये वाली हां इसको सब समझते हैं। आपका वेब भी समझेगा आपका ये भी समझेगा ये भी समझेगा। उसके बाद जो एक्चुअल ऑपरेशन है वो इनका रेंडरिंग इंजन करता है। जैसे रिएक्ट डोम का रेंडरिंग इंजन क्या करेगा? वेब के हिसाब से एलिमेंट को क्रिएट करेगा। वैसे ही रिएक्ट नेटिव वाला भी अपने हिसाब से उस एलिमेंट को जो भी उसकी कमांड होगी वो क्रिएट करेगा। इसीलिए इन दोनों को अलग-अलग रखा गया है। क्या पॉइंट क्लियर है? दोस्त इतनी डिटेलिंग में कोई नहीं जाता। मैं सच बता रहा हूं आपको। इनका ड्रॉप क्लियर है आपको? मैं एक डायग्राम भी आपको दिखा देता हूं। अगर मैं नीचे जाऊं। यह वो डायग्राम रहा कि आपने रिएक्ट डॉट क्रिएट एलिमेंट करा। ओके? इसने आपके लिए एक जावास्क्रिप्ट का ऑब्जेक्ट जो अभी हमने यह देखा वो क्रिएट करा। इस जावा स्क्रिप्ट के ऑब्जेक्ट को हर कोई समझ सकता है। ओके? हां। अब इस जावास्क्रिप्ट के ऑब्जेक्ट को आप किसी को भी दे सकते हैं। आप चाहें तो रिकम ब्राउज़र को दे दें। ब्राउज़र का जो डोम होगा वो उसको समझ जाएगा। आप अगर मोबाइल में चाहते हो तो रिक्नेटिव का जो भी रेंडिंग इंजन है वो उसको समझ सकता है। सेम यहां पे जो आप किसके लिए अगर आपको पीडीएफ बनानी है उसका भी रेंडिंग इंजन इस जावास्क्रिप्ट के ऑब्जेक्ट को समझ सकता है। तीनों समझ सकते हैं। तो रिएक्ट मेरी हर जगह इस्तेमाल हो रही है। लेकिन रिएक्ट डोम हर जगह इस्तेमाल नहीं हो रहा। रिएक्ट डोम सिर्फ ब्राउज़र पे इस्तेमाल हो रहा है जो कि डोम के लिए जो डोम के ऑपरेशन को परफॉर्म करेगा। तो रिएक्ट में आपका जो मेन गोल है वो है कि सिर्फ यह बताना कि आपका यूआई कैसा दिखना चाहिए। तो अगर हम खुद का बनाते हैं। अब हम यहां पे आ जाते हैं। अब हम खुद का यूआई बनाने की कोशिश करते हैं कि यहां पे इसने कैसे बनाया होगा। ओरिजिनल रिएक्ट ने करा क्या है? उसके ऑपरेशन को परफॉर्म करते हैं ना यहां पे। हां। तो मैं यहां पे लिख देता हूं कॉन्स्ट रिएक्ट। तो इसने कुछ नहीं करा है। वही है। यह भी एक ऑब्जेक्ट ही है। क्रिएट एलिमेंट कुछ ये ये गड़बड़ कर देता है। ये क्रिएट एलिमेंट लेके आ जाता है। हमें नहीं चाहिए भाई। फंक्शन टाइप और आपसे पूछता है प्रॉप्स जो आपकी प्रॉपर्टीज हैं। और जो कि आपके क्या हैं? अभी फिलहाल के लिए मैं इसको ऐसे ही रखता हूं। यह फंक्शन क्रिएट एलिमेंट ताकि मैं आपको दिखा पाऊं कि यहां पे अगर हम यहां पे इसके आउटपुट पे जाते चलते हैं तो यहां पे हमें दिख रहा है कि भैया इसका टाइप क्या है? ओके और इसके प्रॉप्स प्रॉप्स के अंदर सारी इनफेशन है। प्रॉप्स के अंदर चिल्ड्रन भी है, क्लास नेम भी है, आईडी भी है, स्टाइल भी है। ये चारों प्रॉप्स के अंदर हैं। तो मैं यहां पे आ जाता हूं कि अगर कोई इस तरीके से इसको क्रिएट करता है तो यहां पे मैं इसका टाइप लिख देता हूं। उसके साथ ही मैं बता दूंगा भैया आपने यह जो दूसरा इंफॉर्मेशन पास करी है इसको मैं प्रॉप्स बोल देता हूं और जो ये लास्ट वाला है इसको मैं चिल्ड्रन बोल देता हूं ये तो कर ही सकता हूं हां इसका काम सिंपल ये होगा कि आपको एक ऑब्जेक्ट रिटर्न करने का जो ओरिजिनल वाला है। ओके तो यहां पे आपको बता देगा कि जो आपका टाइप है वो टाइप ही होने वाला है जो आपने पास करा है। जो आपका प्रॉप्स होगा यहां पर अगर आप देखोगे प्रॉप्स कैसा है यहां पर प्रोप्स कैसा है कि भैया टाइप तो H1 हो गया जो आपने पास करा प्रॉप्स के अंदर क्या-क्या सारे प्रेजेंट है चिल्ड्रन क्लास नेम आईडी स्टाइल सब कुछ प्रेजेंट है तो प्रॉप्स के अंदर ये सब कुछ गया है क्लास नेम भी गया है आईडी भी गया है स्टाइल भी गया है सब कुछ तो इनको मैं क्या कर सकता हूं स्प्रेड कर सकता हूं यहां पे क्योंकि मेरे पास ऑब्जेक्ट के फॉर्म में आया है यह पूरा ऑब्जेक्ट के फॉर्म में आया है ना यह पूरा हां तो यहां पे मैं इसको इन्व अगर मैं इसको क्या लगा दूं स्प्रेड करा दूं तो यहां पे आ जाएगा क्लास नेम एलिमेंट आईडी फर्स्ट स्टाइल ये पूरा स्टाइल है। तो क्या करा मैंने स्प्रेड ऑपरेटर लगा दिया। सेम यहां पे मैं चिल्ड्रन के साथ खेल सकता हूं कि चिल्ड्रन इक्वल टू जो चिल्ड्रन आपने पास करा है। ये लीजिए भाई यही तो हम यहां पे कर रहे थे कि इसी के अंदर सब कुछ प्रेजेंट था। चिल्ड्रन, क्लास नेम, आईडी, स्टाइल और चिल्ड्रन सब कुछ। इसको मैंने रिटर्न करा दिया। यह वाला मैंने रिटर्न करा दिया। ठीक? अब इसको मैं किसके अंदर डाल सकता हूं? एक रिएक्ट के अंदर डाल सकता हूं कि कौन रिएक्ट इक्वल टू और इसको मैं ऐसे करके लिख सकता हूं। खत्म कहानी यह लीजिए भाई हो गया आपका काम। अरे हो जा भाई सही हो जा। चलिए तो ये मेरा रिएक्ट रहा। ठीक है? ये रिएक्ट का मैंने कर दिया कि रिएक्ट डॉट क्रिएट एलिमेंट। तो अब अगर हम अपना आउटपुट देखेंगे तो यह मुझे वही देगा। यह देखो टाइप H1 प्रॉप्स के अंदर सब कुछ आ गया। चिल्ड्रन क्लास नेम आईडी स्टाइल वगैरह। अब हम खुद का रेंडरिंग इंजन बना सकते हैं। यहां पे रिएक्ट डॉट रेंडर हम खुद का खुद बना सकते हैं कि कॉस्ट रिएक्ट डोम खुद का ही बनाना पड़ेगा हमें। हां वो कैसा होगा? यहां पे एक रेंडर होगा। ओके ये रेंडर क्या लेगा? एक फंक्शन जिसके अंदर आपको पास करना पड़ेगा। क्या-क्या लेता है ये रेंडर? एक एलिमेंट। किस एलिमेंट को आपको रेंडर करना है? तो इसको मैं लिख देता हूं। रिएक्ट एलिमेंट को आपको रेंडर करना है। उसके साथ ही आपको क्या करना है? जो उसका रूट एलिमेंट होगा उसको मैंने पकड़ लिया। ठीक है? रिएक्ट एलिमेंट क्या है आपका? जो अभी हमको यहां पर नजर आ रहा था ये वाला। ये तो हमारा रिएक्ट एलिमेंट था। ये ये पूरा ये तो हमारा रिएक्ट एलिमेंट था। अगर मैं इसको यहां पे लिख दूं। ये ये हमारा रिएक्ट एलिमेंट था ना। हां। इसी को हमें यूज़ करना है। अब इसको यूज़ कैसे करना है? क्योंकि रिएक्ट एलिमेंट अगर मैं इसको यहां पे लिखता हूं। मैं यहां पे लिख भी देता हूं कि हमारा रिएक्ट एलिमेंट कैसे दिख रहा है? यहां पर हमारा रिएक्ट एलिमेंट कैसे दिख रहा है? यहां पर हमने क्या-क्या डाला है कि उसका जो टाइप है उसके अंदर हमने डाल दिया H1 टाइप भी था ना उसके रिएक्ट एलिमेंट हमने कैसे क्रिएट करा? टाइप H1 उसके अंदर कुछ प्रॉप्स हैं। उसके अंदर हमने क्या-क्या डाला है? हमने उसके अंदर क्लास नेम, आईडी और स्टाइल। यह सब मैंने उसके अंदर डाला है। यह तो है रिएक्ट का एलिमेंट जो आपको मिला है पहले वाले के लिए। प्रोप्स क्लास नेम एलिमेंट इसको यार एक बार कॉन्स रिएक्ट एलिमेंट करके ही बना देता हूं। ये लीजिए ये लीजिए क्लास नेम ये रहा। आईडी ये रहा स्टाइल ये रहा। और क्या-क्या है? जो उसका चिल्ड्रन होगा। चिल्ड्रन में क्या है? हेलो कोडर आर्मी। यही आपको क्रिएट करके दिया ना इसने जब आपने इस एलिमेंट वन वाले को कॉल किया रिएक्ट डॉट क्रिएट एलिमेंट h1 क्लास नेम यह आईडी फर्स्ट बैकग्राउंड ये सब कुछ तो इसने आपको यही एलिमेंट तो रिटर्न करके दिया इस रिएक्ट एलिमेंट वाले ने इसने सॉरी रिएक्ट क्रिएट एलिमेंट ने यही तो रिटर्न करके दिया कि आपका टाइप क्या है h1 प्रॉब्स वगैरह क्या है वो सब कुछ आपने यहां पे इस तरीके से बना दिए ओके हां अब मुझे क्या करना है एक बार मेरे पास ये एलिमेंट आ गया जो कि मुझे किसने रिटर्न करके दिया है इस वाले ने रिएक्ट डॉट क्रिएट एलिमेंट ने ये वाला ये मैंने आपको एग्जांपल के लिए दिखा रहा हूं अब मुझे यहां पे क्या करना है इस रिएक्ट एलिमेंट के अंदर मुझे सारे ऑपरेशन अब परफॉर्म करने हैं। कैसे कर सकता हूं? मुझे क्या करना है? सबसे पहले मुझे एक एलिमेंट क्रिएट करना पड़ेगा। डॉक्यूमेंट डॉट क्रिएट एलिमेंट। कैसे कर सकता हूं? कौन से एलिमेंट को क्रिएट करना है? ये रिएक्ट एलिमेंट डॉट टाइप। तो ये एलिमेंट मेरे लिए क्रिएट हो जाएगा। ऐसे तो करूंगा क्योंकि डोम का काम है वो सारे ऑपरेशन परफॉर्म करना। ओके? हो गया। उसके बाद अगला टास्क क्या है भैया? ये अगला टास्क है ये जो भी इतनी सारी प्रॉपर्टी हैं इनको अटैच कराना। ओके? तो यहां पे मैं पहले एक काम कर सकता हूं कि एलिमेंट डॉट टेक्स्ट कंटेंट के अंदर मैं किसको डाल सकता हूं? रिएक्ट एलिमेंट डॉट प्रॉप्स डॉट चिल्डन वाले को डाल सकता है? नहीं डाल सकता। चलो इसको मैं आइट्रेशन में कर लूंगा। चलो कोई नहीं। अब हम इस प्रॉप्स वाले के ऊपर इट्रेट करते हैं। यहां पे इनके ऊपर कैसे इट्रेट करूंगा? वही फॉरेन लूप मुझे लगाना पड़ेगा। थोड़ा सा इसको ऐसे करते हैं। फॉरेन लूप लगा के ऑब्जेक्ट के ऊपर एक काम करता हूं। कॉस्ट प्रॉप्स किससे ले लेता हूं? रिएक्ट एलिमेंट से ले लेता हूं। चलिए ये प्रॉप्स मैंने इससे ले लिया। तो फॉर इन लूप फॉर कॉन्स्ट की इन प्रॉप्स प्रोप्स हमारा क्या है? एक ऑब्जेक्ट ही है। एक-एक करके मैं उसके ऊपर इटरेट करूंगा। सबसे पहले मैं यहां पर लिख देता हूं कि अगर मेरी की इक्वल टू इक्वल टू इक्वल टू स्टाइल के इक्वल हुई तो मुझे पता है मुझे क्या करना है ऑब्जेक्ट डॉट असाइन जो हम पहले भी करते हुए आ रहे थे उसके अंदर हमें क्या करना है एलिमेंट के स्टाइल के अंदर किसको डाल देना जो प्रॉप्स का स्टाइल होगा खत्म ओके अगला क्या है मेरे पास अगर मेरे पास चिल्ड्रन आता है इफ एल्स इफ कि इक्वल टू इक्वल टू इक्वल टू चिल्ड्रन के इक्वल आता है। तो मुझे पता है मुझे क्या करना है? मुझे यहां पे एलिमेंट के टेक्स्ट के कंटेंट के अंदर किसको डालना है? जो भी मेरा प्रॉप्स का इ होगा। यही तो होगा या फिर प्रॉप्स डॉट चिल्ड्रन भी आप उसको कह सकते हो। उसको डालना है। और एल्स में आपको पता ही है कि एलिमेंट के की के अंदर किसको डाल दो प्रॉप्स के जो भी की का आंसर है ये लीजिए इस तरीके से आपने इस फॉर लूप को बना दिया ये सारी प्रॉपर्टी आपने अटैच करा दी जब आपने ये रेंडर कर लिया अब आपको क्या करना है रूट के साथ उसको अपेंड करा देना है रूट डॉट अपेंड जो भी आपने रिएक्ट एलिमेंट ये एलिमेंट जो आपने क्रिएट करा है हो गया आपका काम ये रहा अब यहां पर जब मैंने यह काम कर लिया तो मैं अब अपने काम को अच्छे से कर सकता हूं। रिएक्ट एलिमेंट को मैं कमेंट कर देता हूं। यह सिर्फ आपको दिखाने के लिए था कि यहां पर ये काम कैसे कर रहा है। चलिए अब मैं यहां पे क्या कर सकता हूं? रिएक्ट डोम डॉट रेंडर एलिमेंट वन कॉमा इस रूट वाले को भेज देता हूं। इसको तो भेजना है। यहीं पे तो अटैच कराना था मुझे। ओके। तो अगर हम अपना आउटपुट देखेंगे तो हमें अब आउटपुट नजर आ रहा है हेलो कोडर आर्मी अगर सेम काम मैं एलिमेंट टू के लिए करता हूं इसी को कॉपी करते हैं और एलिमेंट टू के लिए करता हूं तो हमारा आंसर आ रहा है हेलोकोडमी स्ट्राइक लॉन्च पर हमने पहले देखा था क्या देखा था हमने पहले एक ऑपरेशन जाना था कि अगर एलिमेंट टू जा रहा है तो एलिमेंट वन वाले को हटा देना चाहिए तो यहां पर हम एक काम कर सकते हैं जब हम यहां पर आ रहे हैं जब भी इस फंक्शन को कॉल किया जाएगा तो रूट डॉट इनर html को हम डिलीट कर देंगे। ओके रूट के इनर एचटीएमएल क्या एक्सिस्ट नहीं करती? ये कैपिटल में होगा शायद एचटीएमएल। हां। चलिए हां। तो इससे क्या होगा कि मान लो जब मैंने दूसरी बार इसको कॉल किया तो सबसे पहले इन उसकी जो इनर एचटीएमएल जो भी कोड है उसको हटा दिया जाएगा। इसलिए अब आपको एक ही नजर आ रहा है जो हम चाह रहे थे। तो इस तरीके से आपका जो रिएक्ट डोम है उसकी फंक्शनैलिटी को लिखा गया है दोस्तों। अगर आपको कहीं पे भी कंफ्यूजन है कि ये कोड कैसे लिखा है? क्यों हो रहा है? दोस्तों फिर तो आपके जावास्क्रिप्ट के कांसेप्ट रिलेवें हैं। पर एट द एंड ये पूरा आपका जावास्क्रिप्ट ही है। पूरा जावास्क्रिप्ट है। मैंने आपको दिखा दिया कि रिएक्ट एलिमेंट कैसे? यह रिएक्ट क्या कर रहा है? रिएक्ट का काम अब क्लियर कोई भी डोम के एलिमेंट को क्रिएट करना नहीं है। रिएक्ट बताएगा कि आपका यूआई कैसे दिखेगा और इसी को लोग वर्चुअल डोम भी कहते हैं कि जो आप ये रिटर्न करके दे रहे हो ना मुझे यही आपका वर्चुअल डोम भी है। हां जी यही आपका वर्चुअल डोम भी है। अब आप में से कुछ बच्चे डाउट में होंगे भैया आपने रिएक्ट को ला रखा है। रिएक्ट डोम भी ला रखा है। तो यहां पे अभी जो हम ये इस्तेमाल कर रहे हैं यहां पे रिएक्ट डॉट क्रिएट एलिमेंट और रिडम डॉट रेंडर यह इनमें से कौन सा चलेगा? क्या यह यह वाला चल रहा है या यह वाला चलेगा? दोस्त जो सबसे पास होता है इसके पास में कौन है? रिएक्ट के पास में यह वाला रिएक्ट का फंक्शन जो आपका लोकली है तो ये चलेगा। हां अगर आपने इन दोनों को कमेंट कर दिया इन दोनों को अगर आपने कमेंट कर दिया तब आपका जो ओरिजिनल रिएक्ट और रिएक्ट डोम आप लेके आए हैं वो आपके चलेंगे। जो आप ओरिजिनल वाले लेके आए हैं। रिएक्ट और रिएक्ट डोम फिर ये चलेंगे। वरना अगर आपने लोकली उन्हें बना रखा है तो वही चलेंगे। अब दोस्तों यहां पर एक थोड़ी सी इंप्रूवमेंट और क्या जरूरत है? तो देखो आज का जो हमारा लाइव लेसन है मुझे पता लेक्चर थोड़ा सा कुछ बच्चों के लिए हैवी हुआ होगा लास्ट के पार्ट में लेकिन इसको समझो बहुत लोगों को यही आईडिया नहीं होता कि रिएक्ट डोम है क्या और रिएक्ट का काम क्या है रिएक्ट का काम सिंपल ये है कि हमारा uआई कैसे दिखेगा उसका कुछ भी काम नहीं है डॉ मैनपुलेशन से रिलेटेड कुछ नहीं है वो रिएक्ट डम करेगा वो क्यों करेगा दोनों को अलग-अलग क्यों बनाया गया है क्योंकि सेम रिएक्ट मेरे मोबाइल में इस्तेमाल हो सकती है जो मेरे Android एप्लीकेशन होती है जो मैं रect नेटिव पे बनाता हूं तो मेरी रिएक्ट को मेरा मोबाइल एप्लीकेशन समझ सकता है जो भी उसका आउटपुट और उसके आउटपुट को वह बाद में उसका जो भी रेंडरिंग इंजन होगा जैसे हमारे वेब के साथ रिएक्ट डोम होता है वह समझ सकता है। तो वैसे ही उसका जो रेंडरिंग इंजन है वो उसको समझ जाएगा। और सेम अगर मेरे पास कोई पीडीएफ है जो मेरे पीडीएफ में कन्वर्ट करता है रिएक्ट का पीडीएफ को तो वो भी समझ सकता है। इस पॉइंट को ध्यान रखना है। तो रिएक्ट आपके हर जगह इस्तेमाल होती है। रिएक्ट डोम सिर्फ वेब पे इस्तेमाल होगा क्योंकि वहां पे क्या है? आपके डोम में मैनपुलेशन से रिलेटेड चीजें हैं। तो जो हमारा रिएक्ट की कोर फंक्शनैलिटी कहती है कि आप सिर्फ यह बताओ कि आपको करना क्या है? बाकी डॉ मैनपुलेशन ये सब कुछ मैं खुद से ही हैंडल करूंगा। आपको बस ये लिखना है। ठीक दोस्त। ओके। अब देखो अभी आप में से कुछ बच्चे ऐसे होंगे कि भैया मैं यहां पे यह चाहता हूं कि आपने जैसे यहां पे लिखा ना हेलो कोडर आर्मी स्ट्राइक इज लॉन्च। मैं चाहता हूं यह दोनों ही मुझे आउटपुट में नजर आए। तो यह कैसे पॉसिबल होगा? यह दोनों ही मुझे यहां पे आउटपुट में नजर आए। और यह कैसे पॉसिबल होगा फिर? कैसे पॉसिबल होगा? दोस्त पॉसिबल है। आपको क्या करना है? कॉन्स्ट मैं यहां पे इसका नाम लिख देता हूं। पैरेंट या फिर डिव लिख देता हूं। रिएक्ट डॉट क्रिएट एलिमेंट। ठीक? हां। मैं इन दोनों को किसी एक एलिमेंट के अंदर रैप अप कर दूंगा। डिव क्या इसके कुछ प्रॉपर्टी देना चाहता हूं? कुछ नहीं देना चाहता। तो मैंने नल कर दिया। ओके। यहां पर मैं एलिमेंट वन और एलिमेंट टू को दे दूंगा। अब एलिमेंट वन और एलिमेंट टू इस डिव के क्या कहलाए जाएंगे? चाइल्ड कहलाए जाएंगे। पहला आपका बताएगा कि आपका क्या टैग है। दूसरा आपके जो भी प्रॉपर्टीज हैं और उसके बाद आपके चिल्ड्रन कौन-कौन से हैं? तो यह वाला एलिमेंट भी मेरा चिल्ड्रन है। यह भी मेरा चिल्ड्रन है। मैं आपको दिखा भी देता हूं। कौन सा लॉग डिव करके आप यहां पर अगर आउटपुट में देखोगे आपका डिव आपको यहां पर नजर आएगा। इस तरीके से प्रॉप्स के अंदर जाऊंगा तो उसके दो चिल्ड्रन हैं। पहला चिल्ड्रन आपका ये H1 है। दूसरा H2 है। तो यहां पे आप जितने ज्यादा अगर आप एक और एलिमेंट को यहां पे दे दोगे। मान लो आपने यहां पे दे दिया हेलो कोडर्स तो ये इसका तीसरा चिल्ड्रन हो गया। आपको यहां पे नजर आ जाएगा वो। तीन चिल्ड्रन है उसके जो कि एर के फॉर्म में ये रहा। इस तरीके से आप बिल्ड अप करते हैं चीजों को कि अगर आपके पास कोई एलिमेंट है और उसके भी चिल्ड्रन को आपको क्रिएट करना है तो इसी तरीके से आपको क्रिएट करना पड़ेगा। इसी तरीके से दोस्त अब उसके बाद क्या करना है? उसके बाद तो भैया इसको कहां यूआई के साथ अटैच करा देना है। यूआई में कैसे अटैच कराऊंगा? अब देखो ये जो मेथड था ना रिडम डॉट रेंडर लिखने का ये हमारा पुराना मेथड था। पुराना मेथड। अब लेटेस्ट मेथड क्या है? इसलिए आपको ना ये कई बार एरर भी नजर आएगा। अगर मैं इसको ऐसे करके लिख रहा हूं ना यहां पर तो देखो यह रिएक्ट डम डॉट रेंडर ये मैंने डिव को भेज दिया और डॉक्यूमेंट डॉट गेट एलिमेंट बाय आईडी अपने रूट को सेलेक्ट करके भेज दिया रेंडर कराने तो देखो आउटपुट तो आ गया लेकिन ये कहता है कि भैया रिएक्ट डोम डॉट रेंडर इज़ नो लगर सपोर्टेड इन रिएक्ट 18 18 के बाद इसको सपोर्ट नहीं दिया जाता उससे पहले यह चलता था तो अब जो लेटेस्ट सिंटेक्स है इसका। तो इसका जो सिंटेक्स है तो सबसे पहले आपको क्या करना है? इसको हटा देता हूं मैं। पूरे का हटा देता हूं। सबसे पहले हम रिएक्ट को बोलते हैं रिएक्ट सॉरी रिएक्ट डोम को कहते हैं डॉट क्रिएट रूट। अपने रूट को क्रिएट करो। जिसके अंदर मैं इसको बताऊंगा कि भैया आपको जो भी रेंडरिंग प्रोसेस करनी है वह किस एलिमेंट के अंदर करनी है। तो मैंने बता दिया कि भैया इस एलिमेंट के अंदर आप जो भी आपको रेंडर करना है आप इस एलिमेंट के अंदर करोगे। तो इसको मैंने मान लिया कॉन्स्ट रूट। ओके? अब रूट डॉट रेंडर करके मैं उस एलिमेंट को पास कर दूंगा। अब आपके आउटपुट में कोई एरर नहीं आएगा। ये लीजिए। हेलो कोडर आर्मी स्ट्राइक इज ऑन और हेलो कोडर्स और इसका मैं कंसोल भी दिखाऊं कोई एरर नहीं है। हम इसको दो स्टेप में लिखते हैं। पहले हम सिंगल स्टेप में लिख दे रहे थे ना ऐसे करके रिजेक्ट डॉट डॉट रेंडर एलिमेंट वन और ये नहीं ये कहता है कि भैया पहले आप सेटअप कर लो कि मैंने बोल दिया है कि भैया ये मेरा मेन कंटेनर होगा मेन कंटेनर टू रेंडर रिएक्ट एलिमेंट्स। ये मैंने दे दिया। और जब आप यह करोगे यह आपका कंटेनर है कौन सा यह रूट वाला रूट डॉट रेंडर कि भैया रूट के अंदर इस वाले एलिमेंट को रेंडर कर दीजिए कि इस इस एलिमेंट को इसके साथ अटैच करा दीजिए ये आपके लिए वो परफॉर्म करेगा तो ये हमारा दो स्टेप प्रोसेस बन जाता है तो आई होप आज के लेक्चर आपके लिए हैवी ना रहा होगा काफी कुछ आपको सीखने को मिला होगा अगर आज के लेक्चर के रिलेटेड आपको कुछ भी डाउट है तो कमेंट सेक्शन खुला हुआ है अपने कमेंट को डालिए जो भी डाउट है नेक्स्ट लेक्चर से अभी आपको लग रहा होगा कि भैया ये कितना गंदा सिंटेक्स है। हम इस सिंटेक्स से कोड नहीं लिखने वाले रिएक्ट का ये वाला रिएक्ट डॉट क्रिएट एलिमेंट। ये ओल्डर तरीका हो चुका है। लेकिन ओरिजिनल रिएक्ट यही है आपका। इसका भी शॉर्टकट है अभी हमारे पास क्योंकि आपको आप खुद इसमें अनकंफर्टेबल फील कर रहे होंगे कि भैया अगर मुझे किसी एलिमेंट को क्रिएट करना है तो इतना बड़ा कोड लिखना पड़ रहा है। इतना बड़ा और ये कितना कॉम्प्लेक्स हो जाएगा। मान लीजिए मैं इसी तरीके से एलिमेंट क्रिएट कर रहा हूं। क्योंकि यह काम तो मैं यहां पर भी कर सकता हूं। पहला एलिमेंट क्रिएट करा ऐसे। फिर उसका दूसरा चिल्ड्रन मैंने यह क्रिएट करा। तो यह तो और भी ज्यादा कंफ्यूजिंग हमारे लिए होता जाएगा। ये एक रिएट क्रिएट एलिमेंट है। हां जी। उसकी प्रॉपर्टी ये है। उसका पहला चिल्ड्रन ये रहा इतना बड़ा। उसका दूसरा चिल्ड्रन ये रहा। ओके? अब मान लो मुझे उसका एक और चिल्ड्रन बनाना है। यहां पे तो क्या मैं उसके चिल्ड्रन को ऐसे लिखूं? तो ये कोड लिखने में ही कितना गंदा लग रहा है? आप खुद सोचिए। यह कोड दिखने में ही कितना गंदा लग रहा है। एक और चिल्ड्रन बनाना है तो यहां पर नीचे मुझे लिखना पड़ेगा। और यह कोड कितना कॉम्प्लेक्स होता जाएगा समझने के लिए। तो जो ओरिजिनल रिएक्ट है वो इसी तरीके से लिखा जाती है। ओरिजिनल रिएक्ट ही ये है। अब नेक्स्ट लेक्चर में हम चीजों को आसान बनाएंगे। जब हम जीएसx का सिंटेक्स इस्तेमाल करेंगे। ये रिएक्ट डॉट क्रिएट एलिमेंट हम आखिरी बार देख रहे हैं। इसके बाद इससे मुलाकात नहीं होगी। आपको मुझे कोर फंक्शनैलिटी समझानी थी। हम कहां से हमने स्टार्ट किया? कहां तक हम पहुंचे? आपका आउटपुट कैसे आ रहा है? सब कुछ आपको चमक चुका है। अब आपको सिर्फ एक काम करना है। हमारे इस कोर्स के अंदर एनरोल करना है। ओके। हां जी। तो चलिए फिर मैं मिलता हूं आपको नए लेक्चर में। जो भी पार्ट टफ लगा हो उसे कमेंट करो। मिलूंगा नए लेक्चर में। तब तक के लिए जय हिंद जय भारत। [संगीत]

More transcripts

Browse all transcripts

Finding this tool useful? Bookmark us (cmd+D) for easy and fast access!