Build your own React

Build your own React

Learn about React's createElement API, function components, DOM-diffing algorithm, hooks and more
Supported Languages


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!


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.

0 completions
Create an element with children

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

0 completions
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.

0 completions
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.

0 completions
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.

0 completions
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.

0 completions
The useEffect hook

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

0 completions