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.
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.
๐ง 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')
);
hello-world
hello-world-jsx
todomvc
incremental-rendering-demo
MIT ยฉ Hexacta