yesmeck/react-lite

an implementation of React that optimizes for small script size

react-lite

Introduction

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

It 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
{
	alias: {
		'react': 'react-lite',
		'react-dom': 'react-lite'
	}
}

install

you can install react-lite from npm

npm install --save react-lite

documentation

you can 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):

• react-lite works with react-router: examples
• react-lite works with redux:
  • async
  • counter
  • shopping-cart
  • todomvc
  • todos-with-undo
• react-lite works with react-motion: demos
• js-repaint-perf(which is faster?):
  • react
  • react-lite

react-lite vs react

via react-lite:

• virtual-dom can not render to string(no React.renderToString and React.renderToStaticMarkup)
• event system is base on DOM level1(dom.onclick = handleClick)
• all of React.PropTypes method is noop(empty function)
• Do not support React-addons(for example ReactCSSTransitionGroup)
• 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 aviod script|head|link tag in client side
• the rule about setting props
  • if propName in dom is true then dom[propName]=propValue
  • else: dom.setAttribute(propName, propValue)

test

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

npm test

License: MIT (See LICENSE file for details)