react-lite-cockpit
v0.15.6
Published
an implementation of React that optimizes for small script size
Downloads
6
Maintainers
Readme
react-lite
Temporary fork of react-lite
This fork of term.js has the following open pull requests included:
- bower.json: https://github.com/Lucifier129/react-lite/pull/53
- React.__spread(): https://github.com/Lucifier129/react-lite/pull/52
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:
- works with react-motion: demos
- works with react-d3-components: demos
- works with react-d3: demos
- react-lite vdom-benchmark
- js-repaint-perf:
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)