Didact

A DIY guide to build your own React

This repository goes together with a series of posts that explains how to build React from scratch step by step.

If you like this project consider backing my open source work on Patreon!
And follow @pomber on twitter for updates.

Motivation

Didact's goal is to make React internals easier to understand by providing a simpler implementation of the same API and step-by-step instructions on how to build it. Once you understand how React works on the inside, using it will be easier.

Step-by-step guide

Medium Post	Code sample	Commits	Other languages
Introduction
Rendering DOM elements	codepen	diff	中文
Element creation and JSX	codepen	diff	中文
Virtual DOM and reconciliation	codepen	diff diff diff	中文
Components and State	codepen	diff	中文
Fiber: Incremental reconciliation	codepen	diff diff	中文

Usage

🚧 Don't use this for production code!

Install it with npm or yarn:

$ yarn add didact

And then use it like you use React:

/** @jsx Didact.createElement */
import Didact from 'didact';

class HelloMessage extends Didact.Component {

  constructor(props) {
    super(props);
    this.state = {
      count: 1
    };
  }

  handleClick() {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    const name = this.props.name;
    const times = this.state.count;
    return (
      <div onClick={e => this.handleClick()}>
        Hello {name + "!".repeat(times)}
      </div>
    );
  }
}

Didact.render(
  <HelloMessage name="John" />,
  document.getElementById('container')
);

Demos

hello-world
hello-world-jsx
todomvc
incremental-rendering-demo

License

MIT © Hexacta