Up next in 10
iNotebook React Project Setup _ Complete React Course in Hindi #55
107 views
Feb 11, 2024
In the 55th episode of the "Complete React Course in Hindi," the tutorial dives into the initial setup of the iNotebook React project. This video provides a step-by-step guide on configuring the React environment and establishing the foundational structure for the iNotebook frontend. The instructor walks viewers through the process of setting up the project, installing dependencies, and organizing the file structure. Whether you're a React developer looking to apply your skills to a new project or a learner eager to understand the project setup process, this tutorial serves as a crucial starting point for developing the iNotebook React frontend.
View Video Transcript
0:00
अबी तक हम लोगों ने back-end को अच्छी तरह से बना लिया ह�
0:03
अब time आचुका है front-end को बनाने का और build करने का और वहाँ से हम लोग क्या करेंगे अपनी react application से connect करेंगे इस back-end क�
0:10
तो मैं अगर आप लोगों को अभी folder structure दिखाऊं तो मेरा folder structure कुछ इस तरह से दिखाई पड़ता है आपको यह dot gate दिख रहा है क्योंकि मैंने जो hidden folders हैं उनको यहाँ पर properties में जाके शो कर रहा है तो मेरी basically यह gate repository है अगर मैं back end खोल के आप लोगों को दिखाता तो इसके अंदर �
0:40
front end है ठीक है और back end के अंदर हमारा back end है तो अभी के लिए हम लोग क्या करेंगे कि back end के अंद�
0:46
जो भी content है उसको for some time ignore करेंगे और अपने front end को build करने की तरह focus करेंगे और एक बा�
0:53
हमारा front end build हो जाता है तो हम क्या करेंगे अपने front end को back end से connect करेंगे आनी कि जो हमार�
0:59
frontend data लेगा और जो भी काम करेगा वो इस API के थोड़े लेगा यह जो API endpoints हमने बनाया है इनसे बात करेग�
1:06
पहले अगर आप लोगों ने project 1 और project 2 में देखा हो तो हम लोगों ने जो APIs use करी हैं वो external APIs थ�
1:13
वो हमारी API नहीं थी, in fact text tutorials में तो कोई API इस्तेमाल नहीं करी थी
1:17
बट यहाँ पर हम लोग API का इस्तेमाल करेंगे, तो यहाँ पर मैं सबसे बहुत लोगों को बता दू
1:20
अगर आप लोगों को याद हो, तो हमने initially एक project 3 जब हमने start किया था
1:25
तब वहाँ पर हमने एक react project बनाया था और बहुत सारे लोग folder structure को जिस तरह से रखते है�
1:30
back-end और front-end के दो अलग-अलग folder रखते हैं या फिर client और server के अलग-अलग folder रखते है�
1:35
और उसके अंदर जो client होता है उसके अंदर react application का code होता है और जो server होता है उसके अंद�
1:40
एक node.js project होता है जैसे कि मेरा है तो नाम कुछ भी हो सकता ह�
1:44
आप कभी भी convention से या फिर file कहाँ पर रखी हुई है क्या react app पहले बनी हुई ह�
1:49
उसके बाद एक folder बना हुआ है back-end नाम का या फिर क्य�
1:52
एक back-end बना हुआ है already और एक frontend folder अलग से बना हुआ तो इन चीजों पे आप ज़्यादा focus मत करन�
1:58
क्योंकि आप देखो overall idea तो वही रहने वाला है आपके बास एक client होगा एक server होग�
2:03
और client जो है वो server से connect करेगा with that said हम लोग क्या करेंग�
2:06
इस project को setup करने की तरफ आगे बढ़ेंगे तो कुछ packages
2:10
हम लोग install करेंगे तो मैं लिखाओंगा npm i और एक बात यहाँ पर मैं आप लोग को बता द�
2:15
कि यह मैं अपने react वाले package.json के अंदर install कर रहा हूँ यानि कि यह जो भ�
2:20
मैं install करने वाला हो भी वो मेरे react application प्रोडक्शन के लिए है बैक एंड का अपना नोट मॉडियल पैकेंज रॉट जेसन है और यह जो मेरा फ्रंट एंड ह�
2:29
जो कि मेरी यह अप्लीकेशन है जो कि क्रिएट रियल टैप यूटिलिटी के द्वारा बनाई गई है उसका अपना अलग पैकें�
2:35
जेसन और नोट बॉड्यूल है यह चीज आप लोगों को अपने दिमाग में बैठा लेनी ह�
2:39
अब यहाँ पर मैं क्या करूँगा लिखूँगा NPM I एक तो सबसे पहले मैं डालूँग�
2:57
वेबसाइट पर जाएंगे और यहां पर इसके एंड पेज पर आप लोगों में दिखाता है ने एक गिफ बना रखी है बहुत ही बढ़िया सी कि यार अगर आपको एक से ज्यादा सर्वर चलाने तो आप कॉन करंटली के थूँ चला सकते हो इस केस में हमीं क्या करना है देख�
3:27
एंपीएम स्टार्ट करूं तो मेरी रियाट अप्लीकेशन चल जाएगी यहां पर फिर से मैं वहां पर से प्लेस पर क्लिक करो ए�
3:32
और टर्मिनल मुझे मिल गया मैं लिखूंगा यहां पर एंपीएम यह इन फैक्ट मैं काम करूंगा सीडी बैक एंड करूंगा औ�
3:40
के साथ साथ मैं क्या करूँगाlış। और index.js ठीक है जो कि मैं पहले कर रहा था तो यह मेरा index.js
3:47
server भी चल गया और यहाँ मेरी create react app से बनी हुई react app भी start हो जाएगी तो यह अगर आप करन�
3:53
चाहते हैं आप अगर मुझसे पूछेंगे और इसमें क्या problem है अलग-अलग मेरे चल रहे हैं दोनो�
3:56
server क्या दिक्कत है कोई दिक्कत नहीं है ठीक है क्योंकि at the end of the day जब हम इ�
4:02
particular application को host करेंगे किसी website पर किसी server पर in fact या फि�
4:08
या फिर किसी भी सर्विस पर ठीक है तो हम लोग क्या करेंगे कि यह जो एंड पॉइंट होगा उसको अलग से ओस्ट करेंगे इसक�
4:14
अलग से ओस्ट करेंगे और यह इससे बात कर रहा होगा ठीक है यह जो हमारा क्लाइंट है यह सर्वर से बात कर रहा होग�
4:20
अब यहाँ पर मैं आप लोगों को बता दूं कि चीजों को आसान मनाने के लिए क्योंकि हमें दोनों चीजें साइमोंडिनियसली चाहिए इसलिए हम कॉनकरेंटली का इस्तेमाल कर रहे हैं तो मेरे पैकेजेस इंस्टॉल हो रहे हैं भी भी तो वेट करते हैं इनका इंस्ट�
4:50
अपनी react app भी start कर लो और उसी के साथ साथ यह जो back end है इसके अंदर भ�
4:54
मैं आपर npm start कर लो तो एक काम करूँगा जो मेरा back end है उसके अंदर मैं आँग�
4:59
और उसके अंदर यह जो index.js को चलाना है उसको मैं package.json की script मैं add कर सकता हू�
5:04
तो यह scripts में मैं add कर सकता हूँ कि जो node mon index.js
5:10
है उसको npm start बना दो ठीक है बट अगर मैं ऐसा नहीं भी करूँ और मै�
5:14
अपनी outer package.json में आओ याद रखो मैं कौन सी package.json की बात कर रहा हू�
5:18
मैं अभी जो मेरी create react app वाली package.json है उसकी बात कर रहा हू�
5:22
particular command both command concurrently command concurrently concurrently space npm run start run npm sorry notemon
5:46
backend slash index.js करना है ठीक है और obviously मुझे इस चीज़ को double quote में डालना पड़ेग�
5:57
इस चीज को डबल कोट में डालना पड़ेगा और इस चीज को भी डबल कोट में डालना पड़ेगा क्यों डालना पड़ेगा डबल कोट में क्योंकि यार मैं यह वाला syntax यूज़ कर रहा हूँ यह वाला syntax
6:04
पर त्यूँकि already सब कुछ double code में डला हुआ है इसलिए मुझे double codes को escape करना पड़ेग�
6:09
सबसे पहले double codes में डाल लेता हूँ फिर उन double codes को escape कर दूँगा ठीक ह�
6:13
तो escape करने के लिए मुझे क्या करना पड़ेगा एक backslash लगाना पड़ेग�
6:16
तो सारे double codes के before मैं एक बैकसलेश लगा लूंगा ठीक है तो यहां पर आप लोग देखो कि मैं कुछ इस तरह से बैकसलेश लगा लूंगा और यह अ�
6:25
चल जाएगा ठीक है तो मेरा यह जो कॉनक्रेंटली और रियाट राउटर डॉम था वह स्टॉल हो चुका है मेरी यह रिया�
6:32
अभी भी पता नहीं क्या चाहती है इतना टाइम क्यों ले रही है स्टार्ट होने में यह भी स्टार्ट होगी लो औ�
6:39
मेरी रियाक्ट एप्लीकेशन भी स्टार्ट हो गई और यह जो सर्वर यह भी स्टार्ट हो गया यह अलग मेरा चल रहा ह�
6:45
है मैं इसको जरा कंट्रोल सी करके क्या करूंगा एनपीएम बोत लिख दूंगा ठीक है और यहां पर देखो मै�
6:53
जैसे एनपीएम बोत लिखूंगा यह मुझसे कह रहा है कि यार कोई दिक्कत आ गई इसको तो यह कह रहा है कि कॉन्फि�
6:57
पर एनपीएम रन बोर्थ करूंगा तो यह कह रहा है कि मिसिंग स्क्रिप्ट बोर्थ मैंने यहां पर बोर्थ यार ओके त�
7:08
मैं भी बैक एंड फोल्डर में मुझे एक कदम ऊपर भी जाना पड़ेगा तो बहुत सारी गलतियां कर रहा हूं मैं यहां प�
7:13
और अभी मैं एनपीएम रन बोर्थ करूंगा तो यह देखो चल गया दोनों चीजें चल गई मेरा जो रियाट सर्वर यह भी चल गया और यह भी चल गया मैं इसको तरह कैंसल कर देता हूं ठीक है और वापस से मैं एनपीएम रन बोर्थ करता हूं और एनपीएम रन बोर्थ �
7:43
फोन और � surround देखो मेरा जो लोकल होस थ्री थाउजन पर चलने वाला आप तो यहां पर एक गड़बड़ मैंने करी ह�
7:50
मैं अपनी कलेक्शन पर जाकर इन एंड पॉइंट्स को टेस्ट करूंगा ठीक है तो यह को मैंने सेंड के सॉरी यह NPM
8:54
आई नोटबुक ठीक है बहुत ही सिंपल सी चीज मैंने यहां पर लिख दिया और मेरा यह स्टार्ट हो गया है वापस स�
9:01
जो भी रियाक्ट आप एक राफ फील्ड टो कंपाइल रिपोर्ट वेब वाइटल्स कहीं इंपोर्ट हो रहे हैं और यहां पर मिल नही�
9:08
इसको यह भी मैं हटाता हूँ report by vitals वाले function को भी हटाता हूँ save करता हू�
9:12
हाँ अब चल जाएगी अभी भी नहीं चल रही है आबी भी कोई ऐसी चीज है जो कि इसको नहीं मिल पा रही ह�
9:17
तो मैं देखता हूँ यार क्या दिक्कत आ रही है इसको तो मैं इसको दुबारा से स्टार्ट करता हू�
9:21
npm run both करके और अभी npm run both मैंने करके इसको reload किय�
9:26
तो मेरी application अभी भी नहीं चल रही है मैंने बता क्या कर�
9:31
गलती से index.html को इसको delete कर दिया और यहाँ पर गिट मेरी जो गलती है उसको यहाँ पर जो है सुधरवाएगा तो यह देखो आर यू शूर्य वांटर इस टो रिस्टोर फाइल तो गिट में मैं था इसलिए मुझे मिल गई फाइल वापस तो नहीं मिलती मुझे फाइल वापस यह फाइल जा चुकी थी वरन�
10:04
बच गया और ना पता नहीं मेरा क्या होता ठीक है तो यह बेसिक क्लीन अप था हमारा अगर आप लोग यह बटान�
10:09
चाहते हो कॉमेंट्स वगैरा लगी कॉमेंट्स कभी काम आ जाते हैं बट अगर आप लोग बहुत सारे रियल प्रोजेक्ट बन�
10:15
लेते हो तब यह कमेंट्स अगर आपको पड़े हुए हैं तो आपको याद हो क्या लिखा इन कमेंट्स में और याद नहीं ह�
10:20
तो याद हो जाएगा यार ठीक है तो टेंशन बत लेना उस चीज की बिल्कुल भी हम लोग अपने फोल्डर स्ट्रक्चर को औ�
10:25
फाइल्स को जितना क्लीन हो सकेगा उतना रखेंगे ठीक है तो इंडेक्स टॉट जेस को तो मुझे कुछ नहीं करन�
10:31
आप डोट जेस मेरा एंड पॉइंट होता है अब ऐसा रसी के अंदर कंपोनेंट बनाने है उसे के साथ साथ यहां प�
10:37
बुट्स ट्रैप भी आईड करना है उसे के साथ सब नैविगेशन बार बनाना है और यह सारे काम करते हैं तो हम अगले वीडिय�
10:44
में वापस आएंगे और यह सारे काम करेंगे अगर आप लोगों ने अभी तक भी इस प्लेडिस्ट को एक्सेस नहीं किया त�
10:49
यहाँ click करके save करें इस playlist को और यहाँ click करके bookmark जरूर करना है इस playlist क�
10:53
अभी के लिए इस वीडियो में इतना है guys thank you so much guys for watching this video
10:57
and I will see you next time
#Computer Education