Tinyreact Save

a tiny react help you understand react better

Project README

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!
    }]
  ]
}
  1. npm install tinyreact --save

  2. 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(三) 生命周期
Open Source Agenda is not affiliated with "Tinyreact" Project. README Source: ykforerlang/tinyreact
Stars
39
Open Issues
0
Last Commit
6 years ago

Open Source Agenda Badge

Open Source Agenda Rating