Hello,React

1. Primary Imprision

Made In Fb

One Of The World's Most Popular Js Library

Component

VirtualDom，JSX

26,384

2. How To Use React

In Browser:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script type="text/javascript" src="react.js"></script>
        <script type="text/javascript" src="JSXTransformer.js">
        <script type="text/jsx">
            //Your Code Here
            //...
        </script>
    </body>
</html>

But，We Have a Better Choice...

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script type="text/javascript" src="react.js"></script>
        <script type="text/javascript" src="build/example.js">
    </body>
</html>

In NodeJs:

var React = require('react');

//服务器
var html = React.renderComponentToString(...);
res.render(html);

//CommonJs(with browserify,webpack)
React.render(
    <Components />,
    domNode
);

In SeaJs/Spm:

//install with spm
spm install react --save

//example.js
var React = require('react');

var ComponentOne = React.createClass({
    ...
});


React.render(
    <ComponentOne />
    document.getElementById('content')
);

3. Simple Example

React.render(ReactElement, DOMContainer, [cbFn])
React.createClass

state
props
getInitialState
getDefaultProps

this
getDomNode
this.refs.nodeName
Spread Attr {...attr}

4. Component LifeCycle

Mount

Update

UnMount

componentWillMount
componentDidMount

componentWillReceiveProps
shouldComponentUpdate

componentWillUnmount

componentWillUpdate
ComponentDidUpdate

Waiting For Your Exploration...

Form Component

Event System

Validation

Plugins

...