"React Front To Back 2022" by Brad Traversy contains roughly 20 hours of lectures discussing React fundamentals alongside three projects that become increasingly more complex.
Though I already had a fair understanding of React coming into this course, I still found it to be a worthwhile and informative investment. Coding along through these lectures, you can expect to lots of hands-on practice and a deep understanding of the React workflow.
Things like creating components, managing state, conditionally rendering content to the DOM, etc. will all become second nature well before you complete the course. You will also be introduced to many helpful third party tools and resources, such as react-toastify, Tailwindcss, Firebase, and more!
Overall, I highly recommend this course to anyone looking to sharpen their skills as a react developer.
If you haven't used React before, the Feedback App project is a great place to start. You will learn how to create components, pass & utilize props, and implement & manage state. Later on in the project, you will refactor your component level state to be used globally through the use of the Context API.
https://michael-rodriguez22-feedback-app.vercel.app/
The GitHub Finder project further explores the management of app level state by introducing actions and reducers. Did you know you can utilize actions and reducers with the Context API? Explanations of these concepts are thorough, insightful, and will make understanding third party state management libraries (such as Redux) much easier. Also, as an added bonus, you will learn how to use Tailwindcss with plugins inside of a React app!
https://michael-rodriguez22-github-finder.vercel.app/
Lastly, the House Marketplace app will introduce considerations for full stack apps built with React. If you haven't used Firebase before, be prepared to learn a LOT about it's capabilities as a platform for user authentication, cloud file storage, and a dedicated document database. This project is quite long and in-depth, so be sure to take your time and read through the documentation for all of the tools utilized.
The styles used here all come from a single pre-made index.css file rendered at the app level. I think this is okay in the context of this project, as it is already quite long and writing out styles for each component would have made it significantly longer. I do think that if you were hoping to learn more about best practices for styling within larger React apps, you will probably have to look elsewhere.
https://michael-rodriguez22-house-marketplace.vercel.app/