The all-new interactive learning experience that teaches you how to build rich, dynamic web apps with React.

So, let’s be real. Learning React is hard.

Over the past few years, React has become a “must-have” skill for front-end developers. Just about every job posting lists it as a pre-requisite!

If you’ve tried to learn React, though, you know it can be confusing and overwhelming. There’s just so much to know, and most of the tutorials out there assume a ton of prior knowledge and context.

Maybe you’ve gotten stuck in tutorial hell, following tutorial after tutorial without ever making tangible progress, like a mouse on a running wheel. You’ve built so many dang “Todo list” apps now, and yet when you try to build your own project, you don’t know where to start.

You want to learn React, but you’ve struggled. 😬

I want to help.

For the past two years, I’ve been hard at work building the ultimate beginner-friendly React course.

The Joy of React is an interactive course. You won’t just sit and watch me code. There are tons of exercises, real-world-inspired projects, and fun mini-games and activities. It’s not like any other course you’ve taken before (unless you’ve taken my CSS course, in which case, it’s quite a bit like that).

We learn React from the ground up, building a robust mental model we can use to understand React and solve hard problems. I’ll share the dozens of epiphanies I’ve had after almost a decade of professional React experience.

We won’t just learn about React, either; we cover everything you need to know to succeed as a React developer, including modern JavaScript syntax, along with a ton of helpful community tools and packages.

The truth is, React is a joy to use.

Once you get the hang of it, React is a dream. I’ve tried most popular JS frameworks, and nothing else makes me feel as empowered as React.

I care a lot about the user experience, including things like performance, accessibility, polish. Getting this stuff right is not easy. But the React community has stepped up, and there are so many wonderful solutions we can leverage.

We first need to build a rock-solid foundation, to truly understand React conventions and best practices. Then, we’ll see how “secret weapon” community packages extend our reach.

This is a recipe for uninterrupted flow state. It’s pure joy, and I want you to experience it.

Let me tell you how The Joy of React will make it so.

 

The Joy of React

The all-new interactive learning experience that teaches you how to build rich, dynamic web apps with React.

Taught by Josh W Comeau

Toggle turquoise light (visual effect)Toggle yellow light (visual effect)Toggle purple light (visual effect)

 

So, let’s be real. Learning React is hard.

Over the past few years, React has become a “must-have” skill for front-end developers. Just about every job posting lists it as a pre-requisite!

If you’ve tried to learn React, though, you know it can be confusing and overwhelming. There’s just so much to know, and most of the tutorials out there assume a ton of prior knowledge and context.

Maybe you’ve gotten stuck in tutorial hell, following tutorial after tutorial without ever making tangible progress, like a mouse on a running wheel. You’ve built so many dang “Todo list” apps now, and yet when you try to build your own project, you don’t know where to start.

You want to learn React, but you’ve struggled. 😬

I want to help.

For the past two years, I’ve been hard at work building the ultimate beginner-friendly React course.

The Joy of React is an interactive course. You won’t just sit and watch me code. There are tons of exercises, real-world-inspired projects, and fun mini-games and activities. It’s not like any other course you’ve taken before (unless you’ve taken my CSS course, in which case, it’s quite a bit like that).

We learn React from the ground up, building a robust mental model we can use to understand React and solve hard problems. I’ll share the dozens of epiphanies I’ve had after almost a decade of professional React experience.

We won’t just learn about React, either; we cover everything you need to know to succeed as a React developer, including modern JavaScript syntax, along with a ton of helpful community tools and packages.

The truth is, React is a joy to use.

Once you get the hang of it, React is a dream. I’ve tried most popular JS frameworks, and nothing else makes me feel as empowered as React.

I care a lot about the user experience, including things like performance, accessibility, polish. Getting this stuff right is not easy. But the React community has stepped up, and there are so many wonderful solutions we can leverage.

We first need to build a rock-solid foundation, to truly understand React conventions and best practices. Then, we’ll see how “secret weapon” community packages extend our reach.

This is a recipe for uninterrupted flow state. It’s pure joy, and I want you to experience it.

Let me tell you how The Joy of React will make it so.

 

The Joy of React feels like playing a video game. You have text, videos, coding challenges, mini-games, well timed jokes and a boss at the end of each section. You never get bored!

It does an exceptional job at explaining all deep decisions and trade-offs we've made when creating React in a way a beginner can understand.

 

Christopher “vjeux” ChedeauFront-end Engineer at Meta. Co-created React Native, Prettier

 

As someone who has experience using and teaching React, I can't emphasize enough: This is the knowledge you need to know React at a deep level.

Josh covers the fundamentals in this course in a way that is incredibly intuitive, and yet not overwhelming. It's so important to know why you are building applications in certain ways, not just how, and this course covers both.

Even if you've built with React before, this course will fill in gaps in your understanding. Bring out your notebooks and get ready to fill your brain!

 

CassidyCTO at Contenda. Formerly Netlify, React Training.

 

 

TheCurriculum

Module 1React Fundamentals

In this first module, we introduce React, and build a common understanding we'll use throughout the course.

We'll learn all about JSX, components, and props. We'll discover how to do iteration and conditional rendering in React. We'll also cover styling in React.

As someone who has taught React to hundreds of students in-person, I know what all of the common early stumbling blocks are, and we address them head-on in this module.

We go surprisingly deep in this module. By the end of Module 1, you'll understand how JSX differs from a templating language, what a React element is, why keys are necessary… you'll even build your own stateless mini-React from scratch, so you know exactly how it works under-the-hood!

Module 2Working With State

The real magic starts with state. React state allows us to make dynamic applications that feel alive.

In this module, we learn how to use event handlers and the React useState hook to update the UI based on user actions. We'll learn how to wire up forms, how to work with complex state structures, and how to manage state across the application.

We'll also deepen our understanding of how React works. We'll learn why React sometimes feels so much more complicated than other frameworks. We'll discover the crucial role that React component instances play. And we'll learn how to leverage best practices like lifting state up.

There are lots of fun exercises in this module. We build a couple of mini-games, and see how to build a minimal version of my Gradient Generator project.

Module 3React Hooks

In 2019, React was revolutionized with the addition of hooks. Hooks allow us to “hook into” React internals.

In this module, we go beyond the useState hook, and cover things like:

• Managing side effects with the useEffect hook.
• Capturing DOM references with the useRef hook.
• Optimizing the performance of our applications with useMemo and useCallback.
• Creating our own abstractions with custom hooks.
• Fetching data from the network with Fetch + the useSWRthird-party hook.

Stuff gets real in this module. We cover some of the hardest concepts in React, like avoiding stale values in our side effects. To help us make sense of the hard stuff, we double down on our efforts to understand how React ticks, learning why immutability is so important, what exactly a “render” is, and more.

Module 4Component API Design

At this point in the course, we've covered a good chunk of the React API, but we've been focusing on how everything works. In this module, our focus starts to shift.

The components we create should be a joy to use: they should be easy to understand, composable, and offer the right amount of flexibility. Even more critically, they should offer a wonderful user experience, in terms of accessibility, usability, and performance.

This module is all about refining our thinking around components. I'll teach you the mental models I use every day when deciding how I want to structure my code.

We'll cover a ton of practical tips and tricks in this module, from polymorphism to prop delegation to compound components and slots. You'll also learn about React Context, and see how it can be useful in achieving our goals.

Accessibility is a focus throughout the course, but we really lean into it in this module. We'll build notoriously-tricky components like modals from scratch, with a focus on usability and accessibility, and see why it's probably a better idea to use a library.

Module 5Happy Practices

I started working with React in 2015, and I've learned so much along the way. My goal with this module is to help you skip a few years of experimentation, and jump straight to the patterns and practices that are a delight to use.

In the dev community, we talk a lot about “Best Practices”, but really, there's no such thing as a best practice. It depends what you're optimizing for! It's all trade-offs.

In this module, I'll share my favourite “Happy Practices”, the design patterns and habits I've been refining over 8 years, things that just make it enjoyable to work with React.

Here's a few examples of what we'll cover:

• The Principle of Least Privilege, and why I give components as little knowledge/power as possible.
• The distinction between parents and owners, and how we can simplify our code and improve performance in one fell swoop.
• The magic of Immer, and how it makes complex state much less scary.
• Really getting to understand things like React elements, refs, and keys, and how a deep understanding exposes entirely new patterns we can take advantage of.

Module 6Full-Stack React

In this module, we go beyond the browser and explore how React works in a full-stack context, using Next.js.

Next.js is a meta-framework, built on top of React. It's been around since 2016, but was recently totally rebuilt from the ground up. In May 2023, Next brought its new “App” router out of beta, and ushered in the start of a new era in React.

In this module, we'll learn how to build performant full-stack applications using the latest version of Next.js. We cover all of the shiny new tech, including:

• React Server Components
• Suspense
• Streaming Server Side Rendering w/ Selective Hydration
• Next.js App Router

We'll learn how these things work, but also how they fit together to deliver incredible next-level user experiences. This stuff is bleeding-edge, and this course is one of the first in-depth resources to really explore this new world.

This is the module where everything comes together. Using everything we learned over the first 5 modules of the course, we'll build dynamic full-stack React applications, from project initialization to deploy.

 

 

Real-world inspiredCapstone Projects

Everything you learn in the modules will be reinforced and solidified in 3 challenging projects, woven between the modules. You'll use your newfound skills to build:

Project 1Word Game

One of the best ways to learn React is by building games. In this first project, we build a clone of Wordle, a popular online word-guessing game.

The main focus of this project is to get comfortable with React state, but it also exposes us to some really interesting questions around application structure. You'll need to decide how you want state to move through the application, and consider different tradeoffs!

Project 2Toast Playground

We build a reusable, low-level <Toast> component!

This is way harder than it seems. The component we build will adhere to all accessibility guidelines, with a focus on usability and user experience. We'll also put a lot of thought into its API design, making sure it's composable and flexible.

We'll also build a mini app to help us customize and generate toasts.

A few years back, I created a React curriculum for a local coding bootcamp, and it featured a project like this, building a seemingly-straightforward UI component. Students have said that this is a really eye-opening exercise.

 

Project 3Interactive MDX-Based Blog

When I created my blog back in 2018, I didn't want to make a boring ol’ static blog. I wanted to create custom, bespoke widgets that would help the reader learn a concept by doing.

In this final project, we'll build the ultimate blog. You'll learn exactly how to set things up so that you have the full power of React available to you within the content.

You'll use what you've learned throughout the course to build dynamic, animated demos like this:

 

This isn't some contrived toy version of a blog. We use the exact same stack I use for my real blog, joshwcomeau.com, except it's even more modern, using bleeding-edge tech like the Next.js App Router and React Server Components.

If I was creating a new blog today, this is precisely how I would do it. You'll learn all about it in this course. You can even use this project as the foundation for your own real-world blog!*

It also comes withBonus Features!

If you buy the Ultimate package of the course, you'll also gain access to some nifty bonuses which will help you in your journey with React.

 

Bonus ModuleLayout Animations with Framer Motion

Framer Motion is one of the most incredible tools in the React ecosystem. In this bonus module, you'll learn how to use its “layout projection” engine to do truly remarkable, seemingly-impossible layout animations.

This is honestly one of the best “secret weapon” packages in my arsenal, and I'm psyched to show you how I use it!

Bonus FeatureReact Technical Interview Prep

When it comes to getting hired as a React developer, one of the trickiest parts is the technical interview.

In this bonus feature, I'll help you prepare by giving you interview-style challenges, and then showing you how I would tackle them.

This bonus feature will be released later in 2023.