React.js 最近良く名前を見るので始めた。
React.js v0.13RC では，ECMAScript6風のclass文などに対応したので，ES6の構文を使った簡単なサンプルを作成．
作成したサンプル
Count Up!ボタンを押すと上の数値が増えるだけ
作成したファイルは2つだけ
- index.html
- app.jsx
index.html
- React.js本体と、JSX変換スクリプトを読み込む
- ES6風記述を有効にするために
type="text/jsx;harmony=true"とする
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- React.js, JSX変換, アプリの3つを読み込む -->
<script src="http://fb.me/react-0.13.0-rc1.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.0-rc1.js"></script>
<script src="app.jsx" type="text/jsx;harmony=true"></script>
</head>
<body>
<div id="app-container"></div>
</body>
</html>
app.jsx
- ES6の
class構文を利用してComponentを作る - 状態はすべて
this.stateに閉じ込める。変更するときは直接ではなく、this.setStateを使う -
onClickなどのDOMイベントからメソッドを呼び出すときは最後に.bind(this)をつける
class Counter extends React.Component {
constructor() {
this.state = {
count: 0
};
}
onClick() {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.onClick.bind(this)}>Count Up!</button>
</div>
)
}
}
React.render(
<Counter />,
document.getElementById('app-container')
);