didact

2.0.1 • Public • Published

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.

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

Readme

Keywords

Package Sidebar

Install

npm i didact

Weekly Downloads

20

Version

2.0.1

License

MIT

Last publish

Collaborators

  • pomber