Part 3 — React の基礎
ここからは React で SPA を書くうえで欠かせない最小限の概念と、その裏にあるメンタルモデルを 8 章で学んでいきます。Part 2 までは Vanilla JS の世界だったので、最初の数章は「同じことを React で書くとこう変わる」という視点で読んでみてください。
この Part のねらい
公式の react.dev/learn は、手順を丁寧に追える素晴らしいガイドです。本 Part はそれを置き換えるものではなく、「なぜそうなっているか」「どう考えれば使えるか」 を補う位置づけです。各章は次の構造で書かれています。
- 冒頭に「この章で理解してほしい 1 つのこと」を明示
- 公式ドキュメントの定義を引用しつつ、独自の短いコード例でメンタルモデルを補強
- 誤用しやすいパターンを明記
- 章末に公式の該当ページへのリンク
図 3.0.1 Part 3 の 8 章のつながり
下の段から上に向かって、それぞれの章が前の章に積み重なっていくイメージです。下が崩れると上が読みづらくなるので、前から順番にいくのがおすすめです。
この Part の章一覧
- 3.1 開発環境 — Vite + React + TypeScript
- 3.2 JSX の本質 — 関数呼び出しの糖衣
- 3.3 コンポーネント = 引数をとる関数
- 3.4 状態 (useState) — React に再レンダーを依頼する唯一の方法
- 3.5 Props と単方向データフロー
- 3.6 副作用 (useEffect) の考え方
- 3.7 リストと key — なぜ必要か
- 3.8 フォーム — 制御コンポーネント
この Part を読み終えると
- 小規模な SPA を React + TypeScript で組み立てられる
useState/useEffect/propsの関係をメンタルモデルとして説明できる- 公式 react.dev/learn を読み進める足場ができる