Build your own React

Build your own React

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

Introduction

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!

Stages

Create an element
#1

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
#2

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

0 completions
Render an element
#3

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
#4

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
#5

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
#6

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
#7

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

0 completions