React Sidebar Navigation Menu Tutorial - Beginner React JS Project Using Hooks & Router
HTML-код
- Опубликовано: 20 май 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!
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
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
It was insanely helpful! Thanks a lot! Just started creating my React portfolio website and this navbar is perfect!
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.
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.
Got this up and running on my newest project. works like a charm. Thanks, Brian.
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.
Added this to my project very easily, thank you! the icons you showed me will make my website look wayyy better lol
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.
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 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!
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!!!
was able to implement this into my project pretty seamlessly. thanks!
awesome!
Brian thank you so much!!! the video was very clear, straight to the point. looking forward to more videos of ReactJs
Thanks!
Thank you dude, this was EXACTLY what I needed for my senior project. Learned a lot about React along the way!
I really enjoy every second! Love you Brian keep continuing...
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 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 was so helpful and I really understood everything you did. Once again, thank you for such an amazing tutorial!
Glad it was helpful!
Super amazing dude, straight forward and easy to understand!
This was awesome! Thank you!!! Really loved the explanation. Could be helpful to have the exact things we need to install via terminal :)
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!
thank you! this video is very easy to follow and understand what's going on!
Thanks for the video, it was really easy to follow and the finish result looks great!!!
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🙌🙌🙌
Thank you!! This really helped us in our project
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!
Amazing!
Insanely helpful.
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!
A couple of years later, this tutorial is still amazing!
And you drop a lot of cool tips for noobs like me.
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!
Thank you for this video! It was a huge help👏🏾
This is what I need, thanks man!
Amazing tutorial! you made so simple also the dynamic content on a react site.
Thanks!
Really explanatory!! Good job and thank you!
Badabin Badaboom! LOL.. works Perfectly buddy! Thank you very much!
This saved my time ... your my MVP
Thank you so much for this! :)
simple and straight forward video. keep it up
thank you! Now I'm learning to use inside a top bar you teach, thank you !
Thanks Gabriel!
yo i think ur style is the best
Thanks for the tutorial, very details explaination!!
Awesome tutorial! Just finished the whole thing and actually enjoyed the process. Thank you! Please keep small project tutorials coming.
you are an awesome teacher thanks! very easy to follow along
Great Job Brain! the videois right on point, thank you
this was what i needed exactly for my apps admin section ... now i can get the ball rolling lol. Thanks mate
awesome!
MASTERPIECE thanks a lot man
Muito Obrigado meu amigo!! Thank you mate!!
Thank you so much, you've saved my life! lol
this is amazing! thank you for the content!
Awesome thanks!
This was so dope, thank you
Thank you very much! You are so cool and modern. I push the like button so hard, I broke my keyboard then, guush:(
You went crazy bro 🔥
Thank you for wonderful tutorial..I was able to use this seemlessly..
Simple and very useful, thanks!
Thank you very much for this tutorial!!
Thank you for content!
Amazing tutorial, got urself a new follower!
Thank you very much it helped me a lot , keep up the momentum please
Excellent tutorial, thank you very much!
Awesome keep going , i was waiting for this
Thanks Elmehdi!
work very well ... i am studying and u are very didatic ... icon "hack" was pretty cool
Thank you very much dude! Great Job!!!
Awesome! Thank you for your time!
thanks thanks thanks thanks thanks thanks thanks thanks thanks ......thanks a lot brother...take love..May Allah swt increase you in good deeds and increase your knowledge
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
Very Helpful, thanks!!
Very clear. Helped me a lot. Thank you! You earned a sub.
Awesome, thank you!
Thank you so much for this
that was awesome bro thank you
Thank you so much for this video 🙃
Thanks very much! Subscribed!
Thank you so much. Got it working exactly as u showed
awesome!
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.
Thanks alot for this. Was very simple and works just fine.
Great to hear!
Really helpful, Thanks a lot Brian!!
Glad it was helpful!
very explained tutorial. good job 👍
Thank you thank you so much for this tutorial!! youre a saviour!
feel free to watch my updated version using react router v6.4
Awesome tutorial, thank you for this wonderful vedio.
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!
Amazing , thank you so much man
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
thank you so much sir
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 that!
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
Good job Sir Brian !
Thank you! Super video about React Sidebar Navigation Menu
Glad it was helpful!
Excellent Video Thanks!
Great tutorial! Really awesome result and very good explanations.
Thanks!
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 :(
An excellent tutorial on creating a Navigation Menu in React. Thanks, Brian
{2023-01-23}
Thank you so much!!!!
You are amazing guy! So thanks, i loved it!!!
Thanks Aquino!
Thanks for make this video 👌👌