react 入门

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。还有一个关注点就是React Native的跨平台的应用。

1.Hello word

2.JSX的使用

React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
注意：JSX 支持所有的 HTML 元素的事件。但要注意的是，事件名称一定要用驼峰命名方式，如果将 onClick 改成 onclick 就不起作用了。

1.我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

2.创建组件

创建组件最常用的两种方式
1.React.createClass
2.React.Component

1.React.createClass形式

var InputControlES5 = React.createClass({
    propTypes: {//定义传入props中的属性各种类型
        initialValue: React.PropTypes.string
    },
    defaultProps: { //组件默认的props对象
        initialValue: ''
    },
    // 设置 initial state
    getInitialState: function() {//组件相关的状态对象
        return {
            text: this.props.initialValue || 'placeholder'
        };
    },
    handleChange: function(event) {
        this.setState({ //this represents react component instance
            text: event.target.value
        });
    },
    render: function() {
        return (
            

                Type something:
                
            
        );
    }
});

2.React.Component

class InputControlES6 extends React.Component {
    constructor(props) {
        super(props);

        // 设置 initial state
        this.state = {
            text: props.initialValue || 'placeholder'
        };

        // ES6 类中函数必须手动绑定
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }

    render() {
        return (
            

                Type something:
                
            
        );
    }
}
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: ''
};

4.jsx中的事件