whatisgithub

What is didact?

pomber/didact — explained in plain English

Analysis updated 2026-06-24

6,748JavaScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

A step-by-step tutorial that teaches you how React works internally by rebuilding a simplified version of it from scratch in plain JavaScript, one concept at a time.

Mindmap

mindmap
  root((Didact))
    What it does
      Teaches React internals
      Step-by-step rebuild
    Concepts covered
      JSX compilation
      Virtual DOM
      Fiber architecture
      Hooks like useState
    Format
      Blog post series
      Code diffs per step
      Standalone final post
    Audience
      React users learning
      JS developers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Follow the blog post series to understand how React's virtual DOM diffing algorithm works by tracing through a minimal re-implementation.

USE CASE 2

Learn how JSX gets compiled into plain JavaScript function calls by following the Didact build process step by step.

USE CASE 3

Study how React hooks like useState work internally by reading the simplified Didact implementation in the final standalone post.

What is it built with?

JavaScriptJSX

How does it compare?

pomber/didactgrab/cursor-talk-to-figma-mcpbeakerbrowser/beaker
Stars6,7486,7526,753
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasymoderatehard
Complexity2/53/54/5
Audiencedeveloperdesignerdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

So what is it?

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.

Copy-paste prompts

Prompt 1
I'm reading the Didact tutorial. Explain how the reconciliation step works in Didact's fiber architecture and how it maps to what React does internally.
Prompt 2
Based on Didact's implementation, walk me through what happens step by step when I call setState inside a Didact component, from the hook call to the screen update.
Prompt 3
I want to add a useEffect hook to Didact following the same pattern as its useState implementation. Show me where in the code to add it and what it should do.
Prompt 4
Using Didact's createElement function as a reference, explain the difference between how Didact handles function components versus host elements like div.

Frequently asked questions

What is didact?

A step-by-step tutorial that teaches you how React works internally by rebuilding a simplified version of it from scratch in plain JavaScript, one concept at a time.

What language is didact written in?

Mainly JavaScript. The stack also includes JavaScript, JSX.

How hard is didact to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is didact for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.