ローディング中

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を使って簡単にモバイルアプリを作成しましょう!

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.