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.


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.


Create an element with children

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


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.


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.


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.


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.


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!