netspencer/didact

A DIY guide to build your own React

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