React JSX

JSXとは

JavaScriptの拡張構文
React 要素を簡便な形式で作成できる

ライブラリ読み込み

<script src=”https://unpkg.com/react@16/umd/react.development.js”></script>
<script src=”https://unpkg.com/react-dom@16/umd/react-dom.development.js”></script>
<script src=”https://unpkg.com/babel-standalone@6.26.0/babel.js”></script>

エレメントの出力

<div id=”root”>wait…</div>

<script type=”text/babel”>
　let dom = document.querySelector(‘#root’);

　let element = (
　　<div>
　　　<h2>JSX sample</h2>
　　　<p>This is sample message.</p>
　　</div>
　);

　ReactDOM.render(element, dom);
</script>

変数

変数の埋め込み

let title = “AAAAA”;
let message = “BBBBB”;

let element = (
　<div>
　　<h2>{title}</h2>
　　<p>{message}</p>
　</div>
);

let dom = document.querySelector(‘#root’);

属性の埋め込み

let title = “AAAAA”;
let message = “BBBBB”;
let link = “https://office-yone.com”;

let element = (
　<div>
　　<h2>{title}</h2>
　　<p><a href={link}>{message}</a></p>
　</div>
);

ReactDOM.render(element, dom);

スタイルの埋め込み

let dom = document.querySelector(‘#root’);

let title = “AAAAA”;
let message = “BBBBB”;

連想配列
const style = {
　fontSize: “20pt”,　※font-size → fontSize
　color: “red”,
};

let element = (
　<div>
　　<h2>{title}</h2>
　　<p style={style}>{message}</p>
　</div>
);

ReactDOM.render(element, dom);

関数の定義、呼び出しの埋め込み

let dom = document.querySelector(‘#root’);

let print = function(msg, fontSize, color){
　const style = {
　　fontSize: `${fontSize}pt`,
　　color: `${color}`,
　};
　return <p style={style}>{msg}</p>;
};

let element = (
　<div>
　　{print(‘RED’, 5, ‘red’)}
　　{print(‘BLUE’, 10, ‘blue’)}
　　{print(‘GREEN’, 15, ‘green’)}
　</div>
);

ReactDOM.render(element, dom);

制御文

IF文

let dom = document.querySelector(‘#root’);

let flg = true;

let element = (
　<div>
　　trueの時のみ処理
　　{flg && <p>true</p>}

　　分岐
　　{flg ?
　　　<p>true</p>
　　:
　　　<p>false</p>
　　}
　</div>
);

ReactDOM.render(element, dom);

配列

let dom = document.querySelector(‘#root’);

let list = [
　<li>PHP</li>,
　<li>Python</li>,
　<li>Java</li>,
];

let element = (
　<div>
　　<ul>
　　　{list}
　　</ul>
　</div>
)

ReactDOM.render(element, dom);

map

let dom = document.querySelector(‘#root’);

const style = {
　fontSize: “20pt”,
　color: “red”,
};

let list = [
　<li>PHP</li>,
　<li>Python</li>,
　<li>Java</li>,
];

let element = (
　<div>
　　<ul>
　　　{
　　　　list.map((elm) => (
　　　　　<span style={style}>{elm}</span>
　　　　))
　　　}
　　</ul>
　</div>
)

ReactDOM.render(element, dom);

イベント処理

タイマーによる画面更新

let dom = document.querySelector(‘#root’);

var count = 0;

setInterval(() => {
　count++;
　let element = (
　　<div>
　　　<p>count:{count}</p>
　　</div>
　);
　ReactDOM.render(element, dom);
}, 1000);

イベント処理

let dom = document.querySelector(‘#root’);

var count = 0;

let action = (event) => {
　count++;
　let element = (
　　<div>
　　　<p onClick={action}>count:{count}</p>
　　</div>
　);
　ReactDOM.render(element, dom);
};
action();

フォームイベント処理

let dom = document.querySelector(‘#root’);

let name = ”;
let message = ”;

let change = (event) => {
　name = event.target.value;
　message = `Hello Mr.${name}`;
};

let action = (event) => {
　let element = (
　　<div>
　　　<p>{message}</p>
　　　<input type=”text” id=”input” onChange={change} />
　　　<button onClick={action}>Click</button>
　　</div>
　);
　ReactDOM.render(element, dom);
};
action();