How to Build a React Application with React Router Dom Version 6 - Beginner Tutorial using Routes

what's up guys i'm back with another video in today's video i'm going to show you how to build this fully responsive react application here and um basically it's just like a data science website comprised of several different components we have the nav bar component up here at the top here is a hero component that takes up the full width of the page there as we go down we have a pricing component i have a testimonial section an faq section and then down here is a contact section and of course the footer there everything is 100 responsive looks great on mobile devices here i know my picture might be blocking some of the screen so i apologize for that um but we're going to use the you state hook and react for the our our mobile menu and i'm going to show you how to do that and also when i designed this project i was initially going to use a react scroll package to where we just make it like a one-page application where we click the links and it just goes down to that to that section um however react router dom version six just came out with that updated version just about a week or so ago so i thought it'd be cool to incorporate wrecked router version six into this project there were some minor code changes so i thought it'd be cool to show you guys how to do that so i created some routes right now we're at the home page with all these components and basically i just reuse the these components on those on those routes so if you click on the pricing route here we have um slash pricing and i just threw in the pricing component same with the faq and then the contact as well so i'm going to show you how to incorporate and use the uh router dom version 6 in this project and um of course show you how to build everything else from the beginning we're going to start from a clean slate so if you're ready to get started let's get going all right the first thing i'm going to do guys i press the control back tick button to open up our little terminal here in vs code and what we're going to do i'm going to change my directory to my desktop and then i'm going to create my react app so i'm going to type npx create dash react dash app and i'm going to call this project uh aptiv dash react and active is just a little name i came up with basically it's just for this data science website here that i created okay now that the react app has finished installing what we're going to do now is uh i'd like to clean this up a bit and just take care of some files i'm going to delete some files that we're not going to be working with and that's just just that's just going to make it a little bit easier to follow along and not be as cluttered so going to delete those if you've watched any mail there any of my other videos you know that i always like to to do this first there we go and we'll import react from react we can delete this so what i want to do first before we start our development server we're going to be using a few different packages today we're going to be using react icons so let's type in npmi react icons we'll go ahead and install these don't forget to type dash dash save for the react icons and also i want to incorporate the new version of react router dom that just came out probably about a week or so ago from the time of this recording so i just want to show you guys how to incorporate the new react router version 6. so to do that we're going to type mpmi react router dom and then i'm going to type the at v6 and that is going to install version 6. we'll look in here our package.json there's our react router dom 6.0.2 and our react icons so everything has been installed let's go ahead and start our development server close this a little bit here and yes i'm going to make this a little bit bigger zoom it in so it's a little bit easier for you guys to see there we go and let's make sure everything's working all right perfect perfect so what i want to do we can delete that what i want to do i'll make this full screen i want to kind of set up our file structure so there's many ways to do this um this is just how i'm going to do it i can delete that div we're going to have a components folder so let's make that obviously all of our components are going to live in there and we can go ahead and i'm going to make an assets folder if we have any images or videos we'll go in there then also i want to have a routes folder okay and this is going to be where our where our pages are going to live so we'll kind of do that at the very end i think just to kind of keep it simple so let's get started with our our app component here so what i actually want to do is for the sake of doing the uh the version 6 of react router what i want to do is i'm going to have i'll just go and do it now so let's import we're going to do routes and route so instead of router we're just calling it routes in the new version 6 here then from react router dom and in here we're going to have our routes and we're going to have in here our different routes okay or different there we call it route it's singular here and it's going to have a path do and then also this is what we're gonna do an element and in here we're gonna put our components that we don't have any created yet so let's go ahead and create our first component and my first component i'm just going to call it home.js and this is where i'm going to basically display a lot of my components my home page so i'm going to type rafce to generate a functional component and let's also create a home styles.css and we'll import that great okay and make sure this is working properly oh don't forget this will be a component here and if you press enter it'll auto import at the top just saves you a couple seconds so let's make sure we have to wrap this in a browser router as well so let's go to index.js and instead of the react.strict mode we can just say browser router and that should auto import at the top okay so let's just look and see there we go okay so everything is working properly um it says hello here and this is rendering in our home right here so this is going to be our homepage and inside our homepage i'm going to list out all of our components here right here and then just to give you a better understanding this is our home component and again the home component is going to be comprised of our nav bar our hero banner here our pricing component this is our testimonials component our faq and then contact a footer but this is all within the one home component then if i click on pricing i just um i just plugged in my pricing component here same with the faq and the contact so that's how we're going to be structuring everything again sorry if there's any confusion there many different ways to do things in programming and coding so that's the way i'm going to do it i might get some heat in the comments below but that's cool let me know if i'm messing up and i'm always happy to learn some new new new ways to do things so inside our home component let's go ahead and uh we're going to create a nav bar let's do that first so it's navbar.js and a navbar say styles.css and again and here we can type rafce and this is with the es7 react native snippets so just real quick yes evan there it is is this es7 react redux for the quick snippets here that way you can generate components and have some shortcuts here for anybody who's interested in that so for our navbar let's go ahead and um let's go ahead and do that here so and we're going to use links for our navbar so we can go ahead and incorporate our react router dom we're just going to use the link i think at this point so from react router dom and we are going to use a few [Music] of our react icons so let's go ahead and import those fa bars fa times from react icons whoop not retrogram react icons and don't forget type the fa fa and let's go ahead and get started here so uh let's do just a a header here there we go and inside this header we're going to have a say a nav with a class name map bar okay and in here we're going to have a div and this is gonna be our logo and i have a logo that i'm going to pull over uh if you want you can just use i can just do some text for now you could just say here logo or whatever you want to say but i'm going to go ahead and pull over my image into my assets folder all right there it is it's going to be our that is going to be our logo so i'm going to import it at the top import i'm just going to say logo from the outside of this folder into the assets and logo.png so we're going to say image source equals and then for curly brackets here called logo and then we're going to give it an alt tag if not react likes to complain to you um let's go and wrap this in a link okay so link to and this is just going to go to the home page and we'll just cut that and paste it right in there okay so underneath our logo we'll do uh the logo div let's do a ul with a class name of nav menu okay and we'll do some list items with a class name of nav item and in here let's do our links so link to and it's at home class class name of nav link and this one's just going to say home i'm going to copy this down a few times okay and what do we do i think we did pricing then we did the faq and we did the contact okay and underneath the ul here unordered list let's do our hamburger so we're going to say hamburger and here we're using our fa f a bars so it should be looking good here oh of course got to import it here and we're going to import it on this one we're actually going to import it um may import it on our app.js as well but for now let's just do it in our in our home here so nav bar press enter and it'll import it at the top let's refresh here there we go looks pretty ugly because there's no styling let's take care of some styling um right now here we can close that we're not working with these right now just declutter a bit and for our navbar styles let's go ahead and we'll just start at the very top so we had our header we're going to make this with a width of 100 a height of 100 pixels and a background color of uh we're seeing dark gray let's go ahead and do some css variables since we're using several different colors in here um that'll be a little easier to track things so in here i already have some variables i'm just going to pull over i copied them down earlier if you're not familiar with css variables basically we do a a colon and then root and then we can assign uh these are just names that i used you can use whatever you want then we assign our our hex code there um but that's how css variables work and i'll show you how to incorporate those so box sizing we're going to say border box and we also want to do we only want a margin so margin 0 padding 0 body i'm not fond about all those i have some google fonts that i'm going to pull over if you're working in react i assume that that you're familiar with how to pull over uh fonts so i just i brought over what i mean montserrat so if you're uh if you're like i said if you're using um if you're in here using react i'm gonna assume that you already know how to pull over some fonts from google so let's just give a little um some background i think we use this up here we didn't define that one so color and i'm gonna do font family we're using mod serat that's how we do it gonna put that in parentheses though and never leave just one font guys always give it a backup like sans-serif a generic font not all browsers potentially could support the initial font that you choose so just good practice to do that list style none and let's also do text decoration done i'm going to give this a color as well and i'm just gonna give it there we go um also i'm gonna do a primary color i'm gonna show you why uh because we're gonna use this in a span as or as a class name color and it's going to be so this is how we use a css variable so we type var then parentheses dash dash primary that's going to be that purple that we defined at the top right here okay and let's go ahead and add in uh some buttons here because we're going to be using these throughout the throughout the application so i just want a 100 padding of eight pixels on the top and bottom zero left and right border radius four pixels multiple border one pixel solid and we'll use that primary color again and let's do the background color and we'll get the text is going to be white oops that's the problem there and a little cursor pointer and let's do hover i'm just going to copy that down and so the primary secondary cool okay so back to our navbar styles let's go ahead and import this color and the background color that i'm going to use on this one is the dark gray that i previously defined there we go and a header with a nap bar we're going to do a max with and this is just giving it basically just like a container you guys so i want this to take out the entire 100 pixels of the header and zero one rim get a little bit of padding margin auto uh we want the display flex content we'll do space between and now let's do our logo here not in line i'm all over the place here all right and why are you not working you know i probably forgot to just import style sheet so import uh this is another problem okay i was treating this as a class name it's not a class name okay let's fix this header there i see just like that header logo image and let's give it a width let's do uh 80 pixels i think see 80 pixels and we'll give the height auto that should fix some problems there we go okay let's finish styling that we're going to hide the hamburger we'll add in some media queries like this what we need to do we still need to style our nav menu so get some room nav menu and let's do flex we wanted to lay down align items center and justify yourself to start there we go looking a little bit better there there we go we'll need some padding um so let's do a nav nav item we have padding 0 and 1.5 rim on the left and right so while we're at it let's go and style this hamburger yeah just so we can see it here i won't be able to see it i'm gonna go in here and give the hamburger some color so to do that we type style two parentheses all over the new quotations there we go and there it is at the top so let's fix that put it where we want it and to give it a position of absolute and we went from the top two rim right one rim make sure it's where we want it that looks good there you know let's see if we can do this that might be better oh that's not what we want hey what let's do this ctrl z get back back back back cool all right let's do that looks good but we don't want to display it so we can just uncomment that okay let's do some media queries looks good things should be white let's throw that on right there [Music] actually these aren't a tags we did give them a class and we called them the nav link color there we go okay let's do some midi queries scroll down give you guys some room here so you can see media screen and we'll do a max with let's do 960 pixels okay and in here let's do the nav bar first we'll do our nav menu so nav menu and what we want to do we want it to obviously show when we're at a large screen then as we're below this break point here we want it to condense down and we want it to show our hamburger so there that is all right and we want this we want this position to fix we're actually going to fix it off the screen it's going to be left at um negative 100 but what i'm gonna do is for now for now i'm just going to leave it at zero just so we can see how we're styling it um let's do a flex direction of column and we want to justify content to the center let's give it a background color of we'll do our variable dark gray and give it a width of we want the width to take up the entire screen so we'll say a hundred percent with a height of 100 as well text align everything to the center let's give it a nice little transition here there we go so i need to fix a few things in there mmm justify cool i just need to space it out but that looks good right there and let's space it out real quick so nav menu let's see nav light margin let's do 1.5 from the top and bottom zero left and right we'll make it a little bit bigger let's do 1.8 rim um let's let's okay looks good so what we want to do to make this um open up when we click this this bars and then also close when we put in our other icon we want to give it an active class and uh to do that let's hide that off the screen so what you just saw before is what's going to look like when we click the bar and right now is how it's going to be until we make it active which we're going to do right now with the menu that active and it's going to be left zero okay so let's go ahead and uh make this uh this hamburger button click and work so we're gonna do that with you state we're gonna import it at the top of the state hook there we go and in here give it some room what we're gonna do we're going to give it a const and then a bracket with two values and do click and set clicks what i'm going to call it and it's going to be the state hook with a default value of false okay and let's do we have to do a candle click um our function is gonna be arrow function i'm just gonna call it handle handle click and what we want this to do is set the whoop set the click to [Music] there we go i think that should be to be unclicked that should work okay let's go ahead and our nav menu right here is what we want to toggle so we can delete that i'm going to open up some curly brackets and i'm going to use this when clicked we're gonna display the see nav menu and the active class that's gonna bring it onto the screen else we're just gonna display the nav menu class which is not active so it hides off the screen so we still have to put in the handle click here or we did right there so let's do that down here and we just knock that down right there and what we're going to want to do is we're going to say see click basically when uh when cl when we click it we want to display and this is our other uh this is our other icon the fa times okay fa times um otherwise we're gonna display this right here let's go ahead and copy that we can cut that and make sure we put it in parentheses there we go and let's go ahead and copy this the styling over we want them to be the same color and we give it a size let's give it a size of give it a size of 20. let's do that for the bars as well that was 30. so still have to put a click event here i just want to pull a little bit open there so you can see if i save it should knock it down there we go that's what we're doing there and on this hamburger here on click we want to run the handle click there it is so everything i believe should be working properly if we click that oh there it goes uh not displaying properly so we need to fix that nah net mav that's the problem there okay there we go cool all right so that concludes our nav bar let's go on to the next component we can close that close that don't believe we'll be doing that so after navbar we use what we do next we did we did our hero so let's do our hero here we're going to go ahead and create that in our components hero styles.css and just generate our component here import our style sheet and then for our hero we have on white screen it's a grid and over here we have some content then over here we have our our sign up form our login form so i'm going to close this down i'll make it a little bigger so we can see what we're doing as we toggle back and forth and in here we're going to be using several icons so let's go ahead and import those i already have these predetermined we're even using a fa slash database uh fa asterisk f a accu solved f a we're doing the facebook and we're gonna do a twitter one and github from rack.icons and don't forget the slash fa okay so for our div let's give it a class name give it a class name of hero then under here we're going to have a div with a class name of container and let's do the class name content this is going to be the left side and on the left side let's give it a class name column one so column one will actually be our left side and for h1 we'll say data to enrich your okay and then down here we're gonna have our have our span here okay let's just copy that down and in here we have our span with our class name primary color i'm just gonna copy actually we can delete that because we're not even going to say that we're going to say online business there we go and after that we'll use a p tag here and we can just put in about 20 words uh you can use like a lorem 20 so that's what i'm going to be pasting in here it's just about 20 characters if you notice how whenever i save it it kind of reformats everything that's from the prettier extension that i'm using so that comes in pretty handy if you want to use that okay so inside our column one below the p tag we're going to give it uh this we're going to put our used by icons so let's do div with a class name say used by and then here p used by and let's do our div class name icons right whoop this needs closing div cool and in here store icon so i'll show you why i'm going to do this this i tag here so we might not even need a class name for this here let's just do this and these are just some names that i came up with here sex and we have star ai and let's do for this fa database all right and this one's going to be our fa asterisk and then in here fa accusoft cool all right and there we go a little space there everything's looking good so let's do our second column so the used by so right under this one div with a class name we'll say column two inside column two is going to be our form right our login or a registration form so let's give that a form form layout and we're going to have a div with a class name form container and inside that we're going to have a p tag give it a class name sign in text there we go we're going to say sign in with and here is here's where we're going to use our our mobile buttons okay so let's give it a class name kind of giving the user the option to sign in with social we logins sign up an i tag and we're going to say let's do our fa facebook um let's give it a size give it a size of 20. do like that and let's copy these down and this one's going to be oh fa twitter we'll do that big github cool github right on all right under here let's do i'm going to have a divider here and in here i'm just going to give it a span um also here we're going to well let's do this let's do a p tag and inside the p tag we're going to do a span and i'll show you why we're going to do this kind of gives it a little bit of an offset but it looks like the lines going through the text let's go to our form so form action we're not going to have an action we're going to leave it blank we're going to have a couple inputs so input type of text with a placeholder and the placeholder is going to be name i'm just going to copy this down um i guess we can change this to to email it doesn't really matter the form isn't going to be functional so um but good practice right and then let's do a button we'll say create your account all right then underneath our form underneath the form container let's do idea with a class name i'm going to call this form warm footer and inside our form footer let's do a p tag so maybe some little legal notes by signing up you agree to our terms data policy let's put that we'll say uh let's do a span we'll use our class name primary color well that didn't work out there we go and in here we'll say terms data policy and [Music] i'm going to copy that down so and then this will be the plain white text again and then put cookie policy in here and a little white period in the back cool so let's see i think that should be about it um let's give it some styling we'll give that some styling here let's have a look at it that's what we want it to look like and let's see nothing let's do our styling well of course don't forget to import this and i didn't press enter that's okay there we go all right oh facebook's not let me see spell it fa facebook yeah it's a lowercase b react is really good about telling you wherever you messed up so that is a really great feature of react so let's style this thing go in here to the hero styles and let's start off at the top um let's see hero let's do a width of 100 percent um when the height to be 100 height so let's give it a brow ground color same as the nav bar our css variable dark gray there we go and let's do our container let's give it a max width of 12 40 and i have some padding zero on the top and bottom one on the left and right one rim arginato is gonna shove everything into the middle all right let's do our uh our content div so hero content we're gonna display this as grid okay because we want it to we're gonna do the grid template columns up to uh we'll say two one fraction and let's do our hero um uh let's do column one okay column ones give it some padding one ram one ram one rim i want it to be zero on the left though that's the far left and for the height of this column we're going to say 70 viewport heights and i want this display flex it's really easy to stack everything the flex direction of column and then we can justify content not self content to the center let's dial that h1 um and let's do the font size uh we'll do 42 pixels weight of 700. and let's do hero do our p tag now one size little ram and let's do our variable just gray give it a line height of let's do 1.4 margin uh let's do margin assume margin top of um we'll just do 1.2 ram give it some space so it's easier to read and let's do our use by next so hero used by we're doing the p tag in there so color r we'll do light gray font size uh let's do uh one two twelve pixels let's get margin two ram on the top zero on the left one room on the bottom or sorry right and then zero on the bottom or zero on the left excuse me and we'll color these things padding let's make this just padding right though okay now let's do the right side where our uh where our form is that should be the left so hmm so hero column two let's give it a padding of one rim we want the height to be the same 70 viewport heights and let's display this as flex with a flex direction of a column and we'll justify the content to the center and also a font size of let's do 0.8 ram there and let's do v tag we'll give it a color let's do our discard gray i think the next one was form layout form layout then form container okay so for the form layout form layout here let's do a width uh we'll do 400 pixels and we're going to give it all media queries um margin auto background color we'll do our white and get a little rounded edge at six pixels next is the form container let's give it a padding let's do 1.5 rim and we'll do two ram and after the container our sign in text that's how we did it let's give it a margin let's do margin bottom and pixels um this is our social social login and let's give it a background of all white padding let's see i'm gonna do 16 pixels on the top 45 pixels on the right six pixels on the bottom and 45 on the left border one pixel solid variable see light gray and a little border radius for these social icons of 4 pixels next we are going to do our divider divider there we go that's all that's left here so i'm saying go into divider and then the span background color and padding zero pixels p span and forgot to just style this here the p tag above that i'm just going to paste that let's give this width of a hundred percent takes a line to the center border bottom this is going to raise the bar up so it kind of looks like the bar is going through our our text okay now let's style our form we're gonna do the inputs so we'll say form input we're gonna display a block with a width of 100 percent margin 1.2 round top and bottom zero on the left right give it a border and a radius there we go don't forget to close that okay our little form footer that's the background color [Music] let's say border bottom right radius pixels i'm going to cover this down change that to the left now let's do our p tag and i think our span um give us a font weight maybe a little bit bigger let's see how this looks we have not done any media queries refresh look i think it's going to look pretty good yeah perfect let's do some media queries we want these to stack when we drop below our specified pixels probably going to do 940 or 960. let's do that right here let's say 960 pixels our hero height auto width 100 let's do our container we're going to change up some padding make sure we're specifying the hero container and so this is where we're gonna stack them then for column one uh column one we want to give it a height of 90 bh and basically instead instead of stacking i don't think we're going to stack we'll probably just hide the that form on a mobile on a mobile device just to make it easy here i'll give it a max width let's change the size of h1 bring it down to 32 pixels [Music] i think it was like 48 or 46 something like that and yeah let's just go and hide it well let's see how it looks there we go it's picky we could do that let's i'm just gonna hide it now so that was our column two i'm just gonna hide the entire column two with the display none there we go okay everything looking good all right what's next so for our next thing we did was pricing there we go so a lot of these i just had on mobile devices so let's go ahead and do our pricing next so let's create our pricing component here racing.js and we'll do pricing styles on css and we're going to import that and let's go into our home press enter so it auto imports at the top and now let's do see our pricing we'll go ahead and jump into some of the jsx here so um for pricing basically it's going to be did we hide that yeah so it's going to be basically every both of these right here um but on mobile devices we just kind of hide that so let's go and do some pricing i'm going to give this a class name of pressing and do a div with a container whoops class name of container last name [Music] you say this will be top and top content there one more div we'll have an h2 in here and say everything you need or let's give it a span 99 a month and we'll do a p tag in here see includes there we go outside of this div let's do a div the class name we'll say button div not the most creative at naming and then below here in the top content we're going to do a day over the class name of bottom content and there we're going to have we'll have some little cards everything you need and we'll have an h3 here all in one one and let's do a tag and i'm gonna do some laura i'm probably about 20 or 30 20 or 30 words there so outside of that p tag let's go outside of this div actually the div i'm gonna have another another card and inside this div we're going to have i don't know if we actually need uh we're going to use font awesome in here no let's not use i'm not going to use any font awesome we're going to leave some if more lauren have some text just about six characters and i am going to copy this this down here do um five times there and let's go ahead and you know what we're gonna do this on both sides so we can actually just select this card div and just copy that down as well that's gonna work um it's gonna work perfectly and i think that's all we need to do um just need to give it some styles so let's go ahead and style the um stellar pricing all right give it a margin top rim i'm going to max way i think we're doing 12 40 pixels padding one rim so let's do top content first and let's see we're gonna display as grid we're going to do three this time yeah three fraction three then one let's give it a border why is it keep selecting that it's not what i want let's do the light gray there we go and [Music] adding let's do the bottom up three rim let's do a font size 38 pixels and let's dial our span and we'll do primary for that one okay i'm just going to copy that down it's going to be for the p tag and i'm going to use gray alright so let's style our bottom content now also on display grid got a good gap just 10 pixels and the auto on the sides spell our card now we need to go back up and add a period there yeah let's see so we didn't name this dude but it's the only one in there so that'll be fun every time give it a one pixel solid and let's do our light gray and we'll give it padding uh one rim at the top and bottom zero on the left and right and we'll do let's see no border i don't know if we're using that one let's just do our spans i'll give it 14 pixels and let's don't forget to style rh3 in there let's have a look and see if um that should be good for some then we do our media queries oh we're gonna fix these buttons here you know what let's go in here but we could just do that see if that fixed it ah perfect all right so looking good looking good now on media queries for immediate when we shrink down to a mobile size i think we're just going to hide some of these things and we'll rearrange it just a bit um or changes to one column on the grid and we'll just we'll hide this down here and maybe change some font all right so for our media queries just hide that all together we're going to change the h2 size to okay let's have a look all right cool looking good yeah i think that's really great actually boom condenses down what's the next component looks like the testimonial component this box right here so for that we'll go ahead and create a new testimonial a new testimonial functional component testimonials dot js and testimonial not ls.css keep it consistent let's get rid of some of these let's clean things up a bit and import our style sheet okay don't know why it's doing that all right there we go let's import it right here okay so we have our functional component let's go ahead and get it to work on it give it a class name testimonial and in here over the class name container man another div the class name [Music] we'll say i'm gonna say outline i don't wanna be naming double naming things i'll show you why we're doing so many divs here we're going to do an overlay fa we're using the database this one we need to import that at the top oh man sorry i work on two keyboards um i'm only at home about three quarters of the time when i use the one keyboard and then when i'm at work i use my laptop uh primarily so i've i've really probably look into getting a mac keyboard for my house so i might cut down on some of the errors here all right so under here you got p tab with a class name body and we're gonna throw in some lorem text again i don't feel like typing it out we're looking at about 20 characters there are 20 20 words then under the p tag but within the content div we're gonna do one more last name of name and this is gonna be miss mary where's cover that down just a p tag because all we need ceo of stacks boss lady okay so for our styling let's go ahead and work on the see testimonial uh container outline so we're going with 100 well this background and keep it white margin of three right now top and bottom zero on the left and right and for the container let's do a max width um i know it's kind of redundant to be typing out this container over and over and since we are on react we can reuse components i could easily just create a container component i'll probably do that on my next on my next video so here's what we're going to do um we're creating this image here we're going to import the image with css but we're going to create a a linear gradient over it okay so here's what we're doing for that it's kind of a lot so i'm going to kind of i'm going to copy it over but kind of explain what we're doing here so first we're typing this gradient and we want that to display from left to right so to left and i'm going to copy this rgba over right here and put a comma and this is our second value our second color okay then another comma and um after that one sorry what i'm going to do is um let's see a comma here i'm gonna just space here hopefully this work i just want you guys to be able to see it and this is just an image i grabbed it from unsplash you can grab one wherever you like this is just the target image i'm gonna copy over single quotes here so that's what it is right there i know it's kind of a lot um really this this link is the long part but um that's going to give us a gradient over our picture so let's first we need we also need to give it a width and a height to kind of define its dimensions so let's do a whoop there we go the keyboard again width also need to close that brackets here width of 100 but we're going to give it a height of 450 pixels and again we'll um let's change the position we're gonna we're gonna give it to media queries as well of course so order radius and we'll do 10 pixels kind of give it a nice little rounded edge um let's see how our image is looking there so i think it's looking pretty good um that's exactly what we wanted here so notice the color over here is a little bit darker and what we want to do is move this text down to the bottom bottom left okay and it's already responsive how it is right now so let's go ahead and move that down so this mono and that was the content and we went to display flex flex direction up column so it stacks nicely let's give it dimensions max width we'll say fifty percent um just apply content to the center and give some padding uh also let's just do our um our body and our body here and then our p tag right there i think just um we don't want it all around just the top and bottom and our name we'll give it 14 pixels let's see how that looks hey there we go we need to change the color though the color is not working [Music] let me change that span as well so let's go into do we have it up here no we don't okay well we can just change it here that might work yeah there we go cool all right so looks pretty good and it's pretty well responsive uh not perfect um but we can we're gonna change that we'll do that some some media queries right now and see testimonial there we go that should be a little bit better let's refresh there we go perfect all right so our next component i think that's pretty much it for for our testimonial so our next one below that our faq so let's go ahead and what we can do is we're going to create our next faq component as well as our style sheet so let's go ahead and do that inside our components faq dot jds and faq styles.css rafce to generate our component and we can close this testimonials let's import this one all right so for our faq it's not going to be too terribly long let's start out here by giving this a class name called f a q uh let's say let's do this um i'm gonna use that down below section faq all right and then let's do give it a container this is going to be a div with the class name we're going to make this column one and in here we're gonna have our frequently asked questions and then p tag and find the answer you were looking for i'll give it a p tag at first reach out to our let's give it a span so it changes colors customer support team there we go now let's do column two underneath that div last name column two inside column two we're gonna have a div class name i'm gonna call this faq okay let's do uh h5 so h5 well we'll throw in some jokes here and let's give it some lorem cool cool i'll just copy that same one down um [Music] how many do we do here see how many we did yeah four cool looks like that's more than enough all right there we go that's four there so underneath um and it's probably really about it just style it let's do our styling next so this is our testimonial well no it's not sorry uh what do we call it faq section faq section faq that's not what we called it it's different by making this a little bit more difficult than what i need to do sorry and let's go to the container hmm uh let's do okay so basically um one smaller um column and then two larger one larger column so install our h3 font size do 28 pixels get some padding one room zero and let's do uh that text there do our great let's color our span and do that next all right spam most all our spans are going to be that primary color let's do one ram for h5 and there we go and the last one our little p tag in there are gray let's see how that looks without any media queries let's reload that looking pretty good pretty good could copy that down do we make two in this one i think we did no just one cool yeah i just didn't type it as long here okay and what we want to happen when we shrink down to mobile just falls all in line so let's do that right now um let's change the grid template column two one just one fraction would be the whole page refresh boom cool there we go that is it on the faq and what is next after faq is the contact so let's go ahead and do our contact and on see how it looks on full screen basically we're into the grid again with a quick form over here alrighty then we just have the footer and that'll be it guys so in here we can close the faq and let's create our contact dot js whoop i'm gonna generate my component here there it goes contact styles import contact styles.css and in here there we go all right so for the contact let's start out with question not content contact we'll give it a container inside the container we're going to have we're going to have two columns so last name we'll have a column one and inside the column one we're going to have another div with the class named live content and in there um i'm going to break this down one but h2 it says get in touch okay and then also we're gonna have a b tag with some lorem text again probably about 20 characters or so i'm going to save this so it formats it there we go now let's get down into the address and some icons here so underneath this div underneath the content div but still in content still in column one so inside inside here is that where we yeah right in here um just make sure inside the content is that where we want to be yeah we want to be inside the content so right here we're going to do class name address and let's give it a p tag and we're going to say evergreen paris copy that down and we'll just change that this is not real address by the way i'll give it a class name icons and in here we're going to use our react icons again um reuse fa boom go and hit enter and i'll auto import that there we go and we give it some styling in here so style let's do margin right and whenever we do styling in the in jsx here um we need to make sure we use camel camelcase so no dashes and we always put the value here in parentheses so let's give a number one two three six seven cool so that looks good let's copy this down and we'll just change it to um set an f8 phone we'll say envelope and make sure this brought it in up top and it did that's perfect um we'll just go ahead and change this to an email address and let's do another div right below that one with the class name careers and here we'll say looking for careers then a span view all job openings all right and then now we need to go column two so we'll highlight this column one to make sure we go just below that and we're going to give this a column two there we go and inside here this is going to be our form side so i guess first thing we can do in here is we'll go ahead and start with our form um watch this we're just going to leave the action blank it's not going to be a working form input type of text the placeholder of say full name me make that capitalize all right i'm going to copy this down a couple times i'll make this one email and this one is going to be boom and let's do a text area so let me see what we're going to do for text area let's um let's see how big we're going to make it exterior let's give it a and we'll give it a name we don't really have to but message um placeholder message let's see make it 30 i think should be good 30 and then rows i think we're going to make it 10 rows and that should be it for our text area we do we are going to use a little checkbox here let's give a class name checkbox and in here we'll have our input type checkbox self-closing and for a p tag see by checking this box you agree to the span so we can change the colors on that privacy policy and i'm going to copy this down so you can see what we're doing here and let's give another span and we'll say cookie policy there we go and put our period in there so it's a white period and see that's the div there after that p tag and let's give it a little button here a little submit button there we go let's do some styling we'll make sure yeah so yeah let's work on some styling before we even look at it we already know it's going to be disastrous here so contact container column one contact we'll do our width of 100 give us a margin i really should pull that out and make it easier um guess what i have to do that once we already did it here there we go let's go with column one and we're gonna flex it one zero forty five percent with the padding a five round two ram from tag the column one h2 and get a font size let's do 28 pixels adding 0 and let's do let's do our p tag let's give it some color here do the whoops color and so our address one rim on the top and bottom zero left and right contacting column one let's do our icons let them display black some line items to center and do some padding and zero on the left and right so we still have our careers basically just some padding and changing some colors at this point okay column two let's work on our form here we want this to flex one zero five percent and we give it some padding there we go okay so contact and our form move to stack max with a 500 pixels margin auto and let's do our inputs so a little bit of a rounded edge and give it a border let's do our light gray and let's do our text area um let's say one rim let's give it some padding as well 00.6 same size and let's just copy this down we'll just use that save a couple seconds there we go how we could do this make it fun there we go don't forget we got to put this in parentheses ah there we go all right so let's do our checkbox next that section contact and so form see check box input install this just a little bit actually this would be zero all around i think that should be looking pretty good need to do some media queries man it looks pretty good oh that looks looking kind of funny we'll have to fix that but let's go ahead and do some media queries all right um so for our media queries let's jump in only going to be a couple i'm gonna give margin to the whole thing and we're actually going to want the container to flex the column i think zero top bottom one rambo left right and let's give this some padding that should be a little bit better yeah not bad not bad i'll come back and fix that here a little bit let's just uh wrap up our footer here so to do our footer um let's move on and create those components so we're going to do a functional component for our footer as well and our footer styles and let's bring this in at the very bottom all right let's get started with our jsx and we're gonna use some some icons in here at the very bottom let's go ahead and get this in here we're gonna do a container as well that's gonna do the class name oop let me call we're also gonna give this uh solutions and i'll show you why here in just a moment solutionis all right we'll do a ul here do an li tag i guess we could do some links we'll do we'll do a link i was going to do a tag but if we're going to do the react router dom let's go ahead and do link import that at the top for me too there we go and it's going to say marketing and let's copy these down do analytics commerce insides cool underneath the solutions div we are going to let's just copy this down i'll make it easy and instead of solutions we'll change this to support because this is going to be our little support section here and we'll say pricing [Music] documentation and guides api that is okay and let's do i do one more how do we have this set up so this is what we've done so far we want to do this company and then also illegal as well so let's just slide that in let's copy this down a couple more times so what do we do next the company we're not even need to use the house i'm not sure if i'm gonna use them or not about blog and we're gonna do jobs press and at the very bottom we'll do our legal claim privacy policy does that make any sense we'll say cookies and terms okay so underneath this div we want the subscribe so give them a chance to subscribe we'll say the column of subscribe inside we have h6 so it says subscribe to our newsletter okay like that rptag latest news articles and resources sent to your inbox weekly right underneath that p tag let's do let's do one more div with a class name it's gonna say subscribe here we'll give our input type of email the placeholder enter your email subscribe now underneath there i think it skipped down let's do our footer here inside the main div so div with the class name this is just the foot at the very bottom of the footer we're going to have some icons inside the content we'll have another do the class name rights and door amberson signs we're going to say what is it copy workflow i think it should be they'll at sign all rights reserved then underneath this div let's throw in our react icons use fa facebook go ahead and auto import that let's give a small styling in here as well give it a size of um 20 a little bit of styling color i can't use the variables in here so let's type them out like so also some more styling remember we have to use the camel case it's more than one word and everything the values go in parentheses so that looks good there we're going to do instagram and we're going to do what is it twitter twitter and i think the last one was a github get oh damn it okay so that's it let's make sure it imported all of our yeah that one great imported all of our icons at the top everything is looking great we're just going to have to do some styling on our footer let's go and do that before we have a look width of a hundred percent you could have a background color uh i didn't um we use the same color it's a dark let's see the dark gray our variable right so one one one one and then two for where we have our subscription and let's do our footer our h6 and we can still rp tag kind of lump that in here as well now we'll do light light gray get a font size of 14 pixels 0.4 ram top bottom 0 on the left and right let's give our let me give a class name in here i'm just going to copy this down on all of these so we can target those instead of just the li okay here we go so for link we'll do color light gray we'll do the same font size 14 pixels basically we can just use every let's use this as well i think we want to display this the block so it looks turns out okay okay now we still need to do our input and our button ram all over we've done four pixels let's give it a width of 250 pixels pixel solid and we'll do our light gray install just a little bit of this button let's say 150 pixels and we still have a few more things contentive margin um padding to ram all around let's display this as flex um let's see if we're gonna use this don't think we'll need to that may actually be it let's see how that looks man that looks great just let's do some media queries all right perfect we're almost done with this thing let's do footer and we'll do the container and instead of the grid we'll just display this as black oh rap grab we're going to actually take away a few of the a few of the columns when we get on mobile that way it's not all jumbled up in there we can also do i don't even know if we really need all those yeah we'll just do a support and let's just hide those let's do this i'm gonna still probably need to change our input buttons we want those to be the full screen probably same with our button here something to think about when you're doing um button sizing in regards to mobile devices i can't remember what the exact sizing is of like a thumb hitting the screen but i want to say it's right around 50 pixels i'd have to google that to make sure but something to keep in mind especially if you're doing apps or or any you know a lot of mobile mobile devices let's see how this looks man i think that looks pretty dang good that's a little let's go back up here [Music] i need to change this light gray let's let's see which one's this inspect that's the d3 okay let's just say gray see how that looks yeah that's better you can see that make sure it's all responsive perfect perfect all right let's jump into the the version six of react router we'll do that right now so originally when i was building this project i was not going to use uh react router and different routes and pages i was just going to basically just um use a the react scroll link or package to link down to these these sections here but since like i said react router version 6 came out about a week ago so i figured this would be a pretty easy project to kind of convert and create some routes and some pages so let's do that we already installed our our package our react router dom and just to show you if if you're confused on that just type npmi react router dom at v6 for the for the latest version um well right now for version six zero point two okay and uh basically i'm gonna start the server back up one of the main um changes in the code visually in the code that you'll see is that the um there is no switch anymore um we're using routes and instead of switch so let's go into our index.js we already did this earlier in the video instead of the react strict mode we're going to say browser router excuse me and we're going to wrap our app around that and make sure you import it here at the top as well and then in our app.js initially i had all of our components here just like so in the app.js file but since i wanted to use the react router down version 6 in this project i set it up a little bit differently so basically we have one route brackets here and everything is going to go inside our routes like here is our home page right and our homepage consists of all these components so what we want to do to make each page to make each um you know pricing faq and contact its own page what we want to do is go into our routes folder that we created earlier but we did not put anything in there so what i'm going to do i'm going to have the pricing.js okay and i'm going to generate a functional component here but it's going to be a little bit different than the um then our component that we're using because basically this is a this is a page doesn't look any different in the code here but it is a page and we're going to import our nav bar and then also the pricing component in the footer we're going to do it that way so in here i'm going to sit nav bar and press enter it will auto import at the top and then we can go down and we're going to put the pricing again import there we go oh didn't pull that one in we'll just type that in so import pricing and actually so this is going to be outside that directory and the components and then the pricing because we're looking for this one right there so and there let's add our footer so footer auto import there we go it pulled it down right there okay so that should be at you guys on on the pricing one but we need to add a link to it so in our apps we'll add a route to it okay so what we're going to do and this is all inside routes we're going to type route path and then um be what you want i'm going to call it pricing okay and then in our element just like we did for the home we're going to put our component in here which was the pricing there we go and we need to import this at the top we'll close that off import this at the top and instead of going into the components folder we're going to go into our routes folder okay because that's where our pages are and this pricing and our components folder and pricing in our uh in our routes folder are two different things okay so let's go into our nav bar in the component section where is it at there we are let's go in there and for our pricing we'll just add our two routes here so just do pricing there and for faq we'll just type faq and then our contact as well we already have that set up and i'm not going to mess with the footer for now so we can close that so these should link to the right places we just need to create them here so we have our pricing next in our routes folder let's create our our faq and we're not going to need any styling here because i'm not going to do any additional styling on the page you can do that if you'd like surely you would do that in your own projects so don't have to delete that div there i just do that so let's do our nav bar again we'll auto import it and then this one is going to be our faq and this can't we can't import it it's going to be the same name here so we'll just say we'll just say questions right and up here we'll say import questions from and then we'll use components and then faq and how we'll get around that in our footer auto import that should look good and let's go in here i'm just going to copy that down and this is going to be the faq and this element is going to be faq element yes i want to import it at the top and what's our next one contact i believe so let's go ahead and do our contact js okay generate our component and in here we'll do the same thing my bar navbar auto import and again we can't just say contact i'll show you what's going to happen there you go i don't know why it's not throwing any air so i'm going to go and change this because i know it's not going to work so we didn't import those so let's import footer components footer and let's also import contact worm i misspelled that below from components contact there we go so that should work properly let's import this put it at the top make sure we're doing the routes again there we go and look at an error here our component contact does not contain uh default export when you're talking about yeah i don't know i must have deleted it so export default contact that should clear that up contact is defined and never used that's because we need to bring it in right here i want that to be contact oh man contact should clear up some errors let's have a look all right so this is our home and we can scroll down and see everything this should go there we go perfect perfect that's what we wanted all right you guys thanks for watching the video here i think that finishes it up we built this entire uh react application here i showed you how to do routes at the top and how we installed react router dom version six i hope that was not too confusing um if you like the video if you feel like you got something out of it you know if i was able to teach you something i'd appreciate you liking the video and maybe consider subscribing to my channel um i'm going to be putting out some more content just like this and react and some other technologies as well if you have any questions or or comments any input i'd love to hear what you have to say so please leave that below in the comment section and uh i'm uploading this to my github repository there will be a link in the description below as well but uh thanks for watching you guys and i will see you on the next one

Channel: Code Commerce

Views: 1,069

Keywords:

Id: JE3w48KeSZ8

Length: 120min 53sec (7253 seconds)

Published: Mon Nov 15 2021