React Sidebar Navigation Menu Tutorial – Beginner React JS Project Using Hooks & Router PART I

Yo what is up so today i made this sidebar with react and i’m going to show you how i did it so pretty much here it is got the little icon click it slides out hover over it got this little effect and then we utilize react router and i can change the path in addition the actual dashboard closes on click as well super simple same thing with products and then also the x and you get the point standard sidebar so if you want to learn how i did it then definitely watch this video already to the ends without further ado let’s hop into our code editor and let me show you how i made this so here i am on my terminal so go ahead and open that up.

if you’ve made it react that before then you know the drill but essentially we’re going to say npx got to click on this npx and then space create dash react dash app and then i’m going to have the file name for this one i’m just going to say react sidebar and then let’s just put version one and then i’m gonna go ahead and press enter and then once this loads up i will see you once it gets completed alright so mine just finished loading so i’m gonna go ahead and cd into the file so cd react dash sidebar dash v1 and if you have mpm it’s going to tell you to say npm start but i have yarn so i’m going to type in yarn start so actually let’s go ahead and open this first and then i’ll actually start it after so let’s go ahead and type in code dot and then this will open up my vs code i have that added.

So if you don’t have that go ahead and just quick google search code dot and then it’ll tell you how to get that up and running for you to have this working so right now i’m going to go ahead and do command j this opens up my terminal and then here i’m going to say yarn start if you don’t have yarn just do npm start same exact thing and then it should load up and currently it’s going to tell me i have an error so i have to go ahead and create a new file call it dot env if you don’t have this error then just ignore this and i just have to copy this code in but if you do just do these steps and then let me do it again yarn start and i have the app already running.

So i’m just going to type y you shouldn’t see this if you don’t have any apps currently running and here we go we have the react logo showing so let me just shrink this over and let me just bring this to the side so you can see what we are doing all right so i’m going to go ahead and exit off this now and let’s go ahead and open up the src folder let’s go ahead and delete setup tests service workers and logo to svg so i’m gonna click on setup test hold shift then click on logo select all three delete this move trash go to index.js let’s just get rid of this bottom code here and then let’s delete this import from service worker and then get rid of the index.css.

Because we’re going to have to get rid of that save it delete index.css don’t need this app.test i don’t need that either and then app.js let’s just leave let’s get rid of everything here and let’s just say h1 yo showing up oh we got logo here too so let me delete this save that and boom it was working all right perfect so now let’s go ahead and start editing the code so the first thing i’m going to do is this is such a small project we’re just going to keep everything in a components folder and pages folder so let’s right-click src click on new folder let me just name this components and then inside of this folder i’m going to right click this create a new file.

We’re going to call this navbar.js i’m going to call it sitebar whatever you want to and then right click components again create the [Music] navbar.css and then the last one i’m going to create is a data file so i’m just going to call this new file sidebar data dot js and then in the src again just right click it and create another new folder and let’s just call this pages and this is just an extra step but this is just to show you like the changes in here so let’s just right click pages new files just call this home dot js and then let’s just create two more just for this example let’s just call this products dot js and then let’s do reports gotcha yes.

Now let’s go into the navbar and if you don’t have this plug-in just go to this little icon here type in es7 click on this one should be the one right here and go ahead and install that if you have it perfect and let’s go to navbar and then once you install that if it doesn’t work you can try re closing out of your vs code and then uh signing back in and pretty much it should work there and then just go ahead and type in rfce it will pop up and then you just press enter and voila you have import react the function and then also export and while we’re here let’s go ahead and command j and let me open up a new let’s hit the plus sign here.

We’re gonna install react router so if you have npm then you would do npm install and then whatever i type after so instead i’m i have yarn so mine is yarn add and i’m just going to say react router dash dom then press enter so if you have npm you would just say npm install react writer dom and then once that loads up you’re pretty much good to go and that’s essentially the link tag we’re going to insert eventually but for now let’s go ahead and let me turn these into fragments and then inside this nav bar i want to create the first div so let’s just say let’s call this dot nav bar so this is just a class and sometimes my uh vs code does not like auto typing it out so let me just type this out for now.

I’ll probably refresh it later but let’s just make a div with the class of nav bar and then inside of this div i want to add the icon so we have to install react icons as well so let me go ahead and type it out first and then we’ll install it after and i’ll display everything so i’m going to do link and then i want the path to just be just a hash symbol or hashtag and then let’s type in for the class name i want that to be menu bars and let me command b you can see this better and let me just close this out and then inside of this link this is going to be the bars icon.

So we’re going to do is let’s go ahead and actually install this because it’s not going to make sense if you’ve never seen this before let me get rid of these for one second what was happening let me exit off this just cleans things up all right so let me do command j open up the terminal and then go down and install react icon so i’m going to say yarn add react icons so i went ahead and pull it up on the side so you can see this so if you do have the npn this is what you would just type in but i have yarn so i’m just going to go with yarn add and then once i press enter it will load up and if you’ve never seen this it pretty much allows you to use a lot of different icons from a lot of different sources.

So we got you know here bootstrap feather flat font awesome etc ion icons all of these and then you all have to do is just you can normally import it like this which is a standard way so if you’ve used this before then you know but i’m gonna show you a little little hack i guess a little shortcut to make it easier and then all you have to do is just add the icon in so for instance if i wanted bars right here’s f8 bars typically you would go and this is a fun awesome too so i’d have to add this at the top of my list so let me just let me add the uh icon command first and just show you what normally it would look like so it’d be like this and then i would import it at the top like that but this little shortcut instead.

I’m gonna do this where i’m gonna say imports and then the little shift 8 little star asterisk and then say import as fa icons and this is just what i named it as and then you can take this and leave that here so you can leave like this and then in front of the fa bars we can just say fa icons dot f8 bars and it’s essentially the same thing except now if i want to add a bunch more of these icons here all i have to do is say fa icons dot whatever the icon name is and then i don’t have to sit here and import like a trillion separate names because normally you would import each individual name with a comma that way so if you know that that’s cool.

But if you haven’t seen that trick that’s how you do it and then when i save this what’s going to happen is it’s going to have an error because we don’t have any routes or router linked up on the actual app.js files when i save this right now it’s going to say actually it’s not it’s not showing because i don’t have it on the add.js if i were to go here and let’s just get rid of the uh divs here just get rid of this erase that and then i’ll just sit here and say navbar then just press enter it automatically go uh imports it now save it’s going to say let’s see air link is not defined so now i have to actually import yeah let me import a link on.

So go back to navbar let’s import link from react router dom and that’s still going to run let me see saves it and now it’s saying yeah you can’t use a link outside router so i’ll go to app.js now and let’s wrap this with typical router tags and then let me bring i’m gonna hold alt and then the up arrow that brings it there and i want to add a switch so let’s say switch and then inside the switch i’m going to have the routes so let’s just do routes and i want the path to be slash and we don’t have the uh components created yet so we can add that later but for now let’s just keep it like this and it’s gonna run an error so we’re gonna do is go to the top and let’s do imports curly braces browser router as router so we’re renaming it like this and then i need to import switch let me do switch first and then let’s do route and then i’m going to say from react router dom save this..

now we should see a little bars icon here right there so now we have that there so let’s go ahead let me exit off this go back to the navbar.js file and then let’s go ahead and go outside of this div now and let’s start let’s just call this let’s do nav so see i’ll make a tag because i have a specific function right i’m going to set up so i’m going to say nav class name equal to curly braces and then we’re going to set some state with the uh use state hook so we’re going to just say sidebar and we’re going to create this in just a second and then we use ternary operator so here we’re going to say if is true meaning if i clicked on the icon the sidebar is showing i want the class to be nav menu space active meaning that it’s showing else use a colon i’m gonna say nav dash menu so it basically it’s hidden and then outside we’ll just close it out and then we have inside of this.

we’re going to have a ul so let’s do ul class name equals to nav dash menu dash items and then it’s gonna wouldn’t have an on click function but let me add that after because uh you might not understand it if i just add it right away and then here’s have an li dot nav bar dash toggle it looks like it’s working now i can auto type it so have that class name navbar toggle and then in here i’m going to create a link and this one’s going to say two equals to the hashtag symbol and then class name equals to menu dash bars and then in here i want to import the x icon so here i’m going to actually go ahead and i’ll show you where i got this on react icons.

i just type in close and this is the one right here so i’m gonna click on this and it auto copies it and then i’m gonna create the icon right there self closing tag instead though i’m gonna actually import it from the top so let me go ahead and do alt shift down arrow i’m going to change this from f a to a i because it’s a is the first two letters and that’s a way to know unless they updated how to have the slash here so this is going to be react icon ai and then in front of this i’m going to have a i capital i cons icon dots ai outline close and then when i save this it’s going to have an error i think because of sidebar not being defined let’s see yeah so it’s not defined so let’s go ahead and just create the state real quick so first thing is we have to import use state so say use state at the top and then under here we’re going to say const.

we’re going to pass in this array with the first value and that’s going to be sidebar and then we have the function that updates the state i’m going to say this as set sidebar and then we’re going to set this equal to use state of the current value i want it to be false meaning it’s not showing and then let’s go ahead and create the function and here to sew and say const and i’m going to call this show sidebar so i’m going to say show sidebar i’m going to set this equal to an arrow function and then here we’re just going to say set sidebar so now i’m going to utilize set sidebar and this is going to up this is going to update the value to whatever the opposite of it is currently so kind of like a toggle.

so i’m going to say exclamation mark sidebar so it’s like reversing the value true false true false and then here we have to utilize this so sidebar and here is the bars icon that we had so i want to say on click i want to set equal to show sidebar now if i save this should be working let’s see so pretty much right now when i click it it’s supposed to update the state but since we don’t have the css and anything up yet you can’t see the anything going on but at least we have something here now underneath this li right here we’re going to map through a data file which i’m going to create and this is all of the if i go back this is all of these items right here so let’s go ahead and go back to our file go to sidebar data dot js now in here i’m going to import a bunch of things here so let’s go ahead i’m going to copy this over or a little shortcut key.

the next tutorial will going to another part 2 so please be patients

Leave a Comment