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

Asynchronous Updates

Why the Dance?

Forms

Data Binding

The onClick Parable

Other Form Controls

Props Vs. State

Complex state

Mutation Bugs

Dynamic Key Generation

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

useImmer

Portals

Exercise

Refs Revisited

Error Boundaries

Happy Practices

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.

Interacting With The DOM

Statements vs. Expressions

String Interpolation

Arrow Functions

Object Destructuring

Array Destructuring

JavaScript Modules

Array Iteration Methods

Truthy and Falsy

Logical Operators

Assignment Vs. Mutation

Rest / Spread

Intervals and Timeouts

Global Events

Async / Await

HTTP Methods

Fetch

HTTP Status Codes

JavaScript Primer

In order to work on production React applications, you need to become acquainted with a whole family of related JavaScript tooling. In this module, we'll cover what these tools are and why they're needed.

The Joy of React