フロントエンドのSPA（シングルページアプリケーション）向けのJavaScriptのライブラリであるReactを使用して、HelloWorldを書いてみました。
Reactで何かしらの記述の挙動を確認したい時のベースとして使いやすいようにしています。
今回は、下準備無しで動かせるように、CDNサービスを使用しています。
インターネット接続していることが前提となりますが、UNPKGで公開されているパッケージをscriptタグ等で指定することで、ローカルにライブラリを落とすことなくライブラリを使用することができるようになります。
SPAらしいHelloWorldになるように、内部状態の変化に応じてHelloWorld!の文字が出たり消えたりするような実装を試しています。
なお、ブラウザのバージョンが古くても最新のJavaScriptの書き方で動くように、Babelと呼ばれるライブラリも別途取り込んでいます。
■前提
・Reactのバージョン
v17
・Babelのバージョン
v6
■実行確認（Hello World）手順
１．任意のフォルダで"hello.html"という名前のファイルを作成する。
２．「hello.html」に下記を入力してUTF-8で保存。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React - Hello world!</title>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/babel-standalone@6/babel.min.js"
></script>
</head>
<body>
<div id="helloContainer"></div>
<script type="text/babel">
// useStateの取り込み（CDNサービス使用時の宣言）
const { useState } = React;
const Hello = () => {
// 状態管理する変数の宣言
// const [状態変数, 状態を変更するための関数] = useState(状態の初期値);
const [checkedValues, setCheckedValues] = useState("");
// チェックボックスの状態が変化した場合の処理
// e.target.valueは状態が変化したチェックボックスが持つ値
// （今回はボックスを１つしか定義しないため判定に使用する必要はないが、
// 複数定義する場合はどのボックスの状態が変化したかを判定するのに必要）
// checkedValuesが初期値なら"Hello World!"をセット、そうでなければ初期値
const handleChange = (e) => {
if (e.target.value === "HelloValue") {
if (checkedValues === "") {
setCheckedValues("Hello World!");
} else {
setCheckedValues("");
}
}
};
return (
<label>
{/* チェックボックスの定義 */}
<input
type="checkbox"
value="HelloValue"
onChange={handleChange}
/>
{/* checkedValuesの値を表示 */}
{checkedValues}
</label>
)
};
const domContainer = document.querySelector("#helloContainer");
ReactDOM.render(<Hello />, domContainer);
</script>
</body>
</html>
３．「hello.html」をブラウザから開く。
※今回はChromeで開きます。
初期状態では以下のように何も表示されませんが
チェックボックスをチェックすると「Hello World!」と表示されます。
ボタンをクリックしてイベントを飛ばしたり、リロードしたりすることなく、画面で変更された内部状態をリアルタイムに画面上に反映することができています。
