Navbar using React Bootstrap, Responsive Navbar, React router dom on navbar 2021 | 2022

hey guys what's up welcome back to another video so in this video i'm going to show you how to create a napper using react bootstrap and also use react router to navigate between the contents so if you click on home so it shows the home component here if i click on about so it navigates to the about component and if i click on contact it navigates me to the contact component so you can add the component here as you wish but you know i'm just going to show you how to create the navbar so it's also responsive if i click here so it just toggles here and shows the same content here okay now let me quickly create one react app so for that let me open bs code and let me close everything from here first and let me go to the terminal let's create one npx create react app and let me give the name appbar sorry navbar okay whatever so you can give the name as a whis yeah so the react type has been created so let me navigate to the navbar demo first demos here and let me click npm start so this should start our app and let me go to our app and just click on file open folder and just open our folder name bar demos okay let me click ok also let me quickly clear the contents here from app here so let me clear and just type hello okay let me go for terminal here and npm start so yeah so it has this clear the content from here and printed hello so first thing we need to go for is we need to source for react bootstrap navbar so let me go for react bootstrap and let me go for it getting started here so i need to install the react both extra first so let me copy this one and just go to the terminal here new terminal and just paste the command so this should install the react boot strap as well and also you need to import import this bootstrap into your index.js or after this file so let me navigate to the app.js file so if you see here so this is the afterwards here so i need to copy this one as well and also you need to just copy this content into your index.html so let me copy this content as well and just go to the public index.html and let me paste this here so this would take some time to install the react bootstrap so react booty stripe has been installed so i need to go for let me close this one first and if i go to the react bootstrap here okay let me check if this drive has been installed or not so you can see here react boot strap has been installed here so next thing is you need to just go for react bootstrap here and just type nav bar so we we need to search for nav bar here so let me go for nav bar and you can see here different different styles of never you can just pick one of them from here so let me pick this one i guess this one is yeah responsive so i need to pick this one so let me just copy this one and go to bs code and [Music] let me go for source here and let me create a new package here let me give name the compo names and let me create one file let me call this one navbar.com.js and just type rcc for creating a class component so you need to install react sniplet to get this one and let me paste the content from from react with stream and the next thing is you also need to import import every everything from here so nav bar from react booty strap so navbar i need to import nav also i need to import nav drop down as well as i need to also import from from here form and also the form control and last but not the least button so if i save this one and if i see here so it's showing the logo is not defined so let me clear this one first so that it won't so any warnings here so if i go to localhost 33000 and also i need to import this navbar component to this average here so just type nav bar comp slash and just close this tag and if i save and go to my browser here and bang so this shows home link drop down and source so this is how you add navbar component here and let me change the color into so if i just type b a r i n d variant equals dark and also the background color also dark so this is also a dark theme here and also i want to add the router if i click on home so this would show the home component here and also let me change the name link to about or whatever you can add as you wish so so i will just add for router for home and about only so for that you need to install react a router dome so let me go for react auto dome here and the first thing you need to do is install the reactor auto dome in your react application so i'm just going to copy this one npm install react router dome so let me copy this one let me type npm install react router dome so this should install the react auto dome and the second thing is you need to import this browser router from here so let me copy this one and let me paste it here and next thing is you need to just add a router to the top of this div so let's add router and also close this router at the bottom and next thing is in every nav link you have to put as equals link from reactor autotune and to equals slash okay let me give this one and slash home similarly you can do same for about as well so let me change this name to about and let me add one more component here so let me call this contact contact and also i need to add one more div here so let me call this div and also i need to add switch so for switch let me copy this one okay i think i missed this switch here let me copy the switch here and instead of about so yeah so i can directly add this function as well to so some content but also i can do make some components here as well so let me make some components here home dot js and also contact dot js let me create one class component as well and let me call this one contact and inside home component i also create one class component here and let me call this one home [Music] also let me create one more component and let me call that one about.js so rcc no it's not working okay rcc and that's one let me call this one about so if i go here and i need to import the path as well so if i click about slash and if i close this one this should auto import the about here also instead of users let me put okay i have i have another component called okay let me call this one contact here and let me call this contact instead of users i need to put a component contact so contact and i need to import this home component as well so this would import the home component here so now if i go to the app here and let me refresh this one and if i click on home this should render to the home if i click on about so this should load the component about and if i click on contact so this should load the contact and if if i make it the small screen so this would also work here as well so i click on contact about home now it's working fine so this is how you make navbar using react bootstrap and also give the route using react auto dome thank you so much for watching if you like my video don't forget to like and subscribe my channel thank you

Channel: Arjun Codes

Views: 17,917

Keywords:

Id: 0wJCxEDDetE

Length: 13min 8sec (788 seconds)

Published: Tue May 25 2021