Responsive NavBar with React Bootstrap and React Router DOM | Beginner

hi everyone so today we will be making a navigation bar which will be having icons and also the proper routing to the pages along while it will be very much responsive as you can see so let's get started to make this navigation bar see to install react bootstrap you can install it using this command and after that you will also need to add your styles in your app.js or index.js by using this line I'll show you I have already added that and then if I go back to my react app you'll see that we don't have anything in our page so to start off I would first get some icons I'll get some icons from bootstrap you can also use Font awesome so what I'll do is this one is the Met icon so what I'll do is I'll just copy the space SPG code go over I already have an icons folder created you can create your own folder and in here what I'll do is I'll create a uh I already have the meta one so let's go ahead and uh see for Twitter and just go back I already added some icons so we will be adding the Twitter one this is an example of how you can add your icons so you will go ahead copy the SVG code head over to your vs code and inside the icons you will create a file and let me just give the name off Twitter dot SVG so there we go I will save it after that we will now create a navigation bar for that I'll just head over to our bootstrap and inside the column I'll go to navigation bar and inside the navigation bar I'll import all these and an obvious code okay first you need to make uh navigation bar dot Js file I'll do rfce and I'll have a format you can go ahead and use the extension es7 Plus install it it will be very useful for uh it will be very handy for you I can say and then as I have already imported the bootstrap code I'll just head over and also copy quickly the snap card and paste it here let's see give it a tab fix some indentation uh let me get uh dark background and uh variant of dark and I'll do a control s to see if a navigation bar is up okay so we see that our navigation bar is not up and the reason behind it is we have not added it into our app.js so we will now head over here and add navigation bar in our app.js save it and there we go we see our basic navigation bar is up and running so now first I'll I want this part to kind of like stay put here so I will do a sticky top Maybe you can also do a fixed stop I am doing a sticky one if you wanted to stay placed uh whenever you're scrolling you can do a fixed stop after that I want to add my icons towards uh the end of the navigation bar uh the side so what I'll do is I'll just create another navbar dot collapse let me just copy this and under this snap bar collapse because I also want that one to collapse and let me just not use this ID will use a class name maybe icons because we have adding icons you can keep whatever you want as your class name and under it let me give a nav tag and you can also need your name your nav tag and let us start adding icons and as we have already saved them so let me go over page source so here also we haven't imported all these all of these uh images so first we will go here and import them so we will do import get ROM dots slash icons slash get dot SVG and likewise we will need to add the other four so this one needs to be uh Let It Be meta and then we have LinkedIn and Twitter you can forward this piece where I am just editing so now what we will do is we will go ahead and use them first in the source let me use get one and what we will do is I also want an LT tag so whenever my icon does not show up this will show up and then close it now I'll just copy it add over my icons other ones like let's get Twitter and here we will be having Twitter I can do a control d so what I will do is copy this Ctrl D and what I want is a LinkedIn right so there we go we should now be having our three icons but of course they won't uh come in the way we want so for that what I'll need to do is I'll add some basic styling like I'll use align Styles I will just Define our content to end here so that it shows up at the end and in our nav I want these icons to have a little gap between them and also align them to the center so I'll put a gap of 0.5 maybe RDM and I may want them to align to Center so I'm sorry fine now let's see how it works and we will come back to modify it okay so we now uh do not see the icons because it is like black so let me just go into these icons and edit this one let me just do a 20 over here 20 and the fill I want is white now let's cover and see yeah we can now see the Twitter one the other two are still that way so we will head over to here make it White the height is 20 with this 20 please skip this part to save your time it's just uh basic styling so now we have the icons now what we want to do is let's add an icon here and let's also um while we click click home instead of this home we should move to the our home page so for that we will need to install react router Dom to do proper routing so let's first install our react router Dom we'll go ahead and install it just copy this and do it we'll do a control C terminate our job and we will do install so while it is installing let's add our meta tag also so what I want is here in the brand I want to add our image if we go into the bootstrap documentation they already have an example of there so we want to need what's styling to do that just copy this and we will paste it here so in spite of logo dot SVG what I can do is I can just use meta and I will save it now let's do nbm start you can uh give our image tags and href tag so while and connect them to your GitHub or Twitter or your LinkedIn let's close this one we already have this one running so while it uh runs what we have to do is now we will do our routing and app.js and then connect this home and Link uh let's change this thing to maybe profile save it we will also need to create pages so I'll just inside the source I'll create a folder called as pages I'll create two pages inside them one is home.js I'll do an rfce save it another page I want to create is profile.js where our routing should take and save it so now we have got two pages first head over and see our meta tag is not coming because exactly we got to do the same we have to do a fell off wait do you go to increase your width and height so now we see our branding we can see we can add some more space here now let's uh just do the proper routing first so in home I would want to see home page and in profile I want to see a profile page so for that we will go to our app.js file and first we will add browser router and wrap it and we will wrap this app inside our browser router so let me first inside the stack what I'll do is I'll browser router so here it comes and we will wrap the entire app inside the browser router and after that we have to Define routes so what I'll do is inside our app I'll do routes and inside that let me have wrote I'm really sorry I will do route this one path we need our path as home page slash home and the element that it should point to is R2 this home page inside the home page whatever it is there it will be shown in this element tag so what we will do is we'll use that page then we have created a router slash home and we will create another route AS Slash profile and connect it to the profile page so now we have our routes created let's just add our navigation bar here control s okay so these are not defined so we have to first Define them here roads route now if I save it profile is not defined okay we could not import it I have to do or file and it will get automatically imported right now let's see if we are getting errors we are not getting errors but we won't see the routing because now we have to link like if I have to explain it I'm saying get overseer also so we are not seeing anything right now because our navigation bar is placed inside the routes it should be placed outside because we want the navigation bar to show up everywhere inside the app so now it will show up also in the home page and also in the profile page so now if we see they are not connected we are not moving to the home page and the home uh page content is not being displayed because we have not connected our nav item to our routes so to connect our nav item to our routes if you see here the href is we will change it to our route and here we will change it to our profile you can also use nav link from react router Dom to do this I'm just using the href tag here and when I save this and I go back to my app refresh it well I go to this I'll see the home page I go to this I'll see the profile page the reason why on refreshing okay so the reason why uh when I click on the react bootstrap it is showing uh hashtag home it's just because if you would see in our brand we have a href of home now if I reroute it to home it will go to home or if I just do a simple slash it will route the first now if I click on react bootstrap it will just go to the initial page this will be your initial page this can be your home page slash home this can be a profile page slash profile you can also use the href tags to link your icons you can also add buttons as well in your nav bar and do many stuff with navigation bar using bootstrap it's really easy so thank you for watching till now I will see you in the next video thank you so much

Channel: TechGirl Talks

Views: 4,359

Keywords:

Id: u8PchhOAMSo

Length: 19min 11sec (1151 seconds)

Published: Sat Jun 10 2023