React Navbar Tutorial - Beginner React JS Project

so today I'm going to show you how I created this nav bar using reacts and even the styling all the CSS is made from scratch as well so I'm going to show exactly how I did that too so right now let's take a look at it so pretty much I'll hover over the menu items and you got the cool little hover animation effect going on even the button and then when I shrink it down to the mobile view you can see that it changes we got the hamburger menu icon going right there I click on this boom slides out and we got some more cover animations here and then go again like this and then there is the nav bar and in case you're wondering what is the benefit of reacts I can pretty much go here and I have my component nav bar here copy and paste this and now we got four nav bars pretty much the exact same thing and you can see there we got it like this now you're probably not going to use more than one nav bar norsu websites but I just want to show you a cool little fun thing that react allows you to do with components so that further ado let's hop into our code editor and start creating so before we get started coding we need to create our react application using the terminal so if you've already made a react app before then you already know the drill but in case you have not go ahead and go if you're on a mac book search up the terminal with your finder or pretty much just go to your terminal I have batch open up right here and right now I'm in my projects folder right here so basically all I need to do to create a react app is simply type in + px' and then creates - react - app and then space and then whatever you want to name this so for this I'm just gonna say react nav bar and then see tutorial and let's just say yit just for YouTube but pretty much there and i'ma hit enter and then if you tighten everything correctly it's gonna start loading up looks like you're a hacker trying to hack into something like in the movies but after this loads up this is gonna take probably 50,000 years so I will see you once this loads up actually it's probably like closer to like a couple minutes here not but basically once it's done see you on the other side all right so now that it has loaded up you should see CD and whatever you name the file and then basically NPM start below here which you can see right there so go ahead and click into terminal and then I need to do is basically click or type CD so we're going into now the folder that we just created so react - navbar - tutorial - YT so now I'm inside of the folder we just created for this file and then before I do MPM start I want this to open up in my code editor so for me to do that just type in code space and then the period or dot and then press Enter and then this will open up my BS code now if you do run into any issues just simply type in on Google code dot isn't opening up my code editor and you should see a bunch of ways to fix that issue so now I have the code editor opened up and before I go into the code editor and show you all the fun stuff let's go back to the terminal and then the last thing we need to do is simply start this up so NPM and then space start and then hit enter and now everything should be working and then right now I do have it already open because you can see on the background so I'm gonna do is simply just type in why that you won't see this if you only have this your first time don't worry about this screen but mine since I already have the application running the background I'm just gonna go ahead and press Y to open it up and now it opens up on a new tab and technically let me actually bring this over here so now once you type in NPM starts you should have this showing up in your browser and this is basically all the files you have right now for the current react application so now you can you're not the ex at all but you can just get rid of the screen there so now let me drag this over you can see this much better alright so now here in our vs code well I'm using the S code depending on what editor you have in the SRC folder will have all these predefined files that react creates for us and I'm just gonna go ahead and pretty much delete most of them so basically click here and then let's go to the logos let's delete these and then also app test I'm delete that one and then we can pretty much keep these now if you like to prefer to just do from scratch I mean you can do that yourself but basically in the index I want to get rid of this code right here so click on index J yes and then me screw now get rid of this react strictmode stuff right here and then let me backspace and let's go like this so this can be much easier for you to see it make sure you add a comma after the app component right there and then pretty much a code should look like this for the index.jsp file or if you did it from scratch basically you do the same and then we can delete this line right here because we're not importing this anymore and yeah it looks like that's pretty good right there so I'm gonna save that and then I'm using the shortcut command B like B as in like honeybees to like open and close the sidebar for the CSS right now we're not worried about this so we don't the worry about it yet we could actually delete that maybe in the future we'll see but umm now go to AB KS and inside of this I want to pretty much get rid of the headers and all the code inside of it so like that's that my head save here and then actually let's delete this line from the logo and then we don't have to touch that either and then for the CSS I mean we could delete this but it doesn't really it's not doing anything right now so we can just keep for now now now you can see on our side we have our blank screen so pretty much if I just say I save this we got the word hide right there you can see that it's still working and everything is good to go and then let's go ahead and let me show you again the public folder so this pretty much has an index.html which we will imports a fun awesome and also our google fonts into here and then eventually so I'll show you that in just a second but the first thing that I want to do is create our first component so one thing I'm gonna do is actually create a new folder so go hover over the SRC folder here right click and then go and click on new folder and I'm going to name this components and now within the components folder we need to create another folder so I'm gonna go a new folder here that's gonna be called navbar and then since there's only one right now it doesn't like show it underneath but basically we're inside the navbar so now if I right-click again over this and click on new file I can create a navbar dot J s and make sure that you copy my capitalisation that's just the way we do it in react and now you can see now the we have it inside of the components for which inside the nav bars for which inside nav bar now I don't know why it's not showing it like stacking so in order to see it I'll have to create a new file too which is gonna be eventually the buttons component so I'm just gonna do and this is over I don't know if you saw that but hover over the components folder right click new file and then just do button a yes and now you can see how we have the separate folders now anytime this might have messed up to where the files are like all over the place just make sure you just go back and just click it and drag it into the corresponding position so right now nav bar has nav bar J s and then components has the button J s and then everything else is inside the SRC just like that ok just in case you might get lost in that section and then we since we're here already let's go ahead and create a button that CSS too so go back over to the components right click over it new file and let's do button dot CSS and now we got that good for there and then let's go into our navbar now so navbar folder we have navbar and then since we're here already I'm a right-click over navbar click on new file and just doing that bar dot CSS and then last file we're going to create is simply the menu items so within the navbar folder right-click over that click on new file and then I'm going to call this menu and then capital I so items dot J s and these are pretty much all the files that we need to create for this project or the least the way I structured the and feel free to play around the code and do it any way you like as well so let's go ahead and start with the very first one which is the navbar J yes okay so this is a little shortcut basically you type in I M or C and then press tab and then automatically imports react and also the components and some people do where they erase it which I'll show you in just a second and then we go and create a class so class navbar and I'm using a class because we're going to be utilizing state so that's why I'm doing that instead of a function and then in class navbar extends and then since we already have component above we can just simply put components and then basically our curly brace like this now other people have seen they do like this where it's like reacts doc component then you can just get rid of this and it's exactly the same does the same thing but again when I do a shortcut keys just so much faster so again it just depends on your preference and then for the first thing we're gonna do always have a render so we've got the render and they've got a code your braces like this and then within the render we have to return something some say return and then in the parentheses so I put the parentheses because you can put JSX on multiple lines so that way you won't run into run into any issues and then pretty much we can go ahead and start editing our code here so first thing I want to do is create a nav so I'm gonna type in AB and I have a thing included on my settings that makes me rechtin basically it's kind of like Emmett for the code editor so again you can look that on Google really quick but for the sake of this I'm just gonna go ahead create an app like this and then go inside the nap and then create a class name so in react things I'll call it class and the name instead of just straight-up class so one could enter here quotes and I want to name this navbar item so this is a way that people name things in react is basically to name it with a capital letter and again it depends on how you want to write it there's other ways to do it too but I'm just gonna go with the capitalizing of the class name for this and feel free to comment down below any other preferences or better ways to go about that but here I'm going to go ahead and say h1 and then I want the class name to be nav bar - logo so again you might have to mainly type this out this is your first time using react because you won't have this extra setting updated but basically let me shrink that side now so now we have a class named nav bars logo and it's basically is gonna say reacts and we're gonna imports fun awesome eventually so you can see that little like react logo ahead on it in the beginning that was just a fun awesome icon and then after the h1 I'm gonna create another div so let's go with div and then I have the class name going to be what I have this menu - icon and then within this div I'm gonna press ENTER and then we're pretty much going to have the class I or the tag I and it's gonna have a class name which I will actually do in just a second cuz right now we don't have fun awesome installs so leave this blank and then we'll go back to this but I basically go outside this div now and then we have the you well here someone go you well it's creating you well here and then let's go ahead and create the Li so L I and for the L eyes we're gonna have to add a bunch of code into here to essentially make it to where you don't have to manually input the code but basically you can have the L I'm gonna have the a tags here so this pretty much how it's gonna be structured like this now let's go ahead and let's create the actual nav menu the menu items first so the way I did it was I had it created into another file like this and essentially we have Const some say cons menu items and I say you go to an array so that way I can essentially keep all of the menu names in here so I ever want to change it updated at extra code to it I have it perfectly right here I don't have to go and manually type in like H or like Li a column Li a tag like services etc so this is just much easier way to do it and then I'm gonna have the curly braces enter in here and then I'm just gonna call this the title you can call this label whatever you want to call it but this is basically like home about our services contact us and I'm just gonna call this one home then I'm a comma and then this is the URL again you can name this link whatever you want to and called this this is gonna be a hash tag so because it goes nowhere right now and essentially that's where you put the link so if like google comm youtube.com/ that's where you put it there and then this is the short name i have it's gonna be called cname and this is a way to import class names without having to mainly type it in so this is gonna be short for cname because really have class name and react so just see names the way i have it here and then the class name is going to be called nav - links now can add a comma here and then I'm basically going to copy and paste this as many times I want to have menu items so I got 1 2 3 4 5 so 3 4 and this 5th one is for mobile and this is the way I have it from mobile now there's much better ways I'm sure to create the mobile pop-out where you can really like a new component whatnot but this is the way I have it for now and let's go to the second tile let's just change this to services or whatever you want to call it nav links everything so the same for the title here I'm gonna call it products and the next one is going to be contact us and then this one will be essentially replacing the button for the mobile side and then I'm going to call the class nav links mobile here so I'm gonna say before I do save this we have to export it so that's one thing I forgot so export and now we have to import all of this data into our navbar here so let's go up to the top I'm gonna say imports and then we put curly braces and then pretty much say menu items and then we're gonna say from dot slash new items and now we need to add our menu items here and also one thing I forgot to do is always so let's go exports default from with this navbar so now you can see we have it there so we exported the faults and now let's go ahead and finish up this navbar so if I were to save this you're probably gonna get an error because this isn't filled out it's not proper right now but first things first let's go ahead and let's update the allies first okay so first of all I'm gonna go inside of the a tags and for the a tags we can erase this H ref here and let's just start from scratch so I'm gonna say a class name I'm gonna set this equal to and then I'm gonna put the curly braces and I'm gonna say item dot C name and now you don't know why I put menu item Abed so item dot C name here and before I go on to let me show you what's going on in case you probably know what's going on so here's a ul now in the UL we have to essentially go through all those data's in the array and essentially return a new array so we're going to map over the data in that array which is going to utilize map alright so essentially we're creating a new array with the values and we're gonna go and do curly braces here I'm gonna say menu items so again this is the this is this right here we're targeting now and within the curly braces this is inside of the UL tag by the way but above the L I say it dots now we're gonna map and I must say put the parentheses here and then put another parenthesis we have another essentially an arrow function inside of this and within this right here the parameters we're gonna have pass in the item and then just have the index so now you can see this is what I have through the item here and now let me tap over this and then what this is going to return which I'll show here return put the parentheses here hit enter we're going to return the Li and the a tags which essentially is our menu items so let's go and space this in here so now when I update this we have a class name it's equal to item dot C name so C name again is right here let's see name so essentially item dot C name which is the class nav links which sets this class here to nav links and then when I go in space now we have to add the H ref it's equal to curly braces it is gonna be item dot URL and again just go back item dot URL which doesn't go anywhere because we're not linking it to anything and then we're still inside the a tag I'm gonna do last one it's gonna be as you wouldn't go outside the attack so now we're in the middle of the a tag now so let me let me add some space you can see what's going on let me add this code better so you can see it so now we're inside of the a tag C one second here then let me bring this Li on this floor there okay here we go so now inside the a tag the text part and what we want this to be is essentially say home about us etc so the curly braces here in the same item and try to guess what will be put here if you want to get for instance home or services or products now if you guessed it right there's gonna be item dot title and basically that is going to get us the home about us services exceda whichever index we're on their URLs here and then class names there and now we pretty much need to add a key to our li to that's one thing goes up doing reacts without a key equal to curly braces I'm gonna say that to the index and now we're pretty much good with the UL section here so let me just clean up the spacing right there and I'm save this and right now I can't see anything yet because we still haven't finished all of our code and you got to add some more things to so next I want to do is add in the fun awesome icon and also the the font I have so basically I'm gonna go back to our files here and I'm gonna go into public and then click on the index.html here so let me close out here and now we need to go over to fun awesome calm so if users before they already know how it works out but essentially if you have not basically go ahead and create an accounts and then once you create an account go up to the right side where you're a little profile icon is supposed to be and then click on fun awesome CDN and then you'll basically be led to here where you can go ahead and copy in the CDN which is this right here and then I'm going to go in and just right below this link here as long as you're inside the head tag and then I copy that in there so now we have this fun awesome CDN right there so I'm going to save this then go here and let's go back to the navbar js4 right here so I'm actually it's kind of hard to see but I'm back here now on navbar JSO right here put that and now within the actual menu icon this is the class for the actually let's go ahead and the react one first because for the menu I kind of have a ternary operators basically you'll see in just a second but for this one I just do I actually hold on let me do the eye tag like this and then within the eye tag let's do class names equal two quotes and then let's put a CFA b.fa - yet I'm gonna save that there and let's go back and right now I can't see anything yet because I need to add some styling onto here but pretty much that is our icon right there and then for the menu icon I'm gonna wait to show you that because uh it won't make any sense until I add in the the function that has a click so since we're here already I'm gonna go ahead and import the google fonts that I have you do not have to use the fonts I'm using but from your styling say we want to copy it just type in google fonts monster rat or just go to fonts and then just download it but basically I'm just import the regular 400 style here select a style go to embed and then for the link copy this link here go into your index I'm just gonna add this underneath that in the NS HTML right there so we save this and then simply let's go to our navbar dot CSS actually let's go to our app that's CSS and let's get rid of all of this text code right here all the CSS up here I'm not really using it and then let's just copy in this font family here and let's go ahead and come in like this and technically I could actually let me actually get rid of this just do the asterisk sign just reset everything so box-sizing border-box margin:0 padding:0 and then we can copy the font family like this save it and then go back here you can see it updated you really can't see that but it's basically it's changed and now let's go to our nav bar again and let me go command B so right now we have the nav the nav bar item so let's go ahead and let's start styling stuff so you can kind of see what's going on and in that way I'll make way more sense when we start to add more of the extra stuff but um first this first time do dots and a half bar items and I have a gradient for the background so it's gonna be quite a lot of typing but once you do this everything else pretty short but basically it closes out background I mean linear gradient I'm gonna say 90 degrees and let's just um actually let me just type that for you stuff here I usually go to a website that gives me an auto-generated linear gradient but for this sake since this is specific and put this first I want to show you how I do in then that way afterwards I can just copy and paste everything after that and then rgba let's do seventy three comma sixty three comma two five two comma one and it looks like the screens got too small I see and then outside this parentheses busy a hundred percents and right now my safe nothing's gonna happen because I don't have anything set yet so let's do just do a height of 80 pixels and then let's do actually have to import this so that's why I can't see anything yet so let's go back to navbar J yes and at the top right we were important got to import the CSS file so import codes dot slash and it's been a bar dot CSS now we save that there and then when we go command B here let me actually add now our component to our app that we can actually see what's going on here so let's go to app and we got to actually import this you can see what's going on so imports navbar from dot slash when the components file folder and then we go into the navbar folder and then we got to import the navbar and then before I save this I'm just gonna add the navbar inside like this with a closing slash like that's and now I have it saved and now you can finally see what we were working on so that's much better now so you can actually visually see what's going on so now me Excel have the app for now and let's go back to the navbar to CSS so now we got the height and let me bring this over so you can see what's going on real time so Heights there and now let's go do splay flex bring them on the sidelines like this and then justify content would be Center and let's do a line item Center and let's do font size one points to rent so right now you can't see anything because it's currently let me see so no actually my browsers just bugging around but now you can kind of see it and it looks just like this all right so now let's do actually miss type wasn't doing that and she let's target the navbar logo now so navbar - logo she's gonna be the color of hashtag FFF just fie self right there and put starts and then let's go and margin-left this to be 20 pixels and then cursors one at that pointer then we have it like this and then for the reax logo which we want to shrink that a little bit fa - rillette margin - left to be 0.5 Ram and ang font size will be 1.6 grams so let's just do a couple styling with CSS and then we'll go right back to the actual react stuff and it's just a second but I want to start first because you really want to know what's going on until Ashley you finish this so actually let's save this first let me go back to our navbar because I forgot to add our menu name here but essentially what I want this to be is the that's a state because this will make sense once I have it done right now you can't really see what's going on because I haven't added the state yet but I wanted to wait for this but now this might as well go ahead and I'm at state like this so this is essentially a shorter way to write this instead of having to have a constructor function and I can go to created detail but basically I'm gonna say state it's equal to curly braces and then this is the property I'm gonna say this could be this is essentially stating whenever you click on something or a Kay the icon for this example if it's true or false so you could name this on/off active not active whatever I'm just gonna call this clicked Emma set the value is starting off to be false and then we're gonna have to create a function that essentially will tell us if this is actually clicked or not so pretty much let's see if it's better to let me just write the function out first for you so actually let me add it into the JSX so you can actually make sense of this so basically here is the div with the menu icon right and eventually you'll add the icon right here but for right now let's put on click and we set this equal to this dot state or actually my bed this not handle click and the handle click is such is going to be a function that tells you to set the state to a specific value that we're gonna add ventually now for the menu icon which is the hamburger menu here let's go ahead and add that now since we're here already and so I just have I and then class name equal to and this words gonna get a little trippy or a little tricky is gonna be a little hard to understand at first but once you see this work out will make more sense so right now we're gonna have to create something to wear whenever you click on this icon is going to be one or two classes so the first class we're happy to do first is say this dot state dot clicked ok so now we're going to target the state value and say is this clicked if it's true so we have the ternary operator so boom and then basically we're gonna say set the class name for this icon to be FAS space FA dash x which is essentially the the three little hamburger menu bar looking thing and then outside the quotes have a colon if you click it again it's going to change it to the X so fa fa - bars which is essentially the X icon right there and that's pretty much how this icons going to work but you can see here this is the icon right now and we haven't added any CSS yet so it'll turn ugly but that's they see the icon FA space FA times and if I were to go to a phone awesome and search that up just so you can make sure you're fully understanding what's going on here if I type in my ham burger menu you can see here actually this is the bars yeah so this is FA bars and then I believe that means tongue okay I got to replace my bad so let me go back to icons let's do close here and then you'll see where is it at this is time okay so basically it's what it's saying with this line code is if this does status clicked then we're going to change this menu hamburger icon into the X which is FA - x and then if it's not then it's going to be the bar so right now we haven't clicked it so right now it's the bars and then we're gonna have to write a on click so this handle click function that's going to basically toggle in and out between the values true or false so that we can keep clicking it it'll be X or the bars back and forth so basically gonna go above the render and below the state I'm gonna say handle click and we have to do an arrow function here this is crucial because it's not going to be able to target this properly and pretty much if you don't use the arrow function here you're gonna run into a lot of issues but basically we're gonna say handle click equals - arrow function let me say this now we have to set the state now so this how we're saying the state value and then print the seas and now inside and have a curly braces and when I say clicks and we're changing now they click value - essentially the opposite supposed to be exclamation mark this does date dot clicked so whenever you click on it so let me show you so I think I have everything set it should yeah so right now see how it works here so basically it's saying set click - the opposite value whenever you click it and that's what this line is doing here so now we click it it turns into the X click it again goes back to the hamburger menu icon because this essentially what all this code up here did and now we need to edit the UL because whenever wrong mobile this stuff is going to essentially shifts the left at least the way I created this and then when we click it we wanted to add a class to it to where it will showcase on mobile so let's go into the UL now and then when I said this class name so that's why I want to do the icon first you kind of see what happened so let's say you well class names equal to curly brace braces I want to say in the same concept this state clicked and if you did we're gonna say question mark we're gonna add the class nav - menu of space active here and then if you did not click on it the class is just going to be the regular nav menu and that's basically all you do for the UL here so essentially again what this happens is whenever we click on this icon because this is the only thing with the handle click is going to one change the icon with this line and then it's also going to add the class name of active to the UL if you clicked it and if you did not click it it's gonna be the normal class name of nav - min so I'm gonna save this here and now we can actually go back to the nav bar dot CSS and then we can actually edit the nav menu now so now we have the class nav menu which is the UL with all the home services etc and let's just do splay grid nothing happening yet because we haven't added the template column so grid - template - columns I'm gonna say repeats 5 comma auto and let's say let's add a grid the gap so just add some spacing in between them just put 10 pixels and then let's do a list style none gets rid of though like bullet points text lines make it Center let's do a width we should do 70 viewport width justify content justify content if I could type this put that to end so before I save it it's really hard to see what's going on so I'll put it like this and then let's do margin - rights to be to rent so right now this is what we got going on here and then reacts like this and it's like a massive I think it's because I zoomed in okay that makes so much more sense I was going crazy for a second like why is my wine a but looks so weird all right so now this is pretty much what yours should look like if you're falling on the steps or in case some sort of variation of this but now you can see we have our nav menu a kay that ul is right here and now let's actually add customization now so when we created the menu items we have the class of nav links on all of them so let's go back to our navbar CSS I'm gonna do dot nav - links curly braces I'm gonna say color to be white text decoration let's do none and then let's do a padding of 0.5 Ram in one rib and this is only for the hover that padding section is not really necessary until we added the other stuff but right now this what it looks like and then we're eventually going to get rid of the sign up because we're gonna turn that into a button both dude just Naville Inc solver since we're here let's just say background color when it's Abbi hashtag six D seven six f7 and then let's do border radius so I'm around the corners four pixels and transition I just want it to be all zero point two seconds and ease out so essentially now when you hover already eyes like that little square effect here and then underneath this I'm gonna add a color to the bars so again this is the hamburger menu icon which is right under the word home right now say def FA - bars and then simply just set it to color of hash like ffff and I can see they turn white there and let's target the link which is the NAB Mobile's link so let me write it out first so nav links mobile I'm gonna say display of none so this right here is a sign up right there and the reason we have is just for mobile we'll see in a second but now you can see it disappears and in case you forgot if you go back to our menu items this was the last one we have set in here and then BOOM and then last but not least we need to get rid of the hamburger menu so it's targeted menu - icon and let's change it to this fillet not and again see it's gone here and again in case you forgot if I go back to the nav bar the icon is essentially in div with the class of menu - icon so that's where we closed and basically hit it actually that's over here yeah this is where we hit it here so now as you go ahead and save this and it's not more responsive so it's kind of weird but when i zoom it out pretty much pretty close what we got going on now we just need to add the button so let me add the button and this button is quite a lot of stuff but let's go ahead and let's go to our let me exit off some of this stuff so up here let's go to our button j/s now for the bun I got this from another tutorial but pretty much it's a similar concept wherever essentially setting styles and then being able to reuse this without having to constantly type out a bunch of code so basically you gonna say imports react from react here and I'm gonna say imports quote slash button capitalized by CSS which was the CSS file we have created that we create available so constant or just const isles in all caps I'm setting equal to an array and in this array we're gonna put quotes say button - - primary so this essentially the primary color of the button so for this example it's like a blueish teal color for this website and then quotes BTN - - outline and then that is the value for the styles and I'm gonna create these sizing for the buttons so again this is if you do need more sizes you can go is update this but basically concise is equal to an array and then in the button - - medium combo and then basically BTM - - large and now we have those values set and now we can actually start writing out all of our code so here basically we have make sure we're exporting this so export and I'm gonna say Const button I'm gonna set this equal to this is a bags are gonna be essentially going to target eventually so I say curly braces and then I'll just type I'm gonna add this put this on a different line but essentially this is an arrow function here and the divisor passing in well let's go ahead and add them and here because it's quite a lot so we can go here and just add the value so children comma enter I'm just a type comma enter on click and then button style and then but in size so now we have essentially the values here now we're gonna go inside of the curly braces now and this we're going to add some more codes let me actually hit enter here as you can see this and pretty much we're gonna say is I'm gonna say Const I'm just gonna call this check bought in style when I said it's equal to styles or should we create it above and then we're gonna check so dot includes and we're gonna check if it already includes a button style which we have created this property here and essentially if it already has a style then if that's true we're just going to basically use the button styling and then if it doesn't have a button style we're gonna is go to said to the fall styles at the first position so has styles with the rave zero and this is essentially saying it's going to go to blooded primary since that's the first position in our right here and then we have the same thing for Contech but in size there's an equal to you sizes dot includes and for the C's you have button size and then we're same concept except for just checking if it's true that's already but inside then basically set it equal to the button size or else just set equal to the value of the sizes first one which would be medium here and then enter here and then we should have to return this so return parentheses and then within the parentheses I'm gonna say button and then basically in the body and we're gonna put the children so passing the children inside of the button and then I'm hit enter you can see actually not let me hit enter here so go to the top button now and let me spaces like that okay so now you can see better I should say class name equal to quotes I should I back curly braces and we're gonna do back ticks I'm gonna say BTN and then we're gonna implement template literals so dollar sign curly braces I'm gonna say check but in style which is essentially going to be the class that we create for this and then I'm gonna do dodge sign clear braces again check button size and then go outside of these curly braces but we're still inside the button tag and I'm gonna say on click equals to whatever you set for the on click and then type basically equals to aware of the type for this project is mainly you got to make sure we got the class name set so basically right now has the default has a class of BTN and then beating styles most likely going to be BTN primary because we have that as our first set here and then be in size or check button size would be essentially button medium so unless we or write it and set it equal to large or a line or anything else is most likely going to be like looking like that when we have the class and it's pretty much covers the button javascript page so let's go and now go to the button CSS and there's quite there's not too much code for this but let's update this really quick so let's just say : shut the root I'm just gonna set the main value so primary and this the primary color I'm gonna have 3 AC be f7 and that's just like a like a brightest blue and then basically we're gonna target the button class here I'm just a padding just put 8 pixels by 20 pixels border-radius have it to be 4 pixels outlines have a none and then border is none and cursor:pointer then under that just BTN hover will just say padding just have it 8 pixels by 20 pixels transition make sure after I want all 0.3 s and then ease out background now you don't have to copy much stuff by the way if you don't care by the CSS you can just make a generic button it doesn't matter but you just want to follow along this is what I have for this and then color let's put 6 5 6 8 f4 and then just transition to 50m most seconds now let's target the button - - primary which we created in these styles which again was here so we're gonna make this properties now I'll just say background color equal to var so every do was some sort of available name like this you have to do var print the seas - - and then just primary like this they've got BTN - - outline and that's basically use background-color:transparent color hashtag FFF padding be 8 pixels by 20 pixels border radius will be 4 pixels border will be 1 pixel solid for parentheses - - primary color and then transition just be all 0.3 s ease out so that's back so that's BTN outline now we have just two more would be pretty much done with the button so don't worry one was there so BTN medium and then we have to do beats and large and that's basically it so padding I should say 8 pixels by 20 pixels border radius 4 pixels font size will be 18 pixels and then color will be hashtag @f then we got BTN - large which would be just copy this in and we're gonna change like the little things so just put this to like 12 and this is just my preference again and there gives you just a like 20 it's pretty much the CSS for the button so now we just got to go to the navbar j/s and let's add our button right underneath the UL here so just make sure you capitalize the be closing tag and let's just say sign up and it's not going to work because we have not imported the button J yes let's just do imports and do curly braces put in from colon slash but save it and boom now we have for the most parts the navbar creating a desktop with the hover animations right there so now all we need to do is implement the media crease from mobile and then pretty much have the icon do it's magic whenever we shrink this so let's go to the navbar CSS now and let me go under here and let's go with the media so add media screen and say max - with and from my computer it started to break at 960 pixels again you can edit the way I did this code so it's like at some 60 a a bunch depends on your screen and there is a target there's gonna target the navbar so navbar items and let's just say position:relative and that's through dot nav - menu and we say display flex flex dye rection to be column then I want the width to be spanning a hundred percent of the screen I'm gonna have the height let's set this to 500 pixels position I need this to be absolutes and let's do top 80 pixels because that's the same height the nav bars want to bring it down the same size so I say this right now nothing is gonna pop up yet and let's do left so I put zero you can't see it but basically let's do um - a hundred percent cuz I want it to be hidden then opacity one percent or just one transition to be all 0.5 s so this essentially styled the nav menu but since we don't have the icon yet showing it can't trigger the class to essentially show kids going on so let's do nav - menu dot active now so Cindy does the active class say background hashtag 6 6 6 8 f 4 and then she left setting it to 0 now and then opacity:1 and transition all 0.5 s YZ and then Z index of 1 then when do dot nav - links and we're gonna say text-align:center padding:2px to navigate over now so i got nabbed - links hover and I'm about to after these we're gonna have the menu show up soon so let me just finish this up with a quick so background color just put hashtag 7 5 7 7 F a and let's just go ahead and do border radius to 0 because on the desktop it's curved but when you have it like full width of the mobile screen you'll see when that adds in let's do nav bar - logo position:absolute unless you top:0 left:0 and then basically this moved it over here fix this you can see and then just transform translates and we're gonna make sure we're gonna bring it 25% and the 50% and that's centers day right there and now under that's let's target the menu icon so we can actually see what's going on so let's do display a block there it is and I was do position absolutes and I say top-20 rights to zero transform translate cuz right now if I saved this you can see it's like all the way in the top top right corner so I'm gonna bring this down a hundred percent and then 60 will bring it over a hundred percents and then that's C 60 and then when I increase this sizing up makes much more sense so font size 1.8 Ram and then cursor:pointer go okay looks pretty straight to me I mean if you think you mix it up more feel free right now if I were to click on this you can see we have pretty much like a semi working thing going on right now and then if you hover over it it kind of has so this is pretty much all the CSS we have above that was doing this and if I were to change this to zero now you can see what's going on it still hundred percent so just make sure to change it back and pretty much this is here so let's just continue editing the CSS and almost done so now under that I want to target the dot F a - x so this is essentially the icon with the X color hashtag FFF font size - rim so let's check it turns white perfect let's do now let's target the actual the bottom because right now you notice the two things need a fix the button is still here and then also the we had the custom button down here so we're going to get rid of this one and add the one that we have which was on the menu items here which is called an avalanche mogul so go back to the navbar CSS nav links mobile analysts add-in has quite a bunch of coasts let's say display:block here text-align be Center padding of 1.5 Ram and that let's do margin to ram otto and looks like I forgot a colon here and then let's do border-radius 4 pixels width of a pixels my bad not pixels percents save this so now we have to sign up showing up here and let's continue finishing and then let's do background oh it's a hashtag for a d9e 4 so now we got that button looking action going text decoration get rid of the underline be none color to make it white and let's change the font size to 1.5 ram all right so now nothing goes on yet because we have had the hover effect but it's finish this off straw so do nav - links - mobile : hover and say background and set it to white so when we hover this we have to change the color because it's white right now so hashtag 6 5 6 8 f 4 that's right and then transition not transform transition to be 250ms so if we hover now we got the little hover action go here so so far everything looks good except this button is still here so I couldn't find a good way to get rid of this and but this is the way I figured out again let me know in comment below if you have a better method for this but basically I'm targeting the component and just saying display:none and pretty much I haven't gone here so now if I exit off drag this back over hover action going and then shrink it let me make sure you see shrink it here click it hover effects boom go like this and then we can go to the app and check it to make sure everything's working so we got another nav bar looks like it works perfect boom perfect like this and this is pretty much how I created this nav bar using reacts and CSS so if you did enjoy this video go down below and hit that subscribe button here's video a thumbs up and let me know any other way that you could improve this code and come to that down below in case again if you're new to the channel I'm documenting myself learning how to code and I'm just showcasing what I'm building and showing you what I built by showing you in these tutorial videos so if you did see any issues or anything you wanted to refactor mykola definitely let me know and also if you want to follow along my coding journey then definitely hit that subscribe button give this video a thumbs up and I will see you in the next video Paes

Channel: Brian Design

Views: 206,693

Keywords: react navbar, react navbar tutorial, react projects, react project, react, react js, react projects for beginners, react projects for portfolio, react project ideas, react project setup from scratch, react project from scratch, react navbar responsive, react navbar with dropdown, react navbar animation, react navbar component, react navbar toggle, react navbar without bootstrap, react navbar dropdown menu, navbar react, navbar react js, navbar react css, navbar react router

Id: fL8cFqhTHwA

Length: 57min 41sec (3461 seconds)

Published: Sun Jul 05 2020