React.jsをES6で書き直した
React.jsのコード例を自分用にまとめてみる(JSX)のまとめのコードをES6に書き換えてみた。
いくつか注意しないといけない点があった。
classの作成方法
React.jsのクラスの作り方は、React.createClass関数を使っていた。
|
1 2 3 |
var Component = React.createClass({ /// ・・・・ }); |
これを React.Componentクラスをextendsすることでクラスを作成する。
|
1 2 3 |
class Component extends React.Component { // ・・・ } |
propsの使い方
React.jsの場合、propsはthis.props.hogeで呼び出せたが、ES6で書く場合はconstructorで呼び出す必要がある。
|
1 2 3 |
constructor(props){ super(props); } |
stateの使い方
React.jsの場合、stateはgetInitialState関数で作成した。
|
1 2 3 |
getInitialState: function(){ return {count: 0}; } |
ES6の場合は、constructorでstateを定義する。
|
1 2 3 4 5 |
constructor(props){ this.state = {count: 0}; } |
一方、stateの変更はReact.jsと同じく、setState関数を使う。
まとめを書き直してみる。
React.jsのコード例を自分用にまとめてみる(JSX)のまとめのコードをES6に書き換えてみた。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>まとめ</title> </head> <body> <div id="main"></div> <!-- React.jsの読み込み --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script> <!-- ReactDOM.jsの読み込み --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script> <div id="main"></div> <!-- JSXを使うためのBabelの読み込み --> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script> <script type="text/babel"> /* div#main にh1タグを追加してタイトルを挿入する */ // コンポーネントの作成 class Component extends React.Component { constructor(props){ super(props); this.state = {count: 0}; // addCountを無名関数で定義した this.addCount = () => { this.setState({count: ++this.state.count}); }; } render(){ return( <div> <h1>{this.props.title}</h1> <input type="button" value="+" onClick={this.addCount} /> <br /> <span>{this.state.count}</span> </div> ); } } // レンダリングする ReactDOM.render( <Component title="カウンター"></Component>, document.getElementById("main") ); </script> </body> </html> |
こっちのほうがわかりやすいかな（主観）