React は『コンポーネント思考』を身につける言語
React は、UI をコンポーネントに分割し、状態（state）に応じて宣言的に描画するライブラリです。モダンフロントエンドの中心的存在で、Next.js 等の基盤にもなっています。本記事では、React を Hooks 中心に学ぶロードマップを編集部の視点で整理します。学習進度は個人により異なります。Next.js学習ロードマップ もご参考に。
前提知識
(1) HTML/CSS：基礎が固まっていること。(2) JavaScript（ES6+）：分割代入・配列メソッド・promise。(3) TypeScript：型の読み書き（推奨）。(4) npm/パッケージ管理：基本操作。(5) ブラウザの基礎：DOM・イベント。TypeScript学習、Webの基礎を学ぶロードマップ もご参考に。
学習ロードマップ（2〜4ヶ月）
(1) 第1段階：JSX とコンポーネント：基本構造。(2) 第2段階：props と state：データの流れ。(3) 第3段階：Hooks 基礎：useState・useEffect。(4) 第4段階：Hooks 応用：useContext・useReducer・useMemo・useCallback。(5) 第5段階：状態管理・データ取得：Zustand・React Query 等。(6) 第6段階：実プロジェクト：アプリ製作。未経験からフロントエンドエンジニア もご参考に。
Hooks の重要概念
(1) useState：状態管理の基本。(2) useEffect：副作用・依存配列の理解。(3) useContext：グローバルな値の共有。(4) useReducer：複雑な状態遷移。(5) カスタムフック：ロジックの再利用。useEffect の依存配列でつまずく人が多く、ここを理解することが鍵です。
状態管理の選択
(1) ローカル state：コンポーネント内で完結。(2) useContext：軽量なグローバル状態。(3) Zustand/Jotai：軽量な状態管理ライブラリ。(4) React Query/SWR：サーバー状態のキャッシュ。(5) 選び方：URL・サーバー・ローカルの優先順位。「グローバル状態の使いすぎ」は典型的なアンチパターンです。Next.js学習ロードマップ もご参考に。
パフォーマンス最適化
(1) 不要な再レンダリングの抑制：memo・useMemo・useCallback。(2) リストの仮想化：大量データ。(3) コード分割：lazy・Suspense。(4) 過度な最適化を避ける：計測してから。(5) React DevTools Profiler：ボトルネック特定。Webパフォーマンス改善 もご参考に。
エコシステム
(1) Next.js：フルスタックフレームワーク。(2) 状態管理：Zustand・Jotai・Redux Toolkit。(3) データ取得：React Query・SWR。(4) UI ライブラリ：shadcn/ui・MUI・Chakra。(5) フォーム：React Hook Form・Zod。テスト戦略の基礎 もご参考に（コンポーネントテスト）。
失敗しがちなパターン
(1) useEffect の乱用：不要な副作用。(2) 依存配列の誤り：無限ループ・古い値。(3) グローバル状態の使いすぎ：複雑化。(4) 過度な最適化：計測なしの memo 乱用。(5) key の誤用：リストの不具合。対策は、(1)useEffect は最小限、(2)依存配列を正しく、(3)状態を局所化、(4)計測ベース最適化、(5)安定した key、です。IT・Web業界の職種完全マップ もご活用ください。