Starting with an HTML file and a script, you'll learn React API to build components and manage forms. Learn the fundamentals of building on the web with React.

React Fundamentals

Learn everything you need to be effective with the fundamental building block of React applications. When you’re finished, you’ll be prepared to create React components to build excellent experiences for your app's users.

Learn React hooks to add interactivity to your apps and build dynamic websites. You'll learn the core React hooks including useState, useEffect, and useRef.

React Hooks

Advanced React APIs covers many of the React API that you might not see on a day-to-day basis but you will need these in your toolbelt for certain scenarios that pop up.

We'll take a tour of several advanced hooks and React API, their use-cases, and when to use them. 

These will include:

- useReducer
- use
- createContext
- useLayoutEffect
- useImperativeHandle
- useSyncExternalStore
- flushSync
- createPortal


## Complex State Management

First we'll dive into the deep-end of state management with `useReducer`. This hook comes in really handy when you feel the logic in your components is a sprawling mess and you'd like to consolidate that into a single place with a nice API to interact with. 

We'll get into some state optimizations as well as how to make your logic easily sharable throughout your application with custom hooks.

## Context

While context is often times something you will leave up to library authors, there are some cases where you want to expose values you need throughout your application. We'll build a context provider that will expose search params to our components on a blog search page with `use` (previously `useContext`) and `createContext`.

You'll also refactor this code to expose the context you create in a custom hook that will give us nice error handling when context isn't set up correctly.

## Portals

React gives us `createPortal` to render UI outside of the DOM tree structure that a component might sit in. This is useful for UI elements like modals or tooltips. We'll explore how to attach a tooltip to the `document.body` to ensure it's positioned where it needs to go.

## Layout Computations

If the logic that you are working with in a `useEffect` affects the how the UI looks, especially on first render, you'll want to `useLayoutEffect`. You'll work through an exercise where the client makes calculations on where to place a tooltip before rendering and see the difference when this is in a `useLayoutEffect`.

## Imperative Handles

`useImperativeHandle` is an escape hatch in React that lets you imperatively tell React what to do. This hook is typically paired with a ref (from `useRef`) where we want to expose imperative methods to developers who pass a ref prop to our components.

## Focus Management

`flushSync` is technically a 'de-optimization' because it forces React to re-render whenever you call it. This means you need to be very careful and know what you're doing when you use it.

The primary use-case for this API is focus management. When you have conditional UI that gets rendered based on various state conditions, you can `flushSync` to ensure elements are in the DOM to properly focus.

## Sync Exernal Store

There are some cases where we want to synce our React code with the external world and display different UI based on the state of the external world. This is where `useSyncExternalStore` is useful and lets you subscribe to external stores. We'll also touch on server rendering as this hook supports that use-case.

Learn the hooks and API that React has to offer for complex state management, sharing context throughout your app, focus management and more.

Advanced React APIs

React Suspense

Advanced React Patterns

React Performance

React Server Components

Epic React Pro

Intro

Hello World in JS

Generate the Root Node

Dad Joke Break

Intro to Raw React APIs

Create React Elements

Nesting Elements

Deep Nesting Elements

Dad Joke Break Raw React APIs

Raw React APIs

Intro to Using JSX

Compiling JSX

Interpolation

Spread props

Nesting JSX

Fragments

Dad Joke Break Using JSX

Using JSX

Intro to Custom Components

Simple Function

Raw API

JSX Components

Props

Dad Joke Break Custom Components

Custom Components

Intro to TypeScript

Narrow Types

Derive Types

Default Props

Reduce Duplication

Satisfies

Dad Joke Break TypeScript

TypeScript

Intro to Styling

Styling

Custom Component

Size Prop

Dad Joke Break Styling

Intro to Forms

Form

Form Action

Input Types

Submission

Form Actions

Dad Joke Break Forms

Forms

Intro to Inputs

Checkbox

Select

Radios

Hidden Inputs

Default Value

Dad Joke Break Inputs

Inputs

Intro to Error Boundaries

Composition

Other Errors

Reset

Dad Joke Break Error Boundaries

Error Boundaries

Intro to Rendering Arrays

Key prop

Focus State

Key Reset

Dad Joke Break Rendering Arrays

Rendering Arrays

Intro to Managing UI State

useState

Controlling Inputs

Derive State

Initialize State

Init Callback

Dad Joke Break Managing UI State

Managing UI State

Intro to Side-Effects

useEffect

Effect Cleanup

Dad Joke Break Side-Effects

Side-Effects

Intro to Lifting State

Lift State

Lift More State

Colocate State

Dad Joke Break Lifting State

Lifting The State

Intro to DOM Side-Effects

Refs

Dependencies

Primitive Dependencies

Dad Joke Break DOM Side-Effects

DOM Side-Effects

Intro to Unique IDs

useId

Dad Joke Break Unique IDs

Unique IDs

Intro to Tic Tac Toe

setState callback

Preserve State in localStorage

Add Game History Feature

Dad Joke Break Tic Tac Toe

Tic Tac Toe

Intro to Advanced State Management

New State

Previous State

State Object

Action Function

Traditional Reducer

Real World

Dad Joke Break Advanced State Management

Advanced State Management

Intro to State Optimization

Optimize state updates

Dad Joke Break State Optimization

State Optimization

Intro to Custom Hooks

Hook Function

useCallback

Dad Joke Break Custom Hooks 

Custom Hooks

Intro to Shared Context 

Context Provider

Context Hook

Dad Joke Break Shared Context 

Shared Context

Intro to Portals

createPortal

Dad Joke Break Portals 

Portals

Intro to Layout Computation 

useLayoutEffect

Dad Joke Break Layout Computation 

Layout Computation

Intro to Imperative Handles

useImperativeHandle

Dad Joke Break Imperative Handles 

Imperative Handles 

Intro to Focus Management 

flushSync

Dad Joke Break Focus Management 

Focus Management

Intro to Sync External State 

useSyncExternalStore

Make Store Utility

Handling Server Rendering

Dad Joke Break Sync External State

Sync External State

Intro to Data fetching

Throwing Promises

Error Handling

Formal Status

Utility

use React

Dad Joke Break Data fetching

Data fetching

Intro to Dynamic Promises

Promise Cache

useTransition

Pending Flash

Dad Joke Break Dynamic Promises

Dynamic Promises

Intro to Optimistic UI

Optimistic UI

Form Status

Multi-step Actions

Dad Joke Break Optimistic UI

Intro to Suspense img

Img Component

Img Error Boundary

Dad Joke Break Suspense img

Suspense img

Intro to Responsive

useDeferredValue

Dad Joke Break Responsive

Responsive

Intro to Optimizations

Parallel Loading

Server Cache

Dad Joke Break Optimizations

Optimizations

Intro to Composition

Composition and Layout Components

Dad Joke Break Composition

Intro to Latest Ref

Latest Ref

Dad Joke Break Latest Ref

Intro to Compound Components

Compound Components

Compound Components Validation

Professional Epic React Workshops