戻る
■JSXを使う
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>React</title> <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> </head> <body> <h1>React</h1> <div id="root"> <p>Loading...</p> </div> <script type="text/babel"> let dom = document.querySelector('#root'); let element = ( <div> <h2>JSX Sample</h2> <p>これはJSXのサンプルです。</p> </div> ); ReactDOM.render(element, dom); </script> </body> </html>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> を読み込むと、 <script type="text/babel"></script> 内にJSXを記述することができる ■値を埋め込む
<div id="root"> <p>Loading...</p> </div> <script type="text/babel"> let dom = document.querySelector('#root'); let title = 'タイトル'; let message = 'メッセージ。'; let message_style = { fontSize: "20px", color: "#FF0000", border: "1px solid #000000" }; let link = 'https://www.google.co.jp/'; let element = ( <div> <h2>{title}</h2> <p style={message_style}>{message}</p> <p><a href={link}>リンク</a></p> </div> ); ReactDOM.render(element, dom); </script>
「{」と「}」で囲うと変数を埋め込める 変数の値を属性に使う場合、ダブルクォートは不要 ■関数でJSXを作る
<div id="root"> <p>Loading...</p> </div> <script type="text/babel"> let dom = document.querySelector('#root'); let printMsg = function(message, size, color) { let style = { fontSize: size + "px", color: color, border: "1px solid #000000" }; return <p style={style}>{message}</p>; } let element = ( <div> <h2>関数でJSXを作る</h2> <ul> <li>{printMsg('メッセージ1', 10, '#FF0000')}</li> <li>{printMsg('メッセージ2', 20, '#00FF00')}</li> <li>{printMsg('メッセージ3', 30, '#0000FF')}</li> </ul> </div> ); ReactDOM.render(element, dom); </script>
■配列を扱う
<div id="root"> <p>Loading...</p> </div> <script type="text/babel"> let dom = document.querySelector('#root'); let data = [ <li>太郎</li>, <li>花子</li>, <li>幸子</li> ]; let element = ( <div> <h2>配列を扱う</h2> <ul> {data} </ul> </div> ); ReactDOM.render(element, dom); </script>
■mapで配列を扱う
<div id="root"> <p>Loading...</p> </div> <script type="text/babel"> let dom = document.querySelector('#root'); let data = [ { name: '太郎', mail: 'taro@example.com', age: 45 }, { name: '花子', mail: 'hanako@example.com', age: 37 }, { name: '幸子', mail: 'sachiko@example.com', age: 29 } ]; let element = ( <div> <h2>mapで配列を扱う</h2> <table border="1"> <tr> <th>name</th> <th>mail</th> <th>age</th> </tr> {data.map((value) => ( <tr> <td>{value.name}</td> <td>{value.mail}</td> <td>{value.age}</td> </tr> ))} </table> </div> ); ReactDOM.render(element, dom); </script>
■表示を更新する
<div id="root"> <p>Loading...</p> </div> <script type="text/babel"> let dom = document.querySelector('#root'); let p_style = { fontSize: "20px" }; var counter = 0; setInterval(() => { counter++; let element = ( <div> <p style={p_style}>count: {counter}</p> </div> ); ReactDOM.render(element, dom); }, 1000); </script>
■フォームの値を利用する
<div id="root"> <p>Loading...</p> </div> <script type="text/babel"> let dom = document.querySelector('#root'); let p_style = { fontSize: "20px" }; let message = 'お名前を入力してください。'; let name = ''; let doChange = (event) => { name = event.target.value; message = 'こんにちは、' + name + 'さん。'; }; let doAction = (event) => { let element = ( <div> <p style={p_style}>{message}</p> <div> <input type="text" id="name" onChange={doChange} /> <button onClick={doAction}>Click</button> </div> </div> ); ReactDOM.render(element, dom); }; doAction(); </script>