はじめに
モダンな React 開発 (Vite + TypeScript + Tailwind CSS) を基礎から体系的に学ぶ全 30 章のガイド。JavaScript の前提から Hooks・状態管理・パフォーマンス・Next.js・フルスタック実装までステップを踏んで進められます。
この本について
本書は、モダンな React 開発を基礎から体系的に学ぶための入門書です。JavaScriptの基礎からReactの高度なトピックまで、実践的なスキルを段階的に身につけることができます。
JavaScript基礎（ES6+）
Reactを学ぶ前に、モダンJavaScript（ES6以降）の重要な機能を確認しましょう。これらの知識はReact開発で頻繁に使用します。
開発環境の構築
この章では、Vite + React + TypeScriptの開発環境を構築します。
JSXの基本
この章では、ReactのUIを記述するための構文であるJSXを学びます。
コンポーネント
この章では、Reactの基本単位であるコンポーネントについて学びます。
Props
この章では、コンポーネントにデータを渡すためのPropsについて学びます。
State（useState）
この章では、コンポーネントの状態を管理するStateについて学びます。
イベントハンドリング
この章では、Reactでのイベント処理について学びます。
条件分岐とリスト表示
この章では、条件に応じたレンダリングと、配列データのリスト表示を学びます。
フォーム
この章では、Reactでのフォームの扱い方を学びます。
Zod でスキーマバリデーション
Zod でスキーマを定義し、型推論・React Hook Form 連携・API レスポンスの実行時検証までを学びます。
useEffect
この章では、副作用（Side Effect）を扱う`useEffect`フックについて学びます。
useRefとDOM操作
この章では、DOMへの直接アクセスや値の保持に使用する`useRef`フックと、関連するAPIについて学びます。
useContext
この章では、コンポーネントツリー全体でデータを共有するための`useContext`フックについて学びます。
useReducer
この章では、複雑な状態ロジックを管理するための`useReducer`フックについて学びます。
カスタムフック
この章では、ロジックを再利用可能な形で抽出するカスタムフックについて学びます。
スタイリング概要
この章では、Reactにおけるスタイリング手法の全体像を把握し、各アプローチの特徴と使い分けを学びます。
Tailwind CSS 統合
React 開発でデファクトとなった Tailwind CSS を React で実用するための章。セットアップと基本は別ガイドに任せ、本章は variants 設計・clsx / tailwind-merge / cn ユーティリティ・shadcn/ui との連携など React 統合特化のパターンを扱います。
PortalとModal
この章では、ReactのcreatePortalを使用したモーダルの実装について学びます。
状態管理（Zustand）
この章では、React 開発で人気の状態管理ライブラリ「Zustand」を学びます。
TanStack Query
この章では、サーバー状態管理のデファクトスタンダードである「TanStack Query」を学びます。
React Router
この章では、React RouterによるSPAのルーティングを学びます。
パフォーマンス最適化
この章では、Reactアプリケーションのパフォーマンスを最適化するための手法を学びます。
デバッグ
この章では、Reactアプリケーションのデバッグ手法とReact Developer Toolsの使い方を学びます。
クラスコンポーネント
この章では、Reactのクラスコンポーネントについて学びます。現在のReact開発では関数コンポーネントが主流ですが、既存のコードベースの理解やError Boundaryの実装のために知識が必要です。
Next.js入門
この章では、Reactのフルスタックフレームワークである Next.js について学びます。
実践プロジェクト
この章では、これまで学んだ知識を活かして、実践的なタスク管理アプリを構築します。
SPA認証の設計
この章では、シングルページアプリケーション（SPA）における認証の設計と実装について学びます。
NestJS + Prisma
この章では、NestJSとPrismaを使用して、React SPAのためのバックエンドAPIを構築します。
フルスタック実践プロジェクト
この章では、これまで学んだすべての知識を統合し、React + NestJS + Prismaによるプロジェクト管理アプリ（Trelloライク）を構築します。