メモ > 技術 > フレームワーク: React.js > JSX
JSX
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>React</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.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/babel.min.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>