react nativeを使ったアプリ開発第6回 ES6記法について

こんにちは、個別指導塾コミット塾長、AWESOME開発担当の船津です。
今回は参考書や、WEB上のドキュメント間でクラス作成時やコンポーネント作成時のインポート方法が異なっていたのでまとめようと思います。当然ですが、全体的にES6の記法のほうが簡単に書くことが出来ます。

関数の書き方が変わりました。

//いままで
render: function() {
},

//ES6
render(){

}

クラス作成時

//いままで
var BookList = React.createClass({})

//ES6
class BookList extends Component {}

モジュールをエクスポートする場合

//今まで
var BookList = React.createClass({})
module.exports = BookList;

//ES6
export default class BookList extends Component {}

モジュールをインポートする場合

//いままで
var Button = require('./Button')

//ES6
import Button from './Button';

初期値を入力

//いままで
var BookList = React.createClass({
	getInitialState: function() {
		return {
		  something: true,
		}
	}
});

//ES6

class BookList extends Component {
	constructor(prop) {
    super(prop);
    this.state = {
      something: true,
    };
}

まだまだ勉強中ですが、参考書によっても全然違うかったりするので、この辺りの違いは押さえておきましょう。
ちなみに公式ドキュメントはほぼES6準拠になっているので、そちらで覚えてしまいましょう。
最近learning react nativeのgithubもES6準拠の書き方になりました！もうちょっと早くやって欲しかった…
https://github.com/bonniee/learning-react-native

reactnativeを使って簡単にモバイルアプリを作成しましょう！