NEW! Curricular Projects • Test Your Skills and Get Expert Feedback
We independently test and review every course that we recommend.
Please support us by leaving us feedback, and recommending this guide to others.
Updated: July 18, 2023
Scrimba
By Bob Ziroll
The best overall combination of topic coverage, learning experience, instructor quality, and delivery of outcomes. And you can take it for FREE, though we recommend subscribing to get the full benefits.
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. Over the span of the course's four parts, you build 8 projects - 4 of them entirely on your own.
Sometimes the exercises provide a bit too much hand holding, veering more to "recreate what I just did" rather than "practice that technique to solve a new problem." Not a dealbreaker, but be aware our reviewer skipped sections late in the course to get to the more challenging bits.
The course will take longer to complete than the listed runtime, in order to complete the projects.
You can take the entire course for free, but we highly recommend purchasing a Pro subscription for a month or two while going through this course in order to get a certificate, full access to the community, and code reviews. Scrimba is one of the few platforms that has made their community truly valuable.
Frontend Masters
By Brian Holt
This 6 hour workshop teaches 85% of the real-world React footprint. A great option for seasoned JavaScript developers.
Taught by one of the world's leading React experts, this workshop is one of the best starting points for learning React the way it’s actually used in top organizations like Reddit, Netflix, and Stripe.
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. In this course, you'll join Brian to code through the development of a pet adoption site. While not the deepest dive into React's core concepts, it’s enough to get you started with some meaty React projects or to learn advanced topics.
Frontend Masters has a complete React Path with an additional 15 hours of core React content and electives. If you're serious about working with React professionally, we recommend subscribing and taking the full path - at least the core content.
While the course is chock-full of insights, occasionally within a particular section, Holt answers a question, 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.
As a subscriber, you have access to a Discord server where Frontend Masters staff and instructors hang out and answer questions. It's one of the more valuable learning communities out there.
We recommend supplementing this course with an independent project, in order to be ready to use React in a professional setting.
Fullstack Open
By Various Authors
An impressive free, text-based course developed in partnership with tech companies, that offers feedback on coding exercises. Part of a larger full-stack curriculum, so a great option for novice coders.
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.
The community has a high noise to signal ratio, so it's not very valuable.
Pluralsight
By Various
A solid choice for screencast training by expert authors, but you should supplement with independent practice and projects.
This series of video courses covers everything from the basics to advanced React features. The courses are concise and scoped well to cover the core topics without too much overlap.
Pluralsight's authors are the main draw here, as experts Cory House and others guide you through real-world React usage.
Pluralsight's React path includes an adaptive assessment that will measure your proficiency with the library. The assessment can give you a good idea for how your React knowledge stacks up against other Pluralsight users and areas to target for additional study.
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.
Pluralsight doesn't have a great community solution, and support through the forums is extremely limited. If learning alongside others is important to you, then you should go with another solution or supplement with a React Discord community.
React is a popular JavaScript library used for building dynamic and interactive user interfaces. It is commonly used for single-page applications (SPAs) and works fairly seamlessly with other libraries and frameworks.
React follows a component-based architecture, where each component manages its state and renders the UI based on changes to that state. It efficiently updates the DOM using a virtual DOM, minimizing direct manipulation of the actual DOM and optimizing performance.
Components: Understand the concept of components in React, which are building blocks for user interfaces. Learn how to create functional components and class components and understand their differences.
JSX: Get familiar with JSX, a syntax extension for JavaScript used in React to describe the user interface. Learn how to write JSX code to create and render React elements.
State and Props: Understand how to manage state within React components to enable dynamic and interactive user interfaces. Learn about props, which allow you to pass data from parent components to child components.
Virtual DOM: Grasp the concept of the virtual DOM, an in-memory representation of the actual DOM used by React for efficient rendering and updating of components.
Lifecycle Methods: Learn about React's lifecycle methods (for class components) and their order of execution. Understand how to utilize lifecycle methods for component initialization, updating, and cleanup.
React Hooks: Explore React Hooks, which allow you to use state and other React features in functional components. Learn about useState, useEffect, useContext, and other hooks for managing state and performing side effects.
Forms and Events: Learn how to handle form submissions and user interactions using React's event system. Understand how to use controlled components to manage form state.
React Router: Familiarize yourself with React Router, a library for handling navigation and routing in React applications. Learn how to set up routing, create route configurations, and handle dynamic routes.
State Management: Explore state management solutions like Redux or the React Context API for managing global state and sharing data across components.
Build Tools and Package Managers: Get to know build tools like Webpack and bundlers like Parcel, which are commonly used with React projects. Learn how to use npm or Yarn as package managers to manage dependencies.
By focusing on these key concepts, you will build a strong foundation in React development and be well-equipped to create interactive and dynamic user interfaces for web applications.
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.
Help us out by leaving us feedback, joining our email list to get notified when we release new guides, and recommending this guide to others.
Thanks for reading!
