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.

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