rect ,ES5/6 入门

如果看待React的生态？
每个软件都是基于一个技术栈来实现的，因此如果想要创建你自己的应用，你就必须充分理解自己的技术栈。React的生态看上去很复杂的原因便是人们通常没有按照正确的顺序来去学习。

你需要按照下面的顺序一步一步地学习，不要跳着学或者同时学习多个内容，否则你会感到非常混乱。

基本内容：
1、React
2、npm
3、JavaScript 打包工具
4、ES6
5、路由
6、Flux

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015

也就是说，ES6就是ES2015。

虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人的你也该懂点ES6的语法了...

很多React/React Native的初学者都被ES6的问题迷惑：各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component)，然而网上搜到的很多教程和例子都是ES5版本的，所以很多人在学习的时候连照猫画虎都不知道怎么做。今天在此整理了一些ES5和ES6的写法对照表，希望大家以后读到ES5的代码，也能通过对照，在ES6下实现相同的功能。http://www.tuicool.com/articles/VZR7Rvj

<暂时，我们想赶快上手项目，则只需要了解最常用的ES6特性

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments

请看此处 kylelou 入门教程

模块

引用

在ES5里，如果使用CommonJS标准，引入React包基本通过require进行，代码类似这样：

//ES5
var React = require("react");
  var {
     Component,
     PropTypes
   } = React;  //引用React抽象组件

var ReactNative = require("react-native");
   var {
       Image,
      Text,
   } = ReactNative;  //引用具体的React Native组件

在ES6里，import写法更为标准

//ES6
 import React, {
       Component,
      PropTypes,
  } from 'react';

import {
Image,
Text
} from 'react-native'

导出单个类
在ES5里，要导出一个类给别的模块用，一般通过module.exports来导出

//ES5
var MyComponent = React.createClass({
    ...
});
module.exports = MyComponent;

在ES6里，通常用export default来实现相同的功能：

//ES6
export default class MyComponent extends Component{
    ...
}

引用的时候也类似：

//ES5

var MyComponent = require('./MyComponent');

//ES6

import MyComponent from './MyComponent';

注意导入和导出的写法必须配套，不能混用！

定义组件

在ES5里，通常通过React.createClass来定义一个组件类，像这样：

//ES5
var Photo = React.createClass({
      render: function() {
           return (
                   <image source={this.props.source} />
          );
    },
});

在ES6里，我们通过定义一个继承自React.Component的class来定义一个组件类，像这样：

//ES6
class Photo extends React.Component {
     render() {
           return (
                 <image source={this.props.source} />
          );
   },
});

给组件定义方法从上面的例子里可以看到，给组件定义方法不再用 名字: function()的写法，而是直接用名字()，在方法的最后也不能有逗号了。

//ES5
var Photo = React.createClass({
           componentWillMount: function(){
            },
render: function() {
         return (
         );
 },
});

定义组件的属性类型和默认属性
在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现

//ES5 
var Video = React.createClass({
    getDefaultProps: function() {
        return {
            autoPlay: false,
            maxLoops: 10,
        };
    },
    propTypes: {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    },
    render: function() {
        return (
            <View />
        );
    },
});

在ES6里，可以统一使用static成员来实现

//ES6
class Video extends React.Component {
    static defaultProps = {
        autoPlay: false,
        maxLoops: 10,
    };  // 注意这里有分号
    static propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    };  // 注意这里有分号
    render() {
        return (
            <View />
        );
    } // 注意这里既没有分号也没有逗号
}

注意: 对React开发者而言，static成员在IE10及之前版本不能被继承，而在IE11和其它浏览器上可以，这有时候会带来一些问题。React Native开发者可以不用担心这个问题。

初始化STATE
ES5下情况类似，

//ES5 
var Video = React.createClass({
    getInitialState: function() {
        return {
            loopsRemaining: this.props.maxLoops,
        };
    },
})

ES6下，有两种写法：

//ES6
class Video extends React.Component {
    state = {
        loopsRemaining: this.props.maxLoops,
    }
}

不过我们推荐更易理解的在构造函数中初始化（这样你还可以根据需要做一些计算）：

//ES6
class Video extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            loopsRemaining: this.props.maxLoops,
        };
    }
}