初始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')      );