How To Connect React JS With Node JS | Node JS Tutorial For Beginners | What Is Node JS |Simplilearn

welcome to this session on how to connect react.js with node.js and in this session uh we are actually going to look at how do we connect react.js with node.js so a very warm welcome to this session on react.js connectivity with node.js and in this session we are going to focus on how do we connect our react.js application with the node.js platform so we are going to dive into creating a hands-on demo which will have two parts to it we would have the client application that we will first create as a react application we will then create an express.js application with node.js and we will then try to connect both of those applications together so express.js is a rapid application development framework that allows us to create a web application very quickly on the node.js platform and we'll use it to create a custom api and then connect that endpoint to the react.js client application so let's dive into our demo and let's start with creating our client and node express applications and see how to set them up and then get them connected to each other let's start with our hands-on demo and we will first go to the node.js website nodejs.org we can download the lts version which is a stable version of node.js moment i click on this it will prompt me for a download it will download the msi file and then all i need to do is double click on it keep clicking on the next button and install that would install node.js for us next we'll open our editor you can use any editor of your choice so i'm going to use an editor called visual studio code and let's open up the terminal here and i also have the command prompt open where i've navigated to a folder that i've created called react.js demos now we'll invoke the npm package manager which is invoked by the command npx so npx will not only install packages but also execute them once they are installed so once they are downloaded it will execute the package and we will use npx to go and create a react application called client so while we give it time for the installation to complete we can then open it within our editor so we'll give it time uh so that the installation completes so the installation is completed and so we've seen here that the installation is now completed and let's uh go and open up this project so i will say file and open folder and let me pick up that folder and we will open this application called client so that's my client app let's fire up the terminal so okay so that has launched the terminal for us and here all we need to do to fire up this application and get it running is npm start which will compile and start up this application that is created let's close this we'll go to the browser and now let's say localhost 3000 so that gives us a startup page the sample uh default startup page for the first client application and this is going to work as a client we'll now go and try to create uh the back end uh application which is going to be another application that we will set up and to create that let's say npx express generator api okay so this will uh create an express application on node.js called api and let's give it some time for installation okay so that's done clear this screen we'll come out here we'll open another instance of the editor we'll say open folder and that's the api application we'll say select folder and the api application is opened let's go to the terminal now in the terminal we will attempt to install all of the packages that are required that would be logged in the package.json file so the package.json file here would be a listed uh so you can see we have a list of uh packages that it uses and npm install will go and install all of these packages that were pre-listed here so let me ensure it's executed correctly and we'll fire that once more that's done so npm install has installed all of the packages required and let me terminate this run by pressing a control c so this terminates uh the client application that was executing and now we will say npm start so that this application executes and let's refresh so that's the standard express application now that has got installed now let's go to the api application we'll go into the bin folder and here we'll have a file called www we will change the default port number from 3000 to 9000 let me stop this application from executing we've just updated the port number now let's go to the routes and we'll create a new file in the routes folder called test api dot js here we will say variable express equal to require express and here we'll say variable router equal to express dot router and here we will say router dot get we'll open this so that's the default route root route is going to be slash for which we'll add a callback function which will take the request and the response parameter and next pointer in case there is another function to call post that and here we will just send a simple message saying api is working okay a simple message sent out for the root default route and we'll have to export this so we'll say module dot exports equal to router all right so that's uh done let's go to the app.js file and here let us import that so here is where we will import this by saying app.use we want to use the test api file and that is test api router and this is exactly the same variable name that we will declare here which will be equal to require and we are going to say routes test api all right so let's try launching this now we would say npm start after adding this code let's go out here and 3000 test api is going to be the url to hit it's not 3000 but 9000 now because we just updated the port so 9000 test api and there we have a message which says that the api is working properly so this is tested now let's go to the client application in the client application let's go to the app.js file okay this is the file that we would have to revamp a bit so let's uh revamp this here we will declare a class app which extends so that creates a new module so it extends react.component and here we have constructor we will accept the props here i would pass props to the super class constructor and set the state to api response currently it just has an empty value next we'll add up a new function called call api which will generate a call to that api url which was http localhost 9000 was the port and test api was the url once this is called we will then call the then function declare response generate a call to response dot text and then we will again say this dot set state api response is going to be equal to the response that comes in from that url which is nothing but a string which says api is working another function called component will mount so the moment the component is initialized on the screen and loaded we will generate a call to this function we created called call api then comes the render function in the render function we would go and return a div class name as app this would be app header the standard logo after which in the paragraph we wouldn't need the link here right after the header we'll add a paragraph where we will print this dot state and the variable we created called api response and we will data bind to that so that largely completes uh the return so we simply create this application uh that's the react application that will talk to this api that is and this uh url that is hosted on node communicate with it get a simple string as a response print that string inside this react application so once that's done uh we have the component wheel mount which is a life cycle method here it's a lifecycle event that gets triggered the moment the component loads and that's when uh we have actually gone and executed the call api custom function let's go to the api application we'll terminate the execution here there's one more step that we'll have to perform which is cross origin resource sharing which means that to allow the react application to communicate from another hosted domain to this particular domain server we will actually have to enable cross origin scripting and sharing otherwise it will block the request coming from another application so for that we'll have to install globally cross origin module and save indicates that it's going to do a global install for all applications that are on this particular system so we've installed this and we'll clear the screen let's go to the app.js and right here is where we would want it to go and use cars so we will say app.use course so that it uses this particular api and here is where we will declare the course variable and go and import the new library package that we just installed which is quartz so looks good and now let's uh fire up this application with an npm start let's also fire up client with an npm start and now when i go and try looking for localhost 3000 which is the react application the react application should go and talk to the api that is hosted on node.js which returns to me that string message so if i go and ping that api separately which is localhost 9000 test api you can see this is a standard message so here i directly ping the api that's hosted in node.js now we are consuming it through the react.js application and if you scroll down you can see the message returned from node.js into react saying the api is working properly so the practical impact of this is to actually host restful services etc on node as a server and you can go and consume the data that is returned there could be in string text or json format directly into the react.js acting as a client application finally we'd like to extend a big thank you uh for viewing our content and i hope this has added value to your learning journey and has been instrumental in supporting you and assisting you with learning the right skills and acquiring the right skills on this technology to help extend and grow your career path and your journey way forward in the industry thank you so much and a big thank you on behalf of the cpu learn platform hi there if you like this video subscribe to the simply learn youtube channel and click here to watch similar videos to nerd up and get certified click here

Channel: Simplilearn

Views: 311,679

Keywords: how to connect react js with node js, node js tutorial for beginners, what is node js, what is node js?, node js tutorial 2019, nodejs project, node js crash course, learn node js, learn node js complete from very basics to advanced, learn node js for beginners, learn node js from scratch, learn node js in one hour, learn node js with projects, introduction to node.js, introduction to node.js for beginners, nodejs simplilearn, simplilearn

Id: fnpmR6Q5lEc

Length: 12min 42sec (762 seconds)

Published: Mon Oct 28 2019