こんにちは、個別指導塾コミット塾長、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を使って簡単にモバイルアプリを作成しましょう!