mini-react-tutorial

Introduction

When you find yourself struggling to quickly grasp React development skills through documentation, what better way to deeply understand React's core concepts than by building your own version of React?

In this series, I'll guide you step-by-step on how to build React from scratch. You'll personally implement the core concepts of React from 2013 (React 0.3) to 2019 (React 16.8), gaining a profound understanding of their design principles and the trade-offs made during the evolution of the technology.

Articles

The series is complete — three articles, each with a runnable code snapshot in this repo:

Part	Article	Code
I — render & JSX	Building Mini-React (I)	src/core/
II — Fiber, scheduler, commit phase, events	Building Mini-React (II)	src/part-2-fiber/
III — diff, function components, useState, useEffect	Building Mini-React (III)	src/part-3-hooks/

The demo app (pnpm run dev) runs on the finished Part III implementation: a useState counter with a useEffect, and a todo list that exercises the diff's PLACEMENT / UPDATE / DELETION paths.

How to Set Up

pnpm i
pnpm run dev

Overview

This series will be divided into three parts. The features we'll implement include:

I: Basic Feature Implementation

• Render: Introduced in React 0.13 (2015), the render function is used to render the virtual DOM to the real DOM.
• JSX: Also introduced in React 0.13 (2015), JSX syntax provides a convenient way to write component structures and converts it into calls to the createElement function.

II: Enhanced Core Features

• Task Scheduler & Fiber: Introduced in React 16 (2017), the Fiber architecture is a redesigned scheduler used to implement priority scheduling of component updates, preventing render blocking.
• VDOM: In React 0.3 (2013), the concept of virtual DOM was introduced to compare and update the real DOM, improving performance.
• Event Binding: Also introduced in React 0.3 (2013), event binding functionality allows components to respond to user interactions.

III: Advanced Features and State Management

• Diff Algorithm: In React 0.3 (2013), the diff algorithm based on virtual DOM was introduced to compare differences in the virtual DOM, minimizing DOM operations and improving performance.
• Function Component: In React 16.8 (2019), Hooks were introduced, including useState and useEffect, as well as the implementation of function components.
• useState: Also introduced in React 16.8 (2019), the useState hook allows function components to have their own state.
• useEffect: Also introduced in React 16.8 (2019), the useEffect hook is used to handle component side effects such as data fetching and subscriptions.