React & Express Starter Pack For Full Stack Development

[Music] coding dojo is a programming school that turns beginners into developers in only 14 weeks over 90% of their grads land jobs within three months of graduating often making over seventy K per year to learn more visit coding dojo com or click the link in the description below hey what's going on guys so in this video we're gonna create a react and Express starter pack because I've been getting a lot of questions lately mostly from new developers asking me how to integrate a front-end react application with a back-end Express app and I figured that I'd create something that made it easy to get started with so I'm gonna show you that but I'm not just gonna show it to you we're gonna create it from scratch so you can see exactly how we can integrate the two together in an elegant way so basically all we have to do to get started with this is clone it or download it install the dependencies for the server-side with NPM install and then I have a script to install the react dependencies and then we can simply run npm run dev and that will actually run the client and server at the same time and we're able to do that because we're using a small module called concurrently and that allows us to have multiple commands inside of one npm script so it's gonna run the server and client at the same time so before we get started creating this i'm just gonna show you how to grab it and use it for your projects now you don't have to follow along with this part i'm just gonna give you an example so i'm gonna copy the git link right here you can also download the zip if you want but i'm just gonna go ahead and clone it so let's see i mean my projects folder i'm gonna get clone and then paste in that link and then it's gonna create a folder called react express starter so I'm gonna CD into react Express starter by the way I'm using Linux Ubuntu 1710 if you're wondering but it doesn't matter if you're on Windows or Mac it's it's the same thing same steps so now we're just gonna do NPM install and that will just go ahead and install Express and any dependencies Express needs and then once that's done we'll go ahead and say NPM run client install which as you can see it just CD into the client folder and then it runs NPM install so it installs all the dependencies for react and when we create this we're going to use the create react app CLI alright so once this is done we should be able to just simply run NPM run dev and it should start both the client and the in the backend which is nice and I think you've got you guys that don't know how to do this we'll find that it's it's actually a lot easier than you thought so let's do NPM run dev that should start up both and it's gonna open up and there we go so we have I'm using the basic layout that create react app gives you now these customers here these are actually coming from our back-end so if I go to another tab here and I go to HTTP localhost 5,000 slash API slash customers you'll see those three customers okay so this is coming from my Express server so we have both running and they also have a Campari act component that I created sorry about that guy's called customers and it's it's pulling it from our API okay so we're just using the fetch API to grab these so I'm going to show you how to do that how to create it how to create the react component how to interact with the API and all that so that's all be doing in this video guys hopefully you enjoy it and let's go ahead and get started alright guys so I completely scrapped what we just did I just wanted to give you an example of how we could pull it up the package and use it so now we're gonna start from scratch so I'm in my projects folder here in my terminal I'm gonna just go ahead and create a new directory and I'm gonna call it react Express and then we're gonna see the into react Express and from here let's open up visual studio code in this directory by just saying code dot and you can use whatever term whatever text editor you want okay I'm gonna use my integrated terminal you can get to this by going to view integrated terminal or you can use control tilde to toggle it all right so let's create a package dot JSON file with NPM in it so package name that's good version description will just say boilerplate for react and Express entry point I'm gonna use server dot Jas and let's see author I'm gonna put my name but you can of course use your own this is open source I'll give it an MIT license and everything should be good let's get rid of this so this is our package dot JSON file now I just want to get the dependencies out of the way so we're gonna do NPM I Express we're going to install Express and concurrently alright we're not gonna use concurrently until the end but I figure we'll just install everything now and then the only other thing that I want to install is node Mon and I'm gonna install that as a dev dependency so - - save - dev and for those of you that don't know what node Mon is it's basically just it'll run your application and constantly watch it for development so that you know when you make changes it updates all right so let's clear that up and then in this package JSON file I just want to add a couple scripts for now so I want to add a start script which is just gonna call node and then the main file which is server che s and then I'm also gonna have a server script which is gonna use node lon so node lon server dot J s so that's it for now let's save this close that up and let's go ahead and create a server dot JS file and then we'll go ahead and we'll open that file up alright so this is gonna be a very very simple Express server basically we want one route that's going to return just an array of customers so first thing we'll do here is bring an Express so we want to require Express and then we want to create our App variable and initialize Express and let's go ahead and and let's create a port variable to listen on and that's going to be 5,000 I wouldn't use 3,000 because that's the default for create react app and that's the tool we're using to generate our react application so now let's just do app dot listen on that port and we'll put in an arrow function here oops and let's just do a console dot log and we'll just put in some backticks and we'll say server started on ports and then we use a template string and we'll put the port variable alright so the only other thing we need to do in here is add the route so app dot get and the route I'm gonna use is slash API slash customers and let's put an arrow function here and we're gonna need to put our request and response and then what I'm gonna do is just create a variable called customers and we're gonna just create a hard-coded array here now in real life this would come from a database but this isn't going to be a full application this is just a starter pack and it's up to whoever is using it to to take care of that I don't know if they're gonna use MongoDB or MySQL or postgrads or redness or something else so we're just giving kind of an example here with some hard coded data so we'll do an ID let's say ID 1 and let's do a first name first name John and last name say Doe all right let's copy this we'll do 3 customers and let's see we'll just change up some data here so this will be ID 3 for the name let's do Mary and let's do last name Swanson I don't know where I get these names Smith say Steve Smith ID - all right so now we have our customers and now all we need to do is respond with Jason so res dot Jason and I'm just gonna pass in customers and that should do it so we'll save very very simple server but again this is just like a starter pack there's no reason for us to really add anything else to it now let's see if we can run this with node I'm sorry not node NPM run server ok so that worked because of the script that we added right here so this server that's what we're running and it's actually running node Mon server so let's go to our browser and let's visit localhost 5000 API customers and there we go so that's our three customers so that's essentially our back-end alright so now what we want to do is create our react application so close this stuff up now I'm gonna let this server run and I'm going to open up a new terminal so envious code I can just hit plus and we'll open up a new terminal and I still have my server running here for the Furyk's press alright so in the second terminal what I'll do is first of all we need to install create react app which is the CLI for react so we'll say npm i we want to install it globally and if you're a react developer chances are you probably already have this installed but if not then just go ahead and run this and you know what it's gonna give me an error because I didn't do sudo because I'm on Linux so I just gotta add sudo to the beginning there alright alright so now that we did that let's create our react app with the command create react app and we're gonna call it client so that's gonna click create a client folder inside of our directory here alright guys so now that that is done what we want to do is let's open up our client folder on the side here and open up package dot Jason now this is a really important step because we need to define our back-end and URL as a proxy so in the package Jason we're gonna put a comma here and we're going to define proxy and we want to define our back-end server which is HTTP localhost port 5000 now by putting this here we can actually make request to our back-end without having to include this inside of our for instance our fetch request will just be able to do fetch slash API slash customers and it'll it'll know where to go so it's very important to put this here alright and that's all we need to do in this file so let's see let's close that make sure you save it close it up and then let's CD into the client folder here and let's run our react server so we can do that with NP start okay so what's going on here is we just started the react server on 3000 and the back-end server is still running in this terminal okay on 5,000 so we have two separate terminals running two separate servers one front end one back-end alright we're not going to do that concurrently and mash them together until the end but what I want to do now is in react I want to create a component I'm sorry a customer's component and integrate that or not integrate but fetch the data from the backend alright so let's go into the client folder which is our react out into source and then let's create a new folder called components and then inside there I'm going to create a new file or I'm sorry a new folder called customers alright and then in customers let's create a file called customer zas and then I'm also going to give this component its own CSS file called customers dot CSS okay so in this customers j/s we need just the basic structure of a react component so what I'll do is copy app dot J S which is also a component that's the root component so I'll copy everything there and paste it in customers J s and I'm gonna get rid of this s this logo we don't need that and then let's import customers dot CSS which is the file we created and we're going to change the class name to customers inside of our render we want to just get rid of everything inside the div the main div here I'm also going to get rid of the class name we don't need that and then for the export we want to make sure we explore default customers all right and then in the div for now I'm just gonna put in h2 I don't have my Emmet set up for JSX so I actually have to type it out which sucks and in here we'll just say cost we'll save this and we'll go to our main app j/s so our main co-op component and just replace this paragraph right here with component by component customers like that and of course we have to bring that in so up here we're gonna say imports customers from and that's gonna be from let's see dot slash components slash customers slash customers all right so let's save that and go back to our application and now you can see that our customers component is being embedded into our main app component all right now I'm not I know I'm not explaining everything about react I'm assuming that you guys that are watching this at least know the very basics of react if not check out my crash course on YouTube but basically we're just embedding that component we haven't made any calls to the backend yet so that's what we're gonna do next so in our customers j/s let's go ahead and add a constructor here alright so we're gonna add a constructor and this is where we want to initialize our state so we're gonna say this dot state equals an empty and not an empty object but an object with a customer's array which is empty alright we also have to call the super function here because this is being embedded into a parent component so basically we just have our customers in our state which is completely empty right now so what we want to do is make a request to our back-end and then fill this customers with the data that's in the backend so we're going to use a lifecycle function or a lifecycle method called component did mount and that what this does is it runs automatically when the components mounted so in here we want to make our fetch so we're gonna say fetch and then we can just do slash API slash customers now I don't have to do HTTP localhost 5,000 because we put that proxy value in inside the package dot JSON file so we can do this whenever we want to access any routes in our back-end all right now with fetch we have to do it's going to return a promise we got to do dot then take the result and then map it to res dot JSON and then we do another dot then and that gives us our data so we'll call it customers and I do have a fetch API crash course as well so it's gonna give us our customers from our back-end and then what we want to do is put it inside the state so we'll say this dot set state and we want to do customers now this is actually like this customers customers but this is redundant so we'll use our es6 style and just do customers ok so again to reiterate we have our empty customers array in our state and then we're making our call to our back-end and then when we get the result there of the response which is gonna be the customers we're setting our state alright now set state you can actually pass in a callback or an arrow function in this case and we're just gonna do a console dot log and put in let's say customers fetched like that and then put in another parameter and we'll actually put in the customers that were fetched so now we can test this out and see if it actually grabbed the data so let's go back to our application open up our chrome tools our console and you can see customers fetched and we have an array with three values so these are being pulled from our back-end okay so reactant Express are completely integrated they're still running on two different terminals which is an ideal and then we're gonna fix that after but let's continue on and let's output the customers in our front-end application so to do that we'll go down to the render and let's go under the customers and we'll put in our ul and in here we're going to take our state we're gonna take the customers and map and we'll say customer for each customer we're going to output an Li and each Li is going to have a key card I'll complain it'll about not having a unique key so we're gonna say K equals customer dot ID and then inside the Li we're going to say customer dot let's do first name and then we'll do customer dot last name alright let's save that let's check it out and there we go so these are actually being pulled from Express alright so I do want to style these a little better because this looks horrible so that's why I created that CSS file so in here we're gonna put ul we're gonna say list-style:none padding:0 with 30% in margin auto alright and then for the Li I'm gonna do font size 1.3 REM and let's do a line height of to rem and let's do a border bottom of one pixel dotted and then triple7 alright let's take a look at that and that looks much better alright so that's pretty much it guys we have our data customers coming from Express so the last thing I want to do is make it so that we don't have to run these two different terminals so this is where it concurrently comes in so I'm going to stop the front end application with control C so this is in the client folder I'll go to the server and ctrl C and stop that and then let's go into our servers package package dot JSON file so right here with this is starting our back-end server now instead of going to into the client folder ourselves and saying NPM start what we want to do is create a client script and then we can go and we can say CD into client and do NPM start and that will start the react server or we could do NPM start and then just add - - prefix client and that'll do the same thing so we're gonna keep that and then what we want to do is do a dev script and then this is going to use concurrently so this I actually have to look at because we have to escape we have to use double quotes but we have to escape them so I need to just see exactly how this is yes so we need to do concurrently back slash to escape colon and then we're gonna do NPM run server and let's do another back slash and then quote and then we want to do our clients so NPM run client like that and then like that so - it should be - on the end here so what's happening is concurrently like I said it runs more than one command from one script so it's running both of these our server and our client at the same time so all we have to do now is run NPN run run dev so let's test it out I'm gonna clear this up and just say npm run dev and there we go it starts both up and you can see we're getting our customers and if we go to localhost 5000 you'll still see that that works as well all right so that's that's pretty much it I mean one other thing that I did for the github package so that you didn't have to go into the client and install dependencies as I created a client install script and for that I just did CD client and NPM install so that way you can install the react dependencies without having to actually go into the client folder yourself alright and that's it so hopefully this helped you guys out that that were kind of confused on how to you know mix react with express and build a full stack application and you know I would suggest using this this little package it's very simple I'm sure a lot of you guys are surprised at how simple it is but feel free to you know use the the the starter kit feel free to actually add to it and make a push request one thing I would like to do is add Redux so if any of you guys want to work on that and push to the repository that would be cool it can be kind of a community effort but that's it if you liked this video please leave a like please subscribe if you're not hopefully you guys have a great new year it's New Year's Eve just try not to get too drunk definitely don't drive drunk and have fun I have two kids so I will be spending the the evening here hopefully I can make it till midnight but yeah thanks thanks for watching and I will see you next year coding dojo is a programming school that turns beginners into developers in only 14 weeks if you're serious about landing a career in tech and black the formal education or background coding dojo will get you there in no time with over 3,000 graduates to date over 90% of their grads land jobs within three months of graduating often making over seventy K per year at tech firms of all sizes from companies like Google to local startups to learn more visit coding dojo com or click the link in the description below

Channel: Traversy Media

Views: 249,817

Rating: 4.9614472 out of 5

Keywords: react express, express react, full stack react, react server, reactjs express, react express server

Id: v0t42xBIYIs

Length: 26min 45sec (1605 seconds)

Published: Sun Dec 31 2017