RN-ES 5 ES 6書き方の対比

モジュール参照
ES 5はCommon JS規格を使用し、requireを使用します.

var React = require('react');
var { Component, PropTypes) = React;
var ReactNative = require('react-native');
var {Image, View } = ReactNative

ES 6 import書き方

import React, { Component, PropTypes } from 'react';
import {Image, Text} from 'react-native'

クラスをエクスポート
ES 5 module.exportsを使用する

var MyComponent = React.createClass({});
module.exxports = MyComponent;

  =》
var MyComponent = require(./MyComponent)

ES 6 export defaultを使用する

export default class MyComponent extends Component {
}

  =》
import MyComponent from './MyComponent'

コンポーネント、方法、属性タイプのデフォルト属性、初期化state、方法のコールバックを定義します.
ES 5
属性タイプとデフォルト属性は、それぞれプロpTypesメンバーとget Default Props法により初期化state get Initial Stateを実現します.

var MyComponent = React.createClass({
    getInitialState：function(){
        return {
            name:"xxx",
        };
    }
    
    
    getDefaultProps:function(){
        return {
            name:'xxx',
            number:10,
            show:true,
        }
    }，
    
    propTypes:{
        name:React.PropTypes.string.isRequired,
        number:React.PropTypes.number.isRequired,
        show:React.PropTypes.bool.isRequired,
    }，
    
    componentWillMount:function(){
    
    }，
    
    render:function(){
        return (
            
            
            
        );
    }，
    
    //       
    handleClick:function(e){
        
    },
});

ES 6
属性タイプとデフォルト属性は、スタティックメンバーを使用してstateを構築関数で初期化する.

calss MyComponent extends Component {

static propTypes = {
        name:'xxx',
        number:10,
        show:true,

}; //   

static propType = {
        name:React.PropTypes.string.isRequired,
        number:React.PropTypes.number.isRequired,
        show:React.PropTypes.bool.isRequired,
};


constructor(props){
    super(props);
    
    this.state = {
        name:"xxx",
    };
}

componentWillMount (){
    
    }

    render(){
        return (
            
            this.handleClick(e)}
            >
            
        );
    }
    
    handleClick(e){
    }
}