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.

Welcome! In this brief introduction, we'll learn how this course platform works, see how to get the most out of this course, and become acquainted with the community features.

Welcome!

Community

Course Features

Housekeeping

Introduction

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.

The Magic of React

Hello React

Build Your Own React

Understanding JSX

Expression Slots

Differences from HTML

Fix The Converter

The Whitespace Gotcha

Exercises

JSX vs. Templates

Components

Thinking in Components

Basic Syntax

Props

The Children Prop

Application Structure

Fragments

Iteration

Mapping Over Data

Keys

Conditional Rendering

With an If Statement

With &&

With Ternary

Showing and Hiding

Range Utility

Styling In React

CSS Modules

React Fundamentals

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.

Event Handlers

Specifying Arguments

The useState Hook

Core React Loop

Rendering Vs. Painting

Asynchronous Updates

Why the Dance?

Forms

Data Binding

The onClick Parable

Other Form Controls

Props Vs. State

Complex state

Mutation Bugs

Dynamic Key Generation

Key Gotchas

Lifting State Up

Component Instances

State Management Tools

Bonus: Input Cheatsheet

Working With State

Time to get our feet dirty and our hands wet! In this module, we'll build our first full-fledged application using React. You'll be challenged, and you'll learn a ton.

About This Project

Strategies and Mindset

Local Development

Getting Started

Submit Your Project

Solution

Word Game

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.

Another Tool in the Toolbox

The useId Hook

Rules of Hooks

Immutability Revisited

Refs

Side Effects

The useEffect hook

Effect Lint Rules

Running on Mount

Cleanup

Cleanup Exercises

Stale Values

Strict Mode

Custom Hooks

Data Fetching

Fetching on Event

Fetching on Mount

Async Effect Gotcha

Memoization

Why React Re-Renders

Pure Components

The useMemo Hook

The useCallback Hook

Alternatives

Future of Memoization

More To Discover

React Hooks

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.

The Spectrum of Components

Component Libraries

Prop Delegation

Conflicts

Delegating Styles

Forwarding Refs

Polymorphism

Compound Components

Slots

Context

The Problem

Syntax

Provider Components

Performance

Modals

Unstyled Component Libraries

Converting Our Modal

Component API Design

Let's build a production-ready “Toast” component! This deceptively-complex UI component requires applying the skills we've been building across all 4 modules.

Hints

Unguided Practice

Toast Component

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.

Leveraging Keys

Elements Revisited

Deriving State

Breaking the Rules

Lifting Content Up

Single Source of Truth

Principle of Least Privilege

useReducer

Switch / Case

Immer

Immer 101

The “useImmer” Hook

Portals

Exercise

Refs Revisited

Error Boundaries

Happy Practices

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.

Client vs. Server Rendering

Hydration

SSR Flavors

React Server Components

Intro to Next.js

Hello Next!

Client Components

SSR Gotchas

SSR Exercises

Routing

Page Transitions

Programmatic Routing

Dynamic Segments

Next's Metadata API

Creating, Building, Deploying

Starting a New Project

Import Aliases

Building for Production

Deploying

Rendering Strategies

React Cache

Suspense

An Exciting New World

Graphing It Out

Understanding Suspense

Putting It All Together

Using Suspense in Next

Suspense Exercises

Lazy Loading

Lazy Loading in Next

Baked-in Laziness

Dark Mode

Full Stack React

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.

Intro to Framer Motion

Layout Animations

Layout Exercises

Shared Layout

Working With Groups

Shared Layout Exercises

One Last Exercise

Motion Accessibility

Disabling Motion in Next

Troubleshooting

Layout Animations with Framer Motion

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!

Intro to MDX

MDX in Next.js

Suspense Investigations

Navigation Performance

The Journey Continues

Interactive MDX-Based Blog

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.

The Joy of React