- 2 days ago
🎯 What You’ll Learn Today
✅ Recap: First Express Server (Hello World)
✅ Connecting Frontend with Backend
– Fetch API se frontend (HTML/JS) → backend (Express API)
– Example: Form submit karke backend me data send karna
– Example: Backend se JSON response leke frontend me show karna
GitHub Url :- https://github.com/DevanshuSir/FullStack_SkillWaala_26May_2025.git
✅ Recap: First Express Server (Hello World)
✅ Connecting Frontend with Backend
– Fetch API se frontend (HTML/JS) → backend (Express API)
– Example: Form submit karke backend me data send karna
– Example: Backend se JSON response leke frontend me show karna
GitHub Url :- https://github.com/DevanshuSir/FullStack_SkillWaala_26May_2025.git
Category
📚
LearningTranscript
00:00स्टार्ट कर देता हूं अब देखो लास्ट क्लास में अपने क्या डिसकस करा था लास्ट क्लास में अपने डिसकस करा था अपने बैकेंड की उपर यह डिसकस कर रहे थे जिसमें अपने देखा था अपना कि यहां पर
00:17MVC Architecture अपने पास यहाँ पर क्या होता है MVC Architecture के उपर अपने
00:21discuss कराता उसी में अपन आगे चलते हैं मैं कल जो अपने
00:25folder बनाया था उसी folder पर आ जाता हूँ Express backend करके अपने
00:29folder अपना यहाँ पर create कराता और इसी folder के अंदर अपने यहाँ पर
00:33अपना backend का complete setup भी कराता यहाँ पर मैं इसको run कर लेता हूँ
00:38NPM run और server नाम से अपन यहाँ पर इसको run कर लेते हैं मैंने NPM run server
00:44करके यहाँ पर इसको run कर लिया ठीक है अब यहाँ पर जो अपने देखा था वो अपने देखा था
00:49अपना MVC architecture अपने server का setup अपन कैसे करते हैं .env मैं अपन यहाँ पर अपने environment
00:55variables को set करके रखते हैं ठीक है इसी में अपन database का जो अपने पास URL होगा वो अपन यहीं
01:01पर save करके रखेंगे ठीक है app.js के अंदर अपने server का setup किया .env का setup किया और यहाँ अपने router का
01:09अपने router की फाइल बनाई और उसका setup अपने server.js वाली फाइल के अंदर ठीक है उसके अलावा routes के अंदर
01:19अपने पास अपने सारे route बनेंगे मतलब आपके method जो है sttp request के उपर जो भी method अपन यहाँ पर hit करवाने वाले
01:25जैसे get, post, put, delete यह सारे methods अपने कहाँ पर create कर रहे हैं यहाँ पर routes के अंदर ठीक है उसके अलावा अगर अपने यहाँ पर बात करते हैं routes का setup बड़ा
01:36अपने पास यहाँ पर model view और controller अपने पास होता है model के अंदर अपन यहाँ पर क्या करते हैं अपने collections को रखते हैं तो अभी collections कुछ है नहीं और views के अंदर अपने सारे जो भी
01:55statics जो भी अपनी templating files होती है वो अपन views के अंदर रखते हैं और public के अंदर अपने सारी static files यहाँ पर रखते हैं यह सारी चीज़े अपने discuss करी थी अपनी कलवाली class के अंदर आज अपन यहाँ पर देखते है front end को back end से कैसे connect करेंगे मतलब कि अगर front end से कोई request आ रही है जैस
02:25और इक नया folder यहाँ पर create करता हूं जिसको मैं यहाँ पर कह देता हूं अपने यहाँ पर अपन कह देते हैं front end and back end
02:34अपने यहाँ पर कह देते हैं और और यह जो फोल्डर अपने बना रखा है express back end करके इसको अपने यहाँ पर डायरेक्ली ना रखें उसके अंदर paste कर देते हैं क्योंकि अपन यहाँ पर अपने front end का setup भी करने वाले है तो मैं यहाँ पर इसी में आ जाता हूं और इसी में आ
03:04कर लो एक बार कुछ open कर रखा है अपने पहले से वी एस कोड में बंद कर दिया यहाँ फिर से आ जाओ एप में आ जाओ और यहाँ पर अपने पास अपना जो कौन सा है यही है इसको मैं यहाँ से हटाता हूं और इसको यहाँ पर रख देते हैं चीक है क्या बता रहा है यह
03:34खाल जोड़ के अंदर अपने उपन हैं आय। अखाहिए क robots काम करते हैं फाइल ओपन फ्लेर और मैं यहाँ फरंटेन उन साथी फोल्डर को यहाँ पर गह पर ओम나�uyorsun गयां और ढफन लेता हूं ठीक है और जो यह � 따라 आपना पर ऑक दिन दिल्शन से हैं तो मैं यहां पर आ जा
04:04कि यहां पर बस इतना सा क्या है कुछ चेंजेस नहीं जिए अपने सिर्फ यहां पर मैंने
04:09ड्रीऩ बैक अ करते हैं आपने अपने असाट कर लेते हैं अपने टरैमिनलं पर आ
04:18जाते हैं और गि détails को मैं यहां पर लेता हूं और अपना है अपने अ
04:25सेट आप करते हैं प्रोसेट यहाँ सेट अप कर रहे हैं और यहां पर यहां पर का नीम पूच रहा है तो यहां पर अपन कहाँ देते हैं अपना
04:50front end
04:51front end मैंने यहाँ पर कह दिया
04:54react अपन यहाँ पर select कर लेते हैं
04:56अपना javascript यहाँ पर select कर लेते हैं
04:58और
04:59roll down
05:04वीट नहीं यह करनी करेंगे अपन
05:06और यह बोला install with npm
05:08and start now yes
05:10तो यहाँ पर अपने
05:12पास अपने front end का setup हो जाएगा
05:14front end को open
05:18तो यहाँ पर अपना complete front end का setup हो रहा है
05:21node module का setup भी यह कर रहा है
05:23इसी के साथ मतलब package log
05:25json सारा काम यहाँ पर हो रहा है
05:26मैं यहाँ पर इसको run कराता हूँ अपने front end को
05:29यह front end अपना यहाँ पर run हो चुका है
05:32ठीक है
05:34यहाँ पर आ जाओ और
05:37इसको नीचे कर दो अब देखो यहाँ पर src के अंदर अपने पास app.gsx है उसको मैं यहाँ पर blank करता हूँ और यहाँ पर blank करके अपन इसको वापस से recreate कर लेते हैं
05:48आपका app.gsx हो गया app.css को मैं यहाँ से हटा देता हूँ index.css को मैं यहाँ से हटा देता हूँ अब इसे front end में आपको discuss कर रहा हूं कि front end किस तरीके से अपन यहाँ पर काम करने वाले हैं ठीक है
06:02मैं यहाँ पर एक aja one tag ले लेता हूँ जसमें यहाँ पर कह देता हूँ अपना फ्रण्ट end के बेजेंगे अपने back end की उपर अपन भेजना चाते हैं
06:25ठीक है, front end से अपन data लेंगे और उसको कहां पर भेजेंगे अपने back end के उपर अपन उसको भेजने वाले हैं
06:32ठीक है, तो चलो यह काम करते हैं, बढ़ा ही easy काम है, क्या करना है अपने को, सबसे पहले अपने को एक form बनाना है
06:38ठीक है, अपन एक form create करते हैं, form से जो भी data में लूँगा, post method अपना create होगा back end के उपर, तो अपने को क्या करना है
06:45अपन यहाँ पर अपना एक form बनाएंगे और form के अंदर जो भी data है, उसको अपन कहां पर भेजेंगे अपने back end के उपर
06:52इतना सा काम करते हैं, ताकि front end और back end को connect करा सके, तो मैं यहाँ पर src के अंदर ही एक component बनाते हैं पन जिसको अपन यहाँ पर कह देए, अपना form component, form.jsx करके यहाँ पर create कर लेते हैं, rafc करके मैं यहाँ पर create कर देता हूँ, यह अपना form component है, एक अपन यहाँ पर form अपना
07:22पर ने में यहां पर कहा है सेकंड में पर कह देता है अपना उन्पूट कॉलन और यहां पर अपन ले ले लेते अपना रिपाल सबमिट यह तुब
07:34सब्मिट का बटन ले लिया जिसमें यहां पर कह देता हूं सब्मिट ठीक है यह अपने एक फॉर्म बनाया है इसको अपने यहां पर अटैच भी कर देता है कैसे करोगे आप अपने फॉर्म कॉम्पोनेंट को यहां पर लगा दो आपने फॉर्म कॉम्पोनेंट को यहां पर �
08:04कि ऑपर जानी चीए जो आपने सर्वर बना रखा क्योंकि आपने इक फ्रंटेंध it का सैट अप कर लखा है तो यहां पर जैसे ही मैं इसको क्या करूँ
08:15जैसे ही इसको submit करूँ तो successfully submit का message अपने console के अंदर आना ची कहां से अपने backend से
08:21कि आपका वो data backend में जा चुका है और successfully submit का message भी आपके आज फ्रेंट पे आ रहा है
08:27ठीक है अब देखो ये काम कैसे होगा सबसे पहले आते हैं अपने form के उपर
08:32ठीक है मैं form के उपर आ जाता हूँ form अपने पास है form की value सबसे पहले आपको front end पे get करनी पड़ेगी और वो आप कैसे करते हो अपने use state की basis पे
08:40तो सबसे पहले form को submit होने से रोको कैसे रोकोगे आप यहाँ पर लगाओगे अपना on submit एक minute क्या हुआ यहाँ पर आपके लगाओगे अपना on submit और अपन यहाँ पर एक function बना लेते हैं मैंने यहाँ पर एक function बनाया जिसको मैं यहाँ पर करता हूँ handle form नाम का अपन यहाँ �
09:10किसके थुरू रोकते हैं आप यहां पर प्रिवेंट डिफॉल्ट ठीक है तो पहला काम तो मैंने फॉर्म को सब्मिट होने से रोका मेरा फॉर्म यहां पर सब्मिट नहीं हो रहा अब अपने को क्या करना है इस इंपुट की वैल्यू को गैट करना है तो उसके लिए आपको �
09:40एक एरे बना दिया ठीक है और इसके अंदर अपन यहां पर कहा देते हैं यूजर और मैं यहां पर कहता हूं सैट यूजर ठीक है एक तो मैंने यहां पर क्या कहा यूजर दूसरा मैंने का सैट यूजर तो अपन इसको गैट कर लेते हैं वैल्यू के अंदर अपन अपने इ
10:10रियक्ट तो आपको बहुत अच्छी से आता है तो मैं इसको जाता रिपीट नहीं कर रहा है यहाँ पर अपन सैट यूजर को बलाते हैं और इवेंट के बेशेस पर इसको टारगेट कर लेते हैं ठीक है?
10:18event में से अपन क्या निकालेंगे
10:20अपने पास target की आती है
10:21उसमें से dot करके अपन यहाँ पर क्या निकालने वाले है
10:23अपनी value चीक है
10:25तो यहाँ तक का काम तो वही सेम सा काम है
10:27और एक बार के लिए मैं हाँ पर console करा लेता हूँ
10:30कि मेरे पास user का
10:32name जो है वो क्या आ रहा है
10:34किस के अंदर आएगा अपने user के अंदर
10:36तो यह तो front end front end का काम है
10:38जो अपने यहाँ पर करवाया
10:39inspect करके अपने एक बार चेक करते हैं
10:41अपने console में आके
10:42मैं यहाँ पर console में आता हूँ
10:44और यहाँ पर आके कोई भी user name अपन यहाँ पर pass करते हैं
10:47मैंने pass करा और मैंने इसको submit करा
10:49तो अपने पास क्या रहा है अपना user name आ रहा है
10:51जिसमें क्या रहा है देवान्शू
10:53अगर आप यहाँ पर इसको update करते हो
10:55आपने बोला अमन
10:56तो अपने पास यहां पर क्या रहा है यूजर नीम अमन आ रहा है
10:59तो यह तो अपना सिर्फ क्या है अपना front end का काम है
11:03जो अपने यहां पर किया
11:04कैसे किया बढ़ा easy है जो अपने पहले भी discuss कर रहा है
11:07लेकिन काम तो यह है कि अपने को यह value कहां पर भीजनी है
11:11अपने back end के उपर अपने को इस value को भीजनी है
11:14ये value अपनी कहाँ पर जानी चाहिए
11:17अपनी back end के उपर जानी चाहिए
11:18ये काम अपने को यहाँ पर करना है
11:20यहाँ तक की चीज के लिए रहे तो एक बार comment करके बताओ
11:23कि एसर यहां तक की चीज़ के लिए रहे फिर उसके बाद पनागे बढ़ेंगे
11:53अब देखो अपने को क्या करना है यह जो वैल्यू है इसको में को बैकेंड के उपर लेके जाना है अब बैकेंड पर अपने पास कुछ डेटा आने वाला है तो मैं बैकेंड के उपर आता हूँ
12:19क्या है एक्स्प्रेस घान करके है और यहां पर अपने आपने रौट्स के अदर अपन सारा काम करने माले किसके अंदर इकर
12:35प्लाबने पर और अपने पर कॉस्ट ब deport से और यहां पर Relo השुम करना पैस कुछ पी इंचारबôर को बलाता रिखों करके यह
12:42करके यहां पर कौन सरी रिक्वेस्ट बनाएंगे यहां पर बनाा क्यूल के अदर यीजर.js तो
12:56यहां पर मैं यहां से कांट्रोलर बनाया और यहां पर
13:02Citiesvenidos बनावां और जाउत पर पहले से बनावा है तो कर रहने दो
13:07किप करो आप यहां पर कहते हैं सिर्फ डेटा कंट्रूलर करके आपने यहां पर क्रियेट करा यह आपका डेटा कंट्रूलर रहेगा जिसमें अपने यहां पर कह देते हैं अपना रिक्वेस्ट और सेकिंड में यहां पर क्या कहते हैं तो अपना रेस्पॉंस ठीक है और यहा
13:37सब्मिट का अपन यहां पर क्या बेजेंगे अपना एक रैस्पोंस बेजेंगे इस डेटा कंट्रोलर को अपन यहां से क्या करते हैं अपना एक्सपोर्ट कर देते हैं मैंने डेटा कंट्रोलर को एक्सपोर्ट कर दिया क्यों कर रहा हूं क्यों कि अपने राउटर के अंदर �
14:07अपनी API हिट हो रही है या नहीं हो रही ठीक है यह जो काम किया है यह मैंने API बनाई अपनी
14:12post वाली पोस्ट में थड़की यह get method यह अपने create कर यह दो तो यहां पर अपन आते हैं और यहां पर अपन एक
14:19नया collection हिट करवाते हैं और नया collection मैं यहां पर कौन सा बनाऊंगा अपना post वाला मैं यहां पर आता हूँ
14:25पोस्ट के उपर वही localhost 5000 तो आपने ले ही रखा है लेकिन अगर आप इसका flow देखोगे तो आपने server पर
14:32यहां पर क्या देरी का है slash API हीट करवा रखाया तो आप यहां तक का तो बिल्कुल सही है फिर आप slash API हीट
14:38कर वाओगे फिर उसके बाद आपकी STT P request क्या है ? आपकी STT P request यहां पर आके
14:43करो क्या है अने इस्ट क्रेंगा है शू उर्ट कि यह आप मैं सेंड में चैनल Go
15:06यहाँ पर पुक्वाड़ी के आपको बोड़ी के अंदर कुछनगों ऄत्र बीजना पड़ेगा मैं norm यहाँ पर दो
15:10की पोस्ट की है तो डेटा तो आपको यहांपर भीजना ही पड़ेगा
15:14यहांपर रो के अंदर आते हैं अपना new in लिएtaking है और यहांपर यहांपर बीजने वालें बिएजब जाया ओना
15:17एक बार के लिए भीज देता हूं मैंने ही आपर एक जैसन डेटा बेजा जिसमें अपन कहते है यूजर नेमाने वाला है और यूजर नेम अपन यहाँ पर अभी के लिए देवानचु शेयर कर देते हैं ठीक है ये यहाँ पर भीजा अपना
15:29एक मिनट फॉर्म डीट अपने को यहाँ पर भेजना है रोख यंदर ही तो जायगा जेसन
15:41जेसन करो सको जेसन सलाइक तो है
15:44अच्छा यहाँ पर डबल कोट लगाओ जेसन डीटा ऐसे तोड़ी न होता है
15:51डबल कोट लगाऊ यहाँ पर मिस्टेक मत करो और इसको सेंड करो ठीक है मैंने यहाँ पर क्या किया स्लैश डेटा है यहां तक का सही है लोकल होस 5000 और मैंने यहाँ पर इसको सेंड करा अब देखो कुछ ने कुछ तो इश्यू है और इश्यू यह है कि आपने अपना बैकें�
16:21प्रेस बैकेंड के अंदर फिर उसके बाद अपन एंपीम रन और सर्वर करके अपनी सको रं कर लेते हैं तिक अपना बैकेंड रन नहीं हो रहा था यहाँ पर रखन को रिखा है 5000 पर आपका
16:33विच्ट करवाता है इसका मतलब यह डिटा आपके बेक अब ने डिसकस किये आता C
16:45कीए टी किसके अंदर आता है लेता इंदर आपके पास यहां पर रिक्वेस्ट मर पाड़ी ज hält किसे कीए न क्रूंत-प्रण से-पिलड़्ट करें पर
17:03पर मैं अपनी API बना रहा हूं slash data HTTP request के उपर अपनी पोस्ट वाली ठीक है अपन यहां पर hit करवाते है
17:10slash data के उपर और चेक करते हैं क्या हो रहा है यह बता रहा है undefined अब undefined क्यों बता रहा है
17:15अपने discuss भी किया था इसी चीज के उपर undefined क्यों आता है क्योंकि अगर अपन सर्वर पे कोई भी जेसन डेटा भीजते है
17:21तो अपने को allow करवाना रहता है अपने express के थुरू कि अगर कोई भी यहां पर अपने पास सर्वर पे
17:28जेसन डेटा आ रहा है तो जेसन डेटा को पने को allow करवाना पड़ेगा
17:31तो मैं यहां पर बोलता हूँ app.use और क्या करना है अपने express को ही बोलना है
17:36कि अगर कोई भी जेसन डेटा आए तो जेसन डेटा को यहां पर क्या कर देना
17:40allow कर देना ये काम करो फिर से आप इसके उपर hit करवा के देखो
17:44तो successfully submit आपके पास यहाँ पर response आ रहा है
17:47और request के अंदर आपका data आ रहा हुगा username दिवान्शू
17:50perfect कोई दिक्कत नहीं है लेकिन काम अपना क्या था
17:53काम ये था कि front end से जो मेरे पास data है
17:56उसको मेरे को यहाँ पर क्या करना था अपने back end के उपर अपने को भीजना था
18:00आपने यहाँ तक का तो get कर लिया data अब back end के उपर आप इसको set करने वाले हूँ
18:06अब देखो अपने को यहाँ पर क्या करना है front end से data भीजना है काँ पर back end के उपर
18:11एक लोको समझना आप अगर समझ में आगे तो फिर बिल्कुल एजिल लगने वाला आपको फ्रंटेंट से डेटा बैं के उपपर बेजने वाला से आपको यहां पर आते हैं अपने बार समझते फ्रंट एंट अपर भीजेंगे कैसे
18:25आप देखो मेर को यहां पर क्या करना है मेर को यहां पर अपना जो frontend था ठीक है उससे data मेर को यहां पर कहां पर बेजना अपने backend की उपर अपने
18:47बेटा भेजना है अब पर ऑपने इंपुट वाला बटन है और यहां पर यूजर की इंफॉरमेशन है सबसे पहले पर लेट करना तो वह फ्रंट आल पर ईपने फ्रंट के अपर अपने इंपेट कर लिए अब यह जो व्यूब
19:09आपने get करिए इसको आपको कहां पर बेजना है बैकेंड के ऊपर ठीक है बैकेंड पर आपने अपनी API यहां पर create कर रखी है और API आपकी यहां पर क्या है पोस्ट की और उसके लिए जो STTP request हो आपने
19:19slash data करके आपने create कर ली यहां तक कि बिल्गुल सही है और जो data आएगा वो किसमें आएगा request.body के अंदर आपका data आने वाला है और आप कुछ ने कुछ response बेजने वाले वो response.send आपने करा था वो आपका front end पर response आएगा यह दोनों चीज़े अपने पास है कि request क्या है और उसके basis
19:49इहाँ पर अपने proxy का setup कैसे करते है अपना जो front end है इसी front end के अंदर अपन allow करवाएंगे किसको अपने back end को अपने
20:11जो अपने project की file होती है package.json इस package.json file के अंदर ही अपने proxy का setup करेंगे
20:19मतलब अपना frontend चल रहा है 5173 के उपर इसके उपर अपन अलाव करवाएंगे किसको 5000 को ताकि frontend से अगर मैं कोई data भीज रहा हूं
20:29तो backend में वो data चला जाना चीए किसके basis पे अपने API के HTTP request के basis पे वो data अपने backend के उपर चला जाना चीए
20:37तो सबसे पहले अपने को क्या करना है अपने proxy का setup करना है तो यहां पर अपन आते हैं अब देखो अपने जो अपने frontend का setup किया है
20:47उसके अंदर अपने जो काम किया है वो अपने viet के थ्रू करा आए देखो react के अंदर proxy का setup अपने package.rot.json फाइल है इसके अब अपन कर सकते हैं
20:58अगर अपन के लिए ट्रियक टैप से काम करते हैं लेकिन अपने यहां पर किया वीट के तुरू तो वीट.config.gs फाइल है इसके अंदर ही अपने यहां पर क्या करते हैं अपने प्रॉक्सी का सेट अप करते हैं
21:08कि वेटे मिनट गाइज
21:09अब देखो अपने को यहां पर क्या करना है अपने को अपने प्रॉक्सी का सेट अप करना है अपने पास
21:29वीट.config.gs वाली फाइल है, उसके अंदर ही अपन अपने
21:32proxy का setup करते हैं, अब देखो किस तरीके से अपन करते हैं,
21:38आप सर्च भी कर सकते हो, यहाँ पर आओ, यहाँ पर अपन बोलते हैं,
21:42वीट.proxy.config, ठीक है, जैसे मैं यहाँ पर आता हूँ,
21:49इसने यहाँ पर बता रखें, कैसे करना है, आपको proxy का setup, इसने बता रखाएं कि आपके बास
21:54.config.gs फाली फाइल है, उसके अंदर ही आपको यहाँ पर क्या करना है, अपने proxy का setup करना रहेगा,
21:59यहाँ आपर open करके इसने दे रखा है, और यह रा proxy का setup, जिसमें slash API target करके आप अपने
22:04allow करवादो, जिस चीच को आप allow करवाना चाते हो, सबसे पहले आपको अपना proxy पास करना पड़ेगा,
22:09पहले आपको server, server में proxy, proxy के अंदर आपको यहाँ पर, आपको prefix, prefix अपने पास slash API prefix था, जो अपने लिया था, यहाँ पर भी इसने slash API ले रखा है, क्योंकि most commonly अपने पास slash API prefix यहाँ आपको subject के दिखेगा,
22:21तो यहाँ पर आके अपन setup करते हैं, setup आप समझ लेना directly, आप documentation से भी देख सकते हो, बागी यहाँ से भी समझ जाब इसको, मैंने server लिया, server के अंदर अपन यहाँ पर एक object बनाने वाले हैं, ठीक है, और उसके अंदर अपन यहाँ पर क्या लेने वाले हैं, अपने proxy, proxy का setup य
22:51जो अपना backend, जिस server के उपर अपना चल रहा है backend, उस server को अपन यहाँ पर pass कर देंगे, किस server के उपर चल रहा है, वो यह HTTP, ठीक है, sttp, colon, colon, localhost, localhost किसके उपर चल रहा है, अपना 5000 के उपर ही चल रहा था, तो मैं यहाँ पर 5000 को pass कर देता हूं, बस, इतना असा setup अपने को क
23:21किए अगर आप इसकी डोकुंटेशन पड़ोगी तो आपको क्लियरीटी मिलेगी इसमें तो मैंने यहां पर क्या किया वही जो अपने पास अपना वी डॉट
23:28कांफिक डॉट जेस वाली फाइल है उसमें प्रॉक्सी प्रॉक्सी के अंदर अपने यहां पर लिया अपना
23:32अपने प्रीफिक्स्ट करांद हैं फोगार के मैं समाफ्न प्रॉक्सी का सट अप करते तो अपने
23:45प्रॉक्सी का नको वासे रन करवाते हैं क्योंकि मैं यहां पर आता हूं आपने प्रॉक्सी को नप्न候
23:54मैं यहाँ पर run करवाता हूँ
23:55अपने front end को
23:57npm run
24:00ठीक है यह तो rule ही समलो कि
24:04अगर आप proxy का setup करें तो front end और back end को
24:06वापस से run करवाना है
24:07cd करके अपन किसमें आ जाते हैं पहले
24:09front end के अंदर आओ फिर run करवाओ
24:11मैं यहाँ पर लिखता हूँ npm run
24:13और dev
24:15यह मैंने किसको run करा लिया
24:17अपने front end को run करा लिया
24:18second back end को भी एक बार crash करो
24:20और फिर से run कराओ npm run
24:23server ठीक है
24:24तो यहाँ पर अपने किसको run करा लिया
24:26अपने back end को भी run करवा लिया
24:28बस इतना सा काम कर लो
24:29तो आपका front end जो है वो back end के साथ connect हो चुका है
24:33बस अब आपका यह जो data है
24:36यह आपको back end के उपर भीजना है
24:38ठीक है यह connection अपने कैसे करा आपने
24:39proxy के दूप
24:40proxy का setup करा
24:41और 5173 के उपर मैंने 5000 को allow करवा दिया है
24:45बस इतना सा काम अपने किया है
24:47अब मेरे को यहाँ पर क्या करना है
24:49अब अपने को जो काम करना है
24:51वो करना है अपने को यहाँ पर
24:52front end से जो data है वो अपने को back end के उपर भीजना है
24:56अब दो तरीके से आप data यहाँ पर भीज सकते हो
24:58front end से back end के उपर
25:00अपने अपना fetch पढ़ाता
25:02front end के उपर ही
25:03डेटा को fetch करने के लिए अपन यूज ले रहेते हैं अपना fetch keyword ठीक है
25:07अब ये अपन क्यों use ले रहेते हैं अपनी डेटा को fetch करने के लिए
25:10अगर कोई भी API से डेटा अपने को fetch करना होता हो
25:13अब backend पे मैंने यहापर slash data करके जो बनाई है अपनी पोस्ट वाली वो अपनी API ही तो है
25:18अपने पास अगर जैसे मालो मैं यहापर slash user करके मैंने बना रखी है
25:22तो वो अपने पास get की है get की API ही तो है
25:24अभी तक आप fetch के थूँ जितनी भी APIs यूज कर रहे थे जो अपने पास पहले से pre-build APIs थी जिनको अपन यूज कर रहे थे
25:31वो get method के थूँ यूज कर रहे थे जिससे अपन data fetch करने का काम कर रहे थे
25:35लेकिन data भीजने वाला काम तो अपने कोई किया ही नहीं अभी तक
25:38तो अपन fetch के थूँ यहाँ पर देखते कि अपन data को किस तरीके से send करेंगे
25:42fetch और exeos भी अपने पास यहाँ पर आता है अपना
25:45exeos के थूँ भी अपन यहाँ पर data fetch और इसका काम करते यह भी easy है
25:49लेकिन fetch अपना inbuild है जावा script का तो अपन fetch के थूँ समझते
25:53exeos भी मैं आपको आगे बता दूँआ ठीक है अब देखो fetch के थूँ अपन यह काम कैसे करेंगे
25:59मैं यहाँ पर अब यह handle form है यहाँ तक ही आपकी value आ रही है
26:02यह अपने console भी करा रहा है बस यहाँ पर आके आप लिको अपना fetch ठीक है
26:07आपने fetch keyword लगा और fetch keyword लगा कि आप यहाँ पर क्या करने वाले हो अपना जो आपका API का
26:15HTTP request है वो यहाँ पर hit करवा दो आप बुलोगे slash API आपका backend का prefix है
26:20second आप यहाँ पर बुलोगे slash और उसके बाद आपने क्या अपना HTTP request बना रखा है data उसके उपर मैं hit करवाता हूँ
26:37आपने पास करेंगे अपना post method second आपन यहाँ पर पास करते हैं अपने content का type की मेरे content का type
26:53यहाँ पर क्या रहने वाला है मतलब JSON data आपने पास यहाँ पर भेज रहें अपने content का type तो मैं यहाँ पर सिर्फ यह चीज आपको लिखनी है content type और यह आपने बहुत सारी जगे
27:05देखिए जब अपन network के ऊपर मैंने आपको दिखाया था तो वहाँ पर content type आ रहा था जब भी अपना content जा रहा था तो उसका कुछ न कुछ टाइप रहता है तो यहाँ पर जो अपने पास अपने content का type भेज रहे हैं वो अपने पास क्या है अपना application slash JSON यह fix syntax है यही use करना है
27:35यहां उसको मैं stringify करके यहां पर वेजने वालाओं क्योंकि आपका यह data है पहले तो इस data को एक variable में assign कर लो आप यहांपर क्या बोलोगे
27:44const और मैं यहाँ पर
27:46form data करके एक variable में
27:48इसको assign कर देता हूँ
27:50form data करके मैं यहाँ पर
27:52इसको एक variable में assign कर देता हूँ
27:53और body के अंदर अपन उस data को भेजेंगे
27:55किसके तुरू json.stringify करके
27:58क्योंकि अपना ये एक data है
28:00database में store होने के लिए जाएगा
28:02backend के अंदर तो यहाँ पर
28:03मैं इसको stringify करके data को भेजने वाला हूँ
28:06तो देखो
28:08यहाँ पर अपने fetch लगाया और
28:10method post रहेगा headers में content type
28:12application slash json अपन यहाँ पर
28:13pass करने वाले है और body के अंदर
28:15मैंने यहाँ पर json.stringify करके
28:18अपने form data को जो मैंने frontend
28:19के अंदर get कर रखा था उसी data को
28:21मैं यहाँ पर pass कर रहा हूँ जब मेरा form
28:23submit होने वाला है चलो एक बार
28:25अपन चेक करते है कि बाई चीजे सही
28:27चल रही है या नहीं चल रही
28:28ठीक है यहाँ पर आजाओ
28:31और यहाँ पर आके अपन
28:33इस चीज को देखते है कि सब कुछ
28:35perfectly चल रहा है या नहीं चल रहा
28:37ठीक है
28:39एक बार के लिए frontend को फिर से run करो
28:45ठीक है चलो
28:51यहाँ पर आओ और आपका frontend
28:53यहाँ पर आपका run हो रहा है
28:54ठीक है perfectly आपका frontend यहाँ पर चल रहा है
28:57कोई दिक्कत नहीं है उसके अंदर
28:58ठीक है अब देखो मैं यहाँ पर आता हूँ
29:03और यहाँ से मैं डेटा भीजता हूँ
29:05यह बंद कर दो कोई दिक्कत नहीं है
29:07आप यहाँ पर बोलोगे देवांशू
29:09आपने क्या किया उसको सब्मिट किया
29:11मैंने submit किया और data कहां पर आएगा आपने back end के उपर यह देखा आपका user name के अंदर देवांशू आ चुका है कहां पर आ रहा है back end के उपर आ रहा है
29:18मैं फिर से hit करवा के देखता हूं मैं इहां पर बोलता हूं अपना अमन मैंने submit करा आप
29:28नहीं अपर नहीं ना measure make चेक करा இ अपर आपने तब कर आरा है अपने आपके आपका data back use में यह उपर नियुच आ हौर है
29:44यृट करवा आपने यह स्च्ट आप रहा है पर यापने क्वा सबसे पहले च होगा तो डेटा
30:12प्रइंट में जाने माला जिसमें अपने कन्सूल करा रखा है request.body को ठीक है और response के अपने क्या
30:18क्या sign करें अपना successfully submit वाला अब यही response आप निकालना चाते हो तो फैच के अंदर
30:24अपन response को कैसे निकालते है then और catch के थू तो
30:27मैं यहाँ पर अपना then लगा देता हूं मैंने यहाँ पर बोला
30:33response जो भी मेरे पास response अ रहा है उसको
30:35जिसके इंदर अपने उसको convert करेंगे readable format में
30:40then उसके पाद उसके पर फिर से एक और then लगने वाल
30:44जिसके अंदर अपने पास क्या आएगा अपना जो भी रैस्पॉंस आ रहा है अपने पास अपने बैक एंड से वो रैस्पॉंस मेरे पास यहां पर आ जाएगा तो मैं यहां पर इसको एक रिजल्ट नाम के वैरीबल में साइन करवाके और एक बार के लिए концेल करा लेता हूं
31:14और आपने फिर से एक नाया नहीं और पॉस्क्त
31:27कराया और आपका ड्लेटा बैकने मैंनी यहां पर आुगाल रेकिन पर आम यह यहांपर क्या किा
31:42पर आपने उसको .json करके आपने यहां पर उसको convert भी करा लेकिन लेकिन लेकिन आपने जो अपना user.js है उसके अंदर आपने response.send कर रखा है
31:53response.send का मतलब है कि अगर आप कुछ stml या फिर कुछ text format response में बेजना चाते हो तो उसके लिए आप यह काम करते हो
32:01लेकिन आप यह जो message भीजिरो इसको आप convert करके भीजो किसके अंदर जेसन के अंदर क्योंकि अपने उसको जेसन format में कर रहे है यह काम तो मैं यहां पर इसको जेसन के अंदर करता हूँ और फिर से वही same काम अपन करवा के देखते हैं
32:14मैं करता हूँ submit तो देखो मेरे पास यहां पर successfully submit का message आ रहा है और अपना मैनी यहां पर back end पे आ भी चुका है तो यहां तक की चीज clear है तो एक बार comment करके बताओ कि यहां तक की चीज clear है कोई doubt नहीं है
32:44क्या अब आप सभी को back end interesting लग रहा है कि front end से back end में किस तरीके से flow चल रहा है किस तरीके से अपन हिट करवा रहे है चीजों किस तरीके से request आ रही है किस तरीके से response जा रहा है
33:09आई hope कि अपन बिल्कुल basic से चीजे चला रहे थे तो आपको clarity मिल गई होगी तो आगे बढ़ते है अपन इसी चीज के अंदर ठीक है
33:24अब देखो यहां तक की चीज तो clear है अब अपने को क्या करना है यह data जैसे मालो मैं store करवा देता हूं कहीं कहीं ने कहीं तो कहां करवा देता है अपन एक यहां पर एक काम करते हैं
33:40मैं यहां पर एक कॉंस करके और एक यहां पर अपन कह देते हैं जीवे डीटा करके एक और बनाई तो आरे के अंदर रिप यह उप्शन है और कोई आप्शन नहीं है अपने अपने पास अभी यह लिए
34:06तो मैं यहाँ पर आता हूँ और जो अपने पास अपना db data है
34:10उसके अंदर dot करके मैं यहाँ पर क्या कर देता हूँ
34:12push कर देता हूँ और किसको push कर देता हूँ
34:14यहाँ पर जो मेरे पास request.body के अंदर जो भी data आ रहा है
34:18उसको मैं हाँ पास कर रहा हूं किसके अंदर अपने इस एरे के अंदर
34:21ठीक है इतना सा काम मैंने हाँ पर कर दिया कि जब मेरे पास कोई भी डेटा आ रहा है
34:26तो उसको मैं पास कर रहा हूं किसके अंदर इस एरे के अंदर अपन उसको पास कर रहे है
34:31कर देखता हूं की सहरे में झा रहा है या नहीं जा lamb हो और मेल मैं यहाँ पर मैंनी को सक्सेस्फ़ी सबमित और Here
34:41पर कुछ print होके नहीं आने वाला क्योंकि आपने सिर्फ उस एरे के अंदर उसको insert करवा रखा है अब बस अपन एक काम करते हैं और वह एक काम यह है कि यहां पर जो आपका app.jsx है यह जो आपका app.jsx है और इसके अंदर आपने form बना रखा है इसी form के अंदर मैं यहां पर यह
35:11यूजर डेटा नाम का मेरे पास यहां पर क्या है अपना एक बटन है यहां पर अपने को एक बटन दिखने वाला है शो यूजर डेटा नाम से अपने पास यहां पर एक बटन आ रहा है कोई दिक्कत नहीं है सीच के अंदर एक काम करो यहां पर बिया टैक लगा दो ताकि �
35:41पने से मतलब कैसे मैं यह बहाँ हो जोड़ा है तो आप यहां पर इसरे के बिलाओ और उस
36:03अर शेक्न करते हैं उस और उसे टेटा को पने बैक इंड के ऊपर को रवहैब सकते हैं तो
36:08तो मैं यहां पर एक काम करता हूँ, अपने API.js के उपर ही आता हूँ, और यहां पर अपने एक नई API बनाते है, router.get करके मैंने यहां पर बनाई, क्योंकि get की थुरूई आप चेक कर सकते हो, और मैं यहां पर करता हूँ, show data, show data नाम के अपने यहां पर sttp request बनाई, और अपन
36:38कर रहा है, वो है, तो यहां पर अपन एक नया controller बनाते है, जिसको मैं यहां पर कहा देता हूँ, const, और यहां पर अपन कहा देते है, show data controller, ठीक है, show data controller करके अपन यहां पर इसको create कर लेते हैं, मैंने show data controller करके यहां पर इसको create कर दिया, request है, और response है अपने पास, ठीक है, request है
37:08चलो बहुंत अच्छी बात है मैं यहां पर आता हूं गैट की रिक्वेस्ट बनाता हूं और कौनसा अपका
37:36यूरल है कौनसा स्टीर पर रिक्वेस्ट है शोड डेटा अगर आप शोड़ेटा पर हिट करवाऊगे तो आपके वह पास अभी के लिए ब्लैंक कार रहा है लेकिन आप इसके अंदर कोई भी डेटा इंसट कर आओऊ आप यहां पर इंसट करवाऊगे मैनी आपने बोला सब
38:06देवान्चू मैं नहीं थी सारा डेटा आ रहा है अब देखो में को यहाँ पर क्या काम करवाना है
38:12काम जो करवाना है वह समझ教े पर काम ये करवाना है कि जैसे ही मैं उस बटन पे क्लिक करूม
38:19किस button पे click करूँ जो मेरे पास यहां पर अपने front end पे यह मेरा जो button आ रहा है show user data वाला
38:27इस button पे click करते ही मेरा backend से उस array के अंदर से जिसमें data store करा रहा है वो data मेरे front end पे print हो जाना चीए
38:34तो सबसे first requirement यह है कि मेंको back end से उस data को ले के आना है
38:39जो मैंने यहाँ पर अपने form के submission पे insert करवाया था
38:42तो इस button के click पे ले के आना है data तो इस पे अपन क्या लगाएंगे अपना on click
38:47और on click के उपर अपने को क्या करना है अपना fetch लगाना है बस इतना सा काम करना है
38:51तो मैं यहाँ पर लगाता हूँ अपना on click on click पर अपने एक function बनाते है
39:06आपने अपना function बनाया function का नीम आपके पास यहाँ पर क्या है
39:12अब इस handle data function पर आप क्या करने वाले हूँ ? इस handle data function की उपर आप अपना fetch लगाने वाले हो
39:17और जो fetch में आपने back end के उपर जो आपने अपना URL बनाया है
39:21जिसमें आपका data आप हिट करवा रहे हो उस data को front end पे लेकिया हो
39:25कैसे आप यहाँ पर लगाओगे अपना fetch
39:28fetch के अंदर आप यहाँ पर अपना slash API prefix तो लगाने वाले हो
39:31साथ में आपने यहाँ पर back end पे क्या अपनी API बनाई है
39:34show data तो यहाँ पर आप लिखोगे अपना show data इसी के अंदर से आपका response आने वाला है
39:40और इस show data के अंदर आपने क्या response बेजा है
39:43इसके अंदर आपने अपना DB data बेजा है
39:46और उस डीवी data को आप यहाँ पर कैसे access करोगे
39:48dot then और dot catch के थूँ
39:50तो मैं यहाँ पर dot then करता हूँ
39:52और यहाँ पर dot then करके मैंने अपना response निकाला
39:55कि मेरे पास क्या response आ रहा है
39:56मैं यहाँ पर कहता है तो अपना response
39:58और उस response को आप यहाँ पर क्या कर दो return
40:00और आप यहाँ पर बो response.json
40:03ठीक है और next के अंदर आप यहाँ पर next then के अंदर आप अपना response निकाल लेते हो
40:07तो वही काम अपन यहाँ पर कर लेते हैं
40:09next then के अंदर आपन अपना result निकाल लेते हैं
40:11कि क्या रिजल्ट मेरे पास यहां पर आ रहा है तो मैं यहां पर रिजल्ट करके उसको निकाल लेता हूं और यहां पर अपन उसको करवा लेता है एक बार के लिए कंसोल के इसको अपने रिजल्ट को ठीक है तो चलो अपन यहां पर चेक करते कि मेरे पास जब मैं इस पर क्लि
40:41यहां पर restore है और आप इस उूइजर डेटा पर क्लिक करूँ तो आपका वो डेटा back end से आभी रहा है पहला काम मैंने back end में data बेच कराया उस एरे के अंदर दूसरा काम मैंने उसी एरे से उसी डेटा को यहां पर show यूजर डेटा बटन पर क्लिक करते ही फैच करके लेके भी �
41:11चला के आप करवा सकते हो कैसे करवा होगे एक यूज इस्टेट लोगे और इस ब्लॉक के अंदर से उसको बाहर निकालोगे उस डेटा को और उसके बाद आप उसके उपर मैप चला के प्रिंट करवा सकते हो करवाई देते हैं चलो अपन यहां पर एक यूज इस्टेट ले �
41:41अब अपन यहां पर क्या करेंगे जो अपना यहां पर result आ रहा है उसी के अंदर आपका data आ रहा है तो आप यहां पर किसको बलाओगे अपने set data को बलाओगे
41:49और अपने यहाँ पर जो आपका result के अंदर जो आपका array of object आ रहा है उसको आपने pass कर दिया
41:54तो वो किसके अंदर आ जाएगा आपने इस data के अंदर और इस data के उपर आप चला दो अपना loop
41:59ठीक है तो यहाँ पर अपन उसको print करा देते हैं मैं बोलता हूँ
42:02एक anodal list जिसके अंदर list item के अंदर अपने इसको print करवा देंगे
42:06कैसे करवाओगे यहाँ पर जो आपका data नाम का state variable है उसके उपर आप चलाओगे अपना map
42:12map इस तरीके से ही चला रहते हैं कि अपने इसके अंदर और यहाँ पर मैं कह देता हूँ अपने item यहाँ पर अपने पास आने वाले है और उसी को अपन यहाँ पर print करा देते हैं अपने anodal list के अंदर यहाँ से cut करो और यहाँ पर आके इसको paste कर दो ठीक है format कर लो एक बार document
42:42इस पर क्लिक करा तीन डेटा यहाँ पर बता रहा है आइटम में से डॉट करके यू कैपिटल है एंड कैपिटल है ठीक है तो आइटम में से डॉट करके आप क्या निकालने वाले हो आप बोलोगे item में से डॉट करके अपना user name यहाँ यहाँ पर आ जाना चाहिए मैं refresh करा �
43:12लोगे तो आपका वो डेटा यहां पर आ रहा है आपने यहाँ पर फिर से कोई data insert करा है जैसे मालूम मैं यहां पर कहतेता हूं कुछ भी कहता आप यहां पर जैसे
43:21आरियन ठीक है मैंने आरियन बोला मैंने submit करा है आप यहां पर बोलो कि वो आपका यहां पर data show हो रहा है
43:26तो पहला काम अपने data insert करवाने का करा है दूसरा काम अपने उसी data को fetch करके show कराने का काम करवा है
43:33तो अपने दो API अपनी यहाँ पर create करी
43:35post की और get की API
43:37यहाँ तक की चीज के लिए है तो एक बार comment करके
43:40बताओ कि yes sir
43:41यहाँ तक की चीज के लिए है
43:43ठीक है
43:49guess करें कि with course also
43:51can we connect front end and back end sir
43:53yes बिल्कुल अपन course को भी use करते है
43:55लेकिन जब अपन JWT
43:57यह सारी चीज यूज करते है तब अपन इसको use करते है
44:00अब भी उसकी requirement नहीं है
44:01अभी कोई security नहीं लगा रहे
44:03directly कर रहे है अपन काम तो मैं directly बता रहा हूँ
44:05जैसे अपन अभी कोई भी error handling भी नहीं कर रहे
44:08मैं catch का भी use नहीं कर रहा हूँ
44:09और अपन then और catch का use ना करके
44:11अपन अपना as synchronous function बना के यह काम करने वाले है
44:14तो अपन basic से चल रहे है
44:16ताकि आपको चीजे clear हो
44:18आपको पताओ कि अपने पास सारे तरीके है करने के हर एक चीज को
44:21इसलिए मैं सारी चीजे नहीं बता रहा
44:24बताओंगा सारी चीजे लेकिन शुरू में नहीं बता रहा
44:27ठीक है
44:27क्योंकि मेरा जो तरीका है वो यह है कि
44:31आप basic से सारी चीजे समझो
44:33और end तक बहुत अच्छे से उन चीजों को समझ सको
44:35ताकि interview में भी आप अटको नहीं
44:37और आपको clarity मिले हर चीज के अंदर
44:40ठीक है
44:40तो आब यह मैं सोचो कि मेरे को यह चीज पताओगी
44:44सर नहीं बताओगी मैं सब चीजे बताओगा
44:46आप बस याद दिला सकते हो कि
44:47सर यह चीज शायद आपने नहीं बताओगा
44:49ठीक है
44:51यहां तक की चेज़ के लिए रहे है आप सभी को
45:12अब देखो अपने यहां पर क्या किया
45:14फ्रेंट एंड से पहला काम अपने किया
45:17यहां पर गैट का दूसरा अपने पोस्ट का किया
45:20अब अपडेट और डेलीट वाली बात भी आती है
45:21जो आगे करने वाले है
45:23ठीक है तो अपडेट और डेलीट वाली चीज भी अपन करेंगे
45:26लेकिन वाली आज क्लास में नहीं करेंगे
45:28अपन उसको कवर करेंगे
45:30यह बाथ है complete CRUD operation
45:32अपन यहां पर देख रहे हैं अपने without database
45:35जैसे यह complete होता है
45:36फिर अपन database पर discuss करने वाले हैं
45:39फिर उसके बाद
45:40अपन database के complete होने के बाद
45:42अपन project पर discuss करने वाले हैं
45:44जैसे JWT की बाद आती हो project में ही cover होगा
45:47bycrypt
45:48यह सारी चीजे अपने पास
45:50जो सारी चीजे यह अपने
45:52project के अंदर cover होने वाली है
45:54तो project के अंदर बहुत सारी
45:56चीजे cover होगी जो शायद मैं आपको अभी नहीं
45:58बता रहा ठीक है
46:00तो कई चीजे project में cover होगी क्योंकि अपना project
46:02भी 20 days around चलने वाला है
46:0415 to 20 days
46:06तो उस project में सारी चीजे cover होगी
46:08तो जैसे JWT इनको अपन
46:11अलग-अलग हर एक topic को
46:12अलग-अलग नहीं देख सकते
46:13ऐसे बहुत lengthy course हो जाएगा अपना
46:16तो
46:16ठीक है
46:27इसी के साथ मैं आपको attendance के points भी बताता हूँ
46:31attendance का point 1 क्या है
46:32attendance के point 1 के अंदर आपको mention करना है proxy
46:35ठीक है
46:37यह आपकी attendance का point 1 है
46:39जिसके अंदर आपको mention करना है proxy
46:41attendance का point 1 है proxy
47:07इसी के साथ attendance का point 2 भी मैं आपको बताता हूँ
47:17attendance का point 2 क्या है
47:19attendance के point 2 के अंदर आपको mention करना है
47:23क्या अंदर आपको mention करना है क्या चीजे पड़ी है आज अपन ने
47:31आज अपन ने
47:33point 2 में आप mention कर देना आप ने
47:44wait a minute guys
47:58서�ver mention कर देना point 2 के अंदर
48:00point 2 के अंदर आपको server mention करना है
48:02first है proxy, point 2 है आपका server
48:07ठीक है
Recommended
2:55
0:16
0:55
52:09
48:57
Be the first to comment