Connecting React Frontend To Express Backend || JavaScript Tutorial

[Music] hi guys wow it's so sunny today my name is marina and i'm a certified information systems auditor but i also enjoy teaching programming so in today's tutorial i prepared for you a nice one on how to connect your react front end with your express back end so please make sure to subscribe to my channel and let's go okay so let's do this first of all let's head over to our terminal cd into desktop where i will create our directory that we will call react express okay cd into it and here we will create our react application through the command npx create react app and we call it front end okay our react application is created now let's cd into it and start the npm okay it started let's just render something here so we know it works let's go to our visual studio code open up our new folder that we just created and let's go to our source files index.js as you can see at the moment is rendering only this app component which is right here so let's say instead of rendering all of it we want just to return a simple h1 that will say react here save refresh react here okay it's working now we can open a new tab in our terminal where we will set up our back end with express so let's see out of this front end folder and we create a new file that will be our server then we will initiate the npm with default settings and we will install our express package okay so it's installed let's go into our new server file and the require express express equal require express constant app equal express espresso okay and we will get this app to listen on port 3001 because this port should be different from the react default port which is 3 000 okay and it will just return a function that will simply log in our terminal that express server is running on port 3001 so now just to check that we connected to express let's simply send a response at our root route that will respond with simple express here text hit save go to our localhost 3001 oops we forgot to run our server.js file okay it's running refresh express here okay so we have our react app our express app now let's set up our express in a more convenient way so we have our routes and our controllers and our server in separate files so i will stop my server here and create new directories that we will call routes and controllers okay i will just start again okay so we have our controllers and we have our routes first of all we need to decide which kind of data we want to render from our back end to our front end so let's go ahead and create a new file in our controller that will be called i don't know users controller dot js and in this file we will create new data that we want to pass to our front end so we need to create exports new controller that we'll call users controller that will be just equal to a function that receives the request and response let's make it an arrow function and it will send a response in json format and json format is a javascript object where we will create some key let's say users list and it will be equal just to some users user one and user two we try to keep it simple here just to understand the logic okay so now that we have our users controller let's set up our route so we go to our route folder create new file and we call it users route.js just to understand what's happening here and here we will be using express so we need to require it constant express equal require express okay and now we can create a router that will be using the express method oh express methods called router and now we can uh create our users route that will be requiring our controller which is located outside this folder let's folder controllers and this is called user's controller okay so now we get our router to get to the home routes home routes home route and a require oh sorry and we will map our users route to our users controller so this here is an address of our proxy which we should specify in our package dot json file so let's go here and we add a new key which is called proxy and we specify here the address of our back-end server which is http colon slash local host at 3001 and don't forget the comma okay let's go back to our route okay here we are done we just need to export this model as a router okay so now we are ready to use this route in our server.js file so instead of sending this response we will be actually just using the route that we just created so we specify app.use and we will render the backend data at slash users slash and for this will require the route that is located at dot slash routes and is called users okay everything looks good here now we can move to our front end to the source file [Music] as you can see at the moment it's rendering up so now let's create a new component which i like to keep in a separate folder so i will create folder components and inside this folder i will create a new file that we will call users.js and inside this we will import react from react but we will also import couple of useful methods such as use state and use effect okay and in this file there will be a function called users which will return something and then we will export it as default users okay so inside this function we are ready to use the use state method that comes from react let's create a constant and let's say this will be our users and our function will be set users use state to track the state of this user's list which initially will be just an empty array okay now we can use another methods from react use effect that will be an anonymous function that's we will use to fetch data from our slash users slash back end and after we fetch this data we will then check the response through an arrow function and if response is okay then we are going to return this response in json format after that what we have to do is we have to take this json response and we use it in the function set users set users and we set this use this set users function to set these users here to our json response dot key of this json response which comes from user controllers and is called users list so dot users list okay now we are ready to return this data let's create a div and inside this div we will map through our users list so we specify users dot map and for each user that we map through we will return an ally oops we will return an ally that will be just the this user here from our users list so now we export it as users and all we have to do is to render it in our index.js file so here we will import users from oops so many import users from our folder components called users and we will render it here as users and perhaps we need to enclose it in a separate div so i'm gonna do like this now let's test our nodemonk has crashed what's up module not found where route users route.js okay what's up is i have a misspelt here the name of the controller so we have users control layers and here we specify user control layer okay just for simplicity let's make sure that these are the same names and now our server express is running and our react application is running nicely so we go to our slash users slash and we have our users list here and our react if we update it oh sometimes is not refreshing because we need to stop our npm and start it again so now you can see we are rendering this user one user tool from our back end express server okay guys thank you for watching and for the next tutorial i'm thinking to explain how to connect to your react and express application also the database so stay tuned and i'll see you in the next video

Channel: Marina Kim

Views: 28,074

Rating: 4.9023199 out of 5

Keywords: full stack developer, how to, react js, react js demo, reactjs tutorial 2020, react js app, react js project tutorial, express js middleware, expressjs nodejs, express js routing, express js project, express js tutorial, express js best practices, express js react tutorial, express js react native, express js react server side rendering, express js vs react js, how to connect frontend and backend, how to connect react with backend, how to connect react frontend with backend

Id: HjJq1pHxTp4

Length: 12min 18sec (738 seconds)

Published: Fri Oct 16 2020