Up next in 10
Creating our first react app using create-react-app _ Complete React Course in Hindi #2
2K views
Feb 10, 2024
In the video "Creating our first React app using create-react-app - Complete React Course in Hindi #2", viewers are guided through the process of creating their first React application using the create-react-app tool. The tutorial covers how to set up a new React project quickly and efficiently using create-react-app, a popular tool for bootstrapping React applications. Viewers learn how to install create-react-app, create a new React project, and explore the structure of the generated project files. Additionally, the video demonstrates how to run the newly created React application locally and view it in a web browser. This video serves as the second installment of a complete React course in Hindi, providing viewers with practical hands-on experience in setting up and running React applications.
View Video Transcript
0:00
अपने पिछले वीडियो में हम लोगों ने देखा था कि किस तरह से हम लोग Node.js को इंस्टॉल करेंगे
0:04
NPM को इंस्टॉल करेंगे, काफी लंबी कहाणी मैंने आप लोगों बताईं शुरूस से, सारी extension बताईं कौन-कौन से उसकरता हूं मैं
0:10
ताकि React.js को आप बड़े अराम से, अच्छी तरह से इस्तिमाल कर सको और बहुती आप्टिमल ही कोडिंग कर सको
0:16
अब यहाँ पर अगर आप लोगों ने इस प्लेलिस्ट एकसेस नहीं कर रही हैं, तो सबसे पहले इसको यहाँ पर क्लिक करके बुक मार्क कर लेना
0:21
और यहाँ पर क्लिक करके इस प्लेलिस्ट को सेव कर लेना, मैं ज़राई इस बुक मार्क उठा कर यहाँ ले आता हूं, ताकि इस सामने रहा है प्लेलिस्ट
0:28
कभी भी एकसेस करनी होगी, यहाँ क्लिक करके कर लूँगा, अब हम लोग यहाँ पर बात करेंगे, Create React App की, तो आप यहाँ पर लिखो
0:35
Create React App, Google पर सर्च करो, जैसे आप Create React App पर यहाँ पर क्लिक करोगे
0:40
आप यह देखो reactjs.org, Create a New React App का पेज़ आजाएगा
0:44
और यहाँ पर बता रखा है इन लोगों ने किस तरह से आप लोगों एक नई React App को Create करना है
0:49
उससे भी बहले मैं शाट ओट देना चाहूँगा इस Documentation को, यह ReactJS की Official Documentation है, reactjs.org, कभी भी कोई बी चीज आप लोग को चाहिए
0:56
यहाँ पर आप लोग आएंगे, और यहां से ही आप लोग का Source होने वाला है
1:00
कोई भी चीज आप लोगों देखनी है, यह Source होने वाला है, कोई भी Update आएगा, वो यहां पर आएगा, ठीक है
1:05
यह चीज आप लोगों को मालूम होनी चाहिए, इसे के साथ साथ इंस्टोलेशन के बाद के जो में कॉंसेप्ट हैं
1:09
वो यहाँ पर दिये हुए है, इन्होंने सब कुछ बताया हुआ है यहाँ पर, तो यह एक अफिशल लोक्यूमेंटेशन है
1:14
अब देखो मेरी बात को दिहान से सुनो, रियाक्ट जियस की आपलिकेशन को मैं यहाँ पर सिर्फ कोड लिख कर भी बना सकता हूँ
1:21
मेरे कहने का बतलब समझना, मैं यहाँ पर बिना किसी पैकेज को यूज़ किये
1:25
मैं डिरेक्ली टाइपिंग करके भी रियाक्ट आपलिकेशन बना सकता हूँ, लेकिन ऐसा करना उप्टिमल नहीं दाएगा
1:31
एक पैकेज होता है, Create React App, यह पैकेज क्या करता है
1:35
रियाक्ट की एक बेसिक आप को सेट अप कर देता है, तो हम इसी को उसकरेंगे
1:39
रियाक्ट आप के एक बेसिक फोल्डर स्ट्रक्चर को लाने के लिए, अब यह बेसिक फोल्डर स्ट्रक्चर मैं खुद से क्रियेट कर सकता हूँ
1:46
ऐसा नहीं है कि मुझे Create React App का इस्तिमाल करना है, लेकिन अगर आप लोगों की जिंदगी में भी टाइम मेरी तरह कम है
1:52
तो Create React App को आप लोगों इस्तिमाल करें, आप लोगों की दिन में 35 गंटे अगर हैं तो मुझे बदाओ कमेंट करें
1:59
वैसे मुझे नहीं लगता कि किसी के दिन में 35 गंटे हैं, 24 गंडे ही होते हैं, सबके दिन में सोना भी होता है उसमें
2:04
तो इसलिए टाइम को बचाने के लिए हम Create React App को इस्तिमाल करते हैं
2:08
अब देखो, Smallest React App को इस तरह से दिखाई देती है, जैसे कि नोंने बताया, आप React को इंकलूड करके
2:12
इस तरह से React JS को इस्तिमाल कर सकते हैं, आप ने नप्यम क्या है, नप्यम एक पाकेज मेनेजर है
2:30
नप्यम हमारी Node JS के अंदर पाकेज इंस्टॉल करने में मदद करता है
2:36
अब सुनना मेरी बात को बड़ी दिहान से, अगर मैं यहाँ पर नप्यम की सहायता से इस पाकेज को इंस्टॉल करूँ
2:41
तो मुझे सिर्फ कुछ इस तरह से लिखना पड़ेगा, मैं लिखोंगा NPM, इंस्टॉल, और यहाँ पर मैं लिख दूँगा Create React App
2:48
टीके Create React App, और यह इंस्टॉल भी हो जाएगा, और मैं इसको गलोबली इंस्टॉल करना चाहूँगा
2:53
आखसर यूज़ करता रहूंगा, रियाक्ट आप बनाने के लिए, टीके, बट मैं ऐसा नहीं करूँगा, मैं यूज़ करूँगा NPX का
3:01
और NPX क्या होता है, NPX आपको Create React App को बिना डाउनलोड किया
3:06
या नहीं कि एक पाकेज को बिना डाउनलोड किये, उसको सिर्फ एक बार, अगर आप लोग इस्तेमाल करना चाहते हो, तो आप कर सकते हो
3:12
NPX कुछ ऐसा समझ लो, कि आप Create React App को उधार लेते हो
3:16
और अपने घर में रख लेते हो, अब आपकी जगा जो है घर में, अगर फालत हुआ है, तो आप Create React App को रख लो
3:22
मेरे हार्डिस्क में स्टोरेज़ फालत हुआ नहीं है, मैं NPX की सहायता लुगा, मैं NPX की सहायता से React App बनाओंगा
3:30
अब देखो, अगर आप लोग कुछ इस तरह से करते हो, जैसे कि इनोंने बताया हुआ, मैं डिरेक्ली जैसे इनोंने बताया है
3:35
वैसे करूँगा, राइट लिक्स से पेस्ट करूँगा, NPX Create React App, My App, तो My App नाम की एक React App यहाँ पर बन जाएगी
3:41
और मैं दिखा भी देता हूँ आप लोगों, मैं एंटर मार के आपको दिखा भी देता हूँ, थोड़ा सा यह टाइम लेगी, और React App आपकी बनादेगी यहाँ पर, ठीक है
3:47
तो देखो यहाँ पर, यह React App बन चुकी है, यह देखो अभी यहाँ पर यह कहा रहा है
4:11
यह बहुत सारे लोग यह भी बोलते हैं, कि यार component based architecture क्या है
4:36
देखो यह जितनी देर में install हो रहा है, उतनी देर में सारी चीज़े मैं आप लोगों बताता हूँ, मालों यह एक React App है, इन फाक्ट यह एक React App ही है
4:42
मैं आपको बताता हूँ इसका सभूत क्या, यह देखो, this page is using the production build of React
4:46
यह वही extension है, जोकि मैंने आप लोगों install करवा ही थी पिछले वीडियो में, अगर नहीं देखा, तो यहर इस playlist को access करके देख लेना, ठीक है
4:53
अब सुनना मेरी बात को द्यान से, यह एक React App है, यानि जो Reactjs.org है, वो React ही इस्तेमाल करती है, ठीक है
5:00
React application को, यह जो React application है, इसको बनाने के लिए
5:05
इन्होंने कुछ components का इस्तेमाल किया होगा, मैं अगर यहाँ पर right-click करके, inspect पर click करूँ
5:09
और उसके बाद मैं यहाँ पर components पर click करूँ, तो मुझे सारे के सारे components यहाँ पर देखने को मिल जाते हैं, ठीक है
5:15
यह सारे के सारे components यहाँ पर मुझे देखने को मिल गए, अब अगर मान लो, कि मैं इस तरह की app ट्लान कर रहा हूँ
5:21
मैं plan कर रहा हूँ, एक reactjs.org website का clone बनाने के लिए
5:25
तो मेरी website में एक navbar होगा, यह navbar, जहाँ पर यह जो काला-काला दिख रहा है
5:29
आपको इसके अंदर के सारी चीज़ें वो navbar के अंदर आएंगे, तो यह component हो गया, ठीक है, इसके बाद यहाँ पर
5:34
जो यह left साइड में आप लोग को दिख रहा है, यह component हो जाएगा, फिर right साइड में यह जो navigation दिख रहा है, आपको यह component हो जाएगा
5:40
तो left में एक चीज़ है, right में एक चीज़ है, यहाँ पर सब कुछ आप लोग को देखने को मिल रहा है
5:45
तो यह basically क्या होगा, यह एक component है, यह component हो जाएगा, यह component हो जाएगा
5:50
आप अपने component को किसी भी तरह से design कर सकते हो, हो सकता है आप इस पूरे को एक component मानो
5:55
बट यहाँ पर जब हम एक website को components में तोड़ते हैं
5:59
तब सबसे बड़ा advantage हमको यह मिलता है, हम उसको वापस से re-use कर सकते हैं
6:03
अब हो सकता है कि मैं इसी page में यह चीज और यह content चेंज करक�
6:07
वापस से इसको render करना चाहूँ, तो मैं props की साहता से इसको यह title, यह नहीं कि दूसरा title
6:13
और दूसरा content दे सकता हूँ, और यह बिल्कुल इसी तरह render हो जाएगा, तो मैं अपने components का इस्तिमाल करके एक बहुती smooth navigation वाली app बना सकता हूँ
6:26
आगे हम लोग देखेंगे यह सारी चीज़े कैसे होती हैं, अब आपको इतनी tension लेनी की ज़रूरत नहीं है
6:30
पर मैं एक rough idea आपको दे रहा हूँ, कि component क्या होते हैं
6:35
अब यहाँ पर देखो हमारी create react app जो है, वो अभी भी जूझ रही है इस चीज़ से
6:41
इसने I think बना दी है हमारी react app, सारे के सारी चीज़े इसने install कर दी है
6:47
तो यहाँ पर यह थोड़ा सा time डे रहा है, और ज़यसे यह complete हो जाएगा
6:53
तो यहाँ पर यह खतम हो चुकी है, इसका जो installation था, इन फाक्ट मैं कहूँगा, जेनेरेशन था इस react app का, वो खतम हो चुका है
7:00
लेकिन यार एक चीज़ देखी है अपने आपर, एक myapp नाम के folder के अंदर मेरी react app बन गई है
7:04
अब अगर आप लोग चाहते हैं कि यह यहीं पर सारा रायता फैल जाए, तब आप क्या करेंगे, myapp ना लिखकर, यहाँ पर dot लगा देंगे
7:11
यहाँ पर dot लगा के एंटर मारोगे, तो यहीं पर आपका आ जाएगा, यह जो myapp के अंदर आय था, वो सारा का सारा यहीं पर आ जाएगा
7:17
तो मैं अभी क्या करूँगा, myapp को delete करूँगा, इन फाइल्स इन दोनों फाइल्स को एक डिलीट करूँगा
7:21
shift डिलीट करूँगा ताकि यह डिलीट हो जाएँ एकडम हमेशा हमेशा के लिए, तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो तो �
7:54
तो मैं वेट कर रहा हूँ इसका अब यहाँ पर देखो नेमिंग कन्वैंशन की रिस्ट्रिक्शन के वाज़े से इस फोल्डर मे�
8:00
यह सारी की सारी फाइल्स नहीं डाली जा सकती इसने मुझे वार्णिंग क्या एरर दे दिया इसने मेरे को यार हम नहीं कर सकत�
8:06
आपको अच्छे नेम्स ही इउस कर रहे हैं तो हम लोग क्या करेंगे कि कोई भी रियाक्ट टाप बनाएंगे तो उसको एक ऐसे फोल्डर मे�
8:13
या तो रखेंगे जो की नेमिंग कन्वैंशन को फॉलो करता हो या फिर हम यही कर लेंगे आणि कि NPX, Create React App
8:18
और उसके बार स्पेज देखे हम उस एपलिकेशन का नाम ही लिख देंगे जिसको हम बनाना चाते हैं मालों मैं Text Utils के नाम स�
8:24
एक यह बनाना चाता हूँ React Project बनाना चाता हूँ तो मैंने Text Utils लिख दिया और यहाँ पर देखो एक बार इसन�
8:32
पहली बार थोड़ा ज़्यान लिया था बर दूसरी बार यह उतना ज़्यान नहीं लेग�
8:36
और यह थोड़ा सा जल्दी हो जाती है दूसरी बार जब आप पहली बार इंस्टॉल करते है�
8:40
तो यह पहली बार ज़्यान लिया था बर दूसरी बार ज़्यान लिया था बर दूसरी बार ज़्यान लिया था बर दूसरी बार ज़्यान लिया था बर दूसरी बार ज़्यान लिया था बर दूसरी बार ज़्यान लिया था बर दूसरी बार ज़्यान लिया था बर दूस�
9:10
बार ज़्यान लिया था बर दूसरी बार ज़्यान लिया था बर दूसरी बार ज़्यान लिया था बर दूसरी बार ज़्यान लिया था बर दूसरी बार ज़्यान लिया था बर दूसरी बार ज़्यान लिया था बर दूसरी बार ज़्यान लिया था बर दूसरी बार ज़्�
9:40
यहाँ पर यह जो चोटी चोटी बाते हैं इस पेन के बारे में जैसे मैंने बताई ही अपने दोस्त को जब मैंने यह पेन दिया उसक�
9:45
उसी थारा Node.js जब यह पैकेज आपके इंस्टॉल कर रहा है Node.modules फोल्डर के अंदर तो वो आपको बता रहा ह�
9:51
देखो भाई सब कुछ वैसे थो ठीक है लेकिन यह दिक्कत आ सकती ह�
9:56
आपको यह बात जानना ज़रूरी है कि यह पेन जो चोटी बाते हैं यह बताता रहता ह�
10:01
मैं कहूंगा आप इसको एक बेगनर इगनोर कर सकते हो इस तरह की वार्णिंग्स तो यहाँ पर आप लोग को देखने को मिलेंग�
10:09
अब यहाँ पर मैं क्या करूँगा इसको बंद करदूं और आप में से कई लोग कोई बंद क्यों कर दिया या�
10:13
तो बंद यार इसलिए कर दिया क्योंकि मैं अपने विएस कोड को इस फोल्डर के अंदर खोलूंग�
10:17
टेक्स यूटिल्स वाले फोल्डर के अंदर तो मैंने गलती से यहाँ पर क्लिक कर दिया मुझे करना था open with code पर क्लिक और यह visual studio code के अंदर आ जाएग�
10:25
आप देखो folder structure को समझो डरना मत इस folder structure से क्योंकि यह folder structure याद नहीं करना ह�
10:30
रटना नहीं है आपको आपको इसके साथ खेलना सीखना है और एक बार आपने इसको अपना खिलोना बना लिय�
10:36
उसके बार याद तो खुद ही हो जाएगा या आपको क्या फाइल कहाँ पर मिलती है देखो या कुल मिला के दो folder ह�
10:41
node modules को थो हटा दो इसके अंदर तो वो सारे के सारे packages आते हैं जो कि create react app वाली basic react app इस्तेमाल कर रहे ह�
10:48
तो जितने भी यहाँ पर modules हमको चाहिए हो वो node modules के अंदर आते हैं इसको आप एक तरह से ignore कर�
10:53
अभी के लिए git ignore को भी ignore करो क्योंकि ये git उसकरता है जब आप GitHub पर push करते हो अपने project क�
10:58
क्या चीज पुश होनी चाहिए इन फाक्ट क्या चीज पुश नहीं होनी चाहिए वो git ignore के अंदर आती है सारी details
11:03
तो आप इसको भी ignore करो package.json क्या है package.json में basically वो सारे के सारे packages हैं जो कि node modules में install होते है�
11:10
अगर कभी भी आपने इस node modules folder को वापस replicate करना है तो ये दो files use होंगी package और package.json
11:19
readme.md एक basic readme देता है आपको कभी भी आप GitHub पर push कर रहे हैं अपने project को तो आपको readme की जग़ा पर क्या दिखाया जाए तो वो ये दिखाया जाएग�
11:29
और यहाँ पर basic बाते लिखी होती हैं यह in most of the cases आप लोग modify करोगे अगर आप थोड़ा साभी serious हो अपनी project को लेके तो readme को अभी हम बिलकुल भी नहीं छेड़ेंगे package, package log को थो छेड़ेंगे इनी git ignore को भी नहीं छेड़ेंगे अभी हम git से deal नहीं करेंगे node modules को भी नही�
11:59
पर अपने components में आप लोग props को भेज़ोगे और components की state होगी अब यह props और state जो शब्द है वो आपको शायद दराद�
12:06
यह क्या बोल दिया है तो मुझे आता भी नहीं है अब देखो short में बताता हूँ components के props और component की state का क्या मतलब है और उसके बात मैं आपको detail में आगे बताऊंगा अगर मैं आपको short में अभी बता रहा हूँ इसका मतलब यह नहीं है अब यह आपको समझ में आचाएगा म�
12:36
पता उम्र कहां जाना चाते हो कौन सी train पगड़ना चाते हो इस तरह की कुछ fields लिख दीं form मे�
12:42
तो मैं क्या करूँगा इस form को किसी भी details के साथ भर सकता हू�
12:46
अगर यह form एक component है तो component के अंदर जो detail में डालना चाता हूँ वो props ह�
12:51
तो मैं जैसे इप प्रॉप्स के साथ इस component को भेजूँगा यानि कि अपने details के साथ इस form को फिल करूँग�
12:56
तब यह form मेरा form कहलाएगा तो props बिल्कुल वैसी ही होती है ठीक ह�
13:00
अब state क्या होती है मान लो कि मेरा यह component है अभी इसकी heading है hairy
13:05
तो heading एक state का part हो गया तीक है यानि कि इसकी heading hairy है या फिर आप यह कह सकते हो कि जो इसकी state ह�
13:13
वो है कुछ इस प्रकार से कि इसकी heading hairy है और content दिस दिस है और उस heading को भी आप change कर सकते ह�
13:20
और आप उस content को भी change कर सकते हो based on user interaction
13:24
based on let us say some HTTP request response मतलब किसी भी तरह से आप change कर सकते ह�
13:30
तो एक component की state का मतलब कि उसके अंदर क्या-क्या details है और एक component के props का मतलब कि मै�
13:37
उस component के अंदर कुछ props भेज़ कर उस component की कुछ अवस्ता को change कर सकता हू�
13:42
अब ये दोनों चीज़े न बहुत ज़धा confusing लगती हैं लोगों को क्योंकि props और state में जो difference है वह बहुत कम लोगों को समझ में आता है सिर्फ theory स�
13:51
तो आपको भी नहीं आने वाला theory से समझ में मुझे भी नहीं आया था मैं आपको बहुत ही honestly बता रहा हूँ तो जब मैं कर के दिखाऊंगा आपको तब आपको बता चाएग�
13:57
props में और states में क्या difference है अभी के लिए बस इतना ही सुन ल�
14:01
कि यार props भी कुछ होता है react में आपने props सुना है आपने state भी सुना ह�
14:06
क्या होता है यह हम आगे देखेंगे उससे भी पहले इससे बहले कि हम आगे बढ़े�
14:10
मैं आपको कुछ files आपलो को दिखाना चाहता हूँ सबसे वहली file index.html
14:14
और यार यह जो comments इनको मैं मिठा रहा हूँ टीक है वह एक comments का कुछ मतलब है इन्होंने लिखे हुए हैं आपको समझाने के लि�
14:21
पर लेट मी remove all these comments और मैं आपलो को समझाने की कोशिश करूँगा क�
14:25
किस तरह से react app काम करती है तो अगर आप इस file को देखो तो यहां पर देख�
14:30
कि इसमें एक empty div है बढ़ी के अंदर simply एक div id is equal to root है और कुछ भी नहीं ह�
14:35
और obviously कुछ यहां पर यहां पर आप देख सकते हो fav icon add हुआ बाह है और उसी के साथ साथ आपका एक और fav icon
14:43
यह वाला इन्होंने लोड किया हुआ है उसी के साथ साथ manifest.json इसको यहां पर इन्होंने लिंक किया हुआ है अब देख�
14:49
कुल मिलाकर यह एक HTML है ठीक है और JavaScript की सायत�
14:53
से यह div id is equal to root को populate किया जाएगा और आपक�
14:57
react app बन जाएगी बट आप लोगों को यहां पर कुछ भ�
15:01
छिरखानी नहीं करनी है आपको अपने से यहां पर कोड इन most of the cases नहीं लिखना है हां हम यहां पर bootstrap बगेर�
15:07
अगर आड़ करना चाहते हैं तो कर सकते हैं बट आप जो major अपना code लिखोगे वो आप यहां src फोल्डर क�
15:13
अंदर components के अंदर लिखोगे तो अगर मैं यहाँ पर यह logo 512, logo 192, यह fab icon यह सब चीरे delete भी कर दो औ�
15:21
यहां से अटा तो तो कोई फर्क नहीं पड़ेगा यहां पर बस एक सबसे important file है वो है index.html जिसके अंद�
15:28
at the end of the day सारी rendering होगी जावसक्रिट की सहायता से यह वाला div populate होगा ठीक है I hope that make sense तो इसक�
15:35
मैं भी बंद कर देता हूँ अब SRC के अंदर आता हूँ SRC के अंदर हमारे पास एक app component है तो app.js ए�
15:42
component है और index.js जो है वो हमारा entry point है त�
15:46
यहां पर index.js क्या कह रहा है कि app वाले component को render कर दो और इसको render करके इसके अंदर content क�
15:53
यहां पर लेकर जाओ अब यह react का code है react के अंद�
15:57
कुछ logic लिखा हुआ है जो कि आप लोगों को कुछ इ�
16:01
तरह की functionality देता है कि आप app.js के अंदर changes करोगे और वो आपका directly क्या होगा index.js की सायत�
16:07
से इस वाले element में आजाएगा यह जो document.get element by id root है इसके अंदर आजाएगा अब आप में स�
16:13
कई लोगों को यह लग रहो गई यह तो code मेरे को समझ में नहीं आजाएगा क्या लिखा हुआ है react.dom.render
16:18
क्या है यह तो मैंने देखा भी नहीं है कावी syntax यार मेरी तो JavaScript का ची है बहुत सारे लोग बोलेंग�
16:23
मैं आपलोग को एक बात बताता हूँ आपको नहीं रटना यार यह नहीं रटना सबसे बड़ी जीज़ यह होती ह�
16:29
लोगों को न लोग डर जाते हैं फाइलो को देखकर देखो डरना देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो देखो दे�
17:02
यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यहाँ पर जो यह�
17:32
आपको बना सकता हूँ और इस अपडोट जी आपको बना सकता हूँ और इस अपडोट जी आपको बना सकता हूँ और इस अपडोट जी कैसे है मैं आपलोग को आगे बताओंगा कैसे है मैं आपलोग को आगे बताओंग�
17:36
आपको बताओंगा जी आपको बताओंगा जी आपको बताओंगा जी आपको बताओंगा जी आपको बताओंगा जी आपको बताओंगा जी आपको बताओंगा जी आपको बताओंगा जी आपको बताओंगा जी आपको बताओंगा जी आपको बताओंगा जी आपको बता�
18:06
और अभी मैं प्रोड़क्षिन के लिए बिल्ड नहीं करूँगा प्रोड़क्षिन के लिए बिल्ड करने का मतलब क�
18:10
एक स्टाटिक HTML, CSS, JavaScript अगर आपको सिर्फ चाहीं है Optimized version of your website तो आप NPM run बिल्ड करके बिल्ड कर सकते हो�
18:20
ठीक है अपने सारे components को हम SRC के अंडर डालते हैं जैसे कि App component एक SRC के अंडर हमारा ह�
18:26
हम और भी components बना सकते हैं और SRC के अंडर डाल सकते हैं उन components क�
18:31
अब जो React के अंडर components होते हैं वो या तो function based components हो सकते हैं या फर class based component हो सकते है�
18:36
यहां पर जो Create React app है वो पहले class based component यूज़ करती थी या function based component यूज़ करती ह�
18:41
अब आप में से कई लोग अगर confused हो रहे हैं क्या है class based क्या है ये function based component
18:47
confused मत होना यार बहुत simple सी चीज है हम लोग यहां पर इसी को edit करेंगे इनिशल�
18:52
और उसके बाद मैं आप लोग को class based components और ये जो extension हमने इंस्ट्रॉल करी ह�
18:57
ये वाली ES7 React Redux Graph QL Snippets बहुत मज़ेदार extension है इसकी सहायता स�
19:03
तो इतना आसान हो जाती है इन चीजे कि आपको कम से कम code टाइप करना पड़ेगा बस logic
19:07
टाइप करोगे आप लोग boilerplate code ये extension आप लोगों के लिए कर देग�
19:12
इस react course को बनाने में बहुत मेनत लगी है अगर आपने अभी तक access नहीं करी ह�
19:16
एक playlist तो ज़रूर कर लेना इन फाक्ट कही बार तो ऐसा हुआ था कि मैंने record किया है lecture पूरा पूर�
19:21
और उसके बाद मुझे feel नहीं आई कि आपको पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा पूरा प�
19:53
जितना मैंने आपलोगो को यह जो folder structure समझाया NPX के बारे में बताय�
19:58
Create React App को यूज़ करना बताया यह सारी चीज़े आई होब आपको समझ में आग�
20:02
अब आपलोग क्या करना एक एक app बनाना Create React App की सा�
20:05
और इस folder structure को देखना धियान से जो मैं कर रहा हूँ यहाँ पर side by side
20:09
आप भी करते जाना तकि आपलोगो को अच्छे से समझ में आए जो भी मैं बता रहा हूँ यहाँ प�
20:13
कुल मिलाक कर again मैं बार बार repeat करूँगा अपनी बात को दो ही folder से जो मैं आपको जहांक रहा ह�
20:17
सरसी और पबलिक बागी फाइल जो है वो उनके बारे में आपलोगो मालूम है कि उनका क्या रॉल है बट यह द�
20:23
folder के अंदर ही इन फाक्ट सरसी के अंदर हमारा जो main source code जो हम एडिट करने वाले है वो है औ�
20:28
पबलिक के अंदर जो है index.html is the most important तो मैं आपको प्रभाद आपको बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत �
21:01
बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बह�
#Computer Education