Build A React JS Website From Scratch - Beginner Tutorial Using React Router Dom

hey what's up guys i'm back with another video and in today's video i'm going to show you how to build this fully responsive react application basically it's like a it's like a space travel uh website for the near future here um so we have if you notice here a full screen uh video background hero here so that is one component then we go down here we also have our footer um but we're using react router dom version six just came out several weeks ago i already did one video on it and i'll put a link to that down in the description below but here uh we have a few different pages we have so this is just like a home page here that we have a pricing route or pricing page and it has like some little cool cards here and this hero banner you'll notice is on all the pages and what we do is the same component we're just passing in props which is just uh basically like some dynamic data that we're just passing through so we can pass in pricing uh training here and then same with contact and here's our training here have some some images down here real basic i just want to show you how to do a few things here same with the contact form and it is fully responsive as you can tell i know my picture might be down here at the bottom somewhere but here we are we also have the nav bar we're using a you state hook for a nav bar and i'll show you how to do that as well and of course all these links are working properly so if you're ready to build this you can follow along from the beginning let's get started okay i'm starting off in vs code i'm just in a blank code editor here nothing's loaded i'm going to type the press the control back tick button to open up the terminal here i'm going to change the directory to the desktop and then let's create our react app so i'm going to type mpx create dash react app and i'm going to name my file um glx dash travel okay so that's what i'm going to call my react app this will only take a moment here alright says happy hacking that means we are ready to go i'm going to drag over my folder that we just created and to get started i'm going to go ahead and clean up some things that we're not going to be using just to make it a little bit easier to follow this app.css we don't need that we don't need the app.test the logo these report web files or these setup tests let's go ahead and get rid of all those we're just going to be using the index.css file and really we're going to be creating components and we'll just style each individual component so we would get some errors right now if we tried to start our server so let's go ahead and fix those we're going to delete that delete these web vitals and in our app.js we can replace this with just import react from react and down here we can get rid of all this code in here now before starting our development server we are going to use two packages in this tutorial so i'm going to press the control back tick button we can go ahead and install these packages we're going to use the react icons so type npm i react dash icons if you're using yarn that's fine as well but i'm going to be using npm so mpmi react icons dash dash save and our other package is going to be the react router dom and we're using version 6. i did a video on this not too long ago i can put a link down the description below but so um react router dom version 6 just came out probably several weeks ago so i'm going to be using that um let's see react router dom and then just type at v6 we'll get the version 6 here installed and already looks good let's just make sure there's ragbrailer dom and those are react icons right there so the way we're gonna structure let's go and get everything structured correctly here we're going to have a under that we're going to be working under the source folder here and underneath in this source folder i'm going to have an assets folder and this is where our images are going to live and we're also going to have a components folder and of course we're going to have a routes folder and these were where our individual pages are going to live so let's go ahead and let's create um our first page kind of like how i did over here um a reference back over here so this is kind of like our landing page here uh just it's containing a navbar this kind of a video header here and then a footer okay and then we have a pricing page which i included the nav bar a little hero picture here that we're using props to pass in some data and a pricing component and a footer and then with the training kind of same thing using the props so we can use the same image the same component and a training tab here and then also the contact so the way i'm going to do this many different writes and while i was building the project i initially was going to do it a little bit differently but i had kind of like a home a home page and then i had individual pages for each one so i'll show you what i mean right here i'm going to go ahead and create a functional component called home.js and i'm using extension um to kind of let's see here i think it's es7 yes es7 react redux kind of get some shortcuts while you're creating where you're creating your components here um i just have to type raf ce and it's going to generate an arrow function component and export it at the bottom pull it back open um so in here in my home component this is kind of where that that home page is gonna is gonna live okay so we don't have we haven't made any components yet and that's okay let's go ahead and start with um let's start with our index.css file kind of clean this up just a tad so i want to add a few things here we're going to do just to apply it to all box sizing we want to put border box and i want to take away any of this margin and padding here i do these on almost most projects here and also for the body um let's just set a background of uh of black here okay and then let's get rid of this uh list style type and also all this ugly link text decoration and i'm going to go ahead and put my buttons in here as well it's kind of like a global style sheet here you can kind of think of it that way so for our button the padding 12 pixels by 32 pixels and guys feel free to follow along with exactly what i'm doing but if you want to customize it and make it your own i'm cool with that too transparent buttons and we'll make all the text on them white we'll give it a border of one pixel solid the white as well let's do the cursor pointer and i'm going to have a btn light variation with a background of let's see kind of like it's going to be like a little film over it so let's do rgba and we'll do black uh let's give it like a point two and we'll just do a little btn um hover action here and i'm actually going to use the same thing so whenever we hover on the button it's going to look like the btn light so let's get a different font here too i'm going to go ahead and let's go over here i'll bring this open i understand if you're watching a react tutorial this is probably pretty basic so feel free to skip ahead i'll put a little timeline down the bottom um i had a pretty cool font here i think i wanted to use this outfit yeah there we go so i'm gonna add all these uh all these styles in here boom boom cool and i'm just gonna import it into my style sheet you can do that or the or put it into your your your html files fine as well but that's what i'm going to do there and we can just add in i let's delete that and we'll put this in quotations outfit there we go so we can get rid of this let's go ahead and start up our development server kind of see what we're working with here let's do this npm start and what we should do let's go ahead and do our react router dom to kind of get everything set up properly and what we want to do there is we'll go into our index.js file there's multiple ways to do this guys this is the way i'm doing it feel free to do it your own way as far as where we wrap things i'm gonna do browser router here it auto imported at the top if not just type import then into brackets don't forget the brackets type in browser router then from racked router dom sometimes you'll see browser router as router or something like that but you can just condense it here so let's go into our app.js file and in here we can what we're going to do is uh we actually don't even need this div you can do fragments or you can just leave them blank it's fine as well you can leave the div totally fine um but and react router dom the version 6 i'm not going to get too deep into it but essentially we use routes instead of switch statements or not a statement instead of switch and uh so we can do this here we'll import that at the top we use routes and route so routes the route will be the individual from react router dom not rack router but rack router dom so in here this kind of is going to surround all our routes here and the route is just the individual page okay so route we're going to say path just the home page here and we're going to use element equals curly brackets and then in here we are putting our component and we're going to do that home component that we already made and don't forget to close that so let's import our home component import home from and this is our home page here but it's in our routes folder so routes slash home there we go so it should be loading our home component but nothing's going to show up except for our black background because we have not entered anything so we can go ahead and i could type something in here but you won't be able to see it because there's a black background with black text let's see if we can go into our index.css file and let's do this we'll do h1 all right see how this works here there we go okay so everything is working properly let's go and delete that the first thing i want to do is probably let's start with our um see now that our routes and our react router dom is all configured we can go ahead and build out our nav bar for the nav bar i'm going to start in this components folder here and let's create our navbar.js and also let's create our navbar styles.css again many different naming conventions some people just like navbar.js and navbar.css you can do it however you like so rfce i'm going to create my functional component here and in here let's create our all our um let's see here all our jsx for our navbar and i'm going to import my styles here oh yes there we go and before i forget i'm just going to import this in my home here navbar if we press enter there it auto imports at the top once you're done writing it out there so in here let's go ahead and start here we're going to give this a class name of header and everything's going to be fully responsive it's going to look really great so let's do our logo and for now i'm just going to make an h1 here and glx tribal it's going to be our logo um we could do links let's go ahead and do our links actually here as well so for react router dom we're going to import in curly brackets link from react router dom there it is instead of using a tags we're going to use our link to and this is for our logo which not really an image we're just using this h1 tag but whenever we click our logo or that text i wanted to link back to the homepage so there we go and inside that div just in there we're going to do an unordered list with a class name of nav menu and in here we're going to have some list items and inside the list items we're going to have our links link to that's going to be the home page let's say home there we go and i'm just going to copy this down to save some time whoops wrong button i'm working on a different keyboard than i usually do get confused sometimes so i'm gonna do four links uh the home and this one is going to be pricing and we haven't created it yet but it's going to be a pricing route or page you could let's say training and the last one let's do contact right and then underneath this unordered list we're going to do another div this is going to be our hamburger hamburger and we're going to use fa bars and this you guys is where we're going to use our react icons so we can import them anywhere up here import and then from red icons there we go and what we're going to use we're going to use fa bars which is the hamburger and we're also going to use fa times which is the little x that we use to close our um our menu now sort of fit because we haven't imported it see react icons okay don't forget after react icons type in fa uh or it could be many other things depending on what the preset is for your icon here so fa so we're going to type in fa and if it's a different one you have to do each different line for each one it's thrown in error because we haven't used the bars yet and i'm gonna go and give this some color so we're gonna do that in line here style double curly brackets and what we need to do here is we're gonna say color and then this has to go in quotes and i'm gonna make that a white color let's see if we can see it there it is okay perfect um i'm gonna make it a little bit bigger and there we can just do size and i'm going to put it in curly bracket it's going to be 20 so that should make it a little bit bigger there we go looks great let's well not great we need to do some styling let's jump in to the styling for our nav bar and maybe i'll pull this over a little bit so i don't want it to be too small to where you can't see what i'm typing in case you're following along so let me know in the comments if this is gets funky here so let's start here with our header and we're going to position a fixed with a width of 100 don't mind some of these errors while we're doing our um where we're doing our styling i'm going to display flex just like content using center or space between something like that let's do a space between this is all preference guys just whatever you think looks good i have some pre-written css when i was designing this project and we're going to give it a z index of 10 and i'll explain why later but basically we want it on top of all of our other content so i'm going to refresh everything's looking great there and i wonder if we can go back to let's see if i can add this in here i have our links the same as well there we go cool i just went back to our index.css file there and added the a so close some of this here just to clean it up so everything is positioned correctly here let's do what we're going to want to do so our nav menu and we want to display that as flex so it lays down horizontally there and we're going to need to give that some padding nab menu li padding let's give it 0 on the top and bottom and one rim on the left and right and the nav menus target these let's see here let's target let's see how that looks i hate how it throws these errors sometimes just refresh that guys okay um copy this how we want it here okay let's target these links here we have font size i'm going to rim i want weight of 500 and color oh we already did the color just a minute ago so even though there's not an actual a tag to link we can still style it all the same and let's do our hamburger which we actually want to hide um and then we only want to show it on on um through our media queries so i'm going to just go ahead and hide it right here and we'll add in some of our media queries so we're going to add media screen and max width whoops uh let's do 12 uh 40 here so pretty large screen we're going to display our hamburger now display block and our nav menu let's go ahead and fix our daf menu we're going to make it fully mobile responsive so don't worry let's give it a position of absolute and what we're doing now is we're styling our our drop down so if that makes any sense we're styling our drop down how it's going to look when we click our hamburger button we're going to display that as a column and let's see justify content went to the center align items to the center as well we wanted top zero left what i want to do right now i'm going to say left 0 but we are going to change this text align so we're going to hide it off the screen i've done this in many videos i'm just going to like go to uh nav bar how i create it usually at least um like i said if you want to create your own nav bar that's totally fine this is kind of somewhat of a beginner thing here um especially if you're if you're learning react you should probably know quite a bit of this already don't worry if you don't though that's fine you got to start somewhere sorry and we're going to give it a z index of 1 negative one sorry and i'm gonna give you a little background so basically um it's gonna be a see-through like a black but you're gonna be able to see through it just just a tad so two five five two five five and we're gonna do 0.9 so you'll be you will be able to see it just just barely and won't also target a few more things our list item let's go up here a list item here i'm going to give it just a little bit of padding one rim on top and bottom zero on the left and right and also i'm going to make the links just a little bit bigger font size let's make it too red so let's refresh this so that's how it's going to look um let's see i'm changing some things not 255 that is white i don't know why i said that sorry that is not black zero zero is all black apologies misspoke there cool so that's what we want it's not working now because we haven't done any um um any state we're gonna use the u state hook so what we need to do though is so we said this is going to appear left 0 which it is but what we want to happen is we want it to be displayed off the screen by 100 here so it should be completely gone and then we're going to add an active class to where we click our hamburger it will become active and what we're going to say is nav menu active and whenever we make it active left is just going to be zero so let's go ahead and give this some state and make it um functional here so like i said we're gonna be using the use state hook so we have to import this at the top let's get a comma and then some curly brackets we're going to say use state and i think that's the only hook we're going to be using in today's tutorial and we're going to go right in here right underneath our arrow function i'm going to say const and this is going to take in two two items here i'm going to say click and set click it's equal to use state i want to give it a default value of false and we also want a handle click you can call this what you want this is kind of a it's gonna be arrow function this kind of conventional naming system here that click and we want this to say um basically we're saying it's not clicked as a default and that's good for now um we're going to add some other functions where we scroll the navbar changes colors but for now let's go ahead and add in here we'll do our button first so our hamburger button so what we want to do is we're going to add an on click event here i'm going to run this handle click arrow function that we just created so in here i'm just going to start a new line and then i'll copy and paste it just probably make it easier we're going to open some curly brackets what we're going to say is click if clicked we're going to show the fa times is what we're bringing in here okay and otherwise we're just going to display this one here let's copy that in cut copy and don't forget i forgot that little opening bracket there and i'm going to go ahead and copy this over because i want the same size and the color i want it to be consistent so there we go i'll go ahead and pull this over so you can see it so as you can see we're saying if clicked we want to show the fa times button which is the x and otherwise we're going to show just the hamburger menu where it happened there it went sorry so there you go that works properly um but it's not showing our menu and that is because we need to add in a our nav menu here so we remember we did the active class so i'm just going to highlight that and delete it i'm going to open up with some curly brackets and what we're going to say is basically if clicked we want to show nav menu and the active class otherwise just the nav menu and that should be it guys so let's click this and out slides our menu so now we have a fully responsive nav bar here um we'll probably come back and do some more styling give it some features like when we scroll it's going to change colors but that's for now going to sum up our um our nav bar so let's go ahead and do our our video hero here so our video banner let's start right there what i'm going to do is create i'm going to close those and i'm going to create a new component here new component and i'm just going to call this uh video.js and while we're at it let's go and create a video dot or video styles.css all right so let's go ahead and create our functional component and we're going to import import our video styles css oh i need to put a dot slash here there we go perfect and so what i'm gonna do now i already have a video and some pictures picked out um you can get these from unsplash or some other uh websites i'll put some links down the bottom but this is we're gonna be using here as a our hero image there we're going to use these on the training tab and then here is our video so i'm going to load here but space.mp4 and i'm going to go ahead and import that video here and i'm just gonna say import i'm just gonna call it space video camel case here from and we're gonna go out of this components folder into the assets and it's called space.mp4 alrighty so we're also going to use links in here so let's import link from router dom and let's get started with our component here i'll leave it open so we can see i don't know if you guys like that if you like being able to see um what we're creating as we do it and let me know otherwise i can make this full screen so i'm going to give this a class name of hero and let's go in here and we're going to do a video video tag and we want to say auto play yes auto play loop muted this doesn't have any sound i don't think anyways but that's okay video and it's going to close that out and then here we're going to have our source it's our c equals and then just like we do the images and react open the curly brackets this is what we called at the top i can't see it video space video right here and close it out we'll say type video slash mp4 and this would be a closing tag here now that we have the video let's go just underneath inside the hero div but just underneath the video and we're going to do another div with the class name if i'm gonna say content here let me give it h1 galaxy travel not the most creative of names that's okay i'm gonna say world's first civilian space travel all right and then underneath the content div we're gonna make one more and this is where our buttons are going to be so we can do the links link to let's do training we'll do training you can do whatever you'd like we have the class name of btn and in here we could say training i'm going to copy this down instead of training we'll have a we'll say launch that sounds cool and instead of btn we're going to also do the btn light which we created in our index.css file let's just forward this to our contact page so let's go ahead and we're going to just put this on the home page remember and this was video press enter it'll auto import at the top and there we go so we're going to have to do quite a bit of css mobile queries we have this displaying how we like it but there is the video that bars working properly and there's some content at the bottom so that finishes up our that finishes up our all our code here we do need to do some css so we have an id of the video so that's where we're going to select that container there so let's go ahead and go into our styles here and i'm just going to create some room somewhere at the top let's get started with uh targeting our video we're going to give it a position fixed with the width of 100 we want to height 100 percent gonna take up full screen we need to type object fit cover and let's give it a z index of minus one so let's now select our hero height of 100 vh v4 heights let's give it a width of 100 object bit contain and let's do content tag here euro content there we go let's do text align center and we just want to put this kind of right smack in the middle of our video there with a width got to give it the dimensions and this will kind of put it in the 40 dh here i should put it right around the middle somewhere now let's do our content we'll do our h1 give it a font size of four ram and color we go and do our we probably just do this here font size 1.8 ram um wait uh let's do let's do 200 make it a little bit slim there and let's make it oh upper case margin bottom 0.6 ram and color it's never idea good idea to use a lot of um pixels it's always great to use the the ram i go into more detail on another video here whoa it's looking kind of funny here let's go back and let's make sure we have everything selected all right what we also want to do all right so not displaying correctly let's go into our video.js let's move this down cut that whoop put it down here somewhere save that there we go you notice when i saved it it formatted everything that is using an extension called prettier so feel free to grab that um yeah so i think that's looking pretty pretty good here let's go ahead and put a little padding in between those buttons there and we can do some media queries actually that looks pretty good there let's go ahead and have a look at this and let's see oh yeah it looks pretty pretty decent i don't think we need really need to resize anything cool so let's go ahead and i think we're finished up with that we can do a little bit of the button just give it a little just a tiny bit of padding in there so let's go down here and we'll say hero btn margin one ram 1.2 ram cool has the hover effect everything looks great let's do just we'll just do a few media queries here just to kind of like shrink the text let's do max with of let's say 640 pixels i want to shrink this down to 3 ram and this font size here let's do 1.4 i think it was 1.8 and let's say margin that looks okay there we might have to show you if you actually do mobile but i think that looks fine for now so we did the hero we did the uh the video next let's go ahead and add a um let's go ahead and add the footer and that those what's gonna basically comprise all of our our homepage here so let's go and create another component minimize that and in here sorry i didn't get the coffee we're going to do a new file and it's going to be footer.js and also a footer footer styles.css so in here our afce generate functional component and let's go ahead and get our styling so footer files.css okay and we also we're going to use um we're going to use some icons in here in our footer so let's go ahead and import these we're going to use fa facebook we're going to use fa linked in a mail bulk fa phone if a search location and faa twitter now use all fa so when we import it we can just say uh not no slash there um react icons slash fa so from here kind of go back over here let's go ahead and do some coding here so it's in a class name footer and we're also going to do a div class name footer container and another div here with the class name left we're gonna have two sides left side and right side and in here um we're gonna have this is kind of where we're doing we're gonna have a little section here a div here a dip for the phone and then also for our email right there so and we're gonna do the grid system right now it's stacked because we're in mobile but that's how it should look so we're going to go ahead and say this div is going to give it a class name of location and then here we're going to use our fa search location there we go and let's give it a size of uh 20. i want to go ahead and do style remember we had to do the double quotes color equals and then the parentheses or sorry in the quotes here double curly brackets and then do our quotations here i'm just going to give it a white color and i'm going to give it a little bit of margin here um and the way we do um or i'll just show you here so we're going to put a comma we can do multiple styles in here instead of doing margin dash right uh we we're in the react we need to do a camel case so margin right just like that and then we'll still do our quotes of two ram there we go and we do need to make sure we close our icon like so all right and don't worry we won't be able to see it yet but in here i'm going to inside this dip i'm just going to make another little dip here we don't need a class name but it's going to say 123 street so this is just our uh i'm gonna put this in a p tag actually and i'm going to copy that down but change the fix here let's make it an h4 a boulder and this is going to be in houston texas okay so underneath this uh location we're gonna do a phone div underneath here you know what we don't need this we need to move this let's move that down here that's right i'm going to save it there we go so we have our location here okay that looks better apologies for that um our next one we're gonna do a div with the class name and this is gonna be our phone and let's just have an h4 here with our phone number and we'll see what we do with our phone number do whatever we like one eight hundred one two three two three four all right but i want to have our um i want to have a icon here and the icon we're gonna use i'm gonna use it uh just inside of this h4 here and you can probably guess which one we're going to use fa might close that up and instead of typing all this back out i'm just going to whoop i hate those pop-ups i'm just going to copy that right there and just put it in there like so so still has our phone number there inside the h4 and underneath the phone we're going to do the email so just underneath this div here we're going to create another one with a class name of email and let's do the same thing we're going to do uh an h4 and saying we'll say galaxy.com i can't remember what it was um and inside here we're going to do fa mail bulk is the uh icon we're going to be using and again i still have this copied i'm going to paste it in there so it's all the same there so we haven't done any styling yet it's kind of behind this uh behind our videos which is why we can't see it and underneath our left div here right here we're going to do another div with the class name let's say right this is the right side or bottom we're looking at mobile so for i'm just going to say about company there we go and then i'm going to do a p tag in here and you can say whatever you like i'm just going to do some copy over some lorem ipsum text here that i already have defined and then underneath this uh underneath this p tag here we want it above inside the right div i'm going to make one more and let's give this a class name of social and this is we're gonna have our social icons so we're gonna have our fa facebook we're going to have fa twitter and also our linkedin all right and let's go ahead and i'm going to copy these we might change it just a little bit but this will save some typing so let's copy that down whoa oh there we go and for the size um i might make them a little bit bigger i'm going to change it to 30. and we'll do colors same we want the white but i'm going to give margin right just one instead all right so you guys i'm gonna save that and formats so i think that's looking really great let's go ahead and do the styling for our footer so we can actually see what we're doing some room and real quick might as well go ahead and bring this in footer hit auto import there it is so let's let's select our footer div here and we're going to give it a width of 100 give it some padding six rim top and bottoms you're on the left and right we're in a background color so we want to be able to see how in this design i made it to where we could still see the video in the background so this is what we're gonna do we're gonna give it rgba zero zero zero which is the black and let's do point eight so we'll be able to see through it just a little bit here and we did the footer container i think let me double check footer container do a max width i'm going to kind of give it a 11 40. i want the margin to be auto we're going to use a grid grid typically we're going to do basically two so we can just type in repeat open our parentheses here 2 1 fr and we're going to give it a little grid gap of 40 pixels okay and what we're going to do next is target this left side give it a height of 100 uh percent max width of 100 and and here i am going to display this as flex just these little items here our location email and stuff like that column and we'll give it a little bit of padding one rim then let's go ahead and do our right side here no i'm just going to copy all this down here copy that make it easy and i'm going to add one more margin auto on this right side here um let's see go and refresh that so there it is it's starting to come together a little bit we still need to make some changes oh we use h4s instead of the h1s that's why the text is black so if we want we can just go in here just to keep it all all in line here h4 and that should fix that there there we go i'm not sure if i use any other h tags in this tutorial so if we did we just go back and add them uh so under the right side i do want to target this h4 and give it a font size of 1.2 ram just to make it a little bit bigger and also let's do 1.4 for the header and we'll give it a padding one rim on top and bottom zero on the left and right and we'll do the same for our p tag 1.2 ram and founded one rim so now everything's looking a little bit better we still need to we're going to do some media queries here as well i just want to finish up a couple things here so footer location p tag and we're going to do um padding let's do padding bottom only and also i think just the location we need to target there we go and let's see how this is looking [Music] for our location probably want to do padding top zero i think it has a little bit there there we go that looks a little bit better and we only did the flex here because it has two lines so these other ones will be just fine when we give it some more room let's do just a couple of media queries i'll do a max width of 640 pixels and let's do our whoop target our footer container and this is where we're going to change our grid template columns to just one fraction and i'm gonna do this margin auto there there we go all right so i think that's good enough for now for our footer as you can see i'm not sure how well you can tell on the video but you can see our video kind of here playing in the background just like a little overlay so i think that's pretty cool so that basically concludes the first part here um where we can go next is let's work on our first half here which would be pricing so it is going to be our pricing route or you could say our pricing page either way so for that let's go ahead and get started here um there we go inside our route pricing.js and we're going to generate a functional component here and in here we want to do our nav bar because remember this is going to be our page our nav bar and then we're going to have our footer auto import now let's go ahead and import our navbar if it doesn't auto import just make sure you type it in so you don't get any errors and components that bar there you go so let's go ahead and go into our home component oh sorry navbar okay and let me give this a route route path and this is going to be to the pricing and the element we're going to show is pricing auto import there we go and well let's not forget to close that there we go should have any errors and let's add in slash pricing so we can see our pricing page so that looks correct because we just have our our navbar and our footer and what we want to add is on our pricing page here what we want to add is a little hero banner here and we're going to use props to pass in some data and then we also have these cards that display nicely on mobile devices just real basic real basic cards so let's go ahead and do our let's go ahead and do our image so what we're going to do how we're going to do that um like i said we're going to have the same image on multiple multiple different pages and it's going to be the same component but we're just going to be passing in some different data so let's go ahead and create this component and it's going to be called hero image.js and we're going to do some styling for it as well so hero image styles dot css all right so we're going to create a class component so we're using some patching in some props so we can just type we've been been typing r-a-f-c-e what we can type now is our ce that's going to create a class component and export it at the bottom here so very simple let's go ahead and import our style sheet right and class components very similar to functional components just we say export class you don't even have say export here can just say class and we do have to do the little render function here and then close that in a curly bracket but let's go ahead and give this a class name of hero img and in here we do want another div with the class name heading there we go just kind of clean this up some and what we're going to do we're going to type in let's see h1 and say this dot props dot heading there we go and we're going to do a p tag so with props we can kind of pass in data so it's really cool that's one of the main benefits of using react you can pass in data for reusable components so that's all we're doing there we do need to give it some styling let's go ahead and do that so we what we want um we want this this image here to take up the full screen and i'm going to give it kind of just a little bit of an overlay so i didn't like what it was looking like let's do 0.3 there we go i don't think we need to do any of this let's give it a height of uh 50 viewport heights with a width of a hundred percent and we want to give the position of relative because we're going to be using z index down here so hero dash image do before and this is kind of how we're going to do our overlay here sorry i'm going to say content blake quotations there so let's do our background and it is going to be url and what we're going to be using is our hero image right there so what we're going to say is make sure you put this in quotations we're going to say um outside this directory we're going to go to assets and then hero image right there and i'm going to add in just a few things here you can do this on a different line or the same line this is just kind of a shortcut we want no repeat center center cover that should be great there and let's do a height of 100 percent width of 100 and we want this position to be absolute the top zero left zero and a z index we'll say negative one for this one i go back over here so kind of see what we're doing we haven't brought it in yet and that's okay let's go ahead and finish up some of these styling let's say hero image heading width 100 we're going to display vertically so we're going to give it a column and center everything here there we go and let's do our heading here so make a font size uh 2.4 i'm gonna do ram and select our p tags with the font size okay and let's just go and give it a little media query here just one small one oh we'll do we'll do the same 640 pixels um euro image almost target rh1 font size two rim instead of 2.4 just a small little change but we can't see it because we haven't imported it yet and this is our image.js so what we're going to do we're going to go into our pricing and let's import this we said hero image enter for the auto import and close it off and but like i said we're using props in here right there can't resolve hero image styles i spilled that correctly oh here we go um yeah of course i misspelled it here so sty there we go all right um let me go and close that just refresh so there's our image looks great but what we want to do is pass in this data so we're using props and all we have to do in the class-based component that we already designed is put our our opening brackets are here and just say this dot props dot heading or whatever you'd like to say um that's just what i'm gonna use and then when we go back to our pricing tag here inside this component and this is where you you create your word we used heading and i'm just going to pass in let's make it all capitalized here pricing okay so there it is and then the next one we used was text i'm going to say choose your trip there we go so that should pass in there like so so that's how we pass in some props so let's move on and do our card component here so let me close this we're going to create a pricing.js and we have our pricing.js route our page but this is going to be our component so let's generate our functional component here and then we can go ahead and do our our pricing component we also wise pricing styles.css make sure i spelled that correctly this time and make sure you're working in your component here not your route there we go and in here let's go ahead and do the class names so since these are cards it's gonna be a little bit of uh jsx here and some css not too nothing too crazy let's say card container here i'm going to keep it consistent on how i've been doing this project card container and div class name of card and we'll say h3 we'll say this is the basic there we go and under here we get a span class name bar and let's do some p tags here we're gonna give this one a class name though most of them probably will not it's gonna be the currency now bitcoin crypto currencies and let's do three three days all the basics i'm gonna copy this down save some time and we're going to say views i'm just adding in some data just so it's not blank you can type in whatever you'd like here it doesn't matter i'll say private quarters let's do um we're gonna yeah let's just do it okay so link to and i'm just gonna say yeah contact okay let's do a tag but that's fine here last name btn and say book like book your trip so let's go ahead and we can actually just copy this down this card here there we go and this is another chance we could use uh create another component as well so it kind of just depends how how deep you want to do it indicative and i'm going to keep all this data the same just for the sake of the saving time so let's do some let's just do some styling real quick it's going to style our cards and i guess we can go ahead and bring it in this is our route folder here so let's go ahead and just bring it in so we can see we're doing it auto import ah sometimes it doesn't it may have been moving too fast and remember this is going outside to the components and it's going to the pricing there all right whoa oh it's not liking something here i may have i see don't think it's liking our pricing in here okay so this is what it's not liking right here so we can just say pricing cards that should fix that issue there cool so that's fixed of course we had another one here we used a link we didn't import it so let's just do this import our link from background dom and that should clear all that up cool so now we're looking good let's go ahead and do our styling we have it pulled in all right add some room here and we'll say like our pricing i'm gonna do a width of a hundred percent padding up six rim on top and bottom one rim on the left and right and let's do a background color of our cards here black let's target our container here max width of 1140 pixels put everything in the middle and display this as a grid grid gap says okay obsolete don't use it well guess what we're going to use it still works great template columns and we're gonna do three equal ones so three one fractions okay so card container now we're gonna select our card and let's give it a border of one pixel solid and i can give it a we don't want that i do this basically it's like an off-white we'll see how this looks we can come back not three we can come back and change it if we'd like so let's just dial a little bit more of our cards here text align center give us some everything some padding and when we hover over it i just want to create just a little it's still going to be dark just kind of a little bit lighter of a black uh let's target our h3 in here the font size of 1.4 ram and some padding of one rim and then let's style that span which is a bar uh card and we named it bar let's do border put a bottom one pixel solid and let's do that same color what do we do e yes um we'll give a width of just 10 percent margin 1.5 rim then auto on the left and right display block okay so i'm gonna style just a few more things here our bitcoin i mean i'll snap there we go cool so still need some more styling but it is displaying correctly thus far so under the bar let's do card selecting our bitcoin here and we want a font size of or rim oops and i think seriously font weight of 600 padding one gram cool it's quite large right now we haven't done any mobile queries media queries so that's okay by saying p let's do color we'll do that e again okay just doing a little bit of extra styling on our on our buttons here cool and let's do cool i think that looks good there let's do a little media query because it looks it looks terrible the way it is with everything crunched up like that we definitely don't want it to display like that so let's just target our card container here which where we did our grid and we're going to give it a max width of 90 margin auto and it's already displaying grid what we want is uh grid template columns instead of the three we just want to do one let's see how that looks here there we go yeah make sure you refresh cool looks good and notice our header here we said we're gonna go back and change the color whenever we scroll you don't have to do that it's not necessary i can show you how to do that if you want but for now i'm just going to skip that part so that is our pricing container here our pricing route has our image here that we pass in some props our pricing cards and make sure it looks okay when we pull this thing out to a wider screen and yes looks great so let's do our training route next i'm going to drop that back down and i'm going to close some of these so for our training route what we're going to do is basically the same thing for our uh that we did on our pricing tab here and um so essentially it's gonna be the same we're gonna be passing in our props so let's go ahead and create that route so it's going to be training.js raf ce for our functional component here and let's bring in our bar there we go and we can do what we can do right now is i'm going to go into our app.js and i'm just going to copy this down and change this pricing to training then here raining auto import it at the top so now we can go here and don't mind that error and kind of see what we're working with here so import fbar because it did not auto import whoops and we're going to want to go outside that directory into the components and grab the nav bar so that should clear up any errors so there we go we're on our training tab all we have is our nav bar so what we're going to do next we can type in bring in our do our hero image and remember press enter import i should leave our image there and let's pass in our props so remember it's going to be heading and then whatever we like to pass in i'm going to pass in training and then for our text again whatever you want to say i'm going to say um pre-flight and inflight training there we go and that should bring everything in there and going to the next line here we can go ahead and add our footer import that and we should have our footer down here great so what we're going to do on our training we're just going to add in a couple images the same we're going to use grid just a little box here on the left and then the box here on the right it's going to collapse down and it's basically just a couple images layered on top of each other let's go ahead and do that now so this is a component that was a component that we just showed you it's a i just call it a training component so let's go here and create our component here training.js and let's also do the training styles that css you always want to make sure you're spelling things correctly guys like i run into errors all the time just from typing too quick and misspelling things and it's just such a headache but unavoidable at a lot of times so so training styles.css and what we can do now is what we're going to want to do we're bringing in a couple pictures so let's go and do that we're going to use the moon and the pod right there so let's go and import i'm going to say pod from assets and this one is pod.jpg i'm going to copy this down and we're going to use i call this moon and it's in the same location only called and you'll be able to download all these images from my github i'll make that available in the description below or if you would like um you can just select your own pictures through um do like unsplash or pixels or anywhere like that so and we're going to use the there's going to be a button in here so we want to use a react router dom so let's import our link here at the top under done then let's start with some styling so i'm going to give this a class name training and then under here like i said we have two sides and i often kind of name it this way i'm just going to say training left or i could just say left here i'll just say left and in here we're going to have an h1 it says training and then under what under here just has some text and i'm just going to copy in some text i just basically typed some random stuff in here just to give it some some content there we go you can type in whatever you'd like and under that we're going to give our link to and we can just say um right to the contact page and there's a button in here with a class name of btn it's going to say contact cool so we have to give some styling so we can't see anything right now i'm not sure if we brought it in yet we did not let's go ahead and do that now well so right here not pricing we're doing training and um again we ran into the error last time so i'm going to call this training section does it really matter what you call it as long as when you import it at the top we can say training section and go outside to components and there we go that should work properly there we go so working properly we haven't brought in any of our pictures or done any of our styling so let's do that right now we'll do uh our right side here and we have a div with the class name of image container i'll give this a div class name let's say image stack and then let's give it a top and let's bring in our image here so image source and let's bring in our moon first here and i'm going to give it a class name image one and i'm gonna give it an alt tag you don't have to give it an alt tag but um you see empty quotes here react likes to throw some errors your way it will still work but you'll get a couple errors there so i'm going to go ahead and copy this down and i'm going to change this to bottom and this is just referring to the two pictures being layered on top of each other this would be image two and it's gonna be plot so let's go ahead and do some of our styling yeah so everything looks good let's do some styling here's our pictures um doesn't look bad like that actually it looks kind of cool of course if we go to widescreen yeah it's kind of jacked up so let's go ahead and do some styling here give it some space so training we want a width of 100 percent we give it a margin um we'll do three rim top and bottom zero left and right and display has grid and two columns is what we want we'll change this our media query down to one and we'll say four room on the left and right uh let's do give it a max width we'll give it a max weight of 600 pixels we'll have to come back and do our media queries here as well um look at this p tag or select the p tag i'm gonna give that some margin uh 1.2 ram and zero on the sides let's give this a width of 100 here and we'll do our image containers so let's do right so here is how this might get just a little bit just a little confusing here so basically we're going to line our images up um and we're using the the grid system so which is broken down into 12 12 fractions displayed horizontally across the page give the position of relative and glide on center and this is how we're going to stack our images i should probably go ahead and i'm just gonna do this right image one we want a max width of i'm gonna say say 60 i'm gonna give it a little border just because they are it's a black background and the uh images are pretty dark so i'm just going to give it a very light background color and let's see there we actually just delete that because i think our images are really gonna have the same styling themselves so instead of just image one in image two i'm just gonna delete that just let them both be named uh images so refresh there okay it's starting to look a little better you know kind of um what we're going to want to do is stack our our images so we want do that down here i'm gonna say right and then we had our our top let's do grid column one nice span eight grid row one padding top one two twenty percent and the z index this is how we're gonna layer them here so remember we're doing the position relative up top and we're going to do right bottom grid column four that's one let's say grid row one and z index we want this one to be five there we go so it's looking better we do need to add in some media queries let's have a look when we're at a wide screen so i think that's looking pretty great right there that's essentially what we wanted exactly when we drop it down to smaller smaller pixels we do want them to stack so let's go ahead and add in our media queries there we'll do a um basically anything below 1140. let's stack that so grid template columns we're going to do that right here with just one fraction and let's make the images a little bit bigger that doesn't look bad i think those are at 60 percent let's see um or you know what here let's target the images image and let's see what the max width of eighty percent oh same thing still let's see we kept the class name that's what it was boom okay yeah that's better cool so there you have it you guys we've done the home we've done the pricing we've done the training that leaves us with the contact section or the contact route which is the page right so let's go ahead and and do our contact page with and we're going to have a forum in there so let's go ahead and let's go ahead and create that so we can close the assets folder so in here we're going to have a form dot js also a form styles dot css and did that backwards here because in our route we're going to have a contact.js and let's do our functional component here and in here this is our route this our page let's import our nav bar and then we're also going to do we can do our footer all right so let's do our hero image that we passed in our props so and actually i'm going to go to our close some of these out declutter a bit training anymore in our app let's before we move on let's go ahead and create another route another path and this is going to be contact and we want to bring in our contact there we go route from up top so here we are let's see if it is working contact there we go okay perfect let's bring in some props and we did heading and we're just gonna say we're making all caps contact there we go and let's say contact travel we'll see we'll do it like this cool and then next we're gonna have our form and then a footer but let's do the footer because we have not done our form yet i guess we created it let's go ahead and import it form there we go let's import that at the top cool oh not bad okay cool oh throwing some errors here that's okay because it's empty here so let's generate our functional component that should remove the air and just leave it blank so yes it's blank this is where our form is going to go back here to our demonstration we're going to code this form right here so right here we already passed in our props and what we're going to do now is just enter in a little bit of information for our form let's not forget to import our form styles css there we go and from there we can go ahead and work on our form so we're gonna give it a class name of form there we go then here i'm gonna have a form and there's not going to be any submitting or anything like that in this video so this is just keeping it very very basic literally just for cosmetics here so label and then we'll have whoops undo label and we'll have an input i'm going to say type text okay now i'm going to copy these down we're going to have a name email subject and details and let's see here well let me just delete all that all together email and this type you don't have to do this you can leave it however you'd like but just for the sake of doing it subject and it's going to be text as well and then details and for the details instead of an input actually going to do a text area so people can submit a little bit of a message and we're just going to give it six rows with a placeholder whoop placeholder um we'll say type a sport message here okay and let's just close that off there we go and we'll add a button with a class name btn and that's just going to say submit so there it is let's give it some styling here all right and what we're going to start off with is first off with a startup form so display flex and we'll do flex direction column we could have used like bootstrap or something with this would have been really great but i'm not a huge fan of the uh some of the css libraries i just like to do everything myself it is a little bit more time consuming but i feel like it's just i enjoy it kind of watching what you're what you're creating so let's do our input and our text area we'll kind of lump these in to one another um margin bottom one rim we have some padding let's do 10 pixels 18 holes on left and right and i'm going to give this what we use outfit then i always like to give a a second option on fonts just in case the browser doesn't support it you don't want to run into any problems like that and i'm going to do rgba we're going to give this kind of a as our white there point one it's a little bit of an overlay border color and we're gonna do the same thing there we go and there we go a little color in there and what i'm going to do next is that might be it here let's go ahead and refresh that cool yeah so it's looking good um our label here we can uh i don't really don't feel like going back to our index.css file so let's say label um we could just do let's do this e-color so we can actually see everything cool oh our text area here is not showing up for some reason let's have a look at that nope nowhere to be found so let's go back to our form here and see what's going on so text oh there it is text area cool so that fixed that there all right so yeah i think that was the last little change there let's um make sure all our links are working properly i'm going to drag this open so we scroll down we see our footer here and that should go to the contact you see at the bottom left of the screen contact and this one on the bottom left you can see it goes to training so that is correct let's go to pricing everything is looking really great our props are passing in the data that we designated on contact i think that's about perfect um one thing guys if you want to go ahead and do this background we spoke about in the beginning of the video of our navbar how it goes over some of the content and that's okay but say we wanted to have this background turn to like a black uh or dark overlay as we scroll so it's just a little bit easier to read let's go ahead and do that right now i'll show you how to do that and um we can close these out what we're going to do is go into our daf bar where are we there we are our nav bar and then also our nav bar styles and we're going to use state to uh basically use state to change the color of our nav bar so what we're going to do right up here under where we did our original use date here for our clicks we're going to say const i'm going to say color and you can use this can be whatever you like so i'm going to say set color and then here we have to say use state i'm going to set it to a false as a default value here and just under there we're going to have a function here i'm going to call it change color it's going to be our function i'm going to make it an arrow function and in here we're going to say if window dot scroll scroll y which is the uh the the vertical axis um and we're going to say is greater than or equal to let's say 100 100 pixels here we're going to set color to true so right here sorry all these pop-ups setting the color to true we're going to set that to true um else we're going to leave it at um we're going to leave it as false okay so and then we need to add an event listener down here so for our scroll for our scrolling so window.addeventlistener and eventlistener is going to be scroll and on scroll we want to run the function change color that we did right here easy enough uh but we need to it's not going to work because we need to add in a class so what i'm going to add in here and you can put it wherever you'd like i'm just going to put it kind of right here at the top just below this header here so i'm going to say header dash bg okay now let's give it a background color um background color of rgba again i don't want it to be solid black i want it to be let's do 85 there got an extra parenthesis there and we'll give it a little nice little transition transition not transform transition of 0.5 seconds so back in our nav bar just kind of like we did here with our nav menu we're going to do the exact same thing so we can select that i'm just going to delete it and start from scratch we're going to say is color so in the color of the background that's what we call the our state here so we're either going to show header this is when we scroll header header bg otherwise it's just going to display the header when we have not scrolled so let's go ahead and refresh that and there we go oh perfect so i already had it since we were scrolled down so right now we are at the top of the page and it looks uh as normal and as we scroll down 100 pixels it changes to the black so and this looks a lot better if we go over our pricing tags now you can actually see it and then all the white doesn't kind of get washed out so same with the trading all right you guys i think that finishes up our tutorial here uh we learned how to use uh react router dom version six here for our different pages or routes we also used a class-based component to pass in some props here just some dynamic data that we can reuse in this component here so if you like the video if you feel like you got something out of it if you learned something please give it a like and consider subscribing to my channel i'm going to be putting out some more content just like this and react in the near future and possibly some other technologies as well also if you have any requests or any topics or information that you would like covered please put those down in the description i'll be happy to get to those thanks for watching you guys i will see you on the next one

Channel: Code Commerce

Views: 1,880

Keywords:

Id: utfRnLJTIsc

Length: 96min 55sec (5815 seconds)

Published: Mon Nov 29 2021