まとめ：ステートとイベント
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 27/42。
チャレンジ
中級章のまとめ。デスクランプのコントロールパネルを作成します：1つのコンポーネント内にカウンターとトグルが並んで配置されます。
- 2つの独立した状態を追加します：
0から始まるbrightnessとfalseから始まるon。 id="level"を持つ span に明るさを表示します。id="brighter"の button はクリックごとに 1 を追加します。id="power"の button はonを切り替えます。ONの場合、id="status"とテキストLamp is onを持つ<p>を表示します。それ以外の場合はnullを render します。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>