初始React

React简介

React 是一个 JAVASCRIPT 库，主要用于UI，有较高的性能

JSX

React用JSX来代替常规JS。优点是：执行更快，类型安全，更加简单。
可以把需要复用的部分单独写成一个js，在各个html页面中引用

基本使用方法：

简单来说JSX的基本语法规则就是遇到<开头的就以html解析，遇到{开头的就以js解析

ReactDOM.render(
    <!-- html代码，结尾为逗号 -->,
    document.getElementById('example')
    <!-- 需要加入以上html代码的DOM节点 -->
);

以上代码可以放在一个单独的js文件中，在需要使用的html页面中引入
<script type="text/babel" src="reactExample.js"></script>
JavaScript 表达式可写在花括号{}中，不能使用if-else结构，可使用三元运算代替

内联样式&注释

<!--写法与css相似,数字后会自动加px-->
var style1={……};
ReactDOM.render(
    <h1 style={style1}>内容</h1>,
    {/*此处为注释*/}
    document.getElementById('example')
);

组件

将代码封装为组件，可像插入标签一样，在网页中插入该组件

一、生成组件类createClass

var ComponentName = React.createClass({
  render: function() {
    return <h1>Hello</h1>;
  }
});

ReactDOM.render(
  <ComponentName />,
  document.getElementById('example')
);

自定义组件名必须以大写字母开头
render方法用于输出组件，每个组件都必须有render方法

二、Props

1.this.props对象

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

ReactDOM.render(
  <ComponentName name="TTT"/>,
  document.getElementById('example')
);

向组件传递参数可使用this.props对象
可把单个组件组合成复合组件
注意：class属性要写成className，for属性要写成htmlFor

2.特殊属性children

表示组件的每个子节点（子节点数必须大于1，否则会报错）

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

React.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

3.设置组件属性的默认值getDefaultProps

将组件的属性在同一块地方统一设置

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

ReactDOM.render(
  <ComponentName/>,
  document.getElementById('example')
);

4.属性验证PropTypes

将组件的属性验证放在同一地方，具体内容参考官方文档

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

三、State

与用户交互
getInitialState用于设置初始状态，handleClick用于在用户单击操作时重新设置状态，render用于输出内容

 var StateChange = React.createClass({
        getInitialState: function() {
          return {state1: false};
        },
        handleClick: function(event) {
          this.setState({state1: !this.state.state1});
        },
        render: function() {
          var text = this.state.state1 ? '状态1' : '状态2';
          return (
            <p onClick={this.handleClick}>
              现在状态是：<b>{text}</b>，点我切换状态。
            </p>
          );
        }
      });

      ReactDOM.render(
        <StateChange />,
        document.getElementById('example')
      );