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!
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.
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
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
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
Thanks a lot. after watcing your amazing learning video, i am able to resolve problem related to React Router. once again, Thanks a lot..........................
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!
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.
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 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 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?
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
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.
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.
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
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?
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??
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
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!
short, simple and straight to the point. its 2024... Still very useful and relevant... thanks for breaking this down to the simplest...
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.
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.
I don't know if you know this, but your content saves lives.
Thank you so much!
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.
Thanks Kyle! I was working on my Company's official page and this video saved my day!
Thank you, i adjusted my own html and css code into this, and it works well!
Breaking down tutorials in components this way is the way to go.
Thank you so much for this.
I am a beginner for using react. Your explanation helps me a lot.
Thank You so much, was trying different docs and couldn't make it work, Finally found your video and made it done
The final part of your tutorial saved me from a big problem, thanks, you taught me so much!
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
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.
Thanks!
Thank you for the support!
If you only knew how I struggled with this today? 😭 Thank you sm❤
actual goat video only making this comment to help u in the algorithm cause u deserve it
Hey Kyle, thanks for making this. I've come across your channel over the last couple of weeks and finding if really useful! Brilliant.
A few more that kind of video and i'll fall in love with React)
Easy to follow along, and I like you show how to route with and without react-router-dom. Thanks for the tutorial.
Works, thanks!
You are amazing! Thanks for simplifying web dev in such a clear way!
Thank you! These videos really help out, keep up the great work!
Thank you brother, router was doing my head in.
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 VERY VERY much. Great explanation. U are a gifted teacher and thanks one more time
I'm a fan of the teaching style :D
Thanks a lot. after watcing your amazing learning video, i am able to resolve problem related to React Router.
once again, Thanks a lot..........................
ty for simplifying the web for me
Thankyou so much i was stuck on this for hours 😭😭
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.
Bro Thanks a lot this is what I've been looking for.
I think we can use NavLink instead of Link for active state
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!
This came at the right time! Thanks buddy!
You are really helping me with react !
easy and great as always , Thank you !
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!!
Thank you so much, it was exactly what I was looking for. What a great tutorial!
Thank you so much for the video. It really helped me with my assingment.
Thankyou so much you made my day sir
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.
Thank you so much for your video it helped me out alot.
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 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
Thank you for sharing your knowledge
Thanks, I love your angel hair. Keep it up !
You're the GOAT 🙌🏽
Good job!
Hi, can you make a video of vanilla js routing? great videos!
Thanks for this knowledge!
Nice work ✌️
Excellent vid, really clear and help[ed me fix a problem that I'd been battling with all day :-)
you are a legend! Thanks!
This saved me!! thank you
crazy good video !
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?
Interesting how you have the same ideas I have, like organizing the components the router references as "pages".
Great 👍
Great tutorial
It Very Easy ... Can't believe react is so easy ...
or it's your magic ...
who know !
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 more videos on React
Thanks a lot for this tutorial
Many thanks!!!!!
Thanks Buddy
18:05 can someone explain why doing this is necessary... if your website only has a few tabs
Omg thank you so much
great job bro
Thanks Kyle.
05:00 can anyone clear this concept? Why active class have to go above hover for it to work?
Thank you big boss
I get most of this. The only only I’m confused about is why you put display flex in .navbar a
can you also use something like component={Home} when you write the routers?
ERROR in [eslint]
src/NavBar.js
Line 25:24: 'path' is not defined no-undef
Hello, what does this mean?
^ That is line 25
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
thanks for the video baby
Thank you
Thanks kyle
Can u plz create a web development guide for 2022 as u created in 2021 ….thanks in advance
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.
great video thx
awesome thanks
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
4:00 styling
Love You Boss
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.
Can you make a video about blazor?
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??
i love u bro thanks a lot
Thanks,.please make breadcrumb
Please make a video on nested routes
best practice react folder structure and state management sir
Could you make tutorial video on React unit testing ?
hello Kyle! Hope you are fine i wanted to ask that this code can be written in Notepad ++ ?
please make a video on how to implement remember me in react js
bro he is unhumanly fast.