React Sidebar Navigation Menu using React Router v6.4 - Beginner Tutorial

Подписаться 113 тыс.

Просмотров 47 тыс.

50% 1

Learn how to create a React Sidebar Navigation Menu using React Router v6.4 in this beginner ReactJS Project Tutorial. We will create a sidebar nav menu that you can use to create in a portfolio, website, or dashboard design. We will use the latest version of React Router v6.4.2 using createBrowserRouter to make the routes.
Timeline
0:00 React Sidebar Intro
0:45 Creating React App in Terminal
3:10 Install React Dependencies
5:20 Overview of React Router v6.4.2
7:30 Creating Project Files
9:15 Creating Routes
15:30 Creating Sidebar Nav Menu
22:55 Creating Sidebar Data
25:50 Adding CSS Styles
31:20 Creating Routes without Objects
33:20 Finished Project
Check out my other Videos
Make a React Real Estate Website
• Make a React Website w...
Build a Full Stack Delivery App Using Doordash Drive API - Javascript Node Express Project
• Build a Full Stack Del...
Top 5 Website Designs Every Web Developer Should See
• Top 5 Website Designs ...
Source Code
github.com/briancodex/react-s...
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 39

@masondee4694 Год назад

Great video for this update! Definitely a little more complicated but you explained this very well. Thank you!

@maxlerman754 10 месяцев назад

Cheers dude, I've been looking for a simple sidebar component video for ages :)

@YOLITOPINTO Год назад

Nice and clear! It solved my migration from v5 to v6+. Ty ✨

@user-jc7gk2tm6d Год назад

You're a life saviour, thank you

@airdroptutorial4559 Год назад

now only see your video perfect staright forward easily explaination bro.out put also perfectly working tnx for the video bro

@mounir101 Год назад

And then we get started on coding in 2042. LOL:) Thanks so much. Brian and welcome back again.

@briandesign Год назад

lmao my cra was taking too long to finish

@rafaelceballos8433 Год назад

Can you do one using to wrap it? I'm trying to see different methods to see which is the best approach.

@Sami-jb8cx Год назад

very good tutorial, thanks

@k1dz0r90 Год назад

Awesome tutorial, thanks. But how you push the content to right when sidebar is active

@designart4928 Год назад

so helpfull thankyou dude

@bilalhussainch.8098 5 месяцев назад

Thanks brother very helpful tutorial

@easyworkouts694 4 месяца назад

Helpful tutorial👍

@fabriqr2930 3 месяца назад

Thank You Nice Video Bro

@gbengz1 2 месяца назад

Great video!

@mohamedyoussef8835 Год назад

Awesome video +++++++++ 🙂

@felipechaves3389 2 месяца назад

how will you do in the content of the elements, lets say you have a card that you can click on it and that will link or push you to the page its referring to. How will the side bar work? So you are in home, inside home there is a button to go to about us, and the side bar ofcourse there was an option for about us. Will it mark as active the about us?

@Jgv1919 Год назад

Why app.js was not use or was it removed in the app?

@89mww 3 месяца назад

ty, docs definitely could have made this common use case more obvious for all the people who were used to 'just put the route and element shows up' in prev versions. also why is there no search on their docs??? bananas

@gabriellopez2737 Год назад

Hey bro, do you know how to implement this in electron? I made an app with this, and it works fine in development, but error 404 in production, and I don't know why.

@mihirlakhamje9575 9 месяцев назад

Question If an application starts with landing page and further goes to dashboard... i wants to hide the side bar on landing page and show on dashboard. how should i approach?