#26: Connect React with NodeJS & MongoDB | Stored Registration Form Data in Database in MERN

Summary

In this video, Vinod Bahadur Thapa guides viewers on how to connect the frontend with the backend and database. Using React for the frontend, Node.js and Express for the backend, and MongoDB for the database, he demonstrates the complete process of sending data from a registration form on the frontend to the backend and storing it in the database. Thapa explains the setup and integration steps, addressing common issues like CORS policy errors. He emphasizes understanding the concepts thoroughly before trying them out. The video is crucial for those looking to learn full-stack development.

Takeaways

• 😀 The video is about connecting a front-end application to a back-end and database, using technologies like Node.js and MongoDB.
• 🛠️ The presenter has already created registration, login, and connection forms and stored the data in a state on the front-end.
• 🔗 The process involves sending data from the front-end to the back-end using a POST request, which was previously done using Postman but now is done through actual React.
• 📚 The data is stored in a database using a method like Mongoose for MongoDB, which is similar to the process used with Postman but integrated into the React application.
• 🔑 CORS (Cross-Origin Resource Sharing) policy is discussed, and the presenter explains the importance of configuring it correctly to allow requests from the front-end to the back-end.
• 📝 The video demonstrates how to handle the response from the server after submitting the registration form, including dealing with potential errors and displaying success messages.
• 🔄 The presenter guides through the process of restarting the server to apply changes and testing the connection between the front-end and back-end.
• 📡 The video mentions the use of middleware for handling CORS in Node.js, emphasizing the need to specify allowed origins and methods.
• 📝 The importance of setting the correct content type in the headers to 'application/json' is highlighted for the POST request to ensure the data is sent as JSON.
• 🔍 Debugging tips are provided, such as checking the browser console for errors and ensuring the server is running on the correct port.
• 🎯 The presenter encourages viewers to share their experiences in the comments, whether they successfully connected the front-end to the back-end or encountered any errors.

Q & A

What is the main topic of the video?

The main topic of the video is about connecting a registration form to a backend and database, demonstrating how to handle data flow between the frontend and backend.

What programming concepts are discussed in the video?

The video discusses concepts such as frontend and backend development, data handling, and database connectivity using technologies like Node.js and possibly MongoDB.

What is the purpose of the registration, login, and connect forms mentioned in the video?

The registration, login, and connect forms are used to collect user data and establish a connection between the frontend application and the backend server and database.

Why is CORS policy mentioned in the video?

CORS policy is mentioned to address issues related to cross-origin requests, which is a security feature that prevents unwanted requests from different origins to the server.

What does the video suggest to do when facing CORS policy issues?

The video suggests configuring the server to accept requests from specific origins, such as the frontend's origin, to bypass the CORS policy restrictions.

How does the video demonstrate the data flow from the frontend to the backend?

The video demonstrates the data flow by showing how data entered in the registration form is sent to the backend via POST requests and then stored in the database.

What is the significance of the term 'POSTMAN' mentioned in the video?

POSTMAN is a tool used for API testing. The video refers to it as a previous method for sending data to the backend, which is now being replaced by a direct frontend-to-backend connection.

What is the role of 'React' in the context of this video?

React is the frontend JavaScript library used to build the user interface of the application. The video discusses how to integrate React components with backend services.

How does the video address potential issues that may arise during the development process?

The video acknowledges that issues like CORS policy errors and database connectivity problems may occur and provides solutions to tackle these issues.

What is the final outcome the video aims to achieve?

The final outcome is a successfully connected frontend and backend system where user data from the registration form is stored in the database, and the user is navigated to the login form upon successful registration.

Outlines

00:00

😀 Introduction to Backend Connectivity

The speaker, Vinod, introduces the video's purpose, which is to guide viewers on how to connect their frontend with the backend and database. He mentions that registration, login, and connection forms have already been created and data is stored in state. The focus now is on transferring data from the frontend to the backend and storing it in the database. Vinod emphasizes the importance of the tutorial and requests viewers to share the series with friends.

05:02

🔧 Setting Up Backend Connectivity

This paragraph delves into the technical aspects of connecting the backend. The speaker explains the process of sending data to the backend using a URL and the POST method. He discusses the headers required for the request, specifically setting the 'Content-Type' to 'application/json', and how to structure the body of the request with JSON data. The explanation includes a step-by-step guide on how to send the data from the frontend to the backend server.

10:03

📝 Understanding Headers and Body in API Requests

The speaker clarifies the importance of headers and body in API requests. He instructs how to specify the type of data being sent in the body and the method being used, which is POST in this case. The paragraph also covers common mistakes people make when setting 'Content-Type' and 'application/json', highlighting the correct use of these terms. The focus is on ensuring that the data sent to the server is in the correct format and understandable by the server.

15:04

🚫 Addressing CORS Policy Issues

The speaker addresses Cross-Origin Resource Sharing (CORS) policy issues that arise when the frontend and backend are running on different domains or ports. He explains the concept of CORS and how it can block requests from origins that are not allowed by the server. The solution provided involves using the 'cors' npm package to allow specific origins and methods, ensuring that the frontend can communicate with the backend without being blocked by CORS policy.

20:06

🔄 Testing and Debugging Backend Connectivity

In this paragraph, the speaker discusses the process of testing and debugging the connection between the frontend and the backend. He talks about inspecting the console for errors or warnings, particularly focusing on CORS policy warnings. The speaker guides viewers on how to interpret the responses from the server and ensure that the data is being sent and received correctly. He also mentions checking the database to confirm that the data has been stored successfully.

25:28

🎯 Finalizing Backend Integration and Next Steps

The speaker concludes the tutorial by summarizing the steps taken to integrate the backend and highlights the successful connection between the frontend and the backend. He expresses excitement about the completion of the task and encourages viewers to try the steps themselves. The speaker also hints at future videos that will cover additional functionalities such as login features and further improvements to the application.

🗓 Planning for Future Enhancements and Conclusion

The final paragraph outlines the speaker's plans for future enhancements to the application. He mentions creating another video to highlight the importance of CORS policy and possibly other topics. The speaker also invites feedback from viewers regarding their experience in connecting the frontend to the backend. He concludes by expressing hope that the viewers enjoyed the video and looks forward to their interaction in the comments section.

Keywords

💡Backend

Backend refers to the server-side of an application, responsible for data storage, application logic, and server-side processing. In the video's context, the backend is being connected to the frontend, allowing for user data to be processed and stored in a database. For example, the script mentions 'Backend में नोड' and 'डेन डेटाबेस में, डेटा को स्टोर करना है', indicating the backend's role in handling data operations.

💡Frontend

Frontend pertains to the client-side of an application, which is what users interact with directly. It involves the user interface and user experience. The video discusses developing a frontend with React and connecting it to the backend. An example from the script is 'हम, एक्चुअल रिएक्ट में हमने जो हमारा फ्रंट, एंड डेवलप किया है यूजर इंटरफेस', highlighting the creation of a user interface using React.

💡Database

A database is a structured collection of data, managed by a Database Management System (DBMS), allowing for storage, retrieval, and manipulation of data. The script mentions using databases like MongoDB for storing user registration and login data. The video's theme involves showing how to connect a database with the backend and frontend, as seen in 'डेन डेटाबेस में, डेटा को स्टोर करना है'.

💡React

React is a popular JavaScript library used for building user interfaces, particularly single-page applications. It is maintained by Facebook and a community of individual developers and companies. The video script refers to developing a frontend with React, indicating its use for creating the user interface, as in 'एक्चुअल रिएक्ट में हमने जो हमारा फ्रंट, एंड डेवलप किया है'.

💡Node.js

Node.js is an open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside a web browser. It is used for server-side applications. The script mentions 'डेन एक्सप्रेस एंड फॉर डेटाबेस वी आर, यूज़िंग लाइक मंगो एंड देन मंगो', which implies the use of Node.js with Express for server-side operations and MongoDB for database interactions.

💡Express

Express is a minimal and flexible Node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications. It is used for creating the server in the video, as indicated by 'डेन एक्सप्रेस एंड फॉर डेटाबेस वी आर, यूज़िंग लाइक मंगो एंड देन मंगो', suggesting the use of Express with MongoDB.

💡MongoDB

MongoDB is a NoSQL database that stores data in a flexible, JSON-like format, making it easy to store and retrieve data. The script refers to using MongoDB for the database, as seen in 'डेन मंगो', indicating its role in the application's data storage.

💡Cors Policy

CORS (Cross-Origin Resource Sharing) policy is a security feature that restricts web applications from making requests to a domain different from the one that served the web page. The video discusses handling CORS policy issues with 'कॉर्स पॉलिसी', showing the importance of configuring it correctly to allow the frontend to communicate with the backend.

💡Registration Form

A registration form is a part of a user interface that allows users to sign up for a service or product. The video's theme involves connecting a registration form to the backend and database, as mentioned in 'कंप्लीट, रजिस्ट्रेशन फॉर्म को कैसे आप अपने बैक, एंड एंड देन डेटाबेस के साथ कनेक्ट कर, सकते हो', which is a key part of the tutorial.

💡API

API stands for Application Programming Interface, a set of rules and protocols for building and interacting with software applications. The script refers to using APIs for server communication, as in 'एपीआई फॉरवर्ड स्ल', indicating the use of APIs to forward requests to the server.

💡JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write and for machines to parse and generate. The video script mentions 'कंटेंट टाइप, ये डिटो', referring to setting the content type to JSON for data transmission between the frontend and backend.

Highlights

Introduction to the video, which is about connecting the front end with the back end and database.

The presenter, Vinod, discusses the development of the user interface and the registration form.

Explanation of the previous use of Postman for data filing and the transition to actual React for front-end development.

Demonstration of storing data in the state and passing it to the back end.

The process of sending data to the back end and storing it in the database is shown.

Mention of issues and solutions related to CORS policy when connecting the front end to the back end.

A detailed walkthrough of the code needed to connect the registration form to the back end and database.

The presenter guides on how to handle data submission from the user interface to the server.

Discussion on the similarities between the previous process using Postman and the current React implementation.

Explanation of the use of environmental variables and API routes in the back end.

The presenter shows how to use methods like POST with a URL to send data to the server.

Details on setting up headers in the request to specify the content type as JSON.

A step-by-step guide on converting the user data into JSON format for sending to the server.

The importance of handling the response from the server after data submission is emphasized.

The presenter discusses the use of a CORS package to handle cross-origin requests.

Final demonstration of a successful registration process with data being sent to and stored in the database.

The video concludes with the presenter expressing excitement about the successful connection between the front end and back end.

Transcripts

हेलो व्हाट्स अप गाइ माय नेम इज विनोद

बहादुर थापा एंड फाइनली फाइनली फाइनली आज

जो वीडियो आ चुका है जिसका बे सबी से

इंतजार कर रहे थे एंड दैट इज हाउ टू

कनेक्ट योर फ्रंट एंड विद योर बैक एंड एंड

डेटाबेस जी हां गाइज तो फ्रंट एंड में हम

रिएक्ट यूज़ कर रहे थे बैक एंड में नोड

एंड देन एक्सप्रेस एंड फॉर डेटाबेस वी आर

यूजिंग लाइक मंगो एंड देन मंगो दोनों

हालांकि सभी एक जैसे ही है बट फाइनली वो

बारी आ गई है हमने रजिस्ट्रेशन लॉगइन एंड

कांटेक्ट फॉर्म ऑलरेडी क्रिएट कर चुका है

तीनों का जो डाटा है हमने स्टेट पे स्टोर

करके रख चुका है तो बस करना यह है पहले जो

मैं पोस्टमैन में डटा फिल करके बैक एंड को

पास कर रहा था अब इंस्टेड ऑफ पोस्टमैन हम

एक्चुअल रिएक्ट में हमने जो हमारा फ्रंट

एंड डेवलप किया है यूजर इंटरफेस एंड उसमें

जो हमारा एक्चुअल रजिस्ट्रेशन फॉर्म का

डाटा लॉगइन फॉर्म का डाटा कांटेक्ट फॉर्म

का डाटा उसको अब हमें बेसिकली बैक एंड में

डाटा पास करना है एंड देन डेटाबेस में

डेटा को स्टोर करना है तो गाइज फाइनली आज

इस वीडियो में मैं आपको कंप्लीट

रजिस्ट्रेशन फॉर्म को कैसे आप अपने बैक

एंड एंड देन डेटाबेस के साथ कनेक्ट कर

सकते हो एंड जब भी कोई यूजर हमारे

एप्लीकेशन पे डेटा फिल करेगा तो पहले जो

हमने सिर्फ स्टेट पे स्टोर करके रखा था अब

हम उस डाटा को एक्चुअल में हमारा डेटाबेस

पे स्टोर करके मैं आपको दिखाने वाला हूं

बहुत ज्यादा मजा आएगा कोर्स इशू एंड बहुत

कुछ इशू आने वाला है तो मैं सब दिखाऊंगा

कि आप उसको कैसे टैकल कर सकते हो सो या

गाइस बिना किसी देर के अब हम वीडियो को

स्टार्ट करते हैं लेकिन उससे पहले उससे

पहले गाइस बहुत मेहनत लगती है इस कोर्स को

बनाने में तो मैं चाहता हूं मैंने अभी तक

किसी भी वीडियो में बोला नहीं लेकिन प्लीज

मैं चाहूंगा कि आप इस सीरीज को अपने

दोस्तों के साथ शेयर कीजिएगा इवन बेस्ट मन

सीरीज है आपको जो मन हो मन सीरीज भाई थापा

बोलके आप

टैग कर सकते हो अपनी स्टोरी में आप मुझे

शेयर कर सकते हो आई मीन सीरीज को शेयर कर

सकते हो एंड आप मुझे टैग कर सकते हो मैं

वो अपने

[संगीत]

अगेन आज का वीडियो बहुत ही ज्यादा

इंपोर्टेंट होने वाला है क्योंकि फाइनली

रि कॉ हमारा जो बैक एंड एंड देन जो

डेटाबेस है उसके साथ आज हम कनेक्ट करने जा

रहे हैं ठीक है तो उसके लिए आज हम क्या

करने वाले हैं गाइज आप देख सकते हो हमने

रजिस्ट्रेशन लॉगइन सारे पेजेस हम ऑलरेडी

क्रिएट कर चुके हैं इवन यूजर यहां पे जो

भी डाटा फिल करता है अब मैं आपको दिखाता

हूं आज का वीडियो गाइस आप एकदम आराम से

एकदम चिल होके देखिएगा क्योंकि बहुत

इंपॉर्टेंट है मैं ये भी नहीं बोलता कि आज

आप मेरे साथ-साथ ट्राई करो नहीं आज आप इस

वीडियो को एकदम अच्छे से एंड तक देखिए

फंडा समझिए कि क्या हो होता है कैसे हम

बैक एंड को बेसिकली फ्रंट एंड को बैक एंड

से कनेक्ट कर सकते हैं एंड डाटा जो है वो

डेटाबेस में स्टोर करा सकते हैं एक बार

आपको आईडिया आ गया देन आप गाइस ये जो लॉग

इन है देन ये जो कांटेक्ट वाला है ये सब

कुछ आप खुद से य चुटकी में कर दोगे बस

थोड़ा आपको प्रैक्टिस करना पड़ेगा ठीक है

तो ध्यान से देखिएगा दिस इज आवर

रजिस्ट्रेशन फॉर्म है ना मैं यहां पे नाम

रख देता हूं अपना विनोद चलो ठीक है एक

सेकंड यहां पे रखने की भी जरूरत नहीं मैं

अगर यहां पे कंपोनेंट्स प चलता हूं एंड आप

देख सकते हैं वी हैव अ रजिस्टर रजिस्टर प

मैंने क्लिक की तो यह कुछ आपको इस तरीके

से दिखाई दे रहा है सो यहां पे मुझे विनोद

दिखाई दे रहा है है ना सो हेयर इज अ विनोद

एंड देन पासवर्ड पे मैं कुछ भी लिख देता

हूं तो आप एक चीज देख रहे हो गाइस यहां पे

क्या हो रहा है यहां पे ये जो भी डाटा

मैंने लिखा ऑलरेडी मुझे मेरे स्टेट पे

बेसिकली फ्रंट एंड में तो मैंने स्टोर

करके रखा ही है सिर्फ इतना ही नहीं अब अगर

मैं कंसोल पे चलता हूं इन सब को मैं हटाता

हूं द मोमेंट मैं रजिस्टर नाउ पे क्लिक

करूंगा एंड बूम गाइस सी ये देखिए सारा

डाटा मुझे मिल रहा है मुझे कोई टेंशन नहीं

बस इस डाटा को मुझे मेरे बैक एंड में

भेजना है एंड देन डेटाबेस में उसको मुझे

स्टोर कराना है अब आप ध्यान से देखना यह

वही डाटा है जब मैंने स्टार्टिंग में इफ

यू रिमेंबर आप देख सकते हो पोस्टमैन में

जिस तरीके से मैंने जो डाटा लिखा था एंड

यहां पे सेम डाटा तो मुझे मिल ही गया है

बस अब मुझे जो मैं पोस्टमैन के थ्रू

डेटाबेस पे स्टोर्ड कर रहा था अब वही

रजिस्ट्रेशन फॉर्म जो एक्चुअल हमारा

वेबसाइट है जो इन रियलिटी यू नो हम ऐसे ही

करते हैं तो डाटा तो मैंने गेट कर चुका है

इसको बस मुझे यहां पे स्टोर करना है तो

उसके लिए हमें क्या कोड लिखना पड़ेगा वह

आप एकदम ध्यान से देखिएगा एंड बिलीव मी यह

सच में अगर आप अच्छे से देखते हो समझते हो

तो आपको बहुत इजी लगने वाला है क्योंकि जो

आज मैं करने जा रहा हूं वो ऑलरेडी हम

पोस्टमैन के साथ कर चुके हैं ठीक है मैं

आपको बताता हूं देखो कितनी सिमिलरिटी है

तो ध्यान से देखना गाइ सबसे पहले सो हियर

वी हैव अ डेटाबेस मैं चलता हूं यहां पे

ब्राउज कलेक्शन पे एंड अगर मैं ब्राउज

कलेक्शन पे चलता हूं सो हियर वी हैव दिस

एडमिन आई थिंक अ एक सेकंड हां गाइस मैं

जल्दी से चेक आउट कर लेता हूं कि अभी देखो

कंफ्यूजन हो सकता है इतने सारे भरे पड़े

हैं यहां पे डेटाबेस तो मैं चलता हूं मेरे

डब पे क्योंकि यहां पे आप बहुत क्लीयरली

देख सकते हो दैट इज कि अ मन अंडर एडमिन

मेरा डेटाबेस का नाम है ठीक है मुझे

आईडिया आ गया कि मन अस्को एडमिन मेरा

डेटाबेस का नाम है एंड देन वी हैव दिस

यूजर यूजर पे अगर मैं चलता हूं तो हमने

ऑलरेडी पोस्टमन के थ्रू ये सबको इंस्टॉल

किया था देखो एक सेकंड आपको दिख रहा है या

नहीं है चलो ठीक है यहां पे देख सकते हैं

यूजर नेम ईमेल फोन एंड देन पासवर्ड एंड इ

एडमिन का तो बाद में देख लेंगे तो यह सब

कुछ हम ऑलरेडी कर चुके हैं तो ध्यान से

देखना अब जब आप पोस्टमैन के थ्रू शेयर

करते हो गाइस तब हम क्या करते हैं सबसे

पहले वी नीड अ यूआरएल हम एक मेथड यूज़

करते हैं दैट इज योर पोस्ट उसमें हम एक

यूआरएल पास करते हैं हमारे बैक एंड के लिए

एंड यह वही यूआरएल है बेसिकली यह वो रूट

है जिसको अगर आप ध्यान से देखोगे ड्यूरिंग

आवर लाइक बैक एंड वाला पार्ट जब हम कर रहे

थे तो यहां पे आप देखना दिस इज इट एआई हान

ऑथ जब भी कोई इस पे जाएगा तो वो ऑथ रूट पे

जाएगा समझ रहे हो ऑथ रूट यहां पे है रहा

इस जगह पे तो ऑथ रूट पे एपीआई फॉरवर्ड स्ल

यहां पे देखिए ना एपीआई फॉरवर्ड स् ऑथ

फॉरवर्ड स् रजिस्टर जब वो करेगा हेयर वी

हैव दिस रूट समझ रहे हो तब वो हमारे

कंट्रोलर पे चला जाएगा बेसिकली रजिस्टर पे

डेटा चला जाएगा तो मुझे इस रूट पे डाटा को

सेंड करना है ठीक है एंड वो डेटा के लिए

मुझे क्या-क्या चाहिए वो डेटा मैं कैसे

शेयर करूंगा ये बात मेथड पोस्ट यूआरएल

मुझे ये चाहिए अब डाटा मैं जो ये सेंड

करना चाहता हूं जो कि मेरे पास ऑलरेडी

अवेलेबल है इसको मैं सेंड कैसे कर सकता

हूं देखो याद है मैंने हेडर्स पे गया था

वी हैव दिस प्रॉपर्टी कॉल्ड हेडर्स जिसमें

हमें बताना पड़ता है कि मैं जो डाटा भेज

रहा हूं वो एक जेसन फाइल है तो कंटेंट का

जो मेरा टाइप है कंटेंट

youtube1 आपको लिखना जरूरी देखा पोस्टमैन

में जो ऑलरेडी था वही हमें करना है हेडर्स

में कंटेंट हा टाइप मुझे बताना है मेथड

पोस्ट और यह यूआरएल मुझे पास कर देना है

एंड देन वी हैव दिस बॉडी तो बॉडी में मुझे

यह डाटा पास करना है दिस इज इट गाइस बस जो

मैं पोस्टमैन के थ्रू कर रहा था अब यह मैं

फ्रंट एंड के थ्रू करने वाला हूं मैंने

बिना लाइक फ्रंट एंड स्टार्ट किए बिना ही

यह आपको बताया क्योंकि अब आप देखना कि

जिसने भी पोस्टमैन किया था हेडर्स

बॉडी मेथड पोस्ट एंड देन दिस यूआरएल दिस

इज इट बस इतना ही आप मुझे फ्रंट एंड के

साथ करना है सो दिस इज अ मं 2023 ठीक है

आप देख सकते हो है ना मैं यहां पे चलता

हूं सो इसको मैं हटा रहा हूं मैं एक काम

करता हूं मैं बेसिकली यहां पे चलता हूं

मेरे ओपन एडिटर जितने भी है सबको मैं हटा

रहा हूं डायरेक्टली मुझे चलना होगा मेरे

रजिस्टर . जए एक फाइल पे ठीक है ये देखो

ये वो पार्ट है जब भी यूजर फॉर्म को सबमिट

करता है तो मैं ये फंक्शन कॉल कर रहा था

एंड जितने भी मेरे डाटा है वो ऑलरेडी इस

यूजर स्टेट वेरिएबल का अंदर ऑलरेडी है तो

गाइस इ अगर आपको अभी तक प्रीवियस वीडियो

को चेक आउट नहीं नहीं किया है या आपको

अच्छे से आईडिया है तो प्लीज चेक आउट कर

लीजिएगा ठीक है तो ध्यान से देखिएगा ध्यान

से देखिए बहुत ही ज्यादा सिंपल है ध्यान

से देखना मुझे एक यूआरएल लगेगा विथ मेथड

पोस्ट विथ हेडर्स कंटेंट टाइप इक्वल टू

एप्लीकेशन प्रोड स् जेसन बॉडी विथ द जेसन

डाटा दिस इज इट बस यही मैं अब यहां पे

करूंगा ध्यान से देखना कैसे करूंगा सो वी

हैव अ कंस्ट लेट्स सेट ओबवियसली हमें वो

रिस्पांस तो देगा राइट जब भी आप यहां पे

भी अगर इसको अगर मैं क्लिक कर देता हूं तो

मुझे अभी डाटा नहीं नहीं दिखा रहा है

क्यों क्योंकि मैंने अभी तक यहां पे मेरा

जो सर्वर है उसको आई मीन क्या बोलते हैं

आप रीस्टार्ट नहीं किया है ठीक है सो मैं

यहां पे चलता हूं मैं सर्वर जो है उसको

मैं रीस्टार्ट कर देता हूं सो इट्स अ सीडी

सर्वर पहले तो मुझे अंदर जाना पड़ेगा एंड

देन नोड मन ठीक है नोड मन एक सेकंड यह नोड

एंड देन मन सर्वर ड जए तो ये 5000 में रन

कर रहा है ठीक है कोई प्रॉब्लम नहीं एकदम

परफेक्ट हो चुका है ये एंड मैं कंट्रोल ए

सेव कर देता हूं इसको एज इट इज थोड़ी देर

के लिए कमेंट में एक बार यहां चलके फिर से

मैं सेंड करना चाहूंगा एंड बूम गाइस सी आप

देखिए मुझे इस तरीके से ये जो तीनों पार्ट

आपको दिख रहा है मैसेज टोकन यूजर आईडी ये

मुझे एज अ रिस्पांस मिल रहा है दिस इज

व्हाई मैंने यह आपको बताया मैंने कहा ना

आज इस वीडियो को आराम से भाई 15 मिनट 20

मिनट ज्यादा से ज्यादा लगेगा लेकिन वंस

आपको पता चल गया लाइफ टाइम आप फ्री हो

जाओगे जो एक सता रहा था कि फ्रंट एंड को

बैक एंड से कैसे कनेक्ट करना है तो आपको

पता चल गया रिस्पांस में मुझे यह तीन

चीजें मिल रही है सबसे पहले दिस यूआरएल तो

यूआरएल हम कैसे पास करते हैं गाइज

ओबवियसली यू कैन यूज इधर अ फैच और एक्स या

और भी चीजें है कर सकते हो लेट्स गो विद

फैच सबसे ज्यादा इजी ठीक है यहां पे क्या

करना है ये देखो कुछ नहीं करना है इसको

कॉपी करो यहां पे पेस्ट कर दो खत्म यही

करना था अब ध्यान से देखना यह फैच के अंदर

ही कॉमा आपको एक बेसिकली ऑब्जेक्ट पास

करना पड़ेगा एज अ ऑप्शनल डाटा ऑप्शनल मतलब

अब जिसमें बताना पड़ेगा यह जो आप यूआरएल

पास कर रहे हो इसका मेथड क्या है गेट करते

मतलब आप डाटा ले रहे हो लेकिन मैं डाटा ले

नहीं रहा हूं मैं डाटा दे रहा हूं सो इट्स

अ पोस्ट तो मेथड पोस्ट ठीक है आप देख रहे

हो ना ये मैं जानबूझ के पोस्टमैन से रिलेट

कर रहा हूं ताकि आपको नेक्स्ट टाइम पता चल

जाए अच्छा यार पोस्टमैन मतलब फ्रंट एंड ही

है इसलिए जब मैंने फर्स्ट टाइम पोस्टमैन

बताया मैंने कहा था कि रिएक्ट में भी हम

यही करेंगे सो इट्स अ मेथड आप देख सकते हो

ऑटोमेटिक सजेशन आता है इट्स अ मेथड एंड

आपको यहां यहां पे इस तरीके से पोस्ट लिख

देना है एंड ओबवियसली ये क्या है गाइस

आपका ये एक ऑब्जेक्ट है राइट तो आपको

इक्वल टू नहीं आपको कॉलन लिखना पड़ेगा एक

कॉमा दे दीजिए ठीक है देन सेकंड क्या है

सेकंड है आपका हेडर्स हेडर्स में आपको

बताना पड़ेगा जो डाटा हम पास कर रहे बॉडी

में वो क्या है किस टाइप का है वो

ओबवियसली इट्स योर जेसन तो ये कंटेंट टाइप

ये डिटो डिटो गाइस डिटो यहां पे मैं चलता

हूं हेडर्स इक्वल टू देख रहे हो आप एकदम

हेडर्स अगेन आपको ये डायरेक्टली आप दोदो

डाटा एक साथ तो लिख नहीं सकते ना तो आपको

अगेन एक ऑब्जेक्ट बनाना पड़ेगा उसके अंदर

यह जो यहां पे लिखा है इसको करो आप कॉपी

हालांकि मैं डायरेक्टली टाइप कर देता हूं

एंड बहुत सभी लोग एक मिस्टेक करेंगे यहां

पे दैट इज कंटेंट या तो अंडरस्कोर टाइप कर

देंगे या तो सी स्मल में t स्मल में लिख

देंगे बट ध्यान से देखिए ध्यान से देखिए

यहां पे मैं दिखा देता हूं मैं एकदम आपका

पूरा एक एक सेकंड गाइस मैं यहां पे ना

आपको दिखा देता हूं एक बार ध्यान से देखिए

क्या लिखा है c कैपिटल है ये जो c है वो

कैपिटल है इवन t इज आल्सो कैपिटल एंड बीच

में हाइन है ना कि एक अंडरस्कोर है तो यह

कभी मत भूलना मेरे साथ बहुत बार ऐसा हुआ

कि गाइस मैंने या तो इसको हाइन कर दिया है

तो या t स्मल लिखा या तो c स्मल लिखा मैं

सोचता रहता हूं भाई हो क्या रहा है यहां

पे ये बट जब आप हजार बार प्रैक्टिस करोगे

तो आपको आइडिया आ ही जाएगा कि ये सी

कैपिटल है यहां पे कांटेक्ट देखो मे

कांटेक्ट बोलो इट्स अ कंटेंट हान एंड देन

टाइप ठीक है बस दिस इज इट एंड यहां पे

ओबवियसली आपको यही लिखना पड़ेगा एप्लीकेशन

फॉरव स् जसन सो एप्लीकेशन फॉरव स् जेसन

सिंपल अब सिर्फ एक चीज बचा ना सिर्फ एक

चीज बचा दैट इज योर बॉडी एंड सिर्फ बॉडी

में हमने ये नहीं किया था सिर्फ बॉडी में

मैंने डाटा पास नहीं किया था एक और बहुत

इंपॉर्टेंट चीज है जो मोस्टली लोग भूल

जाते हैं शायद अगर वो डिफॉल्ट नहीं होता

है तो यहां पे ध्यान से देखिए बॉडी में वी

हैव दिस पार्ट आल्सो ये देख रहे हो गाइस

एक सेकंड मैं इसको दिखाता हूं आपको वंस

अगेन यहां पे ध्यान से देखिए ये जो पार्ट

आपको दिख रहा है तो आपको जस्ट एकदम मेक

श्यर करना है कि ये वाला जो पार्ट है तो

बॉडी जो है वह क्या है जेसन फॉर्मेट में

है समझ रहे हो यह आप में से बहुतों ने कभी

ध्यान दिया या नहीं पोस्टमैन में लेकिन ये

बहुत इंपॉर्टेंट है कि यह पोस्टमैन है

एल्स बहुतों का टेक्स्ट या बहुतों का

जावास्क्रिप्ट रहता है तो कभी काम ही नहीं

करेगा देखो ना इस तरीके से एरर आ जाएगा

एल्स समझ रहे हो सो इट्स अ जेसन बॉडी में

मुझे जेसन डाटा पास करना है जिसमें ये

सारी वैल्यूज होंगे जो मुझे पास करना है

ध्यान से देखना अ यहां पे यह जो पार्ट है

यहां हो रहा है इसी के अंदर मैं चलूंगा

इट्स अ बॉडी बॉडी सॉरी ठीक है तो मैं यहां

पे चलूंगा अब यहां पे बस आपको क्या लिखना

है जेसन डेटा है एंड ओबवियसली मेरे पास ये

जो डाटा है इफ यू रिमेंबर मैंने ये जो

डाटा एक सेकंड चला गया डाटा आई होप या

परफेक्ट तो ये जो डाटा आपको दिख रहा है

गाइस ये देखो ना ये आपका एक ऑब्जेक्ट है

बट हमें यहां पे क्या डाटा पास करना है

जेसन सो सिंपल वी नीड टू कन्वर्ट जेसन

इनटू अ आई मीन सॉरी ऑब्जेक्ट इनटू जसन सो

यहां पे आपको गाइज सिंपल जसन डॉट वी हैव

दिस स्ट्रिंग इफाई मेथड

एंड सारा डाटा तो मेरे पास ऑलरेडी है इन

आवर यूजर य वही तो यह वही तो डाटा है यूजर

जो मैं पास कर रहा था वो मुझे यहां पर पास

कर देना है खत्म यही है गाइस जो हमने

पोस्टमैन में किया था सेम वो मुझे अब मेरे

फ्रंट एंड में करना है आई होप अब आपको पता

चल गया होगा जब मैंने ये वीडियो बनाई थी

यहां पे मैं चलता हूं मैं दिखाता हूं जब

मैं लाइक स्टार्टिंग में मैंने देखो ये

देखो यूजर रजिस्ट्रेशन विद पोस्टमैन जब

मैंने यह वीडियो बनाया था तब मैंने आपको

क्लियर कट कहा था भाई इस वीडियो को एक बार

आप समझ जाओ आपको पता चल जाएगा कि आप

रिएक्ट में ही काम कर रहे हो बस इंस्टेड

ऑफ रिएक्ट हम वो पोस्टमन यूज कर रहे थे तब

आपको पता चल गया सो ये जो रिस्पांस है अब

एक चीज याद रखना ये जो फैच है ये ओबवियसली

आपको प्रॉमिस रिटर्न करता है सो प्रॉमिस

को हैंडल करने के लिए इदर यू कैन यूज द अ

डॉट देन या डॉट देन वही जो नॉर्मल प्रॉमिस

है एल्स उसको भी और इजी करने के लिए वी

हैव अ ए सिंक अवेट ठीक है सो इट्स अ ए

सिंक अवेट या दिस इज इट अभी ये रिस्पांस

में मुझे बता रहा है कि आपने इसको कभी यूज

नहीं कि तो ठीक है ना यूज़ कर लेते हैं ये

पार्ट ओवर हियर यहां पर मैं चलता हूं ठीक

है कंसोल डॉट लॉग करके दिखाता हूं कि मुझे

रिस्पांस में क्या मिल रहा हालाकि मैं

आपको ऑलरेडी दिखा चुका हूं हमें रिस्पांस

में क्या मिलता है ठीक है दिस इज इट मैं

यहां प चल रहा हां रिस्पांस में एटली मुझे

वो डाटा फिलहाल अभी नहीं मिलेगा क्योंकि

हमें उसको कन्वर्ट करना पड़ेगा अगेन बट इस

तरीके से मैंने कर दिया ठीक है एंड एक काम

हम कर सकते हैं यहां पे ट इ इसी के नीचे

में चलके इसको मैं ट्राई एंड देन कैच के

अंदर रख देता हूं ठीक है क्योंकि जो मेन

था आपको बताना आई होप आपको वो तो पता चल

ही गया तो क्या टेंशन है अब है ना कोई

टेंशन कसोल डलॉग यहां पे चलता हूं एंड देन

एरर एंड एक काम करता हूं मैं यहां पे कॉमा

देखके कि पता तो चले रजिस्टर बोलके कि

रजिस्टर से आ रहा है अगर कुछ होता है तो

दिस इज इट ठीक है यह मेरा काम हो गया मैं

कंट्रोल ए सेव कर रहा हूं मैं अब यहां पर

चलता

हूं इसको मैं एक बार रिफ्रेश करना चाहूंगा

ऑलराइट सो गाइस मैं यूजर नेम लिख देता हूं

विनोद यहां पर मैं ईमेल लिख देता हूं

टेस्ट 1 2 3 एंड पासवर्ड पे गाइस मैं कुछ

भी लिख देता हूं ठीक है इस तरीके से एंड

मैं अब रजिस्टर नाउ पे क्लिक करता हूं एंड

बूम गाइस सी ऑलराइट गाइस तो फाइनली आप

यहां पे देख सकते हो कि हमें कोर्स पॉलिसी

का जो एरर है वो हमें आ गया जो कि बहुत ही

ज्यादा ऑसम है एंड मैं इसी का ही वेट कर

रहा था द मोमेंट आपको कर्स पॉलिसी का एरर

आता है इसका सिंपल मतलब ये है कि हमारा जो

फ्रंट एंड है वो बैक एंड से कनेक्ट हो

चुका है इट जस्ट सर्वर को ये आईडिया नहीं

आ रहा कि तो गाइस यहां पे आप बहुत क्लियर

देख सकते हो कि हमारा ये जो बेसिकली अ

सर्वर है यहां पे देखिए ध्यान से वो किस

पे रन कर रहा है वो 5000 पे रन कर रहा है

वहीं अगर आप देखते हो हमारा यह जो फ्रंट

एंड है वो कहां रन कर रहा है वो गाइस रन

कर रहा है

5173 पे तो अब यहां पे कर्स पॉलिसी का

सिंपल मतलब बस इतना ही है कि यह जो एक

फीचर है यह गाइस वेब ब्राउजर जो कि जितने

भी वेब ब्राउजर है उन्होंने इंप्लीमेंट की

है ताकि जो भी ऐसे अनवांटेड जो रिक्वेस्ट

है उनको वो ब्लॉक कर सके बस कॉर्स पॉलिसी

का सिंपल फंडा यह है कि सर्वर जिस पोर्ट

पे या जिस डोमेन पे रन कर रहा है आपका

फ्रंट एंड भी उसी डोमेन पे ही रन करना

पड़ेगा एंड ड्यूरिंग अ प्रोडक्शन गाइस कभी

कोर्स पॉलिसी का वार्निंग नहीं आता

क्योंकि जैसे मेरा ये फ्रंट एंड है लाइक

ये थाप अ टेक्निकल ॉट शॉ है इसमें क्या हो

रहा है ना मेरा ये जो बैक एंड है एंड देन

मेरा ये जो फ्रंट एंड है दोनों मैंने सेम

वीपीएस मेरा जो वीपीएस सर्वर है वो दोनों

उसी पे ही रन कर रहा है तो हमें कभी

प्रोडक्शन में कॉर्स पॉलिसी नहीं आने वाला

आई मीन मोस्ट ऑफ द केस नहीं आएगा क्योंकि

दोनों सेम डोमेन पे है बट हमारे ब्राउजर

के केस में हमारा ये जो डेटाबेस है वो

5000 पे रन कर रहा है एंड यहां पे बता भी

रहा है कि यह जो फ्रॉम ओरिजिन है लोकल

होस्ट 5173 हैज बीन ब्लॉक्ड बाय द कॉर्स

पॉलिसी देखो ना 5173 हैज बीन ब्लॉक्ड बाय

द कोर्स पॉलिसी तो बस अब हमें करना यह

होगा कि हमें हमारे सर्वर को बताना प

पड़ेगा कि अगर 5173 इस पोर्ट नंबर से अगर

कुछ भी रिक्वेस्ट आता है व हमारी ही

फैमिली का हिस्सा है आप बैक एंड हो तो वह

हमारा फ्रंट एंड जो दुनिया को दिख रहा है

तो आप उसको रिस्ट्रिक्टिव अगर कुछ आ गया

तो उसको रिस्ट्रिक्टर दीजिएगा हमें अब वो

अ कहते हैं ना वो जो एक्सेस है वो देना

पड़ेगा अब हमारे सर्वर को बताते हुए कि

5173 हमारा ही एक पार्ट है फ्रंट एंड का

बोलके बस उतना ही करना है दोनों डिफरेंट

डोमेन पे रन कर रहे हैं इसलिए कर्स पॉलिसी

आ गया सो गाइज देखिए बहुत ही ज्यादा इजी

है सिंपली आपको कॉर्स यहां पे एंटर करना

पड़ेगा सो गाइज अब वो जो कर्स पॉलिसी था

उसको हम टैकल कर लेते हैं वो भी बहुत

ज्यादा इज है सो आपको कर्स आप देख सकते हो

व हैव दिस एनपीएम पैकेज ठीक है एक कॉर्स

एक एनपीएन पैकेज है हमारे पास ऑलरेडी है

आप देख सकते हो वीकली डाउनलोड्स 10 मिलियन

बहुत ही ज्यादा है ये आपको सिंपली इसको

इंस्टॉल करना है ठीक है तो यहां पे आपको

देखो उसको गेट करना होगा एंड प डॉट यूज एज

अ मिडिल वेयर आपको इसको यूज करना है

दैट्ची होगा लेकिन यहां पे एक और चीज हमें

लगेगा मैं आपको बताता हूं दैट इज कोर्स

ऑप्शन तो यही बस हमें करना है और कुछ नहीं

हमें बताना होगा हमारे सर्वर को कि जो

ओरिजिन है जो मेरा रिएक्ट का ओरिजिन है वो

5173 से अगर रिक्वेस्ट आ रहा है अगर

ओरिजिन वो रहेगा तब आप उसको एक्सेस दे

दीजिए कोई प्रॉब्लम नहीं है वो अपना ही

रिएक्ट पार्ट है वो अपना ही छोटा भाई है

अपना ही फ्रंट एंड है जो जो दुनिया को दिख

रहा है है ना तो इसको मैं कॉपी कर लेता

हूं ऑलराइट इसको मैंने कॉपी कर लिया होप

आपको एटलीस्ट कोर्स पॉलिसी का तो आईडिया आ

गया है ना कि दोनों अगर डिफरेंट डोमेन पे

रन कर रहा ह तो आना ही आना है सर्वर पे

आइए एंड मेक श्यर सॉरी ओई नॉट हियर

टर्मिनल आपको ओपन करना

होगा आपको सर्वर के अंदर आना है टर्मिनल

ओपन करने के बाद एंड यहां पे आपको इसको

इंस्टॉल करना है एंड मेक श्यर आप सर्वर के

अंदर हो ना कि क्लाइंट के अंदर क्लाइंट

आपका फ्रंट एंड वाला पार्ट है कोर्स हमें

लगेगा सर्वर में ठीक है दिस इज इट मेरा ये

काम हो गया है इसको मैं कर देता हूं नम

server.js 5000 में रन कर रहा परफेक्ट चलो

ठीक है अच्छी बात है सो गाइस इंस्टॉल तो

हो गई है जस्ट पैकेज जसन फाइल प आके आप एक

बार देख लीजिए कि कोर्स प्रॉपर्ली इंस्टॉल

हुआ या नहीं दिस इज इट ठीक है आप बहुत ही

ज्यादा इजी है सिंपल आपको सबसे पहले तो

इसको इंक्लूड करना पड़ेगा यू नो सो लेट्स

डू इट मैं यहां पर चलता हूं कंस्ट आपको

कोर्स लिखना पड़ेगा एंड देन यू नीड टू

रिक्वायर योर

कोर्स तो यहां पर हम चलते हैं एंड आपको यह

जो कोर्स है उसको इस तरीके से से गेट करना

पड़ेगा अब यह जो कोर्स है इसको एज अ मिडिल

वेयर गाइस अब आपको यूज़ करना है सिंपल हां

तो ये जो पार्ट दिखाई दे रहा है गाइस जेसन

क्योंकि ओबवियसली डाटा गेट करने से पहले

ही हमें वो एक्सेस तो देना पड़ेगा यह तो

बाद की बात है जब वो डाटा मिलके हम उसको

बता रहे कि आप जसन यूज़ कर सकते हो लेकिन

उससे पहले एक्सेस तो मिल जाए तो इसलिए

इसके ऊपर मैं चलता हूं यहां पे मैं लिख

देता हूं अ लेट्स टैकल

कोर्स कुछ भी लिख सकते हो या हैंडलिंग

कोर्स पॉलिसी इशू यह भी आप लिख सकते थे

यहां पे मैं लिख देता हूं ए डॉट यूज अभी

मिडिल वेर जहां पे मैं बोल देता

हूं सिंपल कोर्स दिस इज इट बस अब आप इतना

भी लिख देते हो एक बार हम करके देखते हैं

क्या होता है ठीक है इतना मैंने किया मैं

चलो मेरा ये रन कर ही रहा है ठीक है मैं

यहां पे चलता हूं इस जगह पे मैं वापस

इंस्पेक्ट करता हूं मैं कंसोल पे सब कुछ

डिलीट करके वापस इसको मैं एक और बार हिट

करता हूं तो गाइस दिस टाइम आप देख सकते हो

कि मुझे कोर्स पॉलिसी का कोई वैसे

वार्निंग तो आया नहीं है लेकिन मुझे यह भी

देखना है कि वार्निंग आए ना आए इससे इतना

मैटर तो नहीं होता है

लेकिन टेस्ट टू यहां पे टेस्ट 21 क्या वो

डेटाबेस में डाटा स्टोर हुआ है हमें व भी

तो देखना जरूरी है तो मैं यहां पर चलता

हूं टेस्ट 91 तो मुझे दिखा रहा है लेकिन

आई गेस य 91 मुझे कहां से आ रहा है एंड 91

है या कितना है वोह इट्स 21 एक काम करता

हूं मैं एक और बार इसको रिफ्रेश करता हूं

ठीक है मैं यहां पे चल रहा हूं ओके तो

इसको हटा रहा हूं मैं अगेन रजिस्टर नाउ पे

क्लिक कर रहा हूं तो टेस्ट @ टेस्ट वन है

मैं यहां पे चलता हूं वी हैव दिस यूजर मन

अंडर एडमिन ही है हमारा मैं यहां पे चलना

चाहूंगा सो नहीं गाइस डाटा अभी तक स्टोर

नहीं हुआ है डाटा स्टोर नहीं हो रहा अब वो

कहां जा रहा है अब मैं यहां पे चलना चाहता

हूं एक बार यहां पे तो कुछ दिख नहीं रहा

है यहां पे भी मुझे कुछ नहीं दिख रहा है

ठीक है तो गाइस अब आपको लग रहा होगा फिर

डाटा जा कहां रहा है डाटा तो दिख ही नहीं

रहा हमें है ना ना यहां पे कोई वार्निंग

है ना यहां पे कोई एरर है

ना हमें यहां पर कोई एरर आ रहा है तो मैं

अब आपको बताता हूं एक चीज मैंने आपको अभी

थोड़ी देर पहले कहा था कि जब आप इस तरीके

से कोर्स लिख रहे हो तो यहां पर कुछ

ऑप्शंस है जो आपको देना पड़ेगा ऑप्शंस है

जो आपको बताना पड़ेगा तो यह ऑप्शंस क्या

है मैं आपको बताता हूं यहां प उन्होंने

ऑलरेडी दे रखी है लाइक इट्स ओरिजिन है ना

अब और भी दो तीन चीजें मैं आपको बताता हूं

ध्यान से देखिएगा ठीक इसके ऊपर मैं जा रहा

हूं मैं एक ऑप्शंस ऐड कर रहा हूं यहां पर

ठीक है सो इट्स अ कोर्स उन्होंने जिस

तरीके से कोर्स ऑप्शन से लिखा था मैं भी

वही लिख रहा हूं कोर्स ऑफ ऑप्शंस इक्वल टू

यहां पे मैं सबसे पहले तो ये लिखूंगा मेरा

ओरिजिन ओबवियसली ये बहुत ही ज्यादा

इंपॉर्टेंट है गाइस क्यों क्योंकि हमारा

ये जो रिएक्ट है वो इस जगह पे रन कर रहा

है ठीक है इसको मैं कॉपी कर रहा हूं मेरा

ओरिजिन य होगा अब मैंने इस तरीके से

रजिस्टर की नीड नहीं हमें दिस इज इट तो

मेरा ओरिजिन अगर यहां से डाटा आता है तो

आप उसको एक्सेस दे दे दीजिएगा एंड साथ ही

साथ आपको मेथड भी पास करना पड़ेगा हो सकता

है ना कि 5173 से अभी तो फिलहाल मैं सिफ

पोस्ट मेथड गेट करने की कोशिश कर रहा हूं

लेकिन आगे जाके डाटा मुझे मुझे रीड करना

रहा बहुत कुछ हो सकता है ना तो मैं बोलता

हूं गेट चाहे वो पोस्ट हो चाहे वो पुट हो

चाहे वो डिलीट हो समझ रहे हो गाइस आपको ये

सब इस तरीके से बताना पड़ेगा पैच हो ठीक

है या आपका वो हैड हो तो यह सब अगर डाटा

आता है बेसिकली यह सारे मेथड से को अगर हम

यूज करके रिक्वेस्ट आ रहा है फ्रॉम 5173

तो आप उसको एक्सेस दे दीजिएगा एंड यहां पे

वी हैव दिस क्रेडेंशियल क्रेडेंशियल होगा

हां इतना याद रखना एंड सी स्मल ही रखिए

एंड लास्ट में एस ऐड करके आप ट्रू कर

दीजिए ये अगर आप इतना कर देते हो अब ये जो

कोर्स का ऑप्शन है ये जो कोर्स दिख रहा है

इसके अंदर पैरेंस एंड आप ये पास कर दीजिए

तो गाइज दिस इज इट इतना ही आपको करना था

कोर्स पॉलिसी यही था कि आपने अब आप सर्वर

को बता दिया कि अगर इस ओरिजिन से कोई भी

मेथड हो अगर वो रिक्वेस्ट कर रहा है आप

उसको एक्सेप्ट कीजिए एंड उसका जो रिस्पांस

है आप रिस्पेक्टफुली आप उनको शेयर कर

दीजिए दिस इज इट मैं एक बार यहां पे चलता

हूं इसको मैं क्लोज कर रहा हूं एक बार मैं

एक बार इसको रन कर देता हूं फ्रंट एंड में

आई डोंट डोंट थिंक कि मुझे कुछ करने की

नीड है ठीक है अब मैं यहां पे चलता हूं तो

अभी तक यहां पे कुछ इस तरीके से हमें आ

नहीं रहा था अब इसको मैं हटा रहा हूं इसको

मैं एक और बार रिफ्रेश कर देता हूं तो मैं

विनोद एंड कुछ भी मैं फिलहाल अभी के लिए

टाइप कर देता हूं ओके सो इम्तिहान की घड़ी

आ चुकी है आई एम सुपर एक्साइटेड सो थ्री

टू वन एंड बम गाइ सी देखो मुझे रिस्पांस आ

गया सी आई एम गेटिंग द रिस्पांस ये देखिए

मुझे रिस्पांस आ गया जिसमें से रेसड बॉडी

डॉट हेडर्स हेडर्स में आप देख सकते हो डॉट

ओके ट्रू है रीडायरेक्टेड फॉल्स स्टेटस

2011 टेक्स्ट का जो स्टेटस टेक्स्ट है वो

क्रिएटेडटेड मतलब फाइनली फाइनली फाइनली यह

जो सबसे ज्यादा इंपॉर्टेंट पार्ट था वो ये

दो थे कि जिसमें से

क्रिएटेटोकन

ही रिएक्ट है इनडायरेक्टली अगर अब मैं

आपको बोलूं तो देखो स्टेटस यहां पे आ गया

यही यह रिस्पांस मुझे मिलेगा अगर मैं बॉडी

को भी वो कर दूंगा अब मुझे लेकिन जो भी हो

मैं अब यहां पे अगर अप्लाई पे क्लिक करता

हूं एंड बम गाइस सी th1 @ test.com हो गया

खत्म सो दिस इज योर मेन आई थिंक सबसे

ज्यादा इंपोर्टेंट वीडियो यही था कि फ्रंट

एंड को हम बैक एंड से कैसे कनेक्ट करें अब

रिएक्ट में जो भी देखो ना मुझे खाली इसको

होस्ट करना है अब आप जो भी डाटा फिल करोगे

मुझे यहां पे आ जाएगा अभी भी चीजें है

बहुत सारी जो आप यहां पे टैकल कर सकते हो

इसको और बेटर कर सकते हो लाइक अ सबमिट

करने के बाद भी डाटा इधर ही पड़ा हुआ है

समझ रहे हो तो वो हम कैसे कर सकते हैं

गाइस वो तो इजी है उसके लिए क्या करना

होगा मैं अब यहां पे चलता हूं एंड डोंट

वरी अभी हम इस पे थोड़े और काम करने हैं

नोटिफिकेशन पुश कराना है एरर मैसेज

डिस्प्ले कराना है बट एटलीस्ट अगर ध्यान

से देखना यहां पे रिस्पांस पे अगर वो ओके

होता है ट्रू तो मैं सिंपल लिख सकता हूं

यहां पे इफ हमारा ये जो रिस्पांस है ठीक

है अगर ये ओके हु है ओबवियसली रेसड ओके अब

आपको पता चल गया रेसड ओके मतलब इफ इट्स

ट्रू या तो रेसड स्टेटस इक्व 21 या रेसड

स्टेटस टेक्स

क्रिएटेडॉक्युमेंट्सफ्रैगमेंट

कुछ वो इस तरीके से करना पड़ेगा दिस इज इट

मेरा काम हो गया द मोमेंट इतना मैं करता

हूं मेरा काम हो जाएगा एंड यहां पे मैं एक

और चीज कर सकता हूं कि हालांकि वो ना करता

तो भी चलता लाइक वी हैव अ नेविगेट राइट इफ

यू रिमेंबर वी हैव अ नेविगेट सो इट्स

नेविगेट फ्रॉम मैं सॉरी आपको नेविगेट नहीं

लिखना है यूज नेविगेट लिखना पड़ेगा यूज

नेविगेट फ्रॉम वी हैव अ रिएक्ट राउटर डोम

दिस इज इट तो ये जो यूज नेविगेट है आप

यहां प बहुत इली कंस्ट नेविगेट इक्वल टू

यूज नेविगेट का यूज कर सकते हो एंड यहां

पर जो है यह होने के बाद ठीक है आप

नेविगेट करा सकते हो उनको इफ इट्स ट्रू

देन उनको आप लॉग इन प भेज

दीजिए ठीक है एल्स आप एरर यहां पर दिखा

सकते हो यह आप कर सकते हो ठीक है मैं अगर

यहां चलता हूं तो इसको एक बार मैं रिफ्रेश

करता हूं लेट्स सी कुछ नहीं है सो गाइस आप

देख सकते हो कि दिस टाइम इट्स @ test.com

टू कहीं नहीं है ना नहीं है चलो ठीक है

मैं इसको रजिस्टर नाउ पे क्लिक करता हूं

एंड बूम गाइस सी देखो रिस्पांस मुझे आ गया

मैं देखो लॉगइन फॉर्म पे चला गया अब वो

डाटा वहां जा चुका तो इस तरीके से गाइस

कितनी इजली रजिस्ट्रेशन करने के बाद हम

लॉगइन फॉर्म पे आ गए एंड मैं अब यहां पे

चलता हूं फिर से अप्लाई करता हूं इट्स अ

थापा वन अभ वो थापा टू होना चाहिए वहां पे

एंड बूम गाइस ये देखिए सो नाउ वी आर

गेटिंग आवर देखो एक सेकंड ये क्या हो गया

मैं वापस यहां पे चलता हूं सो आप देख सकते

हो कि यहां पे मेरा ये जो थापा टू आप दिख

रहा है ये वाला हो गया गया मेरा ये देखो

थापा ट अी जस्ट मेंट किया था सो या गाइ

दिस इज इट आज इस वीडियो के लिए इतना ही

होप आपको वीडियो बहुत ही ज्यादा पसंद आया

होगा ये जो कोर्स पॉलिसी है गाइज आई थिंक

मैं इसके ऊपर कल फिर से एक और वीडियो

बनाना चाहूंगा क्योंकि इसको हाईलाइट करना

बहुत ही ज्यादा जरूरी है समझ रहे हो इससे

पहले मैंने प्रॉक्स यूज की थी प्रीवियस

मेरा जो आज से 2 साल पहले वाले सीरीज में

बट इस टाइम मैंने ये यूज़ की एंड ये कितना

नीट एंड क्लीन आपको लग रहा है तो गाइस

नीचे कमेंट करके जरूर बताना कि आपका यह

कनेक्ट सक्सेसफुली हुआ या नहीं सोच को तो

मैं आपको अगेन मेरे ऑसम वेबसाइट थापा

टेक्ट डॉट सोर्स पे गेट करा ही दूंगा तो

बिल्कुल टेंशन नहीं है मेरा कंप्लीट

youtube0 वीडियोस थे सब सोर्स कोड अगर

आपको चाहिए इट्स ओनली फॉर ₹ 49 आप इसको

चेक आउट कर सकते हो बट या आप यहां पे

सोर्स कोड एक्सेस कर सकते हो फिलहाल मंथ

सीरीज का एंड मैं तो इतना चाहूंगा आप खुद

से ट्राई कीजिएगा देखिए कहां क्या

प्रॉब्लम आ रहा है डिफरेंट डिफरेंट

देखिएगा ठीक है एंड प्लीज गाइस अगर यह

प्रॉपर्ली कनेक्ट होता है तो कमेंट करके

जरूर बताना मेरा कनेक्शन सक्सेसफुल हो गया

समझ रहे हो अगर नहीं होता फिर भी बताओ कि

मेरा यह एरर आ रहा है अब का स्क्रीनशॉट या

कॉपी करके यहां पे पेस्ट कर सकते हो वी आर

डेफिनेटली गोइंग टू हेल्प यू ठीक है सो या

गाइज दिस इज इट आज दिस वीडियो के लिए इतना

होप आपको व बहुत ही ज्यादा पसंद आगा एंड

फाइनली फाइनली फाइनली फ्रंट एंड हमारा बैक

एंड से कनेक्ट हो चुका है एंड आई एम सुपर

एक्साइटेड सो गाइ मिलता हूं कल की वीडियो

में जब हम देखेंगे लॉगइन का

[संगीत]

फंक्शनैलिटी