React
Note
本章は，Next.js 公式の「React Foundations」（Vercel 社提供）を日本語訳し，再編集したものです。原著の著作権は Vercel 社に帰属します。画像も原著から引用しています。
Next.js をしっかり扱えるようになるには，React とその周辺の基本概念を押さえておくことが近道です。このコースでは，JavaScript で小さな UI を作るところから始め，React，さらに Next.js へと少しずつステップアップしていきます。
こんな人におすすめ
- HTML・CSS・JavaScript を基礎から復習しながら，React に挑戦したい
- Next.js のハンズオンへ進む前に，React の考え方を体験しておきたい
- 宣言的 UI の考え方やコンポーネント設計を実践で確認したい
このコースで身につくこと
- DOM とレンダリングの仕組みを踏まえた UI 更新の流れ
- React コンポーネント・Props・State といった基礎概念
- Browser CDN 版 React を使った手動セットアップから，Next.js までの移行ステップ
- クライアントコンポーネントとサーバーコンポーネントの役割整理
各チャプターは前の内容を前提に進みますが，既に理解しているところは飛ばして構いません。
学習を始める前に
事前に準備しておきたいこと
- HTML・CSS と JavaScript / TypeScript の章をひととおり体験しておくとスムーズです。
- PC 環境は Windows（WSL 推奨）または macOS を想定しています。
開発環境の要件
- Node.js 20.12 以上
- テキストエディタ：VSCode 推奨
- ブラウザ：最新の Chrome / Edge / Safari / Firefox
環境の整え方は 環境構築 を参照してください。
学習のながれ
- Chapter 1-3：DOM と宣言的 UI の違いを体験する
JavaScript だけで UI を構築し，React が解決してくれる課題を確認します。 - Chapter 4-7：React のコア概念を理解する
コンポーネント・Props・State を小さなサンプルで掴みます。 - Chapter 8-9：Next.js への橋渡し
Server / Client Component の役割と Next.js プロジェクトの始め方を学びます。
実際に手を動かしながら読み進め，気づいたことはメモしておくと復習しやすくなります。それでは Chapter 1 へ進みましょう。