react-lite

an implementation of React that optimizes for small script size

Subscribe to updates I use react-lite


Statistics on react-lite

Number of watchers on Github 1631
Number of open issues 23
Average time to close an issue 3 days
Main language JavaScript
Average time to merge a PR 4 days
Open pull requests 4+
Closed pull requests 7+
Last commit about 1 year ago
Repo Created about 3 years ago
Repo Last Updated 10 months ago
Size 6.93 MB
Organization / Authorlucifier129
Latest Releasev0.15.30
Contributors7
Page Updated
Do you use react-lite? Leave a review!
View open issues (23)
View react-lite activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating react-lite for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

react-lite

Travis npm Join the chat at https://gitter.im/Lucifier129/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):

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, and event.persist is set as no-op to avoid throwing error.
  • react-lite can't work with react-tap-event-plugin, please use fastclick 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 both react and react-lite.
  • react-lite just follow the best practice of React.

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)

react-lite open issues Ask a question     (View All Issues)
  • about 2 years Cannot read property '$updater' of undefined
  • about 2 years work strange in IE9
  • over 2 years Updater seems to loose context when run through requestAnimationFrame
  • over 2 years Use with react-worker-dom ?
  • over 2 years findDOMNode issue with various animation libraries
react-lite open pull requests (View All Pulls)
  • bower.json: Add a bower package for react-lite
  • Upgrading to babel6
  • export all babel-compiled src/modules to fix #110
  • Hotfix/touchmove
react-lite list of languages used
Other projects in JavaScript