React を整える。

＝「状態が変わると画面が描き直される」仕組みを、コードを書いて確かめる

サンプルコード（クリックでエディタに挿入）

EDITOR JSX (React 18.3.1)

Ctrl/⌘ + Enter で実行

PREVIEW

CONSOLE

コードを書いて「実行」を押すと、ここに console 出力とエラーが出ます。

無限ループを書くとタブが固まることがあります。そのときは「■ 停止」を押してください。

React が向いている場面／向かない場面

自分に合うのはどれ？選び方を見る →

仮想DOMでUIを組み立てる、最も採用例と日本語情報が多いライブラリ。

◎ 向いている場面

・求人・日本語の学習情報の多さを重視するとき（当サイト内で最も情報が多い）
・複数人・長期で保守する大きめのWebアプリ
・コンポーネント単位のUIライブラリ（部品集）を多く使いたいとき
・モバイルアプリ（React Native）まで技術を揃えたいとき

△ 向かない場面

・既存のHTMLページに少しだけ動きを足したいだけのとき（JSXやビルド環境が前提になり大掛かり）
・とにかく最速で・学習コストをかけずに動かしたいとき

React は「JSX を JS に変換してから」動く。

ブラウザは JSX をそのまま読めません。このページでは typescript.js の変換機能（JSX 専用のオプション）を使い、React.createElement 呼び出しに変換してから classic script として実行しています。

①

useState — 状態を持つ

useState(0) は「現在値」と「更新用の関数」の組を返します。更新関数を呼ぶと、React がコンポーネントを再描画します。
②

props — 親から子へ値を渡す

コンポーネントは関数の引数のように { name, age } を受け取ります。子は props を書き換えられません（一方向のデータの流れ）。
③

key — 一覧の中の「どれ」を教える

配列を map で描画するとき、React は key を手がかりに「どの要素が変わったか」を判断します。インデックスではなく id のような一意な値を使うのが基本です。
④

useEffect — 画面反映のあとに動く

useEffect の中身は、レンダー本体が終わって画面に反映されたあとに実行されます。依存配列（[count]）の値が変わるたび、前回分のクリーンアップ → 今回分の実行、の順で呼ばれます。

React（JSX）と Preact + htm の違い

上の「Preact + htm」タブでは、JSX の変換ステップなしで同じカウンタを書いています。

観点	React（JSX）	Preact + htm
マークアップの書き方	`<div>{count}</div>`（JSX）	html`…`（値はドル記号と波括弧で埋め込む）（タグ付きテンプレート）
実行前の変換	必要（JSX → JS。ここでは typescript.js）	不要（そのままブラウザの JS として動く）
読み込み方	UMD の `<script>`（classic script）	ESM の `import`（module script）
ライブラリ本体の大きさ	React + ReactDOM（比較的大きい）	Preact（数KB。React 互換 API）

   このページについて
 
ライブラリは cdn.jsdelivr.net から読み込みます。
        書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。
        プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。
 
🌐 「React（JSX）」タブでは React 18.3.1 と ReactDOM 18.3.1（UMD）、
        JSX 変換用の typescript.js（/typescript/ と同じ処理系）を、
        「Preact + htm」タブでは Preact 10.29.8 と htm 3.1.1 を、
        「実行」を押した最初の1回だけ取得します（プログラムを受け取るだけの通信で、書いたコードや実行結果は送られません）。