Curricular Guides are independent reviews. We may receive a commission if you click a link and make a purchase.
Please consider supporting us by leaving us feedback, and recommending this guide to others.


The Best Course to Learn React Fundamentals in 2023

By Curricular Staff Published: February 16, 2023

There’s no shortage of great courses that teach the fundamentals of React. But we believe the best courses are those that actually prepare you to build a production-ready frontend with React, using the latest best practices, through an effective and engaging learning experience. After rigorously testing and evaluating over a dozen of the highest-rated React courses, we strongly recommend Scrimba’s React Tutorial as the best overall course on React Fundamentals for 2023. With an innovative in-browser coding environment, and the inclusion of stellar screencast lectures, hands-on exercises, and portfolio projects, Scrimba’s React Tutorial is a solid option for starting out with React. To suit learners with different styles and levels of previous experience, we’ve included several additional recommendations, including Frontend Masters’ Complete Guide to React v8.

Let Us Find the Best Course For You

Take our short quiz to get a personalized learning recommendation.

The quiz only takes a minute to complete.


How we picked and tested

  1. Comprehensive Coverage: The course needs to cover the essentials for using React in 2023, including JSX, Components, Props, State Management, Side Effects, and React Router.
  2. Learning Features: Real skill development happens with fingers on keys. We looked for courses with more than just videos; exercises and projects were essential.
  3. Real World Application: A great React course teaches you how to use React on a production application. We looked for examples and best practices from professional experience.
  4. Support and Community: Learning is better together! We looked for courses with thriving communities and rapid, helpful support for learners.

Our Pick:
React Tutorial: Learn React for Free

Scrimba's react course

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


Runner Up:
Complete Guide to React v8

by Brian Holt, Frontend Masters

Frontend Masters's React course

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


Everything We Recommend

TOP PICK

Learn React for Free by Scrimba

Scrimba's react course

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 Course

RUNNER UP

Complete Guide to React, v8 by Frontend Masters

Frontend Masters's React course

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 Course

ALSO GREAT

Part 1: React by Fullstack Open

Fullstack Open's React course

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 Course

ALSO GREAT

The Official React Docs by The React Team

React Docs Learn

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 Course

Why You Should Trust Us

Curricular 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.


How We Picked and Tested Courses - In Depth

Course Selection

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.

Our Testing Criteria In Depth

We graded the candidate courses against the following criteria:

  • Relevance: A great React course provides frequent real world examples and applications; not just theory and toy examples. The course should also teach React best practices so the learner avoids making rookie mistakes when shipping to production.
  • Thoroughness: A great React Fundamentals course teaches all of the necessary concepts to get the learner up and running with building production-ready user interfaces with React. From our research, the essential concepts include JSX, Components, passing props, managing state, hooks, the basics of performance management, and using key tools in the 2023 React ecosystem like React Dev Tools, create-react-app, and Vite. Going beyond these topics isn’t necessary for a fundamentals course, so in many cases, we didn't recommend courses that packed in too many advanced topics alongside fundamentals.
  • Learning Features: Just like nobody learns to ride a bike by watching a video, nobody learns to code just from watching someone else do it. So a great React Fundamentals course in 2023 should include more than videos. We prefer courses hands-on exercises and projects where students can apply their knowledge in a new context.
  • Outcomes: A course needs to deliver on its stated learning objectives. In general, we focused on courses that aimed to prepare students to build a frontend application with React from scratch, using best practices.
  • Difficulty: A course should be clear about its target audience and any required prerequisite knowledge. With that audience established, the course should teach at the appropriate level of difficulty; not too easy, not too difficult; not too slow, not too fast. From our research, students aiming to learn React should typically be familiar with HTML, CSS, and JavaScript ahead of starting to learn React, so we looked for courses that assumed working knowledge of these topics, and didn’t reiterate too much about those topics.
  • Production Quality: A great React Fundamentals course should include polished and professional course materials. In 2023, the table stakes of even an average course are professional video production, uniform sound levels and noise-free audio, and course materials that are free of typos. Professionalism also extends to the captions and transcripts - technical terms should appear accurately.
  • Instructor energy and presentation skills: An instructor’s presentation skills should be top notch, particularly since materials can be edited in post-production. Consistent energy and enthusiasm for the material are required.
  • Accessibility and inclusion: any qualified student should be able to learn from a course, regardless of any physical limitations or geographical location. The course should try to be inclusive, with examples that can be nearly universally understood, rather than overly focused on the West or on. Videos should be captioned at a minimum, with captions proofed for accuracy.
  • Support / Community: learning doesn’t happen in a vacuum; it’s best in a community. A course should make an effort to bring learners together for collaboration and offer highly responsive, effective support when learners are stuck.
  • Value for money: the cost of the course should be commensurate with the amount of transformation the course provides.

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.


Prerequisites for Learning React Fundamentals

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.


Our Pick:
Learn React

by Bob Ziroll, on Scrimba

Scrimba's react course

Who this course is for

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.

Scrimba's projects

Why this course is great

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.

Scrimba's interface

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.

Flaws but not dealbreakers

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.

Helpful to Know Before Taking This Course

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.


Runner Up:
Complete Guide to React v8

by Brian Holt, Frontend Masters

Frontend Masters's React course

Who This Course is For:

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.

Why This Course is Great:

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.

Frontend Masters's interface

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.

Frontend Masters's React course

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.

Flaws But Not Dealbreakers:

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.

Helpful to Know Before Taking This Course

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:

  • Complete most, if not all, of the recommended extensions to the course scenario project.
  • Try to recreate the course scenario project from scratch after you’ve finished the course.
  • Go to another resource (like Scrimba’s Learn React for Free course) and skip straight to the projects to test your knowledge. Start one of those projects from scratch, and then review sections as needed if you get stuck.
  • Sketch out some basic requirements for a reading list or a movie list application and then build it from scratch. Focus on fetching data from an external API (like TMDB), displaying the information to users, and giving them the ability to interact with the lists - filtering, saving, or annotating the lists in some way.


Also Great:
Intro to React

by University of Helsinki, Fullstack Open

Fullstack Open's React course

Who This Course is For:

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).

Why This Course is Great:

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.

Fullstack Open's React course

Flaws But Not Dealbreakers

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.


Also Great:
The Official React Documentation

by The React Team, Meta

Really? Really. We’re recommending the official React documentation as one of the best courses for learning React Fundamentals.

The React Docs

Who This Course is For:

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.

Why This Course is Great:

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.

The React Docs

Flaws But Not Dealbreakers

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.

Bottom Line

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.



The Competition

  • React 18 Path by Various Authors, Pluralsight
  • Epic React by Kent C. Dodds
  • React Basics, by Meta on Coursera
  • Complete React with Redux by Stephen Grider, Udemy
  • React - The Complete Guide (incl Hooks, React Router, Redux) by Maximilian Schwarzmüller, Udemy
  • Learn React 101 by Codecademy
  • The Beginner's Guide to React by Kent C. Dodds, egghead.io

Exclusions

Note: We didn't evaluate the following options, as they are pre-release or being refreshed:

  • The Joy of React by Josh W. Comeau
  • Classic React and React Hooks by Tyler McGinnis, ui.dev

React 18 Path by Various Authors on Pluralsight

A solid choice for screencast training. Great instructors delivering focused, polished microlearning. The first 6-8 hours of this 30+ hour path are all you'll need to become conversational in the key React concepts, but you'll need additional practice with hands-on projects to make the leap from watching to building.

Cons: No community, no hands-on learning. The learning check quizzes are too simple.

Who It's Good For:You might consider this if you're already an experienced developer looking to quickly understand how React works in the real world, to evaluate whether to go deeper. If you're part of a team trying to skill up together and have a built-in learning community, Pluralsight is a good option for core material.

Purchase options: monthly or annual subscription, for around $29/mo

Go to Course

Epic React by Kent C. Dodds

This high-end, hands-on workshop-based course emphasizes exercises over screencasts. Epic React covers React fundamentals in its base pricing tier, with much more advanced material in the premium tier.

Cons: The course doesn’t provide enough quality explanations of the fundamentals, spends too much time on toy examples vs. real world application, and is priced too high relative to other options for learning React Fundamentals.

Who It's Good For: If you're a seasoned JavaScript developer who wants to explore the capabilities of React while getting familiar with the core fundamentals, or if you've read through the React documentation and prefer an accelerated, hands-on workshop to test your understanding of the fundamentals, you might like this course.

Purchase Options: Single license for $119 for the fundamentals tier

Go to Course

React Basics, by Meta on Coursera

The course contains a lot of real world examples for how Meta uses React, which we expected given the team authored this course. The materials are some of the most polished, and the explanations throughout are solid.

Cons: The in-course project, building a calculator app, isn't the most exciting. The quizzes mostly cover the basics, and are less challenging than the target student might need. We found the coding labs functionality to be less effective than developing locally, which was frustrating. And the peer-to-peer feedback on exercises is highly variant, so without some quality control, we can’t recommend the value vs. other options.

Who It's Good For: A decent option for developers who are fans of more traditional distance education, and those who want a certificate of course completion. However, we recommend the Fullstack Open course as an alternative in this format.

Purchase Options: $49/mo for full course and certificate of completion, with 7-day free trial

Go to Course

Complete React with Redux by Stephen Grider, Udemy

A decent starting place, as the course covers the essentials and walks through the end-to-end build of a React project.

Cons: The biggest drawback is the learner isn’t building anything portfolio-worthy in this course, which means the course doesn't really meet its objective "gain the skills to get a job as a software engineer." It's also a very long course, with very thorough explanations, so there are more efficient paths for most developers to learn the fundamentals. We wanted to see more real-world examples and less hand-holding through the demonstrations. We also wished the course was more polished, as there were occasional noticeable shifts in audio volume and typos in the code that could have been edited out.

Who It's Good For: If you catch this on sale, and you're going to supplement with other resources, this is a decent value for the money. But if screencasts are your preferred format, you should consider other options that aren't significantly more expensive, like Pluralsight or Frontend Masters, which will provide a faster ramp-up with more production polish and real-world examples.

Purchase Options: Udemy pricing fluctuates with sales. We found $19.99 for full access to the course, or included with $16/month subscription.

Go to Course

React - The Complete Guide (incl Hooks, React Router, Redux) by Maximilian Schwarzmuller, Udemy

Overall, the course is a decent value for money; it feels like a less expensive Pluralsight at 80% of the quality.

Cons: It’s not an efficient course, as you’re over 1 hour into the course before you get your hands on the keyboard with creating a React project. The Udemy Coding Exercise feature runs automated tests to validate your code, but the coding exercises are incredibly simple - often involving changing 1-2 lines of code - and too prescriptive in how you solve the challenge, down to validating the text you put inside an h1 element.

Who It's Good For: Professional coders who want to quickly get up to speed with React. Skip to the section of the course that recaps the key functionality in a few hours.

Purchase Options: Udemy pricing flucutates with sales. List price is $129. We found a sale for $19.99. Also available at $16.58 per month as part of a monthly subscription.

Go to Course

Learn React 101 by Codecademy

Pass on this one. We don’t feel the course will actually prepare learners to build a React application. We like that the course starts with the absolute basics and includes practice projects so you can see how to build a full-featured application with React.

Cons: The course is almost frustratingly simple at first and provides a ton of hand holding even through the Advanced JSX section. Some of the quiz questions were too easy to figure out because the correct answer was made too obvious either by its length or specificity. The project scenarios (animal fun facts) weren’t real world applicable, and the step by step hand-holding was too much to prepare learners to be able to build on their own.

Who It's Good For: Early coders who have recently learned JavaScript. Even so, we think Scrimba is a better option.

Purchase Options: Available with monthly ($34) or annual subscriptions ($17/month).

Go to Course

The Beginner's Guide to React by Kent C. Dodds, egghead.io

There are much better options to learn React Fundamentals that we feel will better prepare you to build simple, real-world React applications.

Cons: All of the examples in this course are toy examples, with no real world application. The videos frequently contain accidental typos that don’t serve an instructional purpose, that should have been cleaned up / re-recorded so they’re not distracting from learning. And a few times, we were frustrated by seeing examples where Kent explicitly followed the example by saying “you’d never do this” – which left us feeling like our time was being wasted on superfluous details.

Who It's Good For: Professional developers who want a quick start with React may benefit from the course. But we prefer Frontend Masters or Pluralsight for a quick start video tutorial series.

Purchase Options: Available with monthly ($25), quarterly ($70) or annual ($250) subscriptions.

Go to Course

Back to top


Was This Guide Helpful?

Help us out by leaving us feedback, join our email list to get notified when we release new guides, and recommending this guide to others.

Thanks for reading!

Back to top