didact

Didact is a learning project that walks you through building a simplified version of React from scratch. React is the popular JavaScript library that most modern web apps use to build their user interfaces, and Didact exists to show how the core ideas inside React actually work, by rebuilding them step by step in plain JavaScript.

The repository accompanies a series of blog posts, each covering one piece of the puzzle. The series starts with the basics of rendering elements onto a web page, then covers how JSX (the HTML-like syntax you write in React components) gets converted into JavaScript, then moves on to the virtual DOM (an internal copy of the page structure React uses to figure out what changed), and then to components and state management. The final post, which is self-contained and covers everything including hooks, is available as a standalone article.

Each post in the series links to a working code sample and a diff showing exactly what changed between steps, so you can follow the progression without reading everything at once.

This is not a production-ready library and is not meant to be used in real applications. It is purely educational: a way for developers who use React to understand what is happening under the hood when their components render and update. Chinese translations of most posts are also linked from the repository.