ローディング中

2016.07.11

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

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

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

1

2

3

4

5

6

7

8

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

目次 [hide]

クラス作成時

1

2

3

4

5

//いままで
var BookList = React.createClass({})
 
//ES6
class BookList extends Component {}

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

1

2

3

4

5

6

//今まで
var BookList = React.createClass({})
module.exports = BookList;
 
//ES6
export default class BookList extends Component {}

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

1

2

3

4

5

//いままで
var Button = require('./Button')
 
//ES6
import Button from './Button';

初期値を入力

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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

More from my site

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

営業時間：13:00〜21:00（平日）