nervjs

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

中文

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 |

Getting Started

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

$3

Of course we recommend that you use Nerv with Webpack and Babel.First you can install Nerv like this

With npm

``bash
$ npm install --save nervjs
`

With yarn

`bash
$ yarn add nervjs
`

$3

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:

`javascript
import Nerv from 'nervjs'
class HelloMessage extends Nerv.Component {
render() {
return

Nerv.render(
,
document.getElementById('app')
)
`

Named:

`javascript
import { Component, render } from 'nervjs'
class HelloMessage extends Component {
render() {
return

render(
,
document.getElementById('app')
)
`

☝️ For more information please move to the official development document

Examples

Switching to Nerv from React is easy as adding alias nervjs for react and react-dom. No changes in code needed.

$3

Add an alias in your webpack.config.js:

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

$3

Install the babel plugin for aliasing

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

In .babelrc:

`js
{
"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"
}
}]
]
}
`

$3

Install the aliasify transform:

`bash
$ npm i --save-dev aliasify
`

Then in your package.json:

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

Compatible with React

Nerv currently support React API and features:

$3

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



$3

* 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:

`bash
npm install --save es5-polyfill
`

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

`js
require('es5-polyfill');
`

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

`js
{
"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 tools you must install the nerv-devtools module and then require('nerv-devtools') before the initial Nerv.render().


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

!nerv-devtools

Change Log

Acknowledgement

AOTU.IO（JD Multi-terminal Development Department）

License