The Joy of React

TheCurriculum

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 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 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 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 4 Component 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 5 Happy 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 almost a decade of professional React experience, 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 6 Full-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.