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.

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!

Module 1 React 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 2 Working 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 React state 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’s 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 3 React Hooks

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

In this module, we really start to find our groove. Here are some of the things we cover in this module:

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

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 4 Component API Design

Alright, so we’ve covered most of the React API by this point… How do we assemble all of this knowledge to ensure we’re building scalable, well-architected applications?

Since I started working with React in 2015, my thinking has evolved quite a bit in terms of how to structure things. I’ve learned so much along the way. My goal with this module is to let you skip a few years of experimentation, and jump straight to the patterns that work best.

I’ll share the high-level mental models I use every day, like understanding the “spectrum of components”, or thinking in terms of producers and consumers.

At a more granular level, we’ll learn a bunch of new tricks to help us build wonderful components. Polymorphism, context, ref-forwarding, prop delegation, and slots are all tools I use in my work to write the best components possible.

We’ll also touch on important usability and accessibility principles. You’ll get to build your own UI primitives from scratch (and see why it’s probably a better idea to use a library).

Module 5 + 6 And so much more to come!And more to come!

The course today includes the first 4 modules we’ve seen, along with 2 real-world-inspired projects and some bonus reference modules.

There will be six modules in total, though. I’ll be developing 2 more modules over the coming months.

What will they cover? Well, that’s partially up to you! I have some ideas about what I’d like to cover, but I might tweak those plans based on your feedback. For example, if there’s lots of confusion around a specific concept, I’ll create more content to address that confusion!

Here’s the current “rough draft” plan:

• “Secret weapon” packages — how I use tools like Immer or Framer Motion to solve problems and build cool things.
• Server-side rendering — understanding how rehydration works, writing SSR-safe code.
• Routing — we’ll likely use Next.js to explore how routing works in React.
• “Advanced problems”, digging deeper into tricky concepts like race conditions, using refs to manage stale values, etc.
• Debugging tips and tricks
• Suspense and lazy loading

As I do throughout this course, we’ll continue to focus on building our intuition of how React works, and how we can use it to build cool things. I’ll continue to share the “happy practices” I’ve learned in my career as a React developer.

There’s so much good stuff I’m excited to include here!