Build your own React

Early Access

In this challenge, you’ll build a barebones React implementation that supports function components and hooks. Along the way, you’ll learn about React’s API, DOM-diffing algorithm, hooks and more!

This challenge has 7 stages.

#1

Create an element

In this stage, you’ll implement React.createElement, the function that JSX translates to internally.

To start out simple, we’ll only support creating a simple HTML element with no children.

#2

Create an element with children

In this stage, you’ll amend the function from the previous stage to add support for child elements.

#3

Render an element

Let’s start interacting with the DOM! In this stage, you’ll implement ReactDOM.render, which’ll take an element created using React.createElement and render it into a given HTML container.

We won’t worry about updating/deleting elements at this point - just the first-time render.

#4

Render a component

In this stage, you’ll add support for function components. We’ll amend the React.createElement & ReactDOM.render implementations to work with function components.

#5

Re-render an element

When ReactDOM.render is called again after a component changes, not all DOM nodes are created from scratch. React runs a heuristic diffing algorithm to figure out the minimum transformations required to transform the DOM tree to the expected state. In this stage, you’ll implement this DOM-diffing algorithm.

#6

The useState hook

Now that we can render function components just fine, let’s add state. In React, this is done using hooks. In this stage, you’ll implement the useState hook.

#7

The useEffect hook

This is the last stage of the challenge. We’ll add support for one more hook: useEffect.

Interested in trying out the Build your own React Challenge? Checkout our early access program!