How To Create A Navbar In React With Routing
HTML-код
- Опубликовано: 6 июн 2024
- FREE React Hooks Course: courses.webdevsimplified.com/...
Navbars are one of the most common components you will create in React. Creating a good navbar also teaches core concepts about how React and routing work together which makes this the perfect beginner project. In this video I will show you how to implement a navbar with routing both from scratch and with React Router.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/r...
FREE React Hooks Course: courses.webdevsimplified.com/...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:48 - Navbar HTML
02:24 - Navbar CSS
05:55 - Routing without React router
12:30 - Routing with React router
#React #WDS #Navbar
This is so great for portfolios! I was just considering moving my web portfolio from the old php mysql to react since I dont have much data to use for database anyway. Learning react, about routes and being able to update portfolio all at the same time with this vid thank you so much man!
Thanks Kyle!! I have been stuck at react routing errors. My pages won't show on my home page but after watching your video. I got solution. Keep growing brother.
Without even watching the video, I already know this was EXACTLY what I was looking for today from you...weird how life works out like that.
Hey Kyle, thanks for making this. I've come across your channel over the last couple of weeks and finding if really useful! Brilliant.
The final part of your tutorial saved me from a big problem, thanks, you taught me so much!
Breaking down tutorials in components this way is the way to go.
Thank you so much for this.
You are amazing! Thanks for simplifying web dev in such a clear way!
Searched this morning "AlpineJS router" and Kyle released this video 5 hours later 🤔. Thank you so much for the first router solution. I am amazed at how these things are so easy to you
I don't know if you know this, but your content saves lives.
Thank you so much!
Great video bud. Really nailed the params of an exercise I am working on for a bootcamp with only a little bit of adjustment. Subbed today so look forward to see what you release in the future!
Just for info: There is a NavLink component in react-router which will add "active" class if that link is currently active automatically. Saves some boilerplate code!
Hey, I just found out about NavLink. What do you think its usecases?
@@jaysongoku2274 obviously nav bar items :D
I was about to say the same thing
activeClassName was deprecated in react-router-dom v.6
@@dave6012 you use an inline function passed as value of a prop instead
Thanks Kyle! I was working on my Company's official page and this video saved my day!
Easy to follow along, and I like you show how to route with and without react-router-dom. Thanks for the tutorial.
Thank You so much, was trying different docs and couldn't make it work, Finally found your video and made it done
Thanks so much bro, you are helping me so much on my first project as an intern, keep going bro and i always will be your subscriber.
Hey Kyle, I'm a fan of yours. I like the way you make the content much simpler to understand.
Can you start some Javascript(React) tooling-related videos to make them more understandable? I don't know most of the things why we need some libs as dependencies and soon in a while in 2yrs to 3yrs they are deprecating/outdated
Thank you so much, it was exactly what I was looking for. What a great tutorial!
Thank you, I have learned a lot of things from today's video. Good luck with your work.
Excellent tutorial, helped a lot with my react website nav bar menu.
This came at the right time! Thanks buddy!
I am a beginner for using react. Your explanation helps me a lot.
easy and great as always , Thank you !
Bro Thanks a lot this is what I've been looking for.
Thank you brother, router was doing my head in.
Thank You VERY VERY much. Great explanation. U are a gifted teacher and thanks one more time
You are really helping me with react !
Thankyou so much i was stuck on this for hours 😭😭
Thanks a lot. after watcing your amazing learning video, i am able to resolve problem related to React Router.
once again, Thanks a lot..........................
Excellent vid, really clear and help[ed me fix a problem that I'd been battling with all day :-)
ty for simplifying the web for me
Thank you so much for the video. It really helped me with my assingment.
Finally, I've been waiting for a new video to come. What time do you post videos? (2d, 5d, 1w or something else)
Keep up the great work!!
Thanks for this knowledge!
Thank you for sharing your knowledge
I'm a fan of the teaching style :D
Interesting how you have the same ideas I have, like organizing the components the router references as "pages".
actual goat video only making this comment to help u in the algorithm cause u deserve it
A few more that kind of video and i'll fall in love with React)
Thankyou so much you made my day sir
Nice work ✌️
Works, thanks!
Thank you so much for your video it helped me out alot.
Thanks a lot for this tutorial
This saved me!! thank you
How would you organize a multi page react app? I've seen you've separated the pages in a folder. What about components of these pages? CSS and all the good stuff?
you are a legend! Thanks!
Great tutorial
Thank you great video. Your a machine! Appreciate the information
Even Your hair is even doing 100 km/hr.
Mine does 30 km/hr like a kids school zone! Just like my coding skills.
Good job!
great job bro
Hi, can you make a video of vanilla js routing? great videos!
for the hook to get the current locatin you can just use one hook it is : useLocation()
it's gonna return an obj containing the pathname which we are looking for so the after importing the hook your code should look like this :
const location = useLocation()
let path = location.pathname
I'm sure he knows that, but you can't give away too many trade secrets in a free video.
I think we can use NavLink instead of Link for active state
crazy good video !
can you also use something like component={Home} when you write the routers?
Thank you! This course was very useful for me - really nice :) I consider to change a small PHP app with Mysql DB to React-app for a better frontend. The only thing that trouble me is, that I can do no POST requests (e.g. for mail) to PHP scripts without using php://input thing. Would you advise to do this rather with javascript XHR-Request / Promises than php://input?
Hello. You can use React JS for the front end and connect it to a PHP framework like Laravel for the backend since you’re already comfortable with PHP.
You have options, so you can connect your react front end framework to almost any backend for POST requests and CURD, like express & node js; Laravel; or Django for example.
Omg thank you so much
Thank you big boss
great video thx
Thanks Kyle.
awesome thanks
Great 👍
Thank you
please make more videos on React
Thank you for show-casing this as we can now use this to create an amazing display system perhaps you could make it more of a hamburger menu! Thank you!
Thanks kyle
Thanks, I love your angel hair. Keep it up !
thank you
This is a great video and tutorial! However, is a way where you can transfer data between these pages like if someone clicks a link on your pricing screen it brings it to a new screen to pay with the payment plan selected
Please make a video on nested routes
You're the GOAT 🙌🏽
thanks for the video baby
Thanks Chief, I have been struggling to find the reason why i'm getting a blank white page for two weeks now and i just found out i didn't add the BrowserRouter into the index.tsx root render function
How does node/npm run when you transfer/ftp the files to your web hosting?
Does it create an or changes the html content of the page?
Hello! thank you for this tutorial but I have one problem, when I add tasks on my first nav (todotask) and then I go to my second nav (timer) and then I go back to the first nav, it will reloaded and the added task is gone. can you help me what can i do to fix this? thank you!
Could you make tutorial video on React unit testing ?
Thanks!
Thank you for the support!
i love u bro thanks a lot
how do you use this concept with a nav list from data? Am I supposed to know all of the links ahead of time to create routes?
Kyle, I have a problem. I am hosting my website with firebase the navbar works awesome but if I try to write the url it sends me to the 404 page. How I can make it when I write a url with the page to load automaticaly??
hello Kyle! Hope you are fine i wanted to ask that this code can be written in Notepad ++ ?
how does the mavbar re-render? when you click on the Link, and it's color changes
best practice react folder structure and state management sir
What do you mean by active state? What are the differences when you implement it so that it is in such a state compared to the previous routing implementation without react router?
Nevermind, I now understand it as allowing the active class concept.
Love You Boss
Can you make a video about blazor?
Can you do the same concept but in React Native?
Can u plz create a web development guide for 2022 as u created in 2021 ….thanks in advance
How would I implement this so that if on landing page the navbar is actually different then all the other pages? (I want the landing page not to have the title in the left corner but other pages will, and it will bring user back to landing page).
Show us what gear you use
Hi Kyle! Can you make Microsoft windows loading animation?
What if I don't want to show the nav in a specific page, like the login for example?
In my case I have buttons I want to put in the header. Any ideas?
Hi I don't know if you're listening I am trying to create a navbar inside an exisiting react app are you able to assist ?
I know it's not the goal for this video, but you should make a video on how to make a responsive React navbar as it's one of the things I struggled when I started.
This is currently me
I never these hooks existed, normally I would use the useLocation hook, and the the location.pathname.. then use said pathname to compare if it matches to the target pathname to add active classes..
Well, at least I learnt something new.. thanks
Hello! I am new to React, I am creating a website with a pathname like: where I compare my state with my URL. Can this tutorial be helpful?
05:00 can anyone clear this concept? Why active class have to go above hover for it to work?