Connect frontend and backend | React JS, Node JS, Express | Send data from backend to frontend | API

if this video is helpful to you please consider subscribing to the [Music] channel I have opened a folder called fullstack in the vs code after that I'm going to create a new folder inside this fullstack folder that is backend after that I'm going to create another folder called front end okay so next I'm going to do is to take the terminal after that I'm going to run the command that is npm init then after that I'm going to click enter for all of these options as like this way so after that next I'm going to run the command npmi Express for installing Express into our project okay so now Express has been installed into our project next I'm going to do is to do is I'm going to create a new file called index.js in the backend folder so you can see that in the terminal we have already given the index.js as main that's why I have created the file called index.js in the backend folder next I'm going to import the express from Express Library as like this way after that I'm going to Define a variable called app and I'm going to assign this Express into this app variable as like this way so after that I'm going to do is I'm going to call the function called get in this app variable and as a first argument I have have given the slash then next I have given a call back function inside that I have given request response and I'm going to send a response that is I'm going to give as server is ready okay fine then next I'm going to do is I'm going to define a new variable that is port and I'm going to assign this process. env. p RT or 3,000 then after that I'm going to call the function ab. listen and inside that I'm going to give pop as the first argument and next I'm going to give F call back function so inside this I'm going to give as console. log and in the back tick I'm going to give as server at HTTP colon SL Local Host and I'm going to pass this port into it as like this way next I'm going to do is I'm going to run the project so I'm going to run the command npm Run start so now you can see that as of now it is showing an error that is missing script start so for that I'm going to take the package.json and here I'm going to change this test into start and here I'm going to give F node index.js s like this way after that I'm going to run the project again so now also you can see that there is an error that is cannot use the import statement outside a module so for that what I'm going to do is here I'm going to give as type so at that time you can see that there is showing module so I have given module okay so after that I'm going to run the project again so now you can see that in the console it is showing serve at HTTP colon SL localhost 3000 so here we have already given that so I'm going to click on that and you can see that here it is showing the message server is ready which we have given in this app do get okay so we have send the message next I'm going to do is to take the front end folder and in the front end folder I'm going to create a new rejs project so here I have renamed the terminal as backend and frontend and here I'm going to take the frontend folder and inside this fronted folder I'm going to create a new reactjs project by run the command and npx create react app I'm going to give the name of the app as user app as like this way so now you can see that a new reactjs project will be created okay so new reactjs project has been created I'm going to run this new project as like this way so now you can see that here is the project okay okay F doj next I'm going to do is I'm going to remove all the boiler plate codes or unwanted files so first of all I'm going to remove this logo from the public folder as like this way the next I'm going to take the source folder and here I'm going to remove this app. test and Logo as like this way okay fine then after that I'm going to take the index.js file I'm going to remove this section after that I'm going to change the app.js and here I'm going to give as app so next I'm going to take the project at the time you can see the app here okay fine then next I'm going to do is I'm going to send a data from back end so for that I'm going to use the Json placeholder fake API so I'm going to search for Json placeholder fake API and I'm going to click on this link here you can see that there is a section containing the list of users so I'm going to copy this array from here after that I'm going to create a new file in the backend folder that is user.js and here I'm going to define a new variable that is users and I'm going to to paste the array here so you can see the array as like this way so next I'm going to export this users so here I'm going to give as export default users after that I'm going to use that in the index.js file so here I'm going to do is I'm going to import that users from user.js as like this way then after that I'm going to do is to call the function that is app. get and inside this get first of all I'm going to give as slash API SL user and next I'm going to give a call back function here I'm going to give the request comma response and I'm going to send the response that is response. send this users okay so we have send the array from here next we can we have to use that in the front end so for that first of all I'm going to do is to take the app component and here I'm going to define a new function so I'm going to define the function that is get user which is an arrow function and I'm going to use the fetch operation into it then here I'm going to pass the HTTP colon double slash Local Host colon 3,000 SL API sluser then next I'm going to take the response I'm going to do is to convert that into Json format and next I'm going to log that Json formatted response in the console next I'm going to do is to call this function in the use effect hook so here I have given the dependency array and I'm going to call this get user function as like this way then after that I'm going to take the console so now you can see that there is an error so what I'm going to do is I'm going to remove this portion from here up to 3,000 and here you can see that now it is only / API SL user then next I'm going to take the package.json in the front and folder and here I'm going to give a proxy that is I'm going to give that HTTP colon d/ Local Host 3,000 here as like this way okay so after that I'm going to do is to terminate the project in the back end and I'm going to run the project again as like this way so now you can see that at Local Host 3,000 and here also in the front I'm going to terminate the project and I'm going to run the project again okay fine so here you can see that here is the project I'm going to take the console so at that time you can see the array which we have sent from the back end okay the list of users so next I'm going to define a new state that is user set user which is equal to use state I'm going to pass the empty array after that I'm going to give the set user here next I'm going to map through this user state user. map and I'm going to take the each user as data and here I'm going to use the H1 tag and inside this H1 tag I'm I'm going to give the data do name then next I'm going to use another H1 tag and inside that H1 tag I'm going to give as data do username then after that I'm going to use another H1 and here I'm going to give as data. email okay fine the next I'm going to do is to put these three H1 tag inside this as like this way then after that I'm going to return this next I'm going to give this name here then username then email colum as like this way so next I'm going to use a div tag and I'm going to put this inside this div as like this way and here I'm going to give this style that is border 1 PX solid gray and next I'm going to give the width for about 500 PX so you can see that this is a structure here is the name of the user username and email if this video is helpful to you please consider subscribing to the channel

Channel: YS2code

Views: 5,439

Keywords: #backend, #fullstack, #frontend, #react, #react js, #connect, #express, #node js

Id: OgYKAI38JvY

Length: 12min 12sec (732 seconds)

Published: Wed Nov 29 2023