Repository files navigation

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

中文

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

️⚔ Battle tested, serve inJD.com home page andTOPLIFE.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.

This repository is a monorepo that we manage usingLerna. That means that we actually publishseveral packages to npm from the same codebase, including:

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

Of course we recommend that you use Nerv withWebpack andBabel.First you can install Nerv like this

With npm

$ npm install --save nervjs

With yarn

$ yarn add nervjs

Import what you need. Nerv provides both named and default exports, you can use Nerv as a namespace or simply import what you need as locals.

Default exports:

importNervfrom'nervjs'classHelloMessageextendsNerv.Component{render(){return<div>Hello{this.props.name}</div>}}Nerv.render(<HelloMessagename="Nerv"/>,document.getElementById('app'))

Named:

import{Component,render}from'nervjs'classHelloMessageextendsComponent{render(){return<div>Hello{this.props.name}</div>}}render(<HelloMessagename="Nerv"/>,document.getElementById('app'))

☝️ For more information please move to the officialdevelopment document

• TodoMVC, built with Nerv and Redux
• Nerv's landing page, built with Nerv andreact-intl
• JD.com
• TOPLIFE.com

Switching to Nerv from React is easy as adding aliasnervjs forreact andreact-dom. No changes in code needed.

Add an alias in yourwebpack.config.js:

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

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"}}]]}

Install the aliasify transform:

$ npm i --save-dev aliasify

Then in yourpackage.json:

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

Nerv currently support React API and features:

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

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

First, installes5-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 usingbabel:

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

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

To enable the Nerv development tools you must install thenerv-devtools module and thenrequire('nerv-devtools') before the initialNerv.render().

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

AOTU.IO（JD Multi-terminal Development Department）