The Joy of React

Building stuff with React is a blast when we have the right mental models! We'll learn how React really works, and use it to build wonderful, robust, accessible user interfaces.

Course Curriculum

A cartoony illustration of a key

Register for The Joy of React

To unlock this course, you’ll need to register for it on the course’s homepage.

Learn More
Module 1

React Fundamentals

Let's go! In this foundational module, we'll learn how to use JSX to create our first components, pass data between them with props, and style them with CSS. The journey begins here.

  1. The Magic of React
  2. About React 19
  3. Hello React
  4. Build Your Own React
  5. Understanding JSX
  6. Expression Slots
  7. Differences from HTML
  8. Fix The Converter
  9. The Whitespace Gotcha
  10. Exercises
  11. JSX vs. Templates
  12. Components
  13. Thinking in Components
  14. Basic Syntax
  15. Props
  16. The Children Prop
  17. Exercises
  18. Application Structure
  19. Fragments
  20. Iteration
  21. Mapping Over Data
  22. Keys
  23. Exercises
  24. Conditional Rendering
  25. With an If Statement
  26. With &&
  27. With Ternary
  28. Showing and Hiding
  29. Exercises
  30. Range Utility
  31. Exercises
  32. Styling In React
  33. CSS Modules
  34. Exercises
Module 2

Working With State

Modern React applications are dynamic. They respond to user actions and other events. In this module, we'll see how React state allows us to bring our apps to life.

  1. Introduction
  2. Event Handlers
  3. Specifying Arguments
  4. Exercises
  5. The useState Hook
  6. Core React Loop
  7. Rendering Vs. Painting
  8. Asynchronous Updates
  9. Exercises
  10. Why the Dance?
  11. Forms
  12. Data Binding
  13. The onClick Parable
  14. Other Form Controls
  15. Exercises
  16. Props Vs. State
  17. Complex state
  18. Mutation Bugs
  19. Exercises
  20. Dynamic Key Generation
  21. Key Gotchas
  22. Lifting State Up
  23. Exercises
  24. Component Instances
  25. State Management Tools
  26. Bonus: Input Cheatsheet
Module 3

React Hooks

In modern React, components are only half of the equation. We also need to learn how to use hooks! Hooks let us “hook into” React internals, for things like managing side effects, capturing element references, and optimizing performance.

  1. Another Tool in the Toolbox
  2. The useId Hook
  3. Rules of Hooks
  4. Exercises
  5. Immutability Revisited
  6. Refs
  7. Exercises
  8. Side Effects
  9. The useEffect hook
  10. Exercises
  11. Effect Lint Rules
  12. Running on Mount
  13. Exercises
  14. Cleanup
  15. Cleanup Exercises
  16. Stale Values
  17. State-Setter Callback
  18. Exercises
  19. Strict Mode
  20. Custom Hooks
  21. Exercises
  22. Data Fetching
  23. Fetching on Event
  24. Fetching on Mount
  25. Exercises
  26. Async Effect Gotcha
  27. Memoization
  28. Why React Re-Renders
  29. Pure Components
  30. The useMemo Hook
  31. The useCallback Hook
  32. Exercises
  33. Alternatives
  34. Future of Memoization
  35. More To Discover
Module 4

Component API Design

How can we architect our React applications to be solid, scalable, and delightful? In this module, we'll learn how to structure our React application, and how to build robust, wonderful components.

  1. Introduction
  2. The Spectrum of Components
  3. Exercises
  4. Component Libraries
  5. Prop Delegation
  6. Exercises
  7. Conflicts
  8. Delegating Styles
  9. Forwarding Refs
  10. Exercises
  11. Polymorphism
  12. Exercises
  13. Compound Components
  14. Slots
  15. Exercises
  16. Context
  17. The Problem
  18. Syntax
  19. Exercises
  20. Provider Components
  21. Performance
  22. Modals
  23. Exercises
  24. Unstyled Component Libraries
  25. Converting Our Modal
  26. Exercises
Module 5

Happy Practices

In this module, I'll share the design patterns and good habits I've built throughout years and years of React experience. We'll dig deeper into more advanced concepts, explore more of the React API, and refine our understanding of React's inner workings.

  1. Introduction
  2. Leveraging Keys
  3. Exercises
  4. Elements Revisited
  5. Deriving State
  6. Exercises
  7. Breaking the Rules
  8. Lifting Content Up
  9. Exercises
  10. Single Source of Truth
  11. Exercises
  12. Principle of Least Privilege
  13. Exercises
  14. useReducer
  15. Switch / Case
  16. Exercises
  17. Immer
  18. Immer 101
  19. Exercises
  20. The “useImmer” Hook
  21. Portals
  22. Exercise
  23. Refs Revisited
  24. Error Boundaries
Module 6

Full Stack React

Modern React frameworks like Next.js include a server component, allowing us to build true full-stack applications using React. In this module, we'll see how to build a full-stack application that uses bleeding-edge features like React Server Components.

  1. Introduction
  2. Client vs. Server Rendering
  3. Hydration
  4. SSR Flavors
  5. React Server Components
  6. Intro to Next.js
  7. Hello Next!
  8. Exercises
  9. Client Components
  10. Exercises
  11. SSR Gotchas
  12. SSR Exercises
  13. Routing
  14. Page Transitions
  15. Programmatic Routing
  16. Dynamic Segments
  17. Exercises
  18. Next's Metadata API
  19. Creating, Building, Deploying
  20. Starting a New Project
  21. Import Aliases
  22. Building for Production
  23. Deploying
  24. Rendering Strategies
  25. Exercises
  26. React Cache
  27. Suspense
  28. An Exciting New World
  29. Graphing It Out
  30. Understanding Suspense
  31. Putting It All Together
  32. Using Suspense in Next
  33. Suspense Exercises
  34. Lazy Loading
  35. Lazy Loading in Next
  36. Baked-in Laziness
  37. Dark Mode
Bonus Module

Layout Animations with Framer Motion

One of the most powerful tools in the React ecosystem is Framer Motion. It allows us to reach beyond what is possible with CSS transitions and create truly remarkable animations. In this special bonus module, we'll see how to use Framer Motion to create several magical effects.

  1. Intro to Framer Motion
  2. Getting Started
  3. Exercises
  4. Layout Animations
  5. Layout Exercises
  6. Shared Layout
  7. Working With Groups
  8. Shared Layout Exercises
  9. One Last Exercise
  10. Motion Accessibility
  11. Disabling Motion in Next
  12. Troubleshooting
Project

Interactive MDX-Based Blog

In this project, we'll combine everything we've learned across the entire course to build a dynamic blog. Using an incredible technology called MDX, we'll create a platform you can use to build interactive blog posts, with the full power of React available to you as an author. This is so much more than a typical blog!

  1. About This Project
  2. Intro to MDX
  3. MDX in Next.js
  4. Getting Started
  5. Submit Your Project
  6. Solution
  7. Suspense Investigations
  8. Navigation Performance
  9. The Journey Continues
Bonus Module

Job Hunting Kit

Learning React is one thing, and getting a job as a React developer is another. In this bonus module, I'll share the tips and tricks I've learned from years of coaching junior developers, and help you prepare for technical interviews.

  1. Introduction
  2. The Hiring Funnel
  3. Cover Letters
  4. Quantity vs. Quality
  5. Portfolios
  6. Building a Portfolio Site
  7. Technical Interviews
  8. Interview-Style Challenges
  9. FizzBuzz
  10. Scroll Position
  11. Todo App
  12. Project Euler
  13. Starfield Button
  14. Multi-Step Signup
  15. Trello Clone
  16. Clicking Outside
  17. Multi Checkbox
  18. Fetch Race Condition
  19. useEffectSkipMount
  20. Retro Questions
Reference

JavaScript Primer

JavaScript has changed a lot in recent years, and React has embraced these changes. In this bonus module, we'll look at a bunch of modern JavaScript features, and see how they can help us in React.

  1. Introduction
  2. Interacting With The DOM
  3. Statements vs. Expressions
  4. String Interpolation
  5. Arrow Functions
  6. Object Destructuring
  7. Property Value Shorthand
  8. Array Destructuring
  9. JavaScript Modules
  10. Array Iteration Methods
  11. Performance
  12. Truthy and Falsy
  13. Logical Operators
  14. Assignment Vs. Mutation
  15. Rest / Spread
  16. Intervals and Timeouts
  17. Global Events
  18. Async / Await
  19. HTTP Methods
  20. Fetch
  21. HTTP Status Codes