React Core

A Beginners Guide to React Introduction

Create a User Interface with Vanilla JavaScript and DOM

Create a User Interface with React’s createElement API

Create a User Interface with React’s JSX syntax

Use JSX effectively with React

Render two elements side-by-side with React Fragments

Create a Simple Reusable React Component

Validate Custom React Component Props with PropTypes

Understand and Use Interpolation in JSX

Rerender a React Application

Style React Components with className and inline Styles

Use Event Handlers with React

Manage state in a React Component with the useState hook

Manage side-effects in a React Component with the useEffect hook

Use a lazy initializer with useState

Manage the useEffect dependency array

Create reusable custom hooks

Manipulate the DOM with React refs

Understand the React Hook Flow

Make Basic Forms with React

Make Dynamic Forms with React

Controlling Form Values with React

Using React Error Boundaries to handle errors in React Components

Use the key prop when Rendering a List with React

Lifting and colocating React State

Make HTTP Requests with React

Handle HTTP Errors with React

Install and use React DevTools

Build and deploy a React Application with Codesandbox, GitHub, and Netlify

A Beginners Guide to React Outro

Introduction to Reusable State and Effects with React Hooks

Environment Setup for React Hooks

Add State with the useState Hook to a React Function Component

Add Linting to Help Enforce Rules when Using React Hooks

Add a Lifecycle Event with the useEffect Hook to a React Function Component

Use the React useRef Hook to Reference a DOM Element or Simulate an Instance Variable

Write Custom Hooks to Share Logic Between React Function Components

Leverage an Existing Community Hook in Your React Function Component

Use the useReducer Hook and Dispatch Actions to Update State

Use the useContext Hook to Wire-up the React Context API

Simulate PureComponent with a React Function Component

Leverage the React useMemo Hook for Expensive Operations

Convert a Render Props Component using a Custom React Hook

Introduction to Refactoring a React Application to React Hooks

Refactor a Class Component with React hooks to a Function

Handle Deep Object Comparison in React's useEffect hook with the useRef Hook

Safely setState on a Mounted React Component through the useEffect Hook

Extract Generic React Hook Code into Custom React Hooks

Track Values Over the Course of Renders with React useRef in a Custom usePrevious Hook

Refactor a React Class Component with useContext and useState Hooks

Refactor a render Prop Component to a Custom React Hook

Handle componentDidMount and componentWillUnmount in React Component Refactor to Hooks

Dynamically Import React Components with React.lazy and Suspense

Preload React Components with the useEffect Hook

Change a Stateful React Class Component to a Function Component with the State Hook

Use the React Effect Hook in Function Components

Write a Custom State Hook in React

Write a Custom React Effect Hook

Extract a Custom Hook into its own Module with create-react-hook

Test your Custom Hook Module with react-hooks-testing-library

Prepare a Custom React Hook to be Published as an npm Package

Publish a Custom React Hook as an npm Package

Set up ESLint to Audit Accessibility Issues in React

Use react-axe to Audit Accessibility Issues at Runtime during Development

Use the axe Browser Extension to Audit a Web Page for Accessibility Issues

Use tota11y to Visualize Accessibility Issues

Use a High Contrast Browser Extension to Find Color Contrast Accessibility Issues

Change Display Preferences on Mac to Find Color Contrast Accessibility Issues

Enable High Contrast Mode on Windows

Access and Customize VoiceOver Settings on MacOS

Navigate a Webpage with VoiceOver in Safari

Test for Landmark Region Accessibility Issues in React

Define Landmark Regions of a web page using ARIA roles

Define Landmark Regions of a web page using HTML5 sectioning elements

Test for Heading Level Accessibility Issues

Correctly Define Heading Levels of a Web Page

Test for Form Control Label Accessibility Issues

Ensure Form Controls have Accessible Labels

Add Accessible Labels to Elements Whose Labels are Not Clear Enough

Add Accessible Labels to Provide Elements with More Context

Add an Accessible Label to an Element from the Text of Other Elements

Add Accessible Descriptions to Elements

Test for Image Alternative Text Accessibility Issues

Define Images with Appropriate Text Alternatives

Test for Insufficient Color Contrast Accessibility Issues

Use Sufficient Color Contrast in Web Page Design

Use More than Color Alone to Convey Information in a Web Page

Define a Live Region to Ensure Dynamic Changes are Announced by Assistive Technologies

Appropriately Set the Focus on Each Page Load of a Web Application

WTF are Accessible Design Patterns?