react-lite v0.15.40
react-lite
Introduction
react-lite is an implementation of React that optimizes for small script size.
Note: react-lite dose not support React v16.x now.
Size Comparison
Framework | Version | Minified Size |
---|---|---|
Ember | 2.2.0 | 446kb |
Polymer | 1.0.6 | 183kb |
Angular | 1.4.8 | 148kb |
React | 0.14.3 | 136kb |
Web Components Polyfill | 0.7.19 | 118kb |
Riot | 2.3.11 | 20kb |
React-lite | 0.15.6 | 25kb |
preact + preact-compat | 8.2.1 | 5kb |
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 ReactDOM.renderToString
& ReactDOM.renderToStaticMarkup
).
Usage
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 material-ui: docs demo
- works with react-bootstrap: docs 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)
- unlike react,
event
object in react-lite is always persistent, andevent.persist
is set as no-op to avoid throwing error. - react-lite can't work with
react-tap-event-plugin
, please usefastclick
instead. or add alias'react-tap-event-plugin': 'react-lite/lib/react-tap-event-plugin'
, just like here - can't work with
transform-react-inline-elements
, you will get a bundle include bothreact
andreact-lite
. react-lite
just follow the best practice ofReact
.
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)
6 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago