React Router is capable of more than just routing users to different components. React Router also has a special way of handling links instead of using anchor tags with an href attribute as you would with HTML. In addition, React Router comes with custom hooks that allow you to access the browser history and pull parameters from URLs to help you deliver dynamic content from your React applications. If you are just starting with React, I recommend starting at the beginning of this Learn React tutorial series playlist here: th-cam.com/play/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp.html
Just a comment to help out the site - Great tutorial and I really like your teaching style, nice and slow and I can type along with you, sometimes spotting the issues and solving them. It's great to see you leave all the debugging in the video and the solutions though :) Great work, keep it up!
@@DaveGrayTeachesCode Started this series from first video and will complete further. This comment will be helpful for those students who are following this series from scratch like me 😀. Thank you for sharing the video link & this series is more then a paid course.
Nice project and I already excited about the new features you're going to add, In postPage and according to JS operator precedence we should be able to do this: instead of writing {post && ... } {!post && ... } we can do it in one block {post && ... || ... } Thanks Dave,
Great comment and suggestion Ahmad. This makes logical sense and I am often overly deliberate when coding to explain procedures. That said, you will find this suggested change creates a no-mixed-operators warning from react-dev-tools.
@@DaveGrayTeachesCode Thanks for mentioning the warning, I didn't notice it as I just did a few basic tests. anyways, the way you did is more clear and easy to catch but I couldn't resist using the logical operators to make some shortcuts 😎😁 (didn't expect to get a warning)
Thank you for your tutorials, Dave! Your teaching is very clear and easy to follow. I am wondering about HTML fragments, which you utilize around 12:55. What is the advantage of using those over a standard div?
Thank you! Great question, too. React requires a parent and fragments are a common way of providing that when an element is not needed. Even with HTML, I stay away from divs until they are really necessary. 🚀
Thank you for great tutorial!! I have a question. Around 20:00 , on PostPage, I just played around with it and found if I comment out "post &&" and just leave only JSX parts like below, and directly type url like "localhost:3000/post/2", it returns error, doesn't render anything. Why is that? "post &&" is just a condition, so If there is 'post', it should show post even if we don't have "post &&" . return (
React components often render more than once. For the first render, post is likely undefined so we must check if it exists first with post && ...or we will get an error when we try to access properties that also do not exist.
Keep going in the series. The state will be broken into global and component only requirements. I started this way for beginners to learn about passing props to other components.
I can't resolve why the error message: export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'. Please help! I tried to ask on google but still not be able to solve the problem. my react-router-dom version 6.15.0
Finally I have resolved it by remove the current react-router-dom version and re-install node-module and set react-router-dom to old version 5.1, so it does support Switch keyword
I've spent this tutorial approximately 3 hours and still getting error sh*t. I could not handle Missingpage. i'm getting this in console [ 1)The above error occurred in the component: 2)Cannot read properties of undefined (reading 'pathname') ]
Very difficult for me to debug your code from here. Please note that React Router v6 is now available and I have posted an update in the course resources. You can also download my source code and compare to yours. I know you'll get it going!
Hello Dave! your tutorials are perfect and very helpful for me. Dave In your Router tutorial I am unable to map data from App.js to Fedd.js to display post on the home Page despite of using your code as it is. May I send you all these files, Can you tell me please where am I doing wrong or is it any other issue?
Hi Iram, you can check your code against my source code that can be downloaded from the course resources on GitHub. (link in description) There should also be a link to my update for this tutorial with React Router v6 which I'm guessing is the issue. You can check your package.json to see which version you are using, but RRv6 is very different from RRv5.
@@DaveGrayTeachesCode ok really glad to receive your response I recheck it again,It's working in your code template but not working on my react app,after updating router I give you feedback within two days. Thank you again Dave
Im almost about to finish this tutorial playlist😌✅✅Thanks for amazing tutorial for react-router-dom v6 user: useHistry is replaced by useNavigate history.push('/') to history('/')
React Router is capable of more than just routing users to different components. React Router also has a special way of handling links instead of using anchor tags with an href attribute as you would with HTML. In addition, React Router comes with custom hooks that allow you to access the browser history and pull parameters from URLs to help you deliver dynamic content from your React applications. If you are just starting with React, I recommend starting at the beginning of this Learn React tutorial series playlist here: th-cam.com/play/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp.html
Most concise teaching of react that I’ve came across on TH-cam in the last 4 years
Thank you for the kind words, Jermaine! 🙏🙏
Another fine lesson from Dave Gray, Simple and to point. Thanks Again Dave !
We look forward to continuing!
Happy to hear it! More to come! 🚀🙏
Just a comment to help out the site - Great tutorial and I really like your teaching style, nice and slow and I can type along with you, sometimes spotting the issues and solving them. It's great to see you leave all the debugging in the video and the solutions though :) Great work, keep it up!
Thank you!
Your tutorials greater than paid content .thanks 🙏
Beat teacher with best react series 😊♥️♥️♥️♥️
Thank you for the kind words 🙏💯
Really great series to cover React basics. As I am learning React at a more profound level, I am understanding how amazing Next.js is.
Pretty nice Tutorial!
Glad it was helpful!
I love learn react tutorials
Thanks! 🙏
Awesome as always 👍😀
Thank you for the support! 🙏
Excellent content! 100% Recommended
Thank you, Alejando!
Wow I learn a lot from you man. Thanks
You're welcome!
At 7:06 , if "Link to" is not working then uninstall react-router-dom & re install it of version 5.3.3
Updated RRv6 tutorial here: th-cam.com/video/XBRLVRjZ3CQ/w-d-xo.html
@@DaveGrayTeachesCode Started this series from first video and will complete further. This comment will be helpful for those students who are following this series from scratch like me 😀. Thank you for sharing the video link & this series is more then a paid course.
I am making my first react project so I am revisiting some of the lessons maybe someday I will become a greate developer like you
You can do it! 💯
Nice project and I already excited about the new features you're going to add,
In postPage and according to JS operator precedence we should be able to do this:
instead of writing
{post &&
...
}
{!post &&
...
}
we can do it in one block
{post &&
...
|| ...
}
Thanks Dave,
Great comment and suggestion Ahmad. This makes logical sense and I am often overly deliberate when coding to explain procedures. That said, you will find this suggested change creates a no-mixed-operators warning from react-dev-tools.
@@DaveGrayTeachesCode Thanks for mentioning the warning, I didn't notice it as I just did a few basic tests.
anyways, the way you did is more clear and easy to catch but I couldn't resist using the logical operators to make some shortcuts 😎😁 (didn't expect to get a warning)
Thank you for your tutorials, Dave! Your teaching is very clear and easy to follow. I am wondering about HTML fragments, which you utilize around 12:55. What is the advantage of using those over a standard div?
Thank you! Great question, too. React requires a parent and fragments are a common way of providing that when an element is not needed. Even with HTML, I stay away from divs until they are really necessary. 🚀
It was really good tutorial thanks so much! it helps a lot.
Glad it helped!
Thank you for great tutorial!! I have a question. Around 20:00 , on PostPage, I just played around with it and found if I comment out "post &&" and just leave only JSX parts like below, and directly type url like "localhost:3000/post/2", it returns error, doesn't render anything. Why is that? "post &&" is just a condition, so If there is 'post', it should show post even if we don't have "post &&" .
return (
{post.title}
{post.datetime}
{post.body}
Edit Post
handleDelete(post.id)}>
Delete Post
)
React components often render more than once. For the first render, post is likely undefined so we must check if it exists first with post && ...or we will get an error when we try to access properties that also do not exist.
@@DaveGrayTeachesCodeI got it!! Thank you!!
Awesome tutorial sir, I was only wondering , why are we passing the usestate hook to each component instead of calling them inside the component?
Keep going in the series. The state will be broken into global and component only requirements. I started this way for beginners to learn about passing props to other components.
@@DaveGrayTeachesCode ok thank you Dave, keep up the amazing job, this series is very fun to watch
26:00 is it okay to use useNavigate instead of useHistory?
Yes, please see my React Router update video: th-cam.com/video/XBRLVRjZ3CQ/w-d-xo.html
@@DaveGrayTeachesCode thanks, you're an amazing teacher
I can't resolve why the error message: export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'. Please help! I tried to ask on google but still not be able to solve the problem. my react-router-dom version 6.15.0
Finally I have resolved it by remove the current react-router-dom version and re-install node-module and set react-router-dom to old version 5.1, so it does support Switch keyword
I believe I linked to my React Router v6 update in the description of this video if you want to use a new version.
You are the BEST
Thank you for the kind words!
Thank you so much!!
You're welcome! The update to RRv6 is available here, too: th-cam.com/video/XBRLVRjZ3CQ/w-d-xo.html
Nice!
hey dave! great video, pls teach how to create a flyout menu and link to other pages in the menu in a typical ecommerce site?
Thank you! You could achieve this with CSS and I show some menu skills in my CSS course here: th-cam.com/video/n4R2E7O-Ngo/w-d-xo.html
I've spent this tutorial approximately 3 hours and still getting error sh*t. I could not handle Missingpage. i'm getting this in console [
1)The above error occurred in the component:
2)Cannot read properties of undefined (reading 'pathname')
]
Very difficult for me to debug your code from here. Please note that React Router v6 is now available and I have posted an update in the course resources. You can also download my source code and compare to yours. I know you'll get it going!
Hello Dave! your tutorials are perfect and very helpful for me. Dave In your Router tutorial I am unable to map data from App.js to Fedd.js to display post on the home Page despite of using your code as it is. May I send you all these files, Can you tell me please where am I doing wrong or is it any other issue?
Hi Iram, you can check your code against my source code that can be downloaded from the course resources on GitHub. (link in description) There should also be a link to my update for this tutorial with React Router v6 which I'm guessing is the issue. You can check your package.json to see which version you are using, but RRv6 is very different from RRv5.
@@DaveGrayTeachesCode ok really glad to receive your response I recheck it again,It's working in your code template but not working on my react app,after updating router I give you feedback within two days. Thank you again Dave
who ever trying to access this in 2024 router writing methods are changed look for logic in this video but make sure your syntax is up to date ;)
❤❤❤❤
Im almost about to finish this tutorial playlist😌✅✅Thanks for amazing tutorial
for react-router-dom v6 user:
useHistry is replaced by useNavigate
history.push('/') to history('/')
Good job! I have a React Router V6 update video 💯
Thank you for your suggestion, I just tried to npm start your code, only to find that I accidentally wrote the className in the h1 tag in header.js
I cannot guess what may be different in your code. My best advice is to compare to mine for differences.