Full Stack React & LoopBack

Full Stack React & LoopBack [2] – React, Routing and UI

alright guys so in the last video we went ahead and we set up our back end with loopback so we have our meetups resource that is taking requests we have

our we can make get requests and post and put we have a complete restful api on the backend we even have user authentication but like I said we're not going to get into that just yet in this

series so what we want to do now is create our react application now I want this server to stay running it's not running right now if I reload it's it's gonna you know it's not gonna work but I

don't want to run it down here in vs code so what I'm gonna do is open up a separate terminal and by the way this is terminator this program here and we're just gonna CD into meetups and from here

let's go ahead and run node dot and start up our server alright so it should now be running if I reload it's gonna be running and I'm just gonna minimize that so to create our react application we're

gonna create a new folder inside of our meetups folder alright inside the root don't put it inside any of these folders and we're gonna call this client underscore source underscore SRC alright

and this is where our react application source code is gonna go and then once we're done what we'll do is we're going to compile it we're gonna compile the static assets into the loop backs client

folder so that we can run that on the same port but while we're in development they're going to be running on separate port so we're gonna have react on 3001 and we're gonna have loopback on 3000

it's gonna be very similar to the mean stack front-to-back series if you guys watch that as far as the work flow now since we're gonna be working exclusively in the client source folder we're not

gonna really need to touch the server for a while I'm gonna just open that up in vs code so I'm gonna go to file open folder and we're gonna go into meetups and then go into the client source

folder and click OK alright that way we don't get confused with the server files and we know that we're just inside of the client source folder alright we can open up the terminal with

control tilde or you can use you know view integrated terminal and just make sure if you're not using vias code you're using some other terminal just make sure that you're in the client

source folder okay if you don't if you're not in the client source folder then it's not gonna be built correctly okay so what we're gonna do now is set up react now we're going to use the

create react app CLI which allows us to generate a react application and it also allows us to build out static assets at the end when we're done so to do that we're gonna say npm actually I need to

use sudo because we're installing this globally so we're gonna say sudo npm install – g create – react – app alright so that'll install it globally okay so now that that's done i'm gonna clear

this out and by the way to clear this you can just do ctrl L so now that we have this installed globally we can generate a react application so to do that we'll say create – react – app and

then I'm just gonna do a space and a dot because I want to create it in this directory okay and it's just gonna go through and it's going to generate all the react files and folders for us now

throughout this series I'm not gonna be explaining you know the the very very basics of react now if you haven't used react before then you you can still follow along and you should be okay as

long as you have a basic understanding of JavaScript but this isn't going to be you know an intro to react if you want something like that I would suggest watching my react crash course but this

is more for people that have at least a little bit experience with react all right so that's all set so let's go ahead and clear this out and you'll see over here that it's created all these

folders for us if we look in the this SRC the source folder these this is our main react application we have our app.js file here which is the main app component we have our index j s file and

we should be able to now run the server ok the react server so to do that we can just say npm start whoops didn't mean to do that all right now it's gonna ask us it's

saying something is running on port 3000 because that's the default port for loopback so it's asking if we want another port instead so I'm gonna say yes and then it's gonna open it up on

port 3000 and 1 now I did notice that when I when I did this in Windows it didn't ask me if I wanted to open on another port it just said 3,000 was busy so what we're gonna do is we're gonna

add a little something to the package.json file that's inside of the react app so make sure you're in the client SRC package JSON file it should look like this and we want to go to the

start script right here and what we're going to do is we're gonna say we want to set port equal to 3001 and then just a double ampersand okay so that will make it start on 3001 so let's save it

and we can now close this up and let's just ctrl C to stop and make sure that it still works if we do NPM start it's probably yeah it's still gonna ask us we'll say yes but now if you're on

Windows it should still it should work now so just realize that now we have loopback on 3000 you'll see that that's still running I have that running here in the terminal and then we have our

react app alright so we're going to be working in react for while so usually when I install react with this tool with this create react app I do a little cleanup because we

don't I don't want for instance the styling and this logo and all that so we're gonna go ahead and and delete the logo SVG okay we're gonna delete that and then it's gonna automatically break

when we delete that that's fine let's go to index J s and let's go ahead let's remove this import index CSS line we don't need that and then we'll save and we're going to delete the index CSS file

okay let's go to app J s let's remove this import logo right here we don't need that we also don't want D well actually yeah well you know what we'll just leave the app CSS we can leave that

and save but I want to go to the app CSS and clear everything out okay just delete everything and save it alright so now let's see what else is going on here logo is not defined so now let's go to

app J s and inside of the render function here inside the return I'm gonna get rid of everything in this div right here and I'm just gonna get rid of the class name so it's just straight div

and we'll just put an h1 in here and we'll just say my app and save and there we go so now we basically have bare-bones react application now I think what I want to do first is implement the

router we're going to be using the new reactor out of version 4 which is much different than the previous version it's a little more difficult there's a lot more options and so on

so if we just go to let's search for react router version 4 and we want the web not we're not using react native we want the web version and you see there's a lot of different documentation here

alright we're going to be using this browser router if we click on that and see I mean this browser router this hash router let's see where's the page that I want to show you guys we're also

gonna be using this switch right here yeah so this is how we're gonna define our route so we're gonna wrap it in the switch tag here we're gonna bring that in from the reactor outer and then

define our routes and we're gonna define a path that's gonna go to a specific component in this case the slash is going to a home component alright so we're gonna have a meet ups component

that's gonna be our home route that's gonna be our home page which will list out the meetups will also have an about we'll have a meet-up details page will have the add page the Edit Page stuff

like that so we are gonna need to use the router now when we define how routes we're gonna do that in a component called main okay we're gonna create a main component to put our switch in with

the routes and then another thing I want to do is for components that are not using any kind of state or anything they're basically just used to display data or not data but markup I don't want

to use component I don't want to create a class and extend component we're gonna do it a different way so this app component right here we're actually going to change this up quite a bit so

I'm gonna actually remove the component up here we just want to bring and react and then let's see I'll just let me just get rid of this all together so what we can do is we can just create a variable

called app right and we're gonna set it equal to a set of parentheses we're going to use an arrow function here so equals and then an angle bracket and then set that to a set of parentheses

and then in here we can put the there basically what we would have inside of the render so we just want to div for now and then we're gonna put in our h1 and

I'll say my app okay and if we save that it should work the same exact way so this is much easier of course if you were gonna if we were going to have state and stuff like that if we were

going to use life cycle methods and you know all the stuff that goes with a react component then we wouldn't use this but this is gonna just basically just be used to display the main

component and the navbar component all right basically going to embed those into this app components so we don't need all that other stuff so what I want to do now is install the react router

and we're going to use something called react router Dom as well so let's go ahead and stop this with control C make this a little bigger and let's do NPM install – – save and we want to put in

react – router as well as react – router – Dom all right make sure you put the dash – save in there that'll add it to the package dot Jason so that should get added up here there we go

all right so now we have the router installed so we'll go ahead and run the server again with NPM start yes okay and every time we run the server it's gonna open up a new tab you can just close the

previous one all right so now what we want to do is let's close up the CSS we don't need that let's go into actually let's create our main component because that's what's gonna that's where the

routes are gonna go so inside the source folder inside our client source folder obviously we want to create a new folder called components and this is where all the components that we create are going

to go so I'm going to create a new file in here called mange s and all the components should have should start with an uppercase letter all right now we're gonna use the same

format that we did with the app component because we're not using any kind of state or anything here it's basically just gonna be our routing but we need to bring in a bunch of stuff so

we need to bring in a react of course we don't need to bring in component just react and then we're gonna bring in some stuff from the reactor outer Dom we want to bring in switch switch and row and

it's gonna be from react – router – Dom all right and you need to bring in whatever components that you're going to use in your routes you need to bring those in as well now right now we don't

have any we don't have any other components so what I'm gonna do is let's see what should I do I guess let's create the meetups component first all right we'll start off with just creating

the meetups component and the about component so let's say new file meetups dot Jas and let's also create new file about dot Jas okay now meetups Jas is is gonna have state and all that stuff so

we're gonna bring in the component from react as well so let's go import react and also component from react all right and then we'll create our class so this will be meetups and it's going to extend

component make sure we export it sport default meetups okay and then this is going to have a render and we're going to return let's return a div and inside here we'll

just put an h1 and we'll just say meetups h1 okay so there's our component let's save that and then let's go into our about J s now the about is just gonna be just static content so what I'm

gonna do is copy what we have in the app J s we're gonna use this format so let's save this or copy this rather and paste it in about we don't need the CSS and we'll just change this to about change

this title here to a boat and then we want to make sure we export about alright so now we have our two components that we want to use in our router so we can close those up for now

about and meetups go back to our main J s where we're actually creating our routes all right now we need to bring those in so we'll say import meetups from dot slash meet-ups

same thing with about okay so now that we brought those in we can use those in our routes so let's create a constant called main use an arrow this is going to go to a set of parentheses let's make

sure we export it okay and then here we're gonna put a main tag okay so this is just an html5 main tag and then we're going to use the switch that we brought in from the

reactor outer Dom so we're gonna say switch and we're just doing what I showed you in the documentation if we go back to here we want to create a route with an exact path and then the

component that we want for that path so inside here will say route exact path equals and this is going to be for slash and then we want to set the component equal to meetups all right now we can

end that you know what let me make this a little bigger alright so that's our first route and then let's copy this and then we're gonna have a route for a slash about and that's gonna go to the

about component okay make sure those are brought in up here alright so let's save that now in order for this router to work we need to use this browser router where is it right here this browser

router so we use it kind of like this we're going to do this in the index J s okay which is like kind of like the entry point so let's import browser router we'll go right here and say

import browser router this is going to be from react router Dom and I know this is a look the reactor router version 4 is a little complicated I think I might actually do a video

specifically on the router but we want to bring that in and then down here you can see that initially they're just putting in the main app component what we want to do is wrap this in the

browser router so I'm going to go to a new line here and just wrap it so I'll say browser router whoops and then it needs to have an ending tag so we'll go on the other side of it and go like that

all right and we'll just put that on a separate line okay so that should implement that everything else can stay the same and I mean and you guys that are familiar with react you know what

this is but for those of you that aren't right here we're selecting the element that we want to insert react into which is going to be the ID of route and if we go into our public folder and we go into

index.html notice that there is a div with the ID of route so that's basically where react is going to be is going to be put in now in this index.html I'm gonna get rid of these comments here I

don't want these let's change the title as well change this to meetups get rid of these comments here and get rid of these ones and we're gonna be using materialized CSS but I'm not going to

get into that just yet but let's save this alright and if we look back at our meetups component open up the console so there's no errors that's good and if we go into

fjs right now we're just we're just showing the h1 what we want to do here is put in our main component because that's where all of our routes are alright so we're going to replace this

now first we need to bring it in I'm gonna say import mein from now we're in the app j/s and the app j/s is not in the components folder so we need to go into that with dot slash components

slash main and then we can go ahead and we can put in main like that all right so let's save that and see what we get and we get meetups and that's exactly what we want because if we look at our

routes meetups is the the component we want to show for just the slash so if we go to slash about now we see about okay so our router is now implemented and working so any other component we create

we want to add we can just add to this main J's file alright so I know that that may have been a little confusing but hopefully your your kind of grasping that that this main J s is our router

and we can add any route so you want to any components we want now one thing about react is you can do you can do the same thing a million different ways so you may be used to doing it a different

way but this is just one way this is what what I prefer to do if you're familiar enough with react to build along with me and do things a different way on the front end but still have it

you know still follow along and use loop back and all that that's fine you can do that if you want but I think what I want to do now is implement materialized CSS and create a navbar so that we can

switch from the home page or the meetups to the about page also implement our style so for that lets go to materialized CSS calm go to get started and down here you'll find the CD ends

okay so we're gonna grab the CSS CDN and we're gonna go to index.html which is in the public folder and we're gonna put this right above the title all right so that's the CSS and now we want the JS

file which is right here so we'll copy that we're going to put that right above the closing body tag now materialise J s does depend on jQuery so we're gonna have to get that

as well so let's search for jQuery CDN and I'm just gonna grab the minified version three grab the script right here put it above the materialized j/s and then the last thing i want to import or

bring in is font awesome so I'm gonna search for a font awesome CDN I should know this stuff by now these links now I will click the first result and let's get this right here which is our link

tag to the font awesome script or CSS file and we'll put that in the head right below the materialize CSS all right so let's save and right away you'll see that our application looks a

little different the font is bigger and it's different that's because materialise is now kicked in so we can close up our index.html and let's create our navbar component

alright so in components and our folder components we'll create a new file called navbar j/s all right now with navbar I'm not going to use the shorthand syntax like we did with app

and main I'm gonna use the the full component like we did with meetups because we may have state in navbar later on when we implement authentication and stuff so I just want

to be prepared for that so what I'll do is just copy what we have in the meetups component and paste that into navbar and then just change the class name to navbar h1 we're gonna get rid of this in

a minute but I'm just gonna test it out real quick so just change that and then we want to export a navbar as well all right so let's save this and then we're gonna go back into AB Jas and we want

the navbar to go right above main ok because the navbar is gonna be on every single page so we don't want to put it in any of the routed components so we'll bring it in just like we did main

so let's do navbar navbar and we'll place that right here okay and save and now we have our navbar above about and if we go to the home page it should still show on meetups as

well all right now one thing I want to do is wrap the main component in a container to push it into the middle now I'll show you in a second I mean you guys that are familiar with react you

already know this but those of you that aren't react to use is something called JSX that's what this is it's not actually HTML it's JSX which is pretty much just

embedded HTML inside of JavaScript because right now we're still in JavaScript here now there's very few differences between JSX and HTML but one of them is that you can't use the class

attribute in fact if I save this we should get an error down here you'll see invalid Dom property class did you mean class name so instead of using class in our markup we have to use class name and

I guarantee you're gonna see me do this you're gonna see me make this mistake about a hundred more times because I just always do I always forget to use class name it usually still works but

you'll get this error down here and you just you want to stick the class name all right so let's save and now you'll see that error goes away and notice that meetups this is now pushed in the middle

because it's wrapped in a container alright so now let's go to our navbar component and let's add that okay we're gonna get rid of this h1 and then let's go back to the materialized site and go

to see components navbar and I want the version with the button here so that we have this little popup menu so let's see I guess yeah I guess we'll just copy all of this just to the nav

not the divs below it I'll copy that and then we'll put that in between these divs here let me just format this formatting is not working for some reason

all right so we'll just tab this over then okay so there's our navbar now we have quite a bit we need to do to this I'm gonna make this smaller and let's see we're gonna we're gonna add to the

nav tag right here first of all all of these need to be class name instead of class so it's a class name and in addition to actually we don't even want the nav extended class I'm just gonna

add the class of blue because I don't want it to be pink I wanted to be blue materialise allows it allows you to use color names for classes and then I want to just darken it a little so it also

get allows us to add like darkened three so that's what we're gonna use there all right let's just save this and see what it looks like all right so that's what it's gonna look

like now this logo right here we're going to change this to meetups okay and then let's see the link will go to slash and then this this link right here is what opens up the mobile menu now the

mobile menu or whatever you want to call it this thing over here we want it to always show even on larger screens it's gonna be part of our interface it's not just going to be a responsive

collapsible menu so what we want to do is add a class to let's see right here it says button collapse we're gonna add on to that a class called show on large all right and then data activates mobile

demo doesn't really make sense because it's not just for mobile so let's call this main menu and then we want to go down here where it says ID mobile demo and also call this main menu okay let me

just close this make this a little bigger so we have some other changes we want to do here right here with the for the the button collapse it's talking about this now we're not using

materialized icons we're using font awesome so inside of here let me just spread this out where we have our class of button collapse inside that you'll see an eye tag with the class of

material icons we actually want to change this class to FA and then FA – bars okay and then just remove the text that's inside of it so now if we save that and reload now we get the little

bars icon here alright now we're getting these errors down here because we're using class instead of class name on a lot of these so let's see we'll change this to class

name this I know this is kind of a pain in the ass and you could do a find and if you do find and replace just make sure that this cuz this will get changed to class

name make sure you put that back to class alright and then let's see we'll get rid of everything that's under the side nav ul right here this div with the the

class of nav content we actually don't want that it may have been easier to just type all this stuff in rather than copy it but whatever it's fine alright so now we have to you ELLs we have this

one and this one all right now this first one we're actually going to change we don't need the nav mobile ID and then for the class name we're gonna change it to we're gonna keep the

right class and we want to change this hide on medium and down we want this to hide on small only okay so hide on small only because we only don't want this to show on small screens which is going to

be the link over here alright now there's only gonna be one link here so let's get rid of two of these el eyes all right and this is gonna be for the meetups or the homepage I should say

meetups the href actually we're not even going to use an href because we're not going to use an a tag we're gonna bring in something called link from the router dom so up here we'll say import link

from react – router – Dom all right and then instead of having an a tag or our way right here instead of having this a tag here we're going to put in link and

that's going to have an attribute called – and we're gonna set that to slash which will be the home page and then we'll just take away this ending a tag and make it an ending link tag like that

all right and then I want to have an icon next to this meet-ups text so we'll put in an I class equals F a font awesome and then let's do F a users and close it all right and then I'm gonna

get rid of all these allies in the side nav for now and let's just save and see what that looks like all right so now we have our meetups link over here it looks like we still

have some classes this should be class name save that where else right here class name what else am I missing right here okay now this this little warning here is

just saying that links must not point to hash it's talking about this right here so we actually don't need that I'm gonna get rid of it and that should get rid of that error all right and then the last

thing we need to do is implement the side nav now the side nav is gonna have two links it's gonna have one two meetups and then one to add a meet-up which is a component we haven't even

created yet but let's copy this Li paste that in twice okay so this one is fine this is actually gonna stay how it is the second one however is going to be the add meetup so it's gonna go to slash

meet-ups slash add which doesn't exist yet but don't worry about it and then this is gonna be FA plus for the icon and for the text we'll say add Meetup okay now if I save this and we try to

click this it's not gonna work because with materialise you actually have to initialize the side bar or the side nav let me see if I can find that here so right here we have to add this to our

script in our index.html so let's go ahead and do that lets go to index.html in the public folder go down to the very bottom here and put in a script tag alright so it uses jQuery so we need to

do document document dot ready and in here we'll just put an arrow function and then we need to put in this okay so we'll save that let's go back and there we go so now we have our

little side menu okay and where are we're on the meetups page right now if I go to add Meetup that's not gonna work it's I mean it's not gonna do anything but it's a

component that hasn't been created yet all right now the last thing I want to do before we end this this part is put the floating but add button down here just that that materialized floating

button let me see if I can find it in the documentation here so buttons yeah we want like something like this I'm not gonna copy it because I'm not using all of these all of these different allies

and stuff it's pretty easy to just type in so let's go to app J s and we're gonna go right under this div of container we want to go under the ending div and we want to put in a div here

with a class name I forgot my bracket so we want to put a class name of fixed – action – BTN all right and then inside here we're gonna put an a tag actually no let's let's do link will bring in our

link from the router so we'll say import link from reactor outer Dom and then we'll say link whoops – and this is gonna go to slash meet-ups slash ad and it's gonna have a class name of

BTN – loading it's also gonna have a class of BTN – large and it's gonna have a class of red all right then we need to end the link and then inside the link here we're just going to put an icon so

we're gonna put an eye class FA and then FA – plus ok let's save that let's check it out and there we go I forgot to do class name told you about 99 more times I'll do that so I think that that's a

good place to stop for now in the next video what we're gonna do is start to work on getting the meetups from the API from the backend and bringing them in I think we've done a pretty good job of

creating our interface so now we want to work with the backend so that's what we'll do in the next one hey guys if you've been watching my videos for a while and you really like what I do when

I've helped you out a lot consider becoming a patron even for one dollar per month that pushes me to keep bringing you guys the best content I possibly can

there's reward tiers for discounts for you to me courses personal support and more so check out the patreon link in the description below for more info

In this video we will setup our client/React app and implement routing with the react router dom. We will also create the basic UI with Materialize CSS

CODE: Full app code
https://github.com/bradtraversy/meetupz

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

COURSES & MORE INFO:
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia