A DIY guide to build your own React
Clone or download
Latest commit 1393791 Nov 19, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Upgrade yarn.lock May 2, 2017
src Fix deadline Oct 18, 2017
test Add incremental reconciliation (Didact Fiber) Oct 18, 2017
.gitignore Update links May 23, 2017
.travis.yml Add readme and travis config Apr 11, 2017
license.txt Create package.json Apr 11, 2017
package.json 2.0.1 Oct 18, 2017
readme.md Update readme.md Nov 19, 2018
yarn.lock Add src and test folders Apr 11, 2017

readme.md

Didact Build Status npm version

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.

Follow @pomber 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