Neact NPM | npm.io

Neact

Neact is a fast alternative to React, support ie8

Usage

Neact.render(Neact.createElement('div', null, 'Hello Neact!'), document.body);

Install

npm install neact

bower install neact

Getting Started

How to use JSX

// 1.best to configure it globally in a .babelrc
// 2.Tell Babel to transform JSX into Neact.createElement() calls:
/** @jsx Neact.createElement */

function App(){
	return (
        <div id="foo">
            <span>Hello, world!</span>
            <button onClick={ e => alert("hi!") }>Click Me</button>
        </div>
    );
};

Neact.render(<App />, document.body);

hooks Lifecycle

Lifecycle method	When it gets called
`create`	see `componentDidMount`
`beforeUpdate`	see `componentWillUpdate`
`update`	see `componentDidUpdate`
`destroy`	see `componentDidUnmount`

let hooks = {
    create(vNode) {
        //TODO:
        //vNode.dom
    },
    beforeUpdate(lastVNode, nextVNode){
        //TODO:
    },
    update(nextVNode){
        //TODO:
    },
    destroy(vNode){
        //TODO:
    }
}

Neact.render(<div hooks={hooks}>Test</div>,document.body)

Class Components Lifecycle

Lifecycle method	When it gets called
`componentWillMount`	before the component gets mounted to the DOM
`componentDidMount`	after the component gets mounted to the DOM
`componentWillUnmount`	prior to removal from the DOM
`componentWillReceiveProps`	before new props get accepted
`shouldComponentUpdate`	before `render()`. Return `false` to skip render
`componentWillUpdate`	before `render()`
`componentDidUpdate`	after `render()`

var App = Neact.createClass({
    render(){
        return 'Test'
    },
    componentWillMount(){},
    componentDidMount(){},
    componentWillUnmount(){},
    componentWillReceiveProps(){},
    shouldComponentUpdate(){},
    componentWillUpdate(){},
    componentDidUpdate(){}
});

Neact.render(<App />,document.body)

Functional Components Lifecycle

Lifecycle method	When it gets called
`onComponentWillMount`	before the component gets mounted to the DOM
`onComponentDidMount`	after the component gets mounted to the DOM
`onComponentWillUnmount`	prior to removal from the DOM
`onComponentShouldUpdate`	before `render()`. Return `false` to skip render
`onComponentWillUpdate`	before `render()`
`onComponentDidUpdate`	after `render()`

let Lifecycle = {
    onComponentWillMount(vNode){},
    onComponentDidMount(vNode){},
    onComponentWillUnmount(vNode){},
    onComponentShouldUpdate(lastProps, nextProps, context){},
    onComponentWillUpdate(lastProps, nextProps, vNode){},
    onComponentDidUpdate(nextVNode){}
}

var App = function(){
    return 'Test'
};

Neact.render(<App {...Lifecycle} />,document.body)