0%

React.js Learning Path
Be Productive with React.js, Today's Most Popular Framework

Gain experience building, testing, and maintaining high-performance client and server-side React applications.

Total time: 36 hours, 29 minutes

Core Coursework

Take these in order
Prerequisite: The Beginner Learning Path or a solid understanding of HTML, CSS, and JavaScript
Editor's Note
Learn to build a real-world, modern application from scratch using the latest features of React.

Complete Intro to React, v9

Learn to build real-world apps with React 18 and React 19. Use tools like Vite, ESLint, and Prettier to scaffold a project and the latest React and TanStack features to build a complete e-commerce application.
8 hours, 27 minutes CC
Complete Intro to React, v9
Editor's Note
Continue building a real-world application with advanced React features like code-splitting and server-side rendering. You’ll also add TypeScript to the project. We have more TypeScript content in our TypeScript Learning Path

Intermediate React, v5

Learn to build scalable React applications using the latest tools and techniques. Topics include hooks, TailwindCSS, code splitting, server-side rendering, TypeScript, Redux Toolkit, and testing with Vitest.
6 hours, 6 minutes CC
Intermediate React, v5
Editor's Note
Learn to write performant React apps and use the React Profiler to diagnose and solve performance issues.

React Performance

Steve Kinney

Steve Kinney

Temporal
Write performant React apps by learning to structure components and memoize to avoid re-renders, load code on-demand, and leverage new concurrent features in React 18.
4 hours, 31 minutes CC
React Performance
Editor's Note
TypeScript is now critical for most larger React apps to write scalable React apps. We recommend taking TypeScript Fundamentals before taking this course.

React and TypeScript, v2

Steve Kinney

Steve Kinney

Temporal
Use TypeScript with Components, Context API, React Hooks, and type props to build more robust and reliable React applications at scale.
4 hours, 31 minutes CC
React and TypeScript, v2
Editor's Note
Next.js enables you to create full-stack Web applications by extending the latest React features and integrating powerful tooling for the fastest builds.

Introduction to Next.js, v3

Scott Moss

Scott Moss

Superfilter AI
Next.js is a full-stack framework built on top of React.js. Learn the app router, server and client components, and server actions and create everything from basic blog websites up to full-stack apps and APIs.
4 hours, 27 minutes CC
Introduction to Next.js, v3
Editor's Note
Learn how to lead a team of engineers by managing large-scale applications, migrating codebases, and enforcing high code quality.

Enterprise UI Development: Testing & Code Quality

Steve Kinney

Steve Kinney

Temporal
Ideal for lead UI developers: learn unit testing, continuous integration, accessibility testing, mocking, and coding standards enforcement. Guide your team toward coding scalability!
8 hours, 25 minutes CC
Enterprise UI Development: Testing & Code Quality

Elective Coursework

Optional, take in any order

The Hard Parts of UI Development

Develop an under-the-hood knowledge of UI development by learning techniques such as data binding, UI composition, templating, virtual DOM and its reconciliation, and hooks, all from scratch!
The Hard Parts of UI Development

A Tour of JavaScript & React Patterns

Learn a suite of design patterns to improve your JavaScript and React code architecture!
A Tour of JavaScript & React Patterns

Redux Fundamentals (feat. React)

Learn the Redux API from scratch, then learn to hook the Redux React application. You'll also learn how to extend Redux with various tools from its ecosystem.
Redux Fundamentals (feat. React)

Intermediate Next.js

Dive deeper into Next.js concepts including server actions, route protection, caching strategies, and advanced data fetching. Build a full-stack app with React 18+ features and optimized performance.
Intermediate Next.js

State Modeling in React with XState

Explore using XState and React together to model state in real-world React apps. State machines make complex application logic visually clear, flexible.
State Modeling in React with XState

Client-Side GraphQL with React, v2

Wire up a React client application with dynamic data while learning the fundamentals of GraphQL queries and mutations.
Client-Side GraphQL with React, v2

React Native, v3

Use your React skills to build feature-rich, native mobile apps for iOS and Android using React Native and Expo.
React Native, v3

What They're Saying

Today I finished the React Learning Path on Frontend Masters. And now I can say it is totally worth, I learned too much about the entire Javascript Library that i think it is better than many of the courses I've seen out there. 18 hours of pure good knowledge you need to have about React and how it works. My React Apps are gonna be totally different after this course.

Thanks Frontend Masters and Hexis Technology Hub.
Pedro Dias

Pedro Dias

Frontend Developer at DL

Decided to try Frontend Masters and have been loving it ever since! The React path is very well explained. Brian Holt is a great teacher.
Diogo Condêço

Diogo Condêço

diogobcondeco

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now