A blazing fast React alternative, compatible with IE8 and React 16.
Clone or download
Pull request Compare This branch is 147 commits behind NervJS:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
benchmarks
browsers
packages
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.travis.yml
LICENSE
README.md
README_CN.md
afterbuild.js
index.js
jest.config.js
karma.conf.js
lerna.json
package.json
tsconfig.json
tslint.json
typing.js
yarn.lock

README.md

Build Status License Coverage Status Downloads Build Status Sauce Test Status

Nerv is a virtual-dom based JavaScript (TypeScript) library with identical React 16 API, which offers much higher performance, tinyer package size and better browser compatibility.

中文文档

Features

⚛ Identical React API, no 'nerv-compat' is needed

️⚔ Battle tested, serve in JD.com home page and TOPLIFE.com

⚡️ High performance

🤣 IE8 compatibility

🎯 Tiny size, 9Kb gzipped

🌗 Isomorphic rendering on both client and server

💫 Support React 16 features, Error Boundaries, Portals, custom DOM attributes, etc.

Packages

This repository is a monorepo that we manage using Lerna. That means that we actually publish several packages to npm from the same codebase, including:

Package Description
nervjs The core of Nerv
nerv-redux Nerv binding for Redux
nerv-devtools Provides support for React's Dev Tools for Nerv
nerv-server Support for server side rendering
nerv-test-utils Suite of utilities for testing Nerv applications
nerv-utils Internal Helpers functions for Nerv
nerv-shared Internal shared functions for Nerv
nerv-create-class The legacy createClass API for Nerv

Examples

The easiest way to get started with Nerv is using CodeSandbox Playground, If you use React, you already know how to use Nerv.

import Nerv from 'nervjs'
class HelloMessage extends Nerv.Component {
  render() {
    return <div>Hello {this.props.name}</div>
  }
}

Nerv.render(
  <HelloMessage name="Nerv" />,
  document.getElementById('app')
)

More example:

Switching to Nerv from React

Switching to Nerv from React is easy, just aliasing nervjs in for react and react-dom, without any code changes.

Usage with Webpack

Add an alias in your webpack.config.js:

{
  // ...
  resolve: {
    alias: {
      'react': 'nervjs',
      'react-dom': 'nervjs',
      // Not necessary unless you consume a module using `createClass`
      'create-react-class': "nerv-create-class"
    }
  }
  // ...
}

Usage with Babel

Install the babel plugin for aliasing

$ npm install --save-dev babel-plugin-module-resolver

In .babelrc:

{
    "plugins": [
        ["module-resolver", {
            "root": ["."],
            "alias": {
                "react": "nervjs",
                "react-dom": "nervjs",
                // Not necessary unless you consume a module using `createClass`
                "create-react-class": "nerv-create-class"
            }
        }]
    ]
}

Usage with Browserify

Install the aliasify transform:

$ npm i --save-dev aliasify

Then in your package.json:

{
  "aliasify": {
    "aliases": {
      "react": "nervjs",
      "react-dom": "nervjs"
    }
  }
}

Compatible with React

Nerv currently support React API and features:

react

  • React.createClass (legacy)
  • React.createElement
  • React.cloneElement
  • React.Component
  • React.PureComponent
  • React.PropTypes
  • React.Children
  • React.isValidElement
  • Error Boundaries (React 16)

react-dom

  • React.unstable_renderSubtreeIntoContainer (legacy)
  • ReactDOM.render
  • ReactDOM.unmountComponentAtNode
  • ReactDOM.findDOMNode
  • ReactDOM.hydrate (React 16)
  • ReactDOM.createPortal (React 16)

Internet Explorer 8 (or below) compatibility

First, install es5-polyfill:

npm install --save es5-polyfill

Then insert the code into the beginning of your entry file:

require('es5-polyfill');

At last, setting .babelrc if you are using babel:

{
  "presets": [
    ["env", {
      "spec": true,
      "useBuiltIns": false
    }],
    ["es3"]
  ],
  ...
}

Developer Tools

Nerv has a development tools module which allows you to inspect the component hierarchies via the React Chrome Developer Tools plugin.

To enable the Nerv development tool you must install the nerv-devtools module and then require('nerv-devtools') before the initial Nerv.render().

if (process.env.NODE_ENV !== 'production')  {
  require('nerv-devtools')
}
// before Nerv.render()
Nerv.render(<App />, document.getElementById('#root'))

nerv-devtools

License

FOSSA Status