react个人入门

1. JSX 语法
   JSX就是Javascript和XML结合的一种格式。允许 HTML 与 JavaScript 的混写

2.ReactDOM.render()
将模板转为 HTML 语言，并插入指定的DOM 节点

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

3.组件
创建一个组件就是创建一个class

var HelloMessage = React.createClass({ //创建一个组件
  render: function() {
    return <h1>Hello {this.props.name}</h1>; //this.props获取组件上的属性（注意：class写成className,for写成htmlFor。特例：this.props.children为组件的所有子节点）
  }
});
ReactDOM.render(
  <HelloMessage name="John" />, //渲染组件
  document.getElementById('example')
);

4.PropTypes属性：指定属性类型；ref属性：获取真实DOM；

5.状态机获取值

var LikeButton = React.createClass({
  getInitialState: function() { //设置初始状态
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});  //设置改变状态
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked'; //获取状态
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

6.生命周期

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

will 函数：进入状态之前；did 函数：进入状态之后；

7.react-router路由

npm install -S react-router  //安装路由
import { Router } from 'react-router';
render(<Router history={hashHistory}>  //该属性监听浏览器地址变化
  <Route path="/xx" component={App}> //路由嵌套
  <IndexRoute component={Home}/> //默认子路由
    <Route path="/repos" component={Repos}/> //子路由
    <Route path="/about" component={About}/>
    {/* 从 /xx/messages/:id 跳转到 /messages/:id */}
    <Redirect from="messages/:id" to="/messages/:id" /> //重定向
  </Route>
</Router>, document.getElementById('app'));

类似的Link、IndexLink组件，类似a标签。
钩子事件有onEnter和onLeave

8.Flux架构，Redux架构（不太懂，脚手架？通信工具？）