ykforerlang / tinyreact

a tiny react help you understand react better

tinyreact

tinyreact is tiny, simple and clear react-like lib. It will help you understand react better.

so first, let's play todoList written by tinyreact

Install

npm install tinyreact --save

Getting Started

let's write 'Hello World':

1. .babelrc

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    ["transform-react-jsx", {
      "pragma":  "createElement"// default pragma is React.createElement, we should change!
    }]
  ]
}

2. npm install tinyreact --save

3. write your code like React

import Tinyreact, { createElement, Component } from 'tinyreact'

class HelloWorld extends Component {
    render() {
        return <div style={{ color: 'red' }}>Hello World</div>
    }
}

Tinyreact.render(<HelloWorld/>, document.getElementById("root"))

Feature

• virtual-dom
• life-cycle
• SyntheticEvent

TODO

• batchUpdate
• high-performance virtual-dom
• fiber

Example

1. helloword
2. lifecycle
3. yiwandiv
4. TodoList

Blog

1. 从0实现一个tiny react(一)
2. 从0实现一个tiny react(二) virtual-dom
3. 从0实现一个tiny react(三) 生命周期