Learn The MERN Stack

Learn The MERN Stack [3] – Client Setup & Reactstrap

all right so welcome to the next video when the last one we created our entire back-end we created our API which accepts a few routes it has a few end

points such as API slash items to get all of our items a post request to API items to add an item and then a delete request to API item slash ID to delete that particular item so now we're going

to do is start to work on the front end we're going to start to work on react so what we need to do is we need to create a new folder here that's going to be basically our client side app so I'm

going to create a folder called client and that's not a folder is it so let me just delete that and create a folder called client ok so this is where our react app is going to go now we're going

to use the create react app CLI to generate our application we're not going to do any crazy web pack setup or anything like that so right now I have the backend server running I'm going to

go ahead and stop that and clear this up and we want to CD into the client folder ok make sure you CD into client this is where our react app is going to go so if you don't have create react app

installed globally then go ahead and do NPM install – g4 global and then create – react – app like that I already have installed so I'm not going to do that but once you have installed you just

want to create react app and I want to generate it in this folder so I'm going to just do dot you know you could have from the root you could have did create react app client and it would have just

put it inside client but you know I just created the folder and then did dot so it does the same thing it's going to generate it in the client folder which is what we want and it's going to create

a package dot jason and keep in mind this package dot jason is completely separate from your servers package jason ok this is the client side everything in here is client side everything out here

is server side ok this is a full stack app and this this package dot jason should change once all this stuff is done and this sometimes takes a minute or two

okay so this is the client-side package Jason and includes react of course react Dom and then react scripts because with create react app you can do like NPM start it'll run your dev server you can

easily compile and build out your app with NPM run build you also have test and eject now it's this is a very very important step when you're building a full stack app the way we are you need

to you need to add a proxy value in your package Jason because when we make requests don't type this out I'm just showing you something when we make requests from react we're going to be

using Axios so we want to do Axios get we don't want to have to do HTTP localhost 5,000 slash API slash items we don't want to have to do that right so we just want to be able to do a bit of

whether it's fetch or Axios whatever you're using you just want to go to API items and have it know what the hell you're talking about so that's where this proxy comes in so right under

scripts we're going to put a comma here and then we're going to define a proxy and that proxy is going to be our back-end server so it's gonna be HTTP localhost port 5000 okay that way it

knows what we're talking about when we when we put in an endpoint like that so make sure you save that and by the way if you look at our react Express starter and we go into the client folder

package.json you'll see we have the same thing okay so we're essentially just kind of recreating this now we want to we want to be able to run the the backend and the front-end at the same

time okay in our development environment so what we could do I mean right now we could go in the client folder and we can run NPM start that'll start the react server and then we could go into the the

server folder run npm run server that would run the server but i don't want to have to have to command lines open at the same time and do all that crap so what we're going

to do is we're going to use something called concurrently which will allow us to run both at the same time which is which is fantastic so let's CD back so CD dot dot I want to go back to the

server okay outside of the client and actually we don't even need to do anything we don't need to do it down there we want to open up our package dot Jason and the server okay make sure it's

the server one not the react one and oh that's right I need to install concurrently that's that's why I was down wait we already have concurrently installed nevermind I'm friggin going

off the rails alright so we already have concurrently installed if you don't see it here go ahead and NPM install concurrently and then what I want to do here is I want to be able to just run

the client if we want as well so just like we can run just the server with this command so I'm gonna put in a client script and what we want to do is run NPM start right but we want to run

it from the client folder so what we can do is we can use dash dash prefix and then client and what that does is it'll go into the client folder and then run NPM start at the same time you could

have done like CD clients and NPM start you can do that as well but I think the prefix it just looks a little cleaner and then that'll run the client so right now we have the server we can run the

server we can run the client with two separate commands now we want one that runs both and we're gonna call this dev ok so what we're gonna do here is we're going to use concurrently

so we want to say concurrently they spell that right and then we need to actually do a little bit of escaping here so we need to use a back slash and then some quotes or a back slash double

quote back slash double quote and then in here we'll put our command we want to do npm run server okay so this will run this that'll run the server we also want to run the client so

we're also gonna put in back slash double quote back slash double quote and in the middle here we'll do NPM run the client oh we need we need one more double quote at the end here there we go

so we can run the server separately if we want we can run the client separately or we can run both with NPM run dev okay because that's gonna run both of these I hope that makes sense

one other thing that I want to put in here is a client install script okay and we're not going to need to run this now but just for future reference if you want to move this app and you know you

you let's say you put it on github you're not going to have your node modules folder in your client included in github so if someone clones that they're gonna need to run npm install in

the client now instead of seeing into client and doing it I just want to climb a script called client install so what we'll do here is we'll just do we'll do NPM install – – prefix client okay we

need a comma at the end here that way you can just do NPM run client install and it'll and it'll install your client-side dependencies and you don't have to CD into that folder so I think

that that's it for for the scripts guys and this should match up with the react Express starter that I showed you so let's save this and now hopefully we can do NPM run dev and it'll run not only

the backend port 5000 but also the the react dev server on 3000 so let's clear this up and let's try it so NPM run okay so for five thousand and then it should open up our react server and

there we go so we're now running the back and front end with one command if I go to localhost 5,000 slash 5,000 slash API slash items there's our item okay so we have both

running which is exactly what we want all right so now let's start to work on our react app so let's see I'll just I'll just leave this stuff open and you can see now how this react Express

starter works and I did create a video you guys can watch if you want creating that as well but anyways let's go back let's close this up we're gonna leave the server running both the front end

and the back end and I'll just make this a little smaller and let's go into our client folder alright so from here let's do a little bit of cleanup because I don't want like all the default stuff

for instance the logo SVG we can go ahead and delete that and we can delete index dot CSS we don't need that we can delete actually we want to keep app dot CSS but just get rid of the CSS inside

of it and save it alright and then let's go into not public let's go into the index.js file and remember we deleted index CSS so we want to get rid of that completely that reference and save and

we shouldn't have to touch this file again let's go into app guess get rid of the logo because we're not using that and for the render I just want to keep the parent div and get rid of everything

inside and for now we'll just put an h1 and we'll say hello and save so now if we go back to our react application and right here it should look like this okay and I'm going to just open up my console

just to make sure there's no errors alright now we have some dependencies to add to our react application all right and the way that we're going to do this is we're going to start to build

just our react application we're going to use react strap we're going to use react transition group stuff like that and then we'll move on to redux I want to kind of build it without redux first

and then move on to redux and then ultimately you know connect to our back-end and make it a myrn stack full stack application so let's see and bear with me guys because there's just

there's a lot that I have to do and I'm trying to do it in the right order but let's let's get bootstrap setup alright so not just bootstrap but all of our all the dependencies we need so I'm going to

keep the server running and just open up a new terminal and I want to go into the client this is very important that you go into the client folder okay you should see this stuff your public and

source folder alright and then from here we want to NPM install bootstrap we want to install react strap okay because bootstrap it basically allows us to use the bootstrap CSS and so on react strap

allows us to use basically bootstrap components as a react components and then some other things we need is we're going to use something called UUID which just generates random IDs we're not

going to health we're not going to ultimately need this because the IDS will come from the database but just for now I'm gonna kind of build it with static data first and then we'll connect

our API let's see what else do we need here I'm not gonna install Redux and stuff yet oh we want the transition group so react – transition group and I think that's it for now we'll do the

Redux stuff later and if we look at our packaged ojiisan in our client folder those should get added here again make sure it's not in your server side okay so that stuff has been added good all

right so the first thing I want to work on on the react side as far as components is our navbar alright actually before we do that let's

just make sure we import bootstraps so in our app dot j s we're gonna go right above this where we imported app dot CSS and we're gonna import and we want bootstrap slash dist

slash CSS slash bootstrap dot min dot CSS like that and now if we look at our app it should yep you can see that the fonts change the margins change bootstrap is now being included all

right so let's go back and let's create inside of our source folder we're gonna create a folder called components and inside here we're going to create a file called app navbar J s so this is going

to be our navbar and we're gonna be using react strap for this now if we look at the reacts track documentation we don't need to see this right now I'll just search for react strap and if you

go to components you can see examples of everything so for instance if you want an alert you can bring that in from react strap you can add the color and you know each component has its own

properties so if we look at navbar you can see there's quite a bit here they have dropdowns and stuff we're not going to need all of that but notice that there is a toggle function and there's a

piece of state called is open this refers to the hamburger menu when you have a responsive navbar and it's a small and a small device you have that hamburger menu or you click and it kind

of flops open all your links that's what this is it is open means that it's shut if it's true that means that it's open and then toggle is just going to basically just toggle that if it's open

it'll close it if it's closed it'll open so we need to have these the state this is open in this this this function as well so I don't want to just copy everything

from here because I don't like to do that I will paste in some things but for the most part I want to just type everything I know it can be kind of a pain but just for those of you that are

following along and I would highly recommend that you follow along in these types of tutorials so we're gonna create a react component so let's import react and let's import component from react

okay now we have a bunch of stuff we need to import from react strap so I'm actually gonna paste this stuff in okay so we're bringing in collapse because I do want to have the de toggler

even though the only link in our navbar is gonna be the github link I still want to have the the responsive hamburger menu just in case we add more links in the future so that's what collapsed and

nav our toggler for navbar is the actual navbar we have the brand nav which will wrap around all the links now if item will wrap the nav link the nav link will actually be you know it'll have the href

attribute on it and then container is just a bootstrap container to move everything to the middle so we want to bring this in from react strap okay now we'll create our class called app navbar

and we want this to extends component and before I forget like I always do I want to export default app navbar all right so there's our class now it does have like I said we need to have that is

open state so we can put a constructor here whoops constructor and we'll pass in any props that are passed in here we'll go here and then we need to call super because that's going to call the

parent classes constructor and we also need to pass in any props there now if if we look at the document tation for the toggle function okay they have a toggle function like this so

toggle I don't want that toggle like that if we do that then we have to bind this so and you guys that know react you already know this but for those of you that that are kind of confused by it we

would do like this thought toggle equals this dot toggle and then we would have to do dot bind and then pass in this now the reason for this is in a react component in a class you have default

methods or lifecycle methods like render component will mount component did mount in those functions or methods this is available and this pertains to the class or the component when you have a custom

method like toggle this isn't automatically included so you would have to bind this to that function and you could do that in the constructor but there's a workaround if you don't want

to have to do this for all your custom methods you can simply use an arrow function so we could go like this okay and this is just where any parameters would go and then we just have an arrow

and now we don't have to do this okay and then for the state we can say this dots state and state is just going to be an object and it's going to have is open and it's gonna be set to false by

default now since we took out the binding because we're using an arrow function we really don't need a constructor okay we can create state without a constructor and all we have to

do is take this and replace the entire constructor which ends oh that toggle is outside of the class I got to move that in but we can just go like that okay and then let's make sure we move this inside

the damn class okay now the toggle is actually very simple all we're gonna do is change is open to whatever it's not because we want to be able to toggle it so let's

this thought set state ok we'll pass in the state object and we're gonna set is open to not this dot state dot is open so whatever it's not if it's closed we wanted to open if it's open we want it

to close and that's it for the toggle so now let's create our render make sure we're still in the class and we'll say render and we want to render our navbar using basically using these these

different components so we're gonna have a parent element of just a div and then we want our navbar and this is all in the documentation as I showed you it's a really cool way to use bootstrap because

it allows you to use bootstrap in in a react type of way these taken properties so like for instance navbar will put in a color and you can use any bootstrap context color so success for green

primary for blue I'm gonna use dark you also want to add a dark attribute just to let it know that the navbar is dark so the text should be light and then let's do expand oops I don't want those

expand for those of you that know bootstrap you can do a class of navbar expand SM which will be will little create the hamburger menu on small screens or you could do MD for medium or

LG for large I'm gonna do SM basically want the responsiveness to kick in on small screens and then you can also just add regular classes with class name so I'm gonna add MB 5 which is margin

bottom 5 it'll just move everything down under the navbar ok now in the navbar I'm gonna put a container because I like everything to be put you know in the middle for some reason I can't use M it

with with this stuff I don't know why if anyone knows let me know I can use it within JSX just not with these react strap components so in the container we'll have our brand so navbar a brand

see that's why I keep forgetting these angle brackets because I'm so used to M it and then this can take in an href if you want we'll just have it go to slash and then the text inside

here which is like our logo text we'll just have it's a shopping list alright and then under that we want our navbar toggler which is the hamburger menu so let's say navbar toggler and this is

going to take this is where we want to call the toggle function or the toggle method so we want to do an on click event handler and we want to set this to a set of curly braces and say this dot

toggle okay and then yeah we can just end that like that actually and then underneath that is the collapse okay because the collapse will come down this is where we want to set in is open

property we want to set that to whatever the is open state so this dot state dot is open okay so we want to set that we also want to say that this is a navbar so we add this attribute because

collapse can be it doesn't have to be part of a navbar we need to let it know that it is and then in the collapse we put a nav tag capital n nav and this takes in well it doesn't take in but I

want to put a class name of ML Auto which is margin-left:auto it'll just align the links to the right in our case just one link and we also want to define navbar because you can have Navs without

nav bars and then inside here we want to put a nav item no properties or anything let's close it up and now item and then in here is where we put our nav link so we want to nav link yeah and this takes

in an href and for now I'm just going to have this go to my github but ultimately it will go to the repository when it's created so let's say it DPS github.com slash bread traversée and

then we want to end the nav link and we want to put in here for the text I'm just gonna say github like that alright so that should do it let's save now we're not gonna see it

obviously because we haven't included it in our main app J's file so let's do that now we'll go to app J s and let's bring it in so import app navbar from its in the components folder and its app

navbar and then what I'll do is just replace this h1 we no longer need that with app navbar and let's save and let's take a look ok so your render method should have a return statement what did

i do what did i do render oh that's neat to look in here I don't have a return you guys probably saw that a long time ago alright so what I'll do is just grab this and move it in here like that get

rid of that okay let's try it out there it is all right so that's our navbar let's make sure it's responsive BAM and there we go so this is what I mean by the is open state so it starts

off false when we click this the is open state goes to true and it just toggles all right so we have our navbar cool now initially I wanted to get a little more in in this video but it's running kind

of long so I think I'm going to stop here we did actually set up our client folder we set up so that you know concurrently so that we can run the server and the the front-end at the same

time and we also implemented react strap you saw how that works we created a navbar so in the next video we're gonna work on the shopping list component ok so we're going to put that together

we're also going to use react transition group module or package so that we can have the little fade effect and so on and you know at first we're going to put all of our state just

locally in the component then we'll move to adding Redux and we'll put our state in there our data in there and then we'll ultimately connect to our API and bring in the stuff from there and make

our requests and all that alright so I know this is going to be kind of a long long tutorial or series but hopefully you guys are enjoying it and you're learning a lot from it and that's it I

will see you in the next video

In this video we will implement React and make it so that we can run the back and frontend servers at the same time using a package called concurrently. We will also create our AppNavbar component using Reactstrap

Code:
https://github.com/bradtraversy/mern_shopping_list

MERN Stack Front To Back Udemy Course:
https://www.udemy.com/mern-stack-front-to-back/?couponCode=TRAVERSYMEDIA

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia

The Developer Hangout: Public Discord Server
https://discord.gg/developers