kkdashu / react-lite

an implementation of React that optimizes for small script size

react-lite

Introduction

react-lite is an implementation of React that optimizes for small script size.

Framework Size Comparison

Framework	Version	Minified Size
Ember	2.2.0	446.0kb
Polymer	1.0.6	183.0kb
Angular	1.4.8	148.0kb
React	0.14.3	136.0kb
Web Components Polyfill	0.7.19	118.0kb
Riot	2.3.11	20kb
React-lite	0.15.6	25kb

React-lite supports the core APIs of React, such as Virtual DOM, intended as a drop-in replacement for React, when you don't need server-side rendering in browser(no React.renderToString & React.renderToStaticMarkup).

If you are using webpack, it's so easy to use react-lite, just config alias in webpack.config.js:

// webpack.config.js
{
    resolve: {
        alias: {
            'react': 'react-lite',
            'react-dom': 'react-lite'
        }
    }
}

Note: feel free to try react-lite, if something happen and we can't fix it in time, then use regular react instead.

Installation

You can install react-lite from npm:

npm install react-lite --save

Browser compatibility

supports IE9+ / ES5 enviroment

Documentation

learn react-lite from React official documentation

What can react-lite do?

just the same as what react does, see some demos below(I just add the alias to webpack.config.js, no need to do anything else):

• works with react-bootstrap: doc demo
• works with ant-design: demo
• works with react-router: examples
• works with redux:
  • async
  • counter
  • shopping-cart
  • todomvc
  • todos-with-undo
• works with react-motion: demos
• works with react-d3-components: demos
• works with react-d3: demos
• react-lite vdom-benchmark
• js-repaint-perf:
  • react
  • react-lite

React-lite vs React

via react-lite:

• all of React.PropTypes method is no-op(empty function)
• use React in server side rendering, and use React-lite in browser
  • react-lite will replace the dom tree with new dom tree
  • you had better avoid script|head|link tag in client side
• can not use react-dev-tool inspect react-lite, should switch to regular react for debugging
• react-lite only works with a JSX toolchain(issue)

Test

react-lite reuses react's unitest(170), you can see them in __test__, and run the tests with:

npm test

License: MIT (See LICENSE file for details)