[प्रशंसा] हेलो गाइज आई एम प्रदीप फ्रॉम डब्लू कपटेक आज हम इस रिएक्ट जस की सीरीज में देखेंगे कि रिएक्ट का फोल्डर स्ट्रक्चर क्या होता है जब भी आप कोई प्रोजेक्ट रिट के थ्रू बनाते हैं तो कौन-कौन से फोल्डर आते हैं आपके पास कौन-कौन सी फाइल्स आती है उन सारी चीजों को आज हम क्लियर करेंगे जिससे आपको यह पता चल जाएगा कि कौन सा फोल्डर बहुत इंपॉर्टेंट है जिसके अंदर हमारे कंपोनेंट्स बनेंगे कहां पे आपकी सीएसएस की फाइल होती है कहां पे आपको बनानी है सारी चीजें आपके सामने क्लियर हो जाएंगी तो चलिए स्टार्ट करते हैं इसके साथ में आप लोगों के लिए स्पेशल अनाउंसमेंट है अगर आप भी फुल स्टेक वेब डेवलपर बनना चाहते हैं तो डब्ल्यू एस कटेक आप सभी के लिए लेकर आ गया है फुल स्टेक वेब डेवलपमेंट का ऑनलाइन बैच यहां पे आप वेबसाइट बनाना वेब एप्लीकेशन बनाना मोबाइल स्पंस वेबसाइट बनाना एपीआई बनाना वेब सर्विसेस बनाना और प्रोग्रेसिव वेब एप बनाना ये सारी चीजें आप सीखेंगे यह जो कोर्स है यह कोर्स आप लोगों के लिए दो पार्ट में डिवाइड है फ्रंट एंड और बैक एंड फ्रंट एंड बैक एंड मिलाके आप बहुत सारी वेबसाइट और वेब एप्लीकेशन बनाएंगे जिसमें आप जमेट का क्लोन म्रैमास्टर और आप दिए हुए नंबर पे भी कॉल कर सकते हैं जिससे हमारी टीम आपसे संपर्क करके और चीजों को क्लियर कर सके यह स्पेशल ऑफर आप लोगों के लिए था तो चलिए चलते हैं अपने टॉपिक में देखिए लास्ट हमने एक प्रोजेक्ट क्रिएट किया था फर्स्ट वब एक और प्रोजेक्ट आपके सामने मैं क्रिएट कर रहा हूं मैं सीएमडी ओपन कर रहा हूं कमांड प्रम ओपन कर रहा हूं ब्लैक स्क्रीन आपके सामने ओपन हो जाएगा ओपन हो गया अब देखिए यहां पे आपको पता है कि एक कमांड क्या है एनपीए क्रिएट रिएक्ट ऐब अब आपके मन में आएगा कि सर प्रोजेक्ट क्यों क्रिएट हो रहा है भै आप लोगों को समझाने के लिए कि आप लोगों को याद हो जाए कि कमांड हो है ये एक छोटा सा प्रोजेक्ट क्योंकि उसी प्रोजेक्ट में मैं आपको उसका स्ट्रक्चर बता दूंगा वैसे बने हुए प्रोजेक्ट में भी हम देख सकते थे मगर मैं एक नया प्रोजेक्ट क्रिएट कर रहा हूं यहां लिखा है फर्स्ट रिएक्ट पप इसका नाम रखा है मैंने ये मेरे प्रोजेक्ट का नाम है ये थोड़ा टाइम लेगा आपको पता है क्योंकि हम एनपीएक्स के थ्रू कर रहे हैं एपीएक्स डायरेक्ट मेरे फोल्डर में लाके रख देगा जैसे ही प्रोजेक्ट क्रिएट हो जाएगा प्रोजेक्ट क्रिएट होने के बाद आप लोगों को इसको रन करना है रन करने का तरीका आप लोगों को बताया था सीडी फोल्डर में पहुंचना है फिर एनपीएम स्टार्ट करके इसको रन करना है तो थोड़ा टाइम लगेगा आप लोगों को रुकना है देखिए हमारा प्रोजेक्ट क्रिएट हो चुका है आपके सामने यहां पे सीडी करके आप उस फोल्डर में जाएंगे हमारे फोल्डर का नाम क्या था फर्स्ट रिएक्ट पप आप यहां पे जाके लिखेंगे फर्स्ट रिएक्ट पप आपका फोल्डर आ जाएगा सीएलएस करके क्लियर स्क्रीन कर सकते हैं पूरी स्क्रीन खाली हो जाएगी क्योंकि हम फोल्डर में आ चुके हैं अब देखिए यहां पे कोड डॉट कर दीजिए कोड डॉट करके आप कहां पहुंच जाएंगे वीएस कोड में आपको बताया गया था कि आपको डायरेक्ट वीएस कोड में ओपन करना है तो फोल्डर में जाके आपको कोड डॉट करना है वीएस कोड में ये डायरेक्टरी खुल जाएगी पूरी आपकी डायरेक्टरी वीएस कोड में खुल चुकी है एक बार मैं इस प्रोजेक्ट को भी यहां से क्या करता हूं रन करता हूं एनपीएम स्टार्ट एनपीए स्टार्ट करके मैं रन करता हूं मेरा प्रोजेक्ट अब क्या होगा रन हो जाएगा अब देखिए रन होते ही ब्राउजर में आउटपुट आएगा एक डिफॉल्ट पोर्ट 3000 आपको मिल जाता है लोकल होस्ट 3000 प आपका प्रोजेक्ट चल जाता है यहां पर अभी मेरा प्रोजेक्ट रन हो जाएगा और आपके सामने दिखने लग जाएगा अब बात करते हैं फोल्डर में जाने की एक्चुअली फोल्डर में हमें पहुंचना है फोल्डर में कौन-कौन सी फाइल काम की होती है कहां पर आपको वर्क करना है क्या करना है ये सारी चीजें आपके सामने क्लियर हो जाएंगी देखिए एक फोल्डर है जो अभी हमने बनाया था फर्स्ट रिएक्ट मतलब एक प्रोजेक्ट है मान लीजिए अब यहीं से कुछ चीजें मैं आपको समता हूं एक-एक करके आपको चीजें समझनी है देखिए सबसे पहली चीज इसके अंदर क्या है अगर आप देखेंगे यहां पे दो फाइल्स है एक पैकेज ड जसन और पैकेज लगड जसन दो ये फाइल है अब पैकेज ड जसन फाइल क्या करती है पैकेज ड जसन फाइल के अंदर जितनी भी आपकी डिपेंडेंसीज होती है जितनी भी आप लाइब्रेरीज इंस्टॉल करते हैं उन सबकी डिपेंडेंसी इसके अंदर पहुंच जाती है मतलब लाइब्रेरीज के लिस्ट आपके पास पैकेज ड जसन में पता चल जाएंगे कि कौन-कौन सी लाइब्रेरी है या कौन-कौन से पैकेज जो है आपने इंस्टॉल किया है तो पैकेज जेसन का होना इंपॉर्टेंट है अगर नहीं होगा तो आपका प्रोजेक्ट नहीं चलेगा तो पैकेज ड जसन आपके सारी डिपेंडेंसी को लेके चलता है अब डिपेंडेंसी का मतलब कौन-कौन से पैकेज आपने अलग से इंस्टॉल किया है अ क्या-क्या चीजें आपने इसके अंदर अलग से इंस्टॉल किया क्या-क्या वर्जन था वो सारी चीजें लेके चलेगा जैसे मैं वीएस कोड में इसको ओपन करके दिखाता हूं यहां जाते हैं पैकेज डॉट जसन ले लेते हैं अब देखिए रिएक्ट इंस्टॉल्ड हुआ है रिएक्ट डम इंस्टॉल्ड हुआ है रिएक्ट स्क्रिप्ट हुआ है वेब वर्ल इंस्टॉल हुआ ये सारी चीजें इंस्टॉल हुई है अब ये डिपेंडेंसी यहां पे बता रहा है कि ये सारी चीजें हमारे पास इंस्टॉल हुई है मगर एक एक चीज और है यहां पे स्क्रिप्ट के अंदर कुछ कमांड भी बता रहा है स्टार्ट बिल्ड टेस्ट इंजेक्ट ये जो हमने देखा था यह प्रोजेक्ट को रन करने वाली कमांड भी इसके अंदर लिखी है तो पैकेज ड जसन बहुत इंपॉर्टेंट फाइल है वैसे सारे पैकेज की डिपेंडेंसी को लेके चलता है अब आप कहेंगे सर पैकेज की डिपेंडेंसी पैकेज क्या जैसे अगर हमने कोई भी पैकेज इंस्टॉल किया या कोई भी हमने आगे चलके जैसे बूट स्प हो गया टेल विंड हो गया फंट ऑसम हो गया वो सारे पैकेज के थ्रू इंस्टॉल होंगे जितने भी पैकेज इंस्टॉल करेंगे वो सारे लिस्ट आपको पैकेज ड जस में मिल जाएंगे अब जब वो इंस्टॉल करते हैं तो लिस्ट यहां मिलते हैं मगर उनके जो भी फोल्डर होते हैं वो कहां बनते हैं वो फोल्डर बनते हैं आपके नोड मॉड्यूल के अंदर तो नोड मॉड्यूल सारे पैकेज के फोल्डर को लेके चलता है तो नोड मॉड्यूल फोल्डर भी इंपॉर्टेंट है क्योंकि आपकी रिएक्ट इस नोड मॉड्यूल के फोल्डर में पड़ी है यहीं से कॉल हो रही है तो नोड मॉड्यूल क्या करता है सारे पैकेज को अपने अंदर बैठा के रखता है सारे पैकेज को बुला के रखता है यहां से सारे पैकेज आपके पास कॉल होते हैं तो पैकेज ड जसन क्यों समझाया मैंने पहले क्योंकि सबसे इंपॉर्टेंट फाइल है अब पैकेज लॉग ड जसन क्या करती है जो भी आपकी डिपेंडेंसी या जो भी पैकेज है उन सबके वर्जन को मैनेज करेगी उन सबकी डिस्क्रिप्शन को मैनेज करेगी मान लीजिए ये दोनों फाइल का होना जरूरी है पैकेज ड जसन सारी डिपेंडेंसीज को अपने अंदर रख रही है कि ये ये डिपेंडेंसी है ये ये पैकेज आपने इंस्टॉल किया है उन डिपेंडेंसी के बारे में अगर आपको जानना है तो पैकेज लॉग ड जसन में जाके उनके बारे में समझ सकते हैं एक-एक डिपेंडेंसी की ये डिटेल बता देगा देखो कि ये वर्ड रैप करके एक डिपेंडेंसी है वर्ड रैप करके आपने एक पैकेज इंस्टॉल किया है नोड मॉड्यूल के अंदर है क्या वर्जन है कहां से आया है कि कौन सा नोड वर्जन इसके लिए जरूरी है सारी चीजें बताएगा एक-एक पैकेज के बारे में फुल डिटेल बता देगा ये तो पैकेज लॉग डॉट जशन क्या करता है आपके डिपेंडेंसी की डिटेल को मैनेज करता है तो इन दोनों फाइल का होना जरूरी है इसके अंदर मैंने ये डिपेंडेंसी बता दिया स्क्रिप्ट बता दिया कुछ कॉन्फिन है जो वो डिफॉल्ट में करके रखता है प्रोडक्शन में क्या-क्या है ये सारी चीजें आपको आगे और थोड़ी क्लियर हो जाएंगी जब हम प्रोडक्शन पे बिल्ड बनाएंगे जब हम डेवलपमेंट पे थोड़ा और काम करेंगे थोड़ा सा आपको ब्राउजर लिस्ट प्रोडक्शन डेवलपमेंट ये आगे क्लियर हो जाएगा तो आपको यह समझना है कि पैकेज ड जसन का मेन काम है आपके सारे डिपेंडेंसी या सारे पैकेज को मैनेज करना तो ये दोनों फाइल्स आपको क्लियर हो गई होंगी अब चलते हैं यहां पे देखिए और जो थोड़ा सा हमें और देखना है प आपके माइंड में एक चीज क्लियर होनी चाहिए अगर कोई भी पैकेज इंस्टॉल्ड होगा तो नोड मॉड्यूल में जाएगा और उस पैकेज का नाम पैकेज ड जशन में चला जाएगा अब बात करते हैं यहां पे एक फाइल है readme. md ये क्या करता है जो ये गट नाम का एक फोल्डर बना है तो गट के फोल्डर के बाद अगर आप गट अप पे अपना प्रोजेक्ट अपलोड करते हो तो ये जो रीड mi. mix हो ये सारी चीजें डिटेल वो खुद लिख के देता है कुछ डिटेल आप खुद भी इसके अंदर लिख सकते हैं तो readme.
md तब काम आता है जब आप गट अप पे प्रोजेक्ट अपलोड करते हो और सामने वाले यूजर को पता चल जाए कि कैसे प्रोजेक्ट क्रिएट करना है क्या-क्या उसके स्टार्ट पॉइंट है थोड़े से पॉइंट्स आप उसके अंदर लिख सकते हैं अब बात करते हैं यहां पे गिट तो आपको पता है गिट अप पे डाटा अपलोड करने का काम करेगा या बिट बकेट पे डाटा अपलोड करने का काम करेगा ये सारी फाइल्स क्लियर हो गए गिट इग्नोर कुछ फाइल्स को अगर इग्नोर करना है गिट पे नहीं भेजना है तो गिट इग्नोर के अंदर हम उस फाइल का नाम दे देंगे तो वो इग्नोर उसको रोक देगा कि वह फाइल गिट अप पे ना जाए या बिट बकेट में ना जाए अब देखिए यहां पे जो मेन फोल्डर्स है वो दो है एक पब्लिक हो एक एसआरसी इन दो मेन फोल्डर का ही क्या है कमाल है इन दो मेन फोल्डर को आपको समझना है देखो पहले आपको समझना है पब्लिक पब्लिक के अंदर कुछ फाइल्स हैं आपको दिख रही होंगी कुछ फाइल्स क्या-क्या है एक तो index. htm है ठीक है एक मैं फ्रस्ट जन है ये ठीक है अब जो आप मैं फ्रेस्ट जसन पडल ऐप बनाने का काम करेगा इसको हम आगे के प्रोसेस में देखेंगे जब पीडब्ल्यूए ऐप बनाएंगे पहले आप देखिए . html.
erb के अंदर index. htm तो index. htm में कुछ नहीं पढ़ा एक डिप पढी है अगर आप नीचे देखोगे उस डिव को एक आईडी दी गई है रूट यह रूट आईडी पे आपका डाटा पूरा का पूरा आके एंटर कर जाता है डाटा कहां से आता है वो कॉम्पोनेंट के थ्रू आता है कॉम्पोनेंट कहां बनते हैं वो भी हम देखेंगे तो इस फाइल में आपको कुछ छेड़ना नहीं है इस फाइल में आपको कुछ काम नहीं करना बस आपको ये समझना है कि index.
htm फाइल सबसे पहले ब्राउजर पे रन होती है और इसके अंदर जो आईडी रूट दी गई है यही आईडी पे डाटा आपका आके दिखता है वो कहां से आके दिखता है उसको हम देखेंगे अब अगर आप देखेंगे इसके अंदर फ आइकॉन है फैव आइकॉन ऊपर की साइड जो छोटा सा आइकॉन दिखता है इतनी इंपॉर्टेंट फाइल नहीं है लोगो इतनी इंपॉर्टेंट नहीं है robot. txt इतनी इंपॉर्टेंट नहीं है अगर हम एसओ के पर्पस के लिए यूज़ कर रहे हैं तो robot. txt को देख सकते हैं ब मेन जो इंपॉर्टेंट फाइल है वो है index.
htm इसको डिलीट मत करिएगा क्योंकि इस रूट आईडी पे ही अपना डाटा क्या होता है कॉल होता है अब बात करते हैं कि इस पे डाटा कहां से आता है तो इसके अंदर जो सबसे इंपॉर्टेंट फोल्डर है वो है एसआरसी फोल्डर मतलब अगर आपके प्रोजेक्ट में जो सबसे इंपॉर्टेंट फोल्डर है वो एसआरसी है एसआरसी के अंदर कुछ फाइल पड़ी हुई है इसी को हम बोलते हैं कॉम्पोनेंट्स देखिए जो भी जेएस की फाइल है जैसे app. js पड़ा हुआ है अगर देखोगे index. js पड़ा हुआ है तो यहां पे मैं आपको ये बता रहा हूं कि एसआरसी आपके सारे कॉम्पोनेंट्स को लेके काम करता है जितने भी कॉम्पोनेंट्स बनेंगे वो एसआरसी में बनेंगे अब आपके मन में एक क्वेश्चन आ रहा है कि सर रूट पे डाटा कहां से गया रूट पे डाटा हमने कहां से पहुंचाया तो एक्चुअल में रूट को कॉल करता है यहां पे index.
js index. js फाइल जो होती है वो रूट तक अपना डाटा पहुंचाती है कैसे पहुंचाती है आप देखिएगा यहां पे मैं एसआरसी में जाके index. js को यहां पे देखता हूं index.
js को देखूंगा तो आपकी आईडी यहां पे सेलेक्ट की गई है देखिए डॉक्यूमेंट गेट एलिमेंट बाय आईडी क्या आईडी है रूट रूट और रिएक्ट डोम के थ्रू अ क्रिएट डोम को पकड़ के क्रिएट डोम उसका फंक्शन है यहां पे एक वेरिएबल में लिया गया है और इस वेरिएबल में रूट डॉट रेंडर करके अपना पूरा डाटा दिखा दिया गया है और यहां पे जो आईडी है ये आईडी वही है जो आपके इंडेक्स के अंदर एटीएमएल में पड़ी हुई थी आईडी रूट उसी पे डाटा पहुंचाने का काम यह कर रहा है अब यहां पे ये देखिए कुछ चीजें हैं जो आपको यहां पे दिखेंगी कि इंपोर्ट रिएक्ट है इंपोर्ट रिएक्ट डोम है ये सारी चीजें धीरे-धीरे आपके सामने क्लियर हो जाएंगी ये हमने पैकेज को यहां पे क्या कर रखा है इंपोर्ट कर रखा है और पैकेज को इंपोर्ट करके यूज कर रखा है क्योंकि हमने एक्सपोर्ट इंपोर्ट समझा था कि हम कोई अ अपना मॉड्यूल बना के क्या कर सकते हैं एक्सपोर्ट इंपोर्ट कर सकते हैं ये तो सारे बने हुए मॉड्यूल है यहां पे इंपोर्ट करके यूज किए हुए हैं क्योंकि बिना इंपोर्ट के कांसेप्ट चलने वाला नहीं है तो ये जो है ये मेन है मेन कौन सी है एक तो index. htm और index. htm पे डाटा कौन पहुंचा रहा है एसआरसी के अंदर index.
js उसके ऊपर डाटा पहुंच रहा है अब यहां पे जो सिंटेक्स है अगर देखेंगे यहां पे एक ऐप नाम से कुछ बना हुआ है ये कॉम्पोनेंट है कॉम्पोनेंट बनता कैसे है वो तो आगे का पार्ट है म पप नाम का कॉम्पोनेंट इसके अंदर सबसे पहले कॉल होता है ऐप नाम का कॉम्पोनेंट देखिए एक चीज और ध्यान दीजिएगा यहां पे इंपोर्ट जो लिखा है ना डॉट इक्स सए तो सीएसएस को इंपोर्ट करने का तरीका ये है इंपोर्ट करने का भी प्रोसेस हम अपनी सीएसएस कैसे बनाएंगे उसको भी हम आगे क्लियर करने वाले हैं अब देखो पहले आप यहां पे समझो कि प नाम का एक कॉम्पोनेंट है प नाम का कॉम्पोनेंट भी इसमें बना हुआ है तो app. js में जाके देखेंगे तो यही जो कोड है ये कोड कहां जा रहा है इंडेक्स पे और इंडेक्स से कोड कहां जा रहा है index. htm पे अगर मैं app.
js में जाके यहां पे कुछ भी चीजें करता हूं जैसे मैं ये पूरा हेडर हटा के h1 टैग में लिख देता हूं वेलकम टू डब्ल्यू तो आपके सामने h1 टैग में वेलकम टू w ए आपके ब्राउजर पे लिखा हुआ आ जाएगा मैं ब्राउजर पे इसका आउटपुट देख लेता हूं आ गया है तो इसका मतलब है ऐप का डाटा जो है ऐप का डाटा ये जो ऐप कॉम्पोनेंट का डाटा है ऐप कॉम्पोनेंट का डाटा कहां पहुंच गया इंडेक्स के पास ये कॉल हो रहा है और इंडेक्स कहां पहुंच गया index. htm के पास जो हमारा पब्लिक के अंदर बना है index. htm यहां पहुंच गया तो फोल्डर स्ट्रक्चर में आपको ये समझना है पैकेज ड ज सारे पैकेज को बैठा के रखेगा सारी लिस्टिंग रखेगा पैकेज लॉक ड जस उन लिस्टिंग की डिटेल को मैनेज करेगा एसआरसी आपका मेन अ फोल्डर है जिसके अंदर index.
js क्या करता है अपना डाटा index. htm तक पहुंचाता है हमें जितना भी काम करना है मोस्टली काम हमें एसआरसी के अंदर करना है हम एसआरसी के अंदर सारा काम करेंगे कॉम्पोनेंट जितने भी बनाएंगे वो एसआरसी में बनाएंगे और जितनी भी फाइल्स अगर जैसे सीएसएस का कुछ फाइल्स भी बनाना है वो भी हम एसआरसी में बना के यूज कर सकते हैं तो मेन मुद्दे की बात यहां पे यह पता चलती है कि मेन जो फोल्डर है आपके प्रोजेक्ट का वो मेन फोल्डर है एसआरसी यहीं पे हम अपना कंपोनेंट आगे बनाएंगे यहीं पे हम अपनी वर्किंग करेंगे ये वर्किंग का फ्लो था कि आपको एसआरसी में ही घूमना है एसआरसी में ही वर्किंग करना है कुछ चीजें होंगी जो मैं यहां पे बनाऊंगा पब्लिक के अंदर रख सकता हूं जैसे कोई सीएसएस की फाइल पब्लिक में रख के मैं यूज कर सकता हूं पर वो यूज करूंगा तो आपको उस समय बताया जाएगा कि हमने इस इसको किस पर पर्पस के लिए यूज किया है यह पूरा अपना फोल्डर स्ट्रक्चर था जिसमें आपके सामने पॉइंट क्लियर हो गए होंगे कि कहां से कौन सा डाटा जा रहा है और कौन सा डाटा किस तरह से मैनेज हो रहा है अब आगे के पार्ट में हमें कॉम्पोनेंट ही बनाने है आगे के पार्ट में वर्किंग कॉम्पोनेंट से ही देखनी है जिससे आप वर्किंग करना स्टार्ट कर दें अभी केवल मैंने आप लोगों को नॉर्मल सा लॉजिक बताया कि कैसे वर्किंग हो रही है क्या फ्लो है और ये ध्यान रखिएगा जेस एक के अंदर जब हम काम करते हैं तो काम करने का तरीका भी थोड़ा अलग होता है यह जेएस एक जावास्क्रिप्ट प्लस एक्स का कांसेप्ट होता है जैसे app.
