Learn React from scratch: build components, understand JSX, and master core concepts. Understand the 'why' and 'how' behind React's functionality. 

Get Started With React 

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

In this tutorial, you'll recreate useState and useEffect from scratch, learn essential rules, and understand how hooks manage state and renders.

Build React Hooks

In this workshop you'll be building your own versions of React Hooks without using any existing hooks!

Build React Hooks Introduction

Introduction

Introduction to useState

The goal of this challenge is to replace the useState the comes from React with your own. Then, just render the initial state.

In this solution, you'll learn how to setup a useState generic function and some of the type nuances that need to be considered. 

Create Your Own useState Generic Function

Render an Initial State

The goal in this problem is to make the setState function from your custom useState hook work. 

In this solution you'll work towards making your own version of the useState hook's setState function.

Reassign state to a New Value

Make the setState Function Work

In this problem, your task is to figure out how to manually re-render a component whenever state is updated.

Learn how to create your own render function that you can trigger whenever you need.

Manually Trigger Re-Renders

Component Doesn't Re-Render when State Updates

In this problem, you will need to to figure out how to preserve state between renders.

Learn the steps you need to take to ensure that your state doesn't get overwritten by the initial state on each render.

Prevent State From Being Reset Each Render

State Is Reset to initialState on Each Render

Time to take a break before moving on to the next section!

Dad Joke and Break

useState

In this section you'll be breaking renders down into phases and supporting multiple hooks at once.

Introduction to Multiple Hooks

Explicitly define render phases so that it's clear what phase you are in on each render. 

In this solution, we go over the steps we need to take to allow multiple useState hooks to initialize their own state.

Explicitly Defined Phases

Multiple Calls to useState Breaks initialState

The initial state is working, but state is still being shared across useState functions.

We can use an index that is incremented on each call to useState to keep track of each instance's location in a states array. 

Track useState Hooks with a Hooks Index

All useState Hooks Are Overwriting the Same State

Refresh yourself and get ready for the next section!

Multiple Hooks

In this section, you'll be creating your own useEffect hooks!

Introduction to useEffect

We have a useEffect in place that we are importing from react. But, we want to get rid of that and create our own!

Time to lay down your first iteration of useEffect without the dependency array. 

Implementing Your Own useEffect

Replace React's useEffect With Your Own

Now it's time to tackle the dependency array. When an array is provided, the callback should only be called when the values change.

In this solution, you'll learn why you need to track and compare in order to implement the dependency array.

Free Epic React Tutorials

A collection of exercise-driven, in-depth React tutorials.

Get Started With React

Build React Hooks