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準拠の書き方になりました!もうちょっと早くやって欲しかった…

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

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →