React.jsのコード例を自分用にまとめてみる(JSX)のまとめのコードをES6に書き換えてみた。
いくつか注意しないといけない点があった。
[amazonjs asin=”B01MUS2RP9″ locale=”JP” title=”JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書”]React.jsのクラスの作り方は、React.createClass関数を使っていた。
var Component = React.createClass({
/// ・・・・
});
これを React.Componentクラスをextendsすることでクラスを作成する。
class Component extends React.Component {
// ・・・
}
React.jsの場合、propsはthis.props.hogeで呼び出せたが、ES6で書く場合はconstructorで呼び出す必要がある。
constructor(props){
super(props);
}
React.jsの場合、stateはgetInitialState関数で作成した。
getInitialState: function(){
return {count: 0};
}
ES6の場合は、constructorでstateを定義する。
constructor(props){
this.state = {count: 0};
}
一方、stateの変更はReact.jsと同じく、setState関数を使う。
React.jsのコード例を自分用にまとめてみる(JSX)のまとめのコードをES6に書き換えてみた。
<!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>
こっちのほうがわかりやすいかな（主観）
