JavaScriptのフレームワークとして、Angularを利用していたが、Reactも気になったのでサンプル。
ライブラリは、CDNを使用するが、下記の記述で動作する。
babel等のバージョン違い等によって動作しなくなるので悩ましい。
[javascript]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
<title>React Sample</title>
</head>
<body>
<div id="root">
<!– This div’s content will be managed by React. –>
</div>
<script type="text/babel">
ReactDOM.render(
<h1>こんにちは。たぢさん。</h1>,
document.getElementById(‘root’)
);
</script>
</body>
</html>
[/javascript]
JSファイルを外出しにする場合は、下記の様に変更する。
[javascript]
<script type="text/babel" src="js/common.js"></script>
[/javascript]
また、自作のコンポーネントを作成して表示する。
[javascript]
//コンポーネントのレンダリング
var MyDiv = React.createClass({
displayName : ‘表示されるかな？’,
render: function(){
return (
<p>わたしはどこへ？</p>
);
}
});
ReactDOM.render(
<MyDiv></MyDiv>,
document.getElementById(‘mydiv’)
);
[/javascript]
HTMLの記述は下記。
[html]
<div id="mydiv"></div>
[/html]
次に、コンポーネントへパラメータを渡してみる。
[javascript]
var MyDiv2 = React.createClass({
displayName: ‘パラメータ渡し’,
render: function () {
return(
<p>パラメータは<span style={{color:’red’}}>{this.props.param}</span>です。</p>
);
}
});
ReactDOM.render(
<MyDiv2 param="引数"></MyDiv2>,
document.getElementById(‘mydiv2’)
);
[/javascript]
HTMLの記述は下記。
[html]
<div id="mydiv2"></div>
[/html]
続いて、イベントを発生させてみる。
[javascript]
var MyButton = React.createClass({
displayName: ‘アラート’,
clickHandler: function () {
alert(‘クリックされました。’);
},
render: function () {
return(
<input type="button" value="クリック" onClick={this.clickHandler}/>
);
}
});
ReactDOM.render(
<MyButton></MyButton>,
document.getElementById(‘mybtn’)
);
[/javascript]
HTMLの記述は下記。
[html]
<div id="mybtn"></div>
[/html]
さらに、SELCTボックスの値を変更した場合の挙動を試してみる。
ミソは、getInitialState と this.setState である。
[javascript]
var MySelect = React.createClass({
selValue: ”,
displayName: ‘セレクタ’,
//State初期化
getInitialState: function () {
return {val: ”};
},
selectChangeHandler: function (event) {
this.selValue = event.target.value;
//State更新
this.setState({
val: this.selValue
});
},
render: function () {
return(
<div>
<div>
<select onChange={this.selectChangeHandler}>
<option value=’1′>Java</option>
<option value=’2′>Ruby</option>
<option value=’3′>Python</option>
<option value=’4′>JavaScript</option>
<option value=’5′>C#</option>
</select>
</div>
<p>VALUE: {this.state.val}</p>
</div>
);
}
});
ReactDOM.render(
<MySelect></MySelect>,
document.getElementById(‘myselect’)
);
[/javascript]
HTMLの記述は下記。
[html]
<div id="myselect"></div>
[/html]