Standard

Write Concise Functions with ES6 Arrows and Implicit Returns

Understand How this Works in Regular Functions and Arrow Functions

Use let and const for Block-Scoped Variables

Understand the Difference Between Statements and Expressions

Use ES6 Template Strings to Interpolate Values

Use the Rest and Spread Operators on Arrays and Objects

Use Destructuring to Pick Apart Arrays and Objects

Understand Mutable vs. Immutable Operations in JavaScript

Find Elements in JavaScript Arrays with find and findIndex

Remove Array Items with Slice and Splice

Add Items to an Array with Concat and the Spread Operator

Modify Elements in an Array with Map

Remove Elements from an Array with Filter

Use the Reduce Function on Arrays

Use Import and Export On JS Files and Modules

Understand how Babel Transforms Modern JS into Older JS

Write Your First React App: Hello World!

How JSX Compiles to Plain JavaScript

Differences Between JSX and HTML

Sketch Before Building: a "Tweet" Component

Build a Tweet Component with Hardcoded Data

Make Components Dynamic with Props

Split up a React App into Component Files

Sketch Before Building: the GitHub File List

Build the GitHub File List app

Use React Children to render dynamic content

The "Slots" Pattern for Passing Multiple Children to a Component

Validate data with PropTypes

Deploy an app to Surge and Now.sh

Use React State to Make Components Interactive

Run Code After setState with a Callback

Write a React Component Without the Constructor

setState Uses "Shallow Merge" to Update State

The Consequences of Mutating State

Store the Value of Form Input in State

Use a Ref to Refer to an Uncontrolled Input

Sketch Before Building: Shopper App

Build the Shopper's Item Page

Add Items to the Cart

Build the Shopper's Cart Page

Display Cart Items and a Total

Build a Checkout Form

Phases of the Component Lifecycle

Mounting, Updating, and Unmounting

Optimize a React Component with shouldComponentUpdate

Automatically Scroll a Chat Box with getSnapshotBeforeUpdate

Update State Based On Props with getDerivedStateFromProps

Use Error Boundaries to Catch and Recover from Errors

Use the useState Hook to Add State to a Function Component

The "Magic" Behind How Hooks Work

Call useState Multiple Times in One Component

Store an Object in useState and Update It Immutably

Extract Related Hooks Code into a Custom Hook

Access a DOM Node Directly with the useRef Hook

Manage Simple State with the useReducer Hook

Implement undo/redo with the useReducer Hook

Synchronize State with Side Effects with the useEffect Hook

Manage Input Focus with useEffect

Return a Function From useEffect to Clean Up a Previous Effect

How to useLayoutEffect instead of useEffect

Refactor a React Class to Use Hooks

Refactor Lifecycles with Closures to Use Hooks

Cache Values with the useMemo Hook

Initialize useState with a Function

Cache Callback Functions with the useCallback Hook

Basics of REST and HTTP

Finished Product First: the Pet Store App We'll Be Building

Set up a REST Server with json-server

Fetch a List of Data with useEffect and Promises

Fetch a List of Data with useEffect and async/await

Display a Loading Indicator

Display a Modal Dialog Using react-modal

Create a New Pet Form

Use a File Input to Upload an Image

Implement Saving Pet Data Locally

Use HTTP POST to Save the Pet to the Server

Use HTTP PUT to Update the Pet on the Server

Refactor New and Edit Forms into One

Use HTTP DELETE to Remove a Pet from the Server

Reverse-engineer an API and Display Data with React

Finished Product First: the App We're Building

Avoid prop drilling with React Context

Allow Children to Update Parents with a callback from Context in React

Manage the Logged-in User State with Context

Create a Context Wrapper With a Custom Hook

Use Multiple Context Providers in the same app

Manage Context State with the useReducer Hook

Use the useEffect Hook to Periodically Fetch Data

Use React Context to display notifications

Periodically Clean Up Notifications with useEffect and setInterval

Create a Wrapper to Contain the Providers

Performantly render a large list of items with React Context

Use a Context Outside of its Matching Provider