NEW! Curricular Projects • Test Your Skills and Get Expert Feedback
Curricular Guides are independent reviews. We may receive a commission if you click a link and make a purchase.
Please consider supporting us by sharing this guide with others.
By Curricular Staff Published: February 16, 2023
Scrimba’s React Tutorial is comprehensive, builds well from the basics through foundational topics, provides the most hands-on practice of any course we evaluated, and includes fun and engaging portfolio projects that you can pay to have reviewed. The innovative interface, where you can pause the screencast and begin coding right where the instructor left off, almost feels like magic. Overall, this course is an almost unbelievable value, since it is so thorough while also being free.
Get it at scrimba.com
Read the Full Review
Brian Holt has been developing React applications for most of the last decade and has taught React for nearly as long. At this point, his workshop is a well-oiled machine. In under 6 hours, Holt covers about 85% of the footprint of React that developers actually use in the wild. It's not the deepest dive into React fundamentals, and it’s a bit less organized than other self-paced courses, but this course provides one of the most efficient paths to get grounded in React and will have you ready to take on a meaty React project or continue learning advanced topics. A great value for the price.
Get it at frontendmasters.com
Read the Full Review
TOP PICK
The most comprehensive React Fundamentals course
The best overall combination of topic coverage, learning experience, instructor quality, and delivery of outcomes. And it's FREE. Great option for novice coders.
Go to CourseRUNNER UP
The fastest on-ramp to learning real-world React
A 6 hour workshop that teaches 85% of the real-world React footprint. Great option for seasoned JavaScript developers.
Go to CourseALSO GREAT
Solid, free text-based course that offers feedback on exercises.
Impressive free, text-based course developed in partnership with tech companies. Part of a larger full-stack curriculum, so a great option for novice coders.
Go to CourseALSO GREAT
The latest version of the React Docs are also one of the best resources for React Fundamentals.
Excellent explanations, helpful in-browser coding challenges, and an easy-to-navigate interface. A great option for seasoned developers or as a supplemental resource.
Go to CourseCurricular Guides are written by a team of technical professionals, course developers, and lifelong learners.
For this guide, the team spent 200 hours testing and evaluating React courses.
The lead of this project, Brian Green, has worked in developer education since 2009. He built the content development teams at Pluralsight and Udacity, implementing quality standards and tutorials to improve course quality and working with hundreds of authors to create courseware. Most recently, he built the product team at App Academy. As of writing, he estimates he has spent nearly a year of his life taking or reviewing online courses, on topics ranging from Web Development, Networking, Server Administration, DevOps, Cybersecurity, Machine Learning, and Artificial Intelligence.
Our initial research involved spending hours reading hundreds of reviews of various course options, and perusing forums for recommendations and user preferences. This was probably a total of 10 hours over the course of several days. From this research, Brian narrowed down to a list of 12 highly-rated candidate courses.
We graded the candidate courses against the following criteria:
Obviously this is a lot. But we believe we should demand a lot from educational materials in 2023. Our bar was high, our process was thorough, and we feel confident in our recommendations.
React is a JavaScript library, and a large part of working with React is writing JavaScript.
As a result, if you're not already well-versed in JavaScript and with the features of ES6, you should brush up on those before jumping into React. Most React courses will assume you already know JavaScript; stay away from the ones that don't assume any JavaScript knowledge, or that also teach you the core JavaScript concepts, as they're either teaching to the wrong target audience or trying to cover too much.
If you like learning by building projects and want lots of hands-on practice, you’ll love this course. Scrimba’s methodical approach to teaching concepts means you’re practicing something right after learning it, and then putting everything together into a project. And over the span of the course's four parts, you build 8 projects - 4 of them entirely on your own. Scrimba is also a great option for newer coders and those studying to become frontend developers, as there’s plenty of emphasis on building a complete frontend from a mockup, including the CSS.
The course teaches you the fundamentals through building a series of projects that start fairly basic but get increasingly complicated. Scrimba also emphasizes deploying your code and getting code reviews from other students in the community, which is fantastic for learning. You can also pay to have code reviewed by a contractor on staff.
Bob Ziroll is a special teacher. Ziroll takes a methodical approach to teaching concepts, explaining a concept, demonstrating it, and then handing over the controls to the student for practice. But the best part? The exercises are almost all done within the context of an in-course project, so you know what you're building towards and how the pieces fit together. This really helps reinforce why you're learning particular functionality.
Another excellent feature of this course is how much time you spend with your hands on the keyboard. It takes a long time to complete the course, but if you take the time, you're going to come out of it with a lot of muscle memory for building with React.
We also greatly enjoyed the Scrimba interface, which uses a special interactive screencast called a Scrim, where you can pause the screencast and begin coding right in the interface. It feels like magic at first. You can save your code in order to go back and review after watching the screencast of the solution.
We also liked that Scrimba doesn't provide in-browser help as you're working through exercises. You’re forced to go searching for results and get things done on your own. Other platforms, like Codecademy, tend to give away too much information with their in-browser hints. As developers, we have to forage and Google for answers all the time, so while it can be frustrating to get stuck, part of the learning journey is figuring out how to get unstuck, as well as when and how to ask for help.
Finally, we loved the way Scrimba introduced portfolio projects. These sections of the course begin with a walkthrough of what you're supposed to build, along with a series of instructions. This walkthrough gets you genuinely excited about the project. Additionally, Scrimba encourages you to go above and beyond the core requirements, with a few suggested ways to enhance the project and really make it your own. They don’t specify that everything has to be done a certain way, which is a level above other platforms, that spell out step by step requirements. And finally, they recommend a few ways to publish the project to the web, and get a code review from other students and staff, so that your learning doesn't happen in a vacuum. The code reviews are often published in Scrims, which in many cases is more helpful and specific than written feedback.
Sometimes the exercises provide a bit too much hand holding; a bit too much "recreate what I just did" rather than "practice that technique to solve a new problem." Towards the end of the course, we tended to skip ahead to the applied practice projects.
We also hope that the course will get a more holistic update to v18, with coverage of some of the key features that have emerged in React, like React Router and useQuery, which are becoming part of the core of React functionality.
The course will take significantly longer to complete than the listed time, as the listed times correspond to the screencasts, not to the time it will take to do the exercises. If you're going through the course, plan on spending 2-3X the listed time.
If you’re looking for an accelerated path to learning React fundamentals, and want lots of insights into how React is actually used in the real world, Brian Holt’s workshop is an excellent course. We think it's a great solution for professional developers looking to quickly learn React, those who are looking for practical everyday knowledge from an industry practitioner, and those who want to understand the React ecosystem and what the React toolset is actually doing behind the scenes.
Brian Holt has been developing with React for most of the last decade and has taught it for nearly as long. At this point, it’s a well-oiled workshop that covers the key fundamental React concepts in a short period of time. In under 6 hours, Holt covers about 85% of the footprint of React that developers actually use in the wild. It’s not the deepest dive into these concepts, but it’s enough to get you started with some meaty React projects or to learn advanced topics, and one of the more efficient paths to get there.
Since Holt has experience at some of the world’s top startups, this workshop is one of the best starting points for learning React as it’s actually used in top organizations like Reddit, Netflix, and Stripe. There are more real-world examples in this workshop than you’ll find anywhere else. Beyond a tutorial on components, state, and hooks, this teaches you how real world developers utlilize React - and what features you shouldn't bother with.
We liked Holt’s methodical approach with the course, building the app from scratch, bringing in more functionality with each lesson. He explained his goal is to help learners understand what React is actually doing, so we can confidently leverage JSX and tools like create-react-app or React Query. And we can confidently say it works. Brian in particular felt more confident troubleshooting code after taking this course, even though he still frequently makes silly syntax errors, because he's aware of what the tools and features are abstracting.
The course walks through building a pet adoption app step by step, adding more complexity to the user interface in every lesson, until the UI is separated into reusable components, and the app pulls information from an external API.
Frontend Masters has a helpful in-player feature where it displays links that Brian mentions, so you don’t miss out on the resources, and don't have to go searching for the links.
We also really liked Brian’s companion website for the course, which included the code and reiterated key concepts from the workshop. This way, there’s no pressure to code along with Brian at the expense of missing something crucial. Brian also provides a bunch of suggestions for ways to continue learning by extending the workshop application.
This course is more accessible than most others. For the most part, the captions in this course are actually usable, as technical terms are spelled correctly and properly formatted. There are occasional errors, but far fewer than on other courses.
With the workshop structure, the material is a bit less organized than you’ll find on other platforms, like Pluralsight. Occasionally, deep into a particular section, Holt says something super insightful, or covers a secondary concept. As a result, unless you’re taking copious notes, it can be difficult to go back to these specific points when you want to review.
Secondly, the Frontend Masters community isn’t as much of a value add as other Discord communities. While it’s really cool that several Frontend Masters teachers are signed into Discord, we didn’t see a lot of relevant activity during our weeks on there. If Frontend Masters added code reviews or collaboration, it would make a solid option even more awesome.
Just watching and coding along isn’t going to prepare you for building a real world application. In order to be ready to work with React in a professional context, you'll need to do some additional work on your own applying your knowledge in a new context.
After finishing the course, we recommend one of the following:
If you’re looking for a more traditional academic approach to teaching React Fundamentals, you'll love this course. This course is part of a free fullstack development curriculum by the University of Helsinki, and you can receive official university credits for completing this course, which may be transferable to another university. Additionally, if you're looking for a curriculum that strongly aligns with what hiring managers are looking for, this course provides an interview guarantee with several Finnish companies (only for those living in Finland, unfortunately).
This is one of the most educationally sound courses on the market, which is just what you’d expect from a university-designed course.
The curriculum is text-based with hands-on exercises. The explanations are thorough and well-designed to progress from topic to topic. As a result, the course feels like an extension of the official React documentation with some added hands-on application.
In addition to well-written material, the authors curate some valuable free resources. You can also submit exercises for grading and feedback, which is incredibly valuable for learning. The authors also include some spaced repetition to reiterate key concepts, and hammer home best practices like logging everything to the console as you’re building.
While it isn’t quite as engaging or real-world applicable as the Scrimba or Frontend Masters courses we’re recommending, we preferred it to any of the Coursera courses we tested, and most of the other courses with screencasts. It’s a terrific free option, even if you don't complete the rest of the Fullstack Open curriculum.
We found the community associated with this course a bit underwhelming, with a high noise to signal ratio. It’s tough navigating through the noisy requests for help in order to participate in genuinely meaningful and helpful discussions.
Another drawback was a lack of emphasis on design. As with quite a few React courses, you’re learning the syntax and features of React, but a bit siloed from overall frontend best practices. I’d love to see more emphasis on building applications with CSS best practices, especially with a course that assumes knowledge of basic CSS.
Really? Really. We’re recommending the official React documentation as one of the best courses for learning React Fundamentals.
We feel the docs are best for experienced frontend developers who want to quickly get up to speed with React, and don't care about learning through videos. If you prefer to start your learning through videos, there are better options.
First and foremost, the topic explanations are fantastic. This is what you'd expect from the React team.
The challenges at the end of each article are solid. While they aren't real-world, in most of the exercises, you're asked to fix broken code to make the code render, which is a fantastic way to learn and fairly unique in courseware. AND these challenges are actually lots of fun.
Our biggest knock on the React Docs are the quality of the examples; most of the examples are toy problems, enough to illustrate the concept, but not teaching you a real-world application of React. The drawback here is the examples aren't teaching you how React works in production. There also aren't projects challenging you to build large features or an entire application. So by itself, the course isn't going to teach you how to build a production-ready application with React. If you have a project in mind, you'll probably be fine to work on that along with the documentation.
Another drawback is there isn't really community around learning React through the documentation. So you'll need to be plugged into other communities to get support and interact with other learners.
You can't beat the price, and the documentation is detailed and well-written. But what you're able to actually do with the knowledge in the real world largely rests upon you. So while a lot of people jump into forums saying "all you need is the React Docs," to get the most out of learning React, you'll want to supplement the Docs, and potentially start with an alternate resource that suits your learning preferences.
Note: We didn't evaluate the following options, as they are pre-release or being refreshed:
Help us out by joining our email list to get notified when we release new guides, and recommending this guide to others.
Thanks for reading!
