JavaScriptのフレームワークとして、Angularを利用していたが、Reactも気になったのでサンプル。
ライブラリは、CDNを使用するが、下記の記述で動作する。
babel等のバージョン違い等によって動作しなくなるので悩ましい。
<!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>
JSファイルを外出しにする場合は、下記の様に変更する。
<script type="text/babel" src="js/common.js"></script>
また、自作のコンポーネントを作成して表示する。
//コンポーネントのレンダリング var MyDiv = React.createClass({ displayName : '表示されるかな?', render: function(){ return ( <p>わたしはどこへ?</p> ); } }); ReactDOM.render( <MyDiv></MyDiv>, document.getElementById('mydiv') );
HTMLの記述は下記。
<div id="mydiv"></div>
次に、コンポーネントへパラメータを渡してみる。
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') );
HTMLの記述は下記。
<div id="mydiv2"></div>
続いて、イベントを発生させてみる。
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') );
HTMLの記述は下記。
<div id="mybtn"></div>
さらに、SELCTボックスの値を変更した場合の挙動を試してみる。
ミソは、getInitialState と this.setState である。
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') );
HTMLの記述は下記。
<div id="myselect"></div>