cockpit-project/react-lite

Name: react-lite

Owner: cockpit-project

Description: Temporary fork of react-lite with open pull requests

Created: 2016-03-31 18:43:41.0

Updated: 2018-02-12 13:03:23.0

Pushed: 2017-06-02 19:48:19.0

Homepage: null

Size: 5756

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

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:

ebpack.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:

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:

test

License: MIT (See LICENSE file for details)