MERN Stack Tutorial #8 - Making a React App

all right then my friends so now we've pretty much done the back end for now at least and we want to move on to the front end so we can start making requests to the backend api so what we're going to do is create now a react application so let me close this folder i'm going to cancel out of this process just while we work on the react app so then what i want to do is cd up out of the back-end folder and this is where we want to create a front-end folder so what i'll do is just create a react app and i'm going to call that react app front end so it creates that folder for us so i can say npx create hyphen react hyphen app and we're going to call it front end like so and press enter and then once that's done we can cd into that front end project directory for later so let me just minimize this for now and inside here we can now see the react application so we have the public folder with the index file that's the one that gets served and down here we have the source folder and in here we have a load of starter files now i'm going to get rid of most of these we don't need the app.css we're going to keep the root component app.js we don't need the test file we're going to keep that we need to keep this we don't need these three files here though so let's get rid of those as well so inside the index file we need to get rid of this import right here because we just deleted that file and also we need to get rid of that as well okay i think that's pretty much it for that file and then let's head to the app.js file i want to get rid of most of this stuff as well because we're going to create this from scratch so let me get rid of all that we'll keep the div with a class of app but we can get rid of that import and also this one as well we don't need any of those all right so the next thing i want to do is install the react router dom package so that we can add different pages to this application later so to do that i'm going to come to the terminal make sure you're in the front end directory and then we want to npm install react hyphen router hyphen dom like so and press enter and now that's done we can go ahead and use it inside this file so we just need to import a few things at the top first of all the browser router which wraps everywhere we want to use the router basically the routes component which wraps all of our individual routes and then the individual route component to create a single route and all of that comes from react router dom okay so down here we can use that i'm going to output the browser router component first of all remember that surrounds everything that ever needs to use the routing system and then inside here i'm going to do a div with a class of pages so all of our different pages are going to go inside this div and i've done this div so i can style these pages later on all right so now we want to output some routes so we need to use our routes tag and we want an individual route first of all and this is self-closing and it needs two different props the first prop is the path so what is the path of this route so i'm just going to say it's the default forward slash path the home page if you like and then the second prop is going to be the element that we want to basically render for this route now at the minute we don't have an element ready we want to create a page element or a page component that we can render right here so i'm going to create a new folder and call that pages and all of our different page components are going to go inside here i'll create a new one called home.js and inside here i basically just want to create a blank react component for the home page so i'm going to say const home is equal to a function and inside this function we just need to return a template for now and that template is going to be a deal for the class of home and inside that we'll just do an h2 that says home for now so dead simple and then we need to export this as well so export default home like so all right so now we can use this component right here so let me say home like so and we need to import it at the top of the file as well so i'm going to do a little comment to say pages and components and then we want to import home and it's going to be from and we want to go into the oops into the pages folder and then we want the home component all right so pretty simple now we have this home component being rendered for the root path if you like so what i'm going to do for now is just test this out i'm going to open up my terminal and i'm going to run a script that's found in the package.json file so you can see we have this start script we need to just say npm start like that to run that and hopefully it's going to spin up a local development server on port 3000 that's the default port it uses and then we should be able to preview this in a browser so now in the browser we can see if we go to local host port 3000 the home page the home component so that's working okay so there's two more things i want to quickly do in this lesson just to kind of set up the application the first one is to create some kind of header or navbar component that sits at the top of every page so what i'm going to do to do that is create a new folder over here inside the source folder called components and these are going to be basically reusable dropping components so let's create a new file and we'll call this navbar.js call it whatever you want and then inside this component we basically just need to do a simple navbar template so i'll create the navbar component first of all it's a function and then inside here we need to return a template so let's do that we'll say return and we'll return a header tag like so and inside the header we'll do a div with a class of container just so i can style it later on and inside the container i want to do a link and a title so if i want to do a link i have to import the link component from the react router dom package so imports we want the link components from react router dom like so and then we can output that link tag right here and we can say where it's going to go to it's going to be to just forward slash so the home page and inside the link we'll do an h1 that's going to say the title of the um the website which we'll call workout buddy really original all right so we need to export this now at the bottom export default navbar like so and then we can import it inside the root app component so import navbar from and it's dot forward slash and we need to spell input correctly so dot forward slash then into components and then we want the navbar components and then we can output it above all of the pages so we don't want to put it inside the pages we want to put it outside the pages but still inside the browser router otherwise we can't use the link component because everything to do with the router needs to be inside this so let's output that navbar component now right here like so so that's the first thing i wanted to do the second thing i wanted to do is just add a few base styles and we're going to do that inside index.css so i'm going to delete these and then i'm just going to paste in a few styles from my repo the course files so they are over here woohoo you can just go and copy and paste those as well if you want them because i'm sure you don't want me to type out manually all of this css so the first thing we do is import a google font which is and then we create a couple of variables a primary color which is this green color and an error color which is a pinky red for the body we set the background to a really really light gray strip out the margin and we give it a font family of poppins the header tag which is inside the navbar remember it's this thing right here we say give that a background of white and then the header container the thing inside the nav bar we say the max width is 1400 pixels margin zero auto left and right so it centralizes the uh the content into this column and then the padding is 10 pixels up and down 20 pixels left and right display as flex align items center and justified content space between so this align items this is to do with the vertical um kind of justifying of the content so it's all kind of level with each other and then justify content this is left to right so it's just going to basically put space between the elements at the minute there's only one element inside it but later there might be more alright so any anchor tag inside the header which is basically this thing because a link becomes an anchor tag we say the color is dark gray text decoration none and then the pages div which is this div right here we say the max width is 1400 pixels padding 20 pixels all directions and then margin is zero top and bottom auto left to right again to centralize the content within that 1400 pixel column so that's all done let's make sure there's no errors down here no there isn't so let's preview this now in a browser all right so this is all looking pretty good and if we inspect this element over here it should be a link yeah we can see it's an anchor tag now when we use that link tag from react router it turns it into an anchor tag it just gives it super power so we don't actually make that request to the back end and it handles the routing locally in the browser all right so that's all done we've set up this kind of base react app and in the next lesson i want to try out that api by fetching some data from the react application

Channel: Net Ninja

Views: 69,106

Keywords: mern, mern tutorial, mern crash course, mern tutorials, react, mongodb, node.js, express, node.js api, express api, express tutorial, node tutorial, node and react, mern vs mevn, full stack tutorial, full stack, full-stack, fullstack, mern stack, mern stack tutorial, mern stack crash course

Id: bx4nk7kBS10

Length: 9min 46sec (586 seconds)

Published: Thu Jun 23 2022