Node and React JS Tutorial: Website Setup with Frontend and Backend

hey everyone welcome back to another note tutorial today i'll be covering node and react if you haven't watched my previous tutorial yet i cover the basics on node and how to set up a node http server but today i'll be covering node and react so let's just jump right into this one okay so let's get started i have my project folder open here and i created a folder called node react app so this is where i'm going to run my project in and i'm going to drag this folder down here into my visual studio code now if you look down in my terminal here the first thing i want to do before i start is i always update my node application so i installed node using homebrew if you did the same i recommend that you do brew update which i already did and then brew upgrade so that updates the brew application itself and then it updates node for you so i always do that before i start and you can check your node version by doing node v and also npm-v to see the latest npm version so with node you're going to see me create two folders in here i'll create an example right now i'm going to have a folder called front end and i'll also have another one called back end now you might see other people calling the front end client it's the same thing and also the back end is a server so the client or front end here it's going to host our website and that handles the html the css and everything on the front end that the user accesses the client the user is the person using the web browser and browsing through the website and then with the back end this is where our databases will run it will handle all of the data and display it to the front end to the user okay so i'll just remove these folders here this was just an example and now i'll initiate the node react app and to do this i can type npm init react app and i'm going to put this inside a folder called front end and like i said it's also referred to as client sometimes but i'm going to use front end to make it easy and so you'll notice that i have a period here that means that i wanted to create a folder within the same folder right here in my current folder so that's why i have a period and then i'm going to have it inside front end there is also another command that you can use called npx create react app and then just call the folder that you want to put it in so what i'll do is i'll use this command right now since it's the newest command and everyone is using this and what this is doing is that it's creating the package for you it has everything pre-made and it's going to include all of the react application inside this front and folder for me all right this has finished and it's telling me right here it's suggesting that i go into the front-end folder and then i can start it up to see how it's running so i'll do that right now cd into the front end folder and it's the same thing right here if i browse through you'll notice that it created a node modules folder and you can ignore this right now the most important files right now is inside public source and then this package.json file so what i'll do is i'll start it up so that you can see how it looks like right now and to make sure that things are running fine and there we go we have our react app running what i'll do is i'll stop the server right now control c so first off let me step through the package.json file right here so what did it do when i initiated this folder it added all of these dependencies right here it added the react react dom react.scripts and then web vitals this i'm not going to use but it needs all of these right here and then it also has our script commands right here this is what it's running to start up the react so you can close that up now let's look inside the source file here because this is where the juicy stuff is the most important files are the app.js file and the index.js file let me go to the app.js file right now inside the app.js file you'll see that it has a function called app here already and it's returning html code and this html code right here is what we saw on or the web server that was running right here this is the code and then at the end here it's doing an export default app and so you see it has a function called app and it's exporting this function and all it's doing is returning html code up here is importing the logo so we're not going to use this i'll comment it out it's also importing css and then here i'll delete this code and i will add in my own code for now and i'll say right here my first react app now let's look inside the index file index here what is this doing it's importing react all of the necessary stuff that it needs react dom and look at this it's importing that app function from our app.js file here's the app that it exported it's importing that and it's saying import it from app right here app.js and then this function right here this is what's rendering our html so if you take a look at this what is it doing it's taking in that app function that we exported right here it's outputting that whole html right here that we have it's taking that and it's really just populating it right here and then the next thing it does you see how it has this comma it's calling a get element id called root now where is this coming from well it's coming from this public folder inside the index html now if you scroll down here you're going to see in the body section a div called id root so you see what it's doing here it's taking our html code from the app function that we created passing it to the get element by id called root which is inside the html file and it's just really just populating it inside this div file and that's what's generating this web server right here this web page so i'll show you right here if i save this app.js file with my updates right here i'll rerun the server and make sure that you're inside the front end folder to run this npm start now it should just say my first react app right there you see that that's all it took that is the front end of things now we're going to get into routing and a lot of other stuff and i'll show you how to set that up but for now i just want everyone to understand how react works how it has a front end and how it has a back end to generate that data and how it creates these functions to be called inside of this file here and then it uses it to populate the index file so that's all that react is doing so what i'll do is i'll get you more comfortable with the front end by creating some react files including them and populating it into our web server here the first thing i want to do is i'm going to edit my index.html file right here and i want to add in my own jquery and bootstrap codes with fonts and you don't have to do this if you don't want to but i'll also leave my code in the description if you want to see it all of my code will be available on my github so if you want to pull that and use it you can but you see i just added my jquery and bootstrap code to the header section of the html file so i'll save that and now that's all i'm going to do with this public folder the rest will be inside the source folder here i'm going to create a new folder called components inside sourcer and then inside components i'm going to have a navigation file called nav.js and now inside this nav file i'll write the functions so that it can generate my navigation now the first thing i want to do is import react so i'll do import react from react you notice that this import code is now different from the first tutorial that we're running on node you'll remember if we did the original node it would have been something like const react equals require we're using require statements but we're no longer using that with react because react uses es6 es6 js so just remember that if you want to brush up on es6 i really suggest looking up tutorials on the syntax for that and then i will create a function called nav simple enough and then we're going to export this export default nav and you'll see that we're going to generate this for a lot of files that we're going to work with we're always going to create a function for it and export it inside this nav we're going to do the same thing by returning html code now i've written my own html code using bootstrap and i'm going to paste it in here but all it is is just a simple navigation that has two links in it but the important thing right here is that i'm creating links using react code react syntax right here this link it's called link and you give it a two address and this is the url url that we want it to go to when we type it into the web browser and then we give it a name my link so this url that we're giving a name it's going to be right here where we give it you know my url it's the same thing that we're typing in so i created two links down here and to use this link syntax i'm going to have to import that as well and this is how you import the link from react router dom but i didn't install react router dom yet so i'm going to do that right now going down to my terminal here and we'll have to do npm install react router dom simple as that now if we look back inside our package.json right here you'll see that it installed react router dom under the dependencies for us and now i can use it by pulling the link class from it and this is how i create links using it so now that i have my nav all set up here with a function that returns my navigation of html code and i export it here this is all done i'm going to go back to the app.js file here and i'm going to import it and then use the app the nav in here so i'll do right here import nav from now this is where i call i'm putting a period because i'm calling it within the same folder here and it's inside the components folder right here and here's my nav file so i imported the nav and now i want to put the nav let's put it right here and this is how i call the function here when i call that it's just going to populate that nav html code right into here to use this nav code i also need a thing called the browser router and the browser router comes from the react router dom and i'll show you why in a minute here so let me just set up the browser router i'm going to import it browser router from react router dom if this name is too long you can also say as router i know a lot of people do that as well they just call browser router as a router and we can include it right here router i'll put everything inside here now why am i including this because with this navigation and links that we're going to use to direct us to different pages it has to act as a router a url router and so it needs the code to be within this right here and i'll show you how it works right now if i save this and then i do npm start let's see how it runs right here you see it put up our links right here and i created these two links specifically because i'm going to route it to different pages as we click on it so i'm going to create a home page and then i'm going to create a page called tweets and you see where i'm going with this right here i'm going to create a page where when i click on it we'll go to that page where there's the home page or this tweets page and the tweet page will show us it's kind of like twitter it'll show us our little tweet messages so it acts as a url router up here as we click on it it goes to those pages okay so let's set up those two pages that i was talking about right now and we're setting it up inside the components folder same with our nav file here so i'll call this home.js and also a tweet.js let's do the home first same thing again i'm going to import react from react then we're going to create a function called home there we go function home and home will return our code in here i like to preset all this up so that i don't mess up the syntax and i do the export default it's always export default and then call it to name your function and now we'll just add our html code section this is just bootstrap code and very simple you know div i'll give it a h1 welcome then we can give it a p tag this site was created using node js and react i added this class container fluid this is just bootstrap code so that i can just make it look a little bit more prettier okay so here's my code another thing i want to mention with react is that this can be a little bit confusing but anytime you return something it has to be within one single block right here so meaning you always have to have a block and then everything is contained in here i cannot have another div out here or another section let's say i have another section like that that will not work unless i contain it inside another container it always has to be contained within one one block so that's how react works otherwise it'll give you an error and it won't output so just remember that always create your first block first and just contain it contain everything inside that that's why i have this section right here and then everything is inside there so i'll save my home here and then let's go back to the app and let's add in home import home from dot components slash home this is what i love with visual studio code it just pre-fills it for you and then i'm going to do something different here i'm going to add a switch so let me remove this right here and i'm going to say switch this is part of the react router dom inside the switch i'm going to have a route i'll give it a path of this is for the home page path i'm telling it to be exact and i'll explain why component equals and this is where i call the home function that i created that i imported from here and then if i create another route here and i call this i'm going to call this tweets because i'm going to include my tweet function here so you see what it's doing here in our navigation there are two links one called home and one called tweet as i click on it it's going to do a switch statement on it and depending on which one i click on it's going to load that one it's going to route it to that path so that's how it works if i click on the home link it's going to route it here and take everything from my home function and populate it in there same thing for the tweet if i click on the tweet link it will route it to the tweet path right here and populate everything from that tweet function so i haven't created this tweet one yet but i'll show you that the home one will work right now because you'll notice that with the home i called it this site was created using node.js react and so i'm doing a switch on this and we also have to add it in here we have to add the switch and also the route because we're using those functions here we're using those classes so let's save this and i will restart oh i think i called this wrong down here function home okay function there we go let's fix that all right let's set up the tweet one real quick and i won't put anything inside i'll just do import react from react i'll create the function called tweet and we're going to export default tweet let's return and right now i won't return anything i'll just do a simple div tweet okay there we go now we have both of our pages here and i will also have to import tweet from tweet there we go we have both of them here and then i will start up the server now there we go we have home and tweets so if i click on home it's just that right there if i click on tweet see it says tweet so that is how you do pages how you route it to different things you see that when i clicked on this it went to the url called tweets and this is the path right here this is the path tweets and is using that tweet function that we created so you see how powerful this is how we created routing how we created different pages and how it loaded it very simple how we loaded a simple navigation and this is global this navigation in all of our pages and as we click on what page we want to go to it's going to use the function with that html inside of it and display for us so you see it's just routing it for us but you do notice that a lot of this is static right now that's where the back end is going to come in where i'll create next where we use the back end to populate everything for the front end i'll move along to creating the back end right now so i'll close all of these files up and i'll close that what i'll do right now is create a folder called back end and then i will cd into that folder and now i'll do npm init y because we're going to initialize our package.json here and then now i'll create a index.js file and then you'll notice inside our backend folder here all of our code now will be just regular node.js code so it was only the front end that we're using es6 for react now the back end isn't using react and it's just using regular node.js i'm going to need to install some packages so i'll do npm in install and i want to do a save dev on this and i'm installing no demon if you guys watched my first tutorial i went over no demon so it's good for development so i'm going to install that and open up my package.json here and i did the dash dash save dev because i wanted to save as a dev dependency right here so it puts it under a development dependency instead of the regular dependency it's only for development and then now i need to install some of these other packages npm if you don't want to type install you can just put npm i for a shortcut and i want to make this global i'm going to install express space body parser like that and then also concurrently and i'll explain what all of these does in a minute here so i'll install this okay so i want to show you guys this right here back end has a node module folder here as well as the front end so each one has their own node module folder with their own dependencies i'll show you guys again the package.json i used a g for global because i'm using my packages globally on my macbook but if you don't include this g it will include the dependencies in here for each folder i'll show you guys again right here if i do npm install express body parser oh and let me make sure i close this out body parser and concurrently now let's see what it does here it's going to add it to my package.json file so if i go into the package.json file here you'll see the dependencies for it there's separate ones dependencies and then the dev dependencies right here so let's start coding here i'm going to do a const express equals require express and you see here when using regular node.js code here cons body parser equals require that's right body parser and then i want to initialize it con app equals express this is regular code that you're going to see that everyone uses so this is really a copy and paste you can find this anywhere app.use bodyparser.url encoded and this is an extended false i also want to do a app.use bodyparser.json so that it can convert everything to json format and then down here i'm going to create a port this is the same as our previous code if you watch my first tutorial app.listen port arrow function and i'll just console log this server is running on port port this is for our back end routing port and you remember from our website here on this we're using port 3000 for the front end so these ports have to be different when react is set up for the front end it uses the 3000 port but for our back end i'm using 4000 so that i can route it differently and i'll show you why in a minute but make sure this can be any number it can be 5 000 if you want i'm just using 4000 and then i'm going to create routing for this right now and then this is important right here i need to update my package.json file here and i need to add in my new port i like to add it right under scripts here and it's called proxy and i'm telling you http localhost with port 4000 i'll step you through once i run the live server and i'm actually running the front end and back end simultaneously and that's why we're using the concurrently package that i'll show you how to set that up with but i am going to run both servers i'm going to run the front end and the back end and the backend needs this different port so save that close it up and then finally i'm going to create a routes folder called in here routes and inside routes i have a handler file this is a file that you'll see a lot of people will create for their routing they just call it handler so let's set up our handler and you'll see exactly what i'm trying to do here i'll do a const express equals require express because we need to use express in here we also need to use the router express dot router and that's how you call it router like that now i'm going to do a router.get for the tweets that we saw earlier the tweets page and that takes in a request and response i'm sure you guys have seen the dot get and dot post in a lot of programming so it's the same thing i'm doing a i'm doing a get on this and i'm telling it if anyone goes to the url tweets i'll return back some json code so let me do a const string equals so this json code right here is going to have a name and i'll just say coder kai i'll have a message this is my first tweet and username coder kai so this is just regular json format and i'm setting this up so that i can pull this information in my tweets page i'm just setting it up as a string and i'm doing a response.end and i'll return this as json stringify there we go stringify the string so you'll see what i said up here i'm really just returning json data when someone goes to this tweets page and i'm just making it into json data and returning it to the page there's also a router.post let's say if i want to add a tweet you know we'll call like that response let's do our arrow function and you know this is just not implemented yet so i'm just going to do that so you see what i'm doing with this handler here the handler is just handling a routing i can add any type of url routing that i want in here also i don't want to forget to do module dot exports equals router there we go and then now i'm going to include it into our index page here for our back end so i'll do a const routes handler close require slash route slash handler.js and then finally i also have to say app.use routes handler there we go so i'm using that file right here i'm using this that i'm including and this is handling our back-end routing for us now let's run this code right now i'll do node index.js so let me go to that port right now i'll go to 4000 and it say cannot get all right i don't have a function for to get the home page but i do have the tweets so you see when i call this routing for tweets it's returning this json formatted data for me and it's right here this is the formatted data that i'm returning so that that's exactly what i wanted to do so let's stop the server here and now let me go back into my package.json here because i want to set up the scripts for it i'll call this server and we can say no daemon index dot js also have a client and call this npm run start dash dash prefix dot slash front end so what am i doing here if i say npm run server it's going to execute this for me if i call npm run client it will run this code here and this code really just runs the code that's inside of front end here host will start the npm run start on that one and you'll see that i had to call prefix and tell it to run a folder a folder that's outside of the backend folder that's why i have this dot dot slash i'm telling it to go out one directory and then go into the front-end folder so that's why i have it like that and to use concurrently here we go i'll call this one dev you can say concurrently dash dash kill others on fill and then we need to do a npm run server and i'm escaping these quotes here that's all i'm doing and also escape npm run client escape and end that so that's how you use concurrently if you want to copy this this can be for like the live build or anything like that that you know once you have it running so i can say npm run dev down here and that will run this concurrently and what it does is it kills all of the other processes and then it it runs this one which is the server and then it runs this one so really this concurrently just runs two programs at the same time that's all it's doing for me so that i don't have to type it twice so i'll show you guys right now what i how i test out i do npm run server so now the back end is running on on this uh terminal here and then i just add another terminal and then i go into the front end so i see cd front end then i say npm start and now that's running the front end but i didn't tie these pages in yet so let me tie it in together and this is what i'm trying to do here the front end is running this but the back end i wanted to when i click on this tweets to show me the json data here i wanted to show me the tweet data let me show you guys now how to retrieve the tweets json data on our front end so remember we have the handler here and i don't need this anymore so i'll close that and i'm going to go back to the front-end folder in our components and open up this tweets.js because if you guys remember from our app here i'm telling it that when someone accesses the url tweets it's going to use the tweet file here it's going to use this and it's going to grab now the handler from this is going to grab this url and get the data from there so inside our tweets here since this was just hard coded i want to pull this now from our database right and remember from our handler here this is handling all of the database data imagine that i connected to a database i pull all the information and i'm returning it so let me grab this information from this page here and to do that i have to import some more stuff here i'm going to import use effect and use date and that comes from the react i'm also going to import link from react router dom now in our tweet here i'll return the data in a minute here but i need to use this use effect it's an arrow function and it looks like this and i'm calling this fetch item function in here i also have this const items and set items equals use state that's how it looks like and then i need to fetch my data my json data that i have in the handler so this is where it comes in right here fetch items is async and let's close that up now let's fetch the data i'll say cons data equals oh wait fetch tweets this is our tweets url from the port 4000 that we have in our handler here it's retrieving that info here and then const items equals away data.json so that's what it's doing it's fetching that url here tweets getting that data and then now i set it into my items as adjacent data and then i set the items so you see how this is using it this use effect up here it's calling this function first it's going to execute this and then i set the item so that i can use it in this return function down here and you know this is going to be something that you'll just have to remember but i like to just have a text pad to have the code inside and you just copy and paste because it will always be the same like this the only difference is what data you're retrieving and then you're setting it so so just remember that you're retrieving data and you're setting it so that you can use it in this return function in my return function to access this data so i have to put a bracket in here to use it like this and then i'm going to say items.map item and then this is where i can just call the item by saying item dot name item.message you know item dot username and remember we have to have a block code here so i'll just have a section and i want to put this in a div too right here so this is just very simple formatting so that i can just display the data and i want to make this little fix here guys this was my mistake in the package.json here for the back end i'm going to close that up for this back in here this proxy go ahead and remove that save that and it's supposed to be for the front end so go to the front end package.json right here and you want to put the proxy right here for the front end for this 4000 it doesn't matter if you have it in both back end and front end but it mainly matters for this front and patch.json and then let's start up our servers i have my front end running and the back end is running i just want to see this data get displayed on the page here you see here if i go home it shows the home page if i go to tweets and this is what i um my simple data that i'm just outputting right here and you see how that works imagine if i'm pulling data from a database and i'm populating this with a bunch of tweets let's say like 50 or 100 tweets you know it'll populate this page because i ran this function right here called the the map function i'm i'm iterating through each of my items and i'm displaying it so i want to say when i first started react i think the the part that i was having difficulty with understanding is the routing and i'll step through it again to to make it a little more clear let's ignore the back end here and i'll have the front end open here and the front end has this app dot js file and you'll notice that we created a navigation with our component nav that only displays a static link to to two links home and tweet but those links aren't doing anything unless i tell it to do something inside here that's why i have a switch and i'm telling it whatever link i'm clicking on to load that component so if i click on the home link it loads this home component if i click on the tweets link it loads the tweet component and where is it coming from here's the home component here here's the tweet component now this tweet component it's only for the front page here it loads this and it does a return right here where i can return any information but i don't want to return static information i want to return dynamic information that i'm retrieving from the back end and so to retrieve data from the back end we have to use this use effect and fetch items where we fetch it using this other routing i'm fetching it through the back end routing so this is where the data is coming from and then i return it and i iterate it through this map function and i return the data and so when we have our server started for the back end then it's going into this handler here see it's looking for these and it's getting that data and then this is where i can pull data from the databases i get it all together and i return it into this page and then the front end grabs it again the front end grabs that data that you just saw here i'll have both of them open so it's not confusing here's the back end handler when the link is clicked on it grabs the data from the back and tweet which is from this handler here's the tweet it's grabbing it and then it's returning this data back to us in here where i can return it to the screen so it's a little bit confusing at first but once you work on this enough where you create a couple of pages and return data you'll understand how the routing works with the front end and the back end i want to say that's the very important part of studying react is just to understand how front end routing works and then concentrate on the back end routing they both work separately there's front end processes that's running and then back end processors that's running and both of them have to run at the same time that's why you notice in my terminal here i have two of them running i have a terminal for the front end that's running a server or this is the back end that's running the server on 4000 then i have the front end on the other terminal running on port 3000 so you know they both run at the same time here see both of these are different pages this is the front end now if i change the port to 4000 that's the back end and so in the next tutorial i'll run through databases on how to connect a database in this handler where i'll connect to the database in our backend i'll pull all that data and then i'll just return it the same way as in the string here a big o string file and i'll return it and then you'll see that the front end can just grab all of that data and display it and this is where we make it all look pretty so i hope that wasn't too confusing and i hope this tutorial wasn't too long but that is the basics on how react works and that's why this is so popular because it makes it so much easier to run a web server to run a dynamic website pulling data from the databases displaying it to our front end and so yeah in the next tutorial i'll go through more of back-end data on how to connect to the database we'll set up a cloud database using mongodb and i'll show you how to pull that data back into our front end again so it'll be a continuation from this tutorial going forward and i'll use this same project for the next tutorial to show you guys how databases work to connect with nodejs i hope you guys enjoyed this tutorial and i hope i explained it pretty well please give this video a like comment down below if you're uh confused on anything i'll try to help you out and hopefully the community can also help you guys out with comments down below i'll have all of my code down below in the description i link it to my github and i hope you guys enjoyed this i'll see you in the next tutorial today out

Channel: Codr Kai

Views: 13,136

Rating: 4.9186049 out of 5

Keywords: node react tutorial, nodejs react tutorial, node js react tutorial, react js tutorial, learn react js, how to code react js, what is react js, react programming, react js programming, react js coding, reactjs coding, reactjs programming, reactjs tutorial, how to install react js, set up node react, node js, react js, node react website

Id: 3isCTSUdXaQ

Length: 43min 41sec (2621 seconds)

Published: Fri Dec 18 2020