A while back, I wondered "How can I integrate Node.js-like routing into my React web apps?"
The thing is, React applications are SPAs (Single-Page Applications), and managing component rendering conditionally to render "pages" is super tough. I created this voting app using this strategy (I hadn't found out about React-Router yet) and the code base is terrifying, so don't judge me.
I found out about React-Router later, but didn't feel like exploring its functionality, since I was already bogged down with learning other aspects of React and Web dev. Then, I started this Complete React Developer course on Udemy by Zero To Mastery. The course is super comprehensive and sets you up to be an amazing React developer. It included modules about React-Router and using it, so I started exploring the documentation on their official site.
Here are my key takeaways for anyone eager to learn routing React.js:
Go through the Getting Started tutorial on React-Router's official site. They'll guide you through building a full-fledged web app that tracks your contacts. The tutorial walked me through the key functionalities and features of this great library. Although the tutorial says it'll take only 30-60 minutes of your time, it took 2 hours of mine!
Go through this page on the official React-Router site about the main concepts of their library and client-side routing in general. It's key to know the various terminologies and ideas. However, I'd advise against going through that entire page if you're short on time or just want a general overview. Read through the top overview of the page to understand the general concepts.
Build something! The only way you learn something and truly cement it in your brain is by applying the knowledge. Go out and build a project with your newfound knowledge about React-Router. My challenge to you is to use an external API to fetch data and display it methodically using React-Router. For example, how about a weather app that gets data from OpenWeatherMap's API, saves the user's pinned cities and displays the weather data right below or beside the navigation bar? Comment about any other project ideas that you have!
Thanks for reading! I'd appreciate you pressing the favorite button if you enjoyed this article and also some valuable feedback in the comments. Follow me on Hashnode if you're really eager about learning more about JavaScript.