React Sidebar Navigation Menu Tutorial - Beginner React JS Project Using Hooks & Router
HTML-код
- Опубликовано: 29 апр 2024
- Learn how to make a React Sidebar Navigation Menu in this beginner tutorial. We will be using React Hooks, Router, and React Icons in this project. You will be able to open and close the sidebar menu with a simple click and you can easily add this to any of your React websites.
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Timestamp
0:00 What we are building
0:39 Creating React App
3:44 Creating our components folder
4:26 Creating our pages folder
7:45 Installing React Icons
10:24 Importing React Router Link
16:42 Editing our SidebarData file
21:00 Displaying Data on website
23:25 Adding Navbar CSS
34:24 Adding React Routes to display page
React Navbar Dropdown Menu Tutorial
• React Navbar Dropdown ...
Responsive React Website Tutorial
• React Website Responsi...
Source code
github.com/briancodex/react-s...
Watch my updated React Sidebar Tutorial Using React Router v6.4
ruclips.net/video/zQBd3hNXJgI/видео.html
It says
Could not find a required file.
Name: index.html
after doing npm start
Dear new coder and Brian,
probably new versions.
in react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from
import { Switch, Route } from "react-router-dom";
to
import { Routes ,Route } from 'react-router-dom';
thank u
@Brian Design pin this
thanks for everything..
Not sure if this is affecting anyone but they changed "component" from route to "element" and inside the curly braces, you put .
Thanks Brother, it helped a lot !!
Had been searching for a proper sidebar tutorial for a while. So glad I came across this amazing video. Clearly explained and just the right pace for me. Thank you so much!
I practiced a few times with this tutorial, now I understand about react and how to handle with font-end in basic. Thank you so much Brian you made my coding better.
Thanks uumza! glad it was helpful
Dear new coder and Brian,
In app.js you may need to make the changes as below for retrieving the pages:
Great video Thanks brian !
you, the MVP : ) thank you, I spent a lot of time debugging and didn't understand why no page got rendered
I tried to fix this issue for hours!!!!!!!!!!!!!!!
Thx so much
I just made a new version so you can see it using v6.4 of react router
@@briandesign Thankyou sir
It was insanely helpful! Thanks a lot! Just started creating my React portfolio website and this navbar is perfect!
Added this to my project very easily, thank you! the icons you showed me will make my website look wayyy better lol
It was a short video and very simple step to follow, I'll check out for more of your clips. Thank you so much!! You made my life learning React easier.
Got this up and running on my newest project. works like a charm. Thanks, Brian.
Thank Youu !😁
Simplified my project with new vs code tricks I’ve learnt along the way. I like how u run into errors and explain the causes
Glad it helped!
Brian thank you so much!!! the video was very clear, straight to the point. looking forward to more videos of ReactJs
Thanks!
Brilliant mate - the first tutorial where critical steps are not skipped and everything works exactly as your does !! Too many tutorials out there that leave you stuck because they forgot to mention that installed some required component... Nice work !
Thanks Duncan!
@@briandesign Now perhaps you an show us how to create a sidebar menu that stays in place and updates the content in the main panel - like most desktop and iPad applications. Still amazes me how hard it is to create a split view with a sidebar menu on the left and the details panel on the right. Surely there must be some standard widget for doing this - oh SwiftUI hmm!
very easy and smooth. I liked the video . There is another option we could add is, based on the boolean value of sidebar (state)we can decide whether to show the whole nav-menu component by removing left-margin= -100% value by using a curly closing bracket.
Anyway thank you very much for your wonderful nice tutorial.
You should be targeting 'transform: translateX' in your animation rather than 'left' for smooth animations. Left triggers the reflow where as transform only the repaint.
was able to implement this into my project pretty seamlessly. thanks!
awesome!
Thanks for starting it up from basically square one. So many tutorials I've looked at just figure we already know a bunch of stuff and leave me wondering, "Okay. Should I delete this file? Should I have two of index.js? Um why does everything I do error out?" and then you just walk away frustrated. This really starts from "I know nothing" and helps the learner build from there.
I really enjoy every second! Love you Brian keep continuing...
This is the first time i make a sideBar, and damn it was so easy i thought it was complcated, thanks u brian for your help, definitly gonna like and subscribe
This was a lifesaver. THANK YOU!!!
Thank you! This was so helpful and I really understood everything you did. Once again, thank you for such an amazing tutorial!
Glad it was helpful!
Thank you dude, this was EXACTLY what I needed for my senior project. Learned a lot about React along the way!
This was awesome! Thank you!!! Really loved the explanation. Could be helpful to have the exact things we need to install via terminal :)
Amazing tutorial! you made so simple also the dynamic content on a react site.
Thanks!
Super amazing dude, straight forward and easy to understand!
I'm going through the code on github and my god I never realized how we could achieve such a slick UI with such less code!!! I really wish I had gotten into react sooner!!!
Thank you so much ! I created a Sidebar.jsx and put in it the data array directly and it worked with a little bit of changes :D
thank you! this video is very easy to follow and understand what's going on!
Really great tutorial! Super simple to follow and very easy to go further from here. I was looking for something like this for a while now ;) Thanks!
Glad it was helpful!
thank you! Now I'm learning to use inside a top bar you teach, thank you !
Thanks Gabriel!
Thanks for the video, it was really easy to follow and the finish result looks great!!!
I love this channel, your codes are most clean to understand
Solid, I'll check out your video on adding drop down in the sidebar, next. Appreciate it!
I like how you dont jump around the screen all the time, my guy, I had to import all pages as:- import Home from './components/pages/Home';
etc
Good Video
Thank you!! This really helped us in our project
Wow! This is awesome bro!! Before i know you i have an extremely thirsty of React, but now i got a pleasant drink to take away my thirsty, thanks alot bro🙌🙌🙌
Love the design and simplicity.. Waiting for more cool projects like this- plz do more react stuff.
Can i suggest some small projects?
sure
Thank you for this video! It was a huge help👏🏾
Awesome tutorial! Just finished the whole thing and actually enjoyed the process. Thank you! Please keep small project tutorials coming.
Really explanatory!! Good job and thank you!
idk how...but i never replicated a tutorial before without issues. I replicated this tutorial and had zero issues on the first try. Tells a lot about how efficient your tutorials are. Thanks!
Great to hear!
Very clear. Helped me a lot. Thank you! You earned a sub.
Awesome, thank you!
simple and straight forward video. keep it up
this is amazing! thank you for the content!
Awesome thanks!
Thank you so much for this! :)
This is what I need, thanks man!
Great Job Brain! the videois right on point, thank you
Thanks for the tutorial, very details explaination!!
Amazing!
Insanely helpful.
you are an awesome teacher thanks! very easy to follow along
Simple and very useful, thanks!
Amazing tutorial, got urself a new follower!
Thank you so much. Got it working exactly as u showed
awesome!
A couple of years later, this tutorial is still amazing!
And you drop a lot of cool tips for noobs like me.
thank you!
hi brian , i want to hats off to you man , you are awesome . please continue such awesome content , like different types of navbar , designing different small components in react like that . i like all your videos
Thanks a ton!
Badabin Badaboom! LOL.. works Perfectly buddy! Thank you very much!
Awesome keep going , i was waiting for this
Thanks Elmehdi!
This saved my time ... your my MVP
this was what i needed exactly for my apps admin section ... now i can get the ball rolling lol. Thanks mate
awesome!
Very Helpful, thanks!!
This was so dope, thank you
Thank you so much, you've saved my life! lol
MASTERPIECE thanks a lot man
These man needs more support .
I've been wanting to learn REACT for a long time, but I found it kinda difficult, but his tutorials put me through and he made them simplified, thanks Brian.
If you wanna help me sure, you can teach us how to achieve user Authentication with ReactJS.
Much Love.
Also leave all your social media link, imma follow you as soon as possible.
Thanks David! I linked my twitter in my channel page
@@briandesign Ok man...
Much love and keep up the good work .
But please honor my request on how to achieve user Authentication with ReactJS.
Thanks once again.
@@nelsonchika for sure!
@@briandesign I also got to the first set of videos you posted on you channel on UI/UX Designs they are awesome, if you can also convert them to HTML codes, I'll be greatful.
@@nelsonchika I'm planning on doing some HTML and css vids soon. I just got this one project I'm trying to finish first, then I can start posting a lot more vids
Thanks alot for this. Was very simple and works just fine.
Great to hear!
This Brian, is definitely one of the best programming tutorials I have ever seen. I am learning React at the moment, and this video helped me so much with creating the sidebar for my new app. I thank you for your help and I look forward to your next videos :)
Thanks Jerry! Glad it helped
noice. i subbed. hope u make tutorials connecting reactjs to database in the future
That's the plan!
Muito Obrigado meu amigo!! Thank you mate!!
Excellent tutorial, thank you very much!
Thank you very much! You are so cool and modern. I push the like button so hard, I broke my keyboard then, guush:(
Thank you thank you so much for this tutorial!! youre a saviour!
feel free to watch my updated version using react router v6.4
Great tutorial! Really awesome result and very good explanations.
Thanks!
Thank you for wonderful tutorial..I was able to use this seemlessly..
Thank you for content!
Really helpful, Thanks a lot Brian!!
Glad it was helpful!
yo i think ur style is the best
You went crazy bro 🔥
Thank you very much for this tutorial!!
Thank you so much for this
Thank you very much it helped me a lot , keep up the momentum please
Like and new subscriber. Thanks for share your knowledge and help the programmers community (And this React beginner xd). Btw, the format of your video is amazing.
hey brian this really helped me in my project...very easy to understand and implement...i wanted to make the bars display on the right side instead of left how can i do that...
Thanks very much! Subscribed!
Awesome! Thank you for your time!
Thank you very much dude! Great Job!!!
Liked your icons in VS code.. what extension do you use?
that was awesome bro thank you
Thankx for the wonderful tutorial :) . But, it would be great if you make the pages (home, reports) such that, when you click the menu, the page contents also shifts to right. Right now, if there is any content in the page, the menu div will hide certain portion of the page :(
work very well ... i am studying and u are very didatic ... icon "hack" was pretty cool
This was so helpful!! The only issue I can't figure out is how to get the sidebar to show on top of reactstrap cards in mobile view. Any idea how to force it to always be on top of everything else?
@Brian Design Great Video. would you explain why clicking on menu bar or close button re-renders the current component again and again?
Thank you so much for this video 🙃
Thank you! Super video about React Sidebar Navigation Menu
Glad it was helpful!
Amazing , thank you so much man
So helpful, thanks so much!
Thanks Jack!
You are amazing guy! So thanks, i loved it!!!
Thanks Aquino!
Thanks for your video, it helped me a lot
I just add that in the active nav-menu class I added "z-index = 1" so that the sidebar overlaps any bootstrap grid class on the main page
Excuse me, I don't know English well. so I used a google translation
Greetings from Chile
Thanks Christian!
I needed the z-index trick. Thanks man
Thank you so much!! It's really awesome!!
Thanks!
Thank you for that!
thank you so much sir
very explained tutorial. good job 👍