Skip to content

Part 3 — React の基礎 ​

ここからは React で SPA を書くうえで欠かせない最小限の概念と、その裏にあるメンタルモデルを 8 章で学んでいきます。Part 2 までは Vanilla JS の世界だったので、最初の数章は「同じことを React で書くとこう変わる」という視点で読んでみてください。

この Part のねらい ​

公式の react.dev/learn は、手順を丁寧に追える素晴らしいガイドです。本 Part はそれを置き換えるものではなく、「なぜそうなっているか」「どう考えれば使えるか」 を補う位置づけです。各章は次の構造で書かれています。

  • 冒頭に「この章で理解してほしい 1 つのこと」を明示
  • 公式ドキュメントの定義を引用しつつ、独自の短いコード例でメンタルモデルを補強
  • 誤用しやすいパターンを明記
  • 章末に公式の該当ページへのリンク

図 3.0.1 Part 3 の 8 章のつながり ​

3.1 開発環境 — Vite + React + TypeScript の土台3.2 JSX関数呼び出しの糖衣3.3 コンポーネント引数をとる関数3.5 Props単方向データフロー3.4 useState再レンダーの引き金3.6 useEffect外部システムと同期3.7 リストと key差分計算の識別子3.8 フォーム制御コンポーネント

下の段から上に向かって、それぞれの章が前の章に積み重なっていくイメージです。下が崩れると上が読みづらくなるので、前から順番にいくのがおすすめです。

この Part の章一覧 ​

この Part を読み終えると ​

  • 小規模な SPA を React + TypeScript で組み立てられる
  • useState / useEffect / props の関係をメンタルモデルとして説明できる
  • 公式 react.dev/learn を読み進める足場ができる