初始化

引入三个script:

<script src="build/react.js"></script>
  <script src="build/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  

第一个是React的中心代码，第二react-dom.js是React内里操纵DOM的部份，第三个browser.js将JSX转为Javascript语法。

ReactDOM.render

将模板言语转为HTML言语，并插进去DOM

ReactDOM.render(
    <div>Test</div>,
    document.body
);

组件

组件类第一个字母必需大写

var Hello = React.createClass({
    render: function(){
        return <h1>Hello ,{this.props.name}</h1>
    }
})

ReactDOM.render(
    <Hello name="cxs" />,
    document.body
)

this.props.children

this.props对象属性与组件属性一一对应。this.props.children是破例，它示意组件的一切节点

var NotesList = React.createClass({
    render: function(){
        return (
            <ol>
            {
                React.children.map(this.props.children, function(child){
                    return <li>{child}</li>
                })
            }
            </ol>
        );
    }
});

ReactDOM.render(
    <NotesList>
        <span>Hello</span>
        <span>world</span>
    </NotesList>,
    document.body
);

PropTypes

组件的属性能够接收恣意值。须要一种考证机制，考证他人运用组件时供应的参数是不是正当

var Title = React.createClass({
    propTypes: {
        title: React.propTypes.string.isRequired,
    },
    render: function(){
        return <h1>{this.props.title}</h1>
    }
});

猎取实在DOM节点

组件的是virtual DOM。须要猎取实在DOM节点时，要用到ref属性

var Component = React.createClass({
    handleClick: function(){
        this.refs.myTextInput.focus();
    },
    render: function(){
        return (
            <div>
                <input type="text" ref="myTextInput" />
                <input type="button" value="Focus the text input" onClick={this.handleClick}>
            </div>
        )
    }
})

ReactDOM.render(
    <Component />,
    document.body
)

this.state

React的状况机，状况的变化能够动身从新衬着UI

var LikeButton = React.createClass({
    getInitialState: function(){
        return {liked: false};
    },
    handleClick: funtion(event){
        this.setState({liked: !this.state.liked});
    },
    render: function(){
        var text = this.state.liked ? 'like' : 'dont like';
        return(
            <p onclick={this.handleClick}>
            
            </p>
        )
    }
})

ReactDOM.render(
    <LikeButton />,
    document.body        
)

组件的生命周期

组件的生命周期有三个状况:

Mounting: 已插进去实在DOM
Updating: 正在被从新衬着
Unmounting: 已移出实在DOM

React为每一个状况供应两种处置惩罚函数，will在进入状况前挪用，did函数在进入状况后挪用，共五中处置惩罚函数:

componentWillMount()
componentDidMount()

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object preState)

componentWillUnount()

另有两种特别状况的处置惩罚函数：

componentWillReceiveProps(object nextProps): 已加载组件收到新的参数时挪用
shouldComponentUpdate(object nextProps, object nextState): 组件推断是不是从新衬着时挪用

Demo:

var Hello = React.createClass({
    getInitialState: function(){
        return {
            opacity: 1.0
        }
    },
    
    componentDidMount: function(){
        this.timer = setInterval(function(){
            var opacity = this.state.opacity;
            opacity += 0.05;
            if(opacity < 0.1){
                opacity = 1.0;
            }
            this.setState({
                opacity: opacity
            })
        }.bind(this), 100)
    },
    
    render: function(){
        return (
            <div style={{opacity: this.state.opacity}}>
                Hello {this.props.name}
            </div>
        )
    }
});

ReactDOM.render(
    <Hello name="world" />,
    document.body
)