これからはじめる React 実践入門(コレカラハジメルリアクトジッセンニュウモン)

たくさんのサンプルを動かしながら、 React の機能を基礎からしっかり、さらにモダン JavaScript 、 TypeScript 、 Next.js による本格的なアプリ開発まで、この 1 冊で総合的に学べます。
とことん丁寧でわかりやすく、開発に必要な応用力が身につけられる、必読の入門書です。
最新 React 18 以降／ Next.js 13 以降に対応
Chapter 1 イントロダクション
1-1 React と JavaScript
1-2 React アプリを開発／実行するための基本環境
1-3 モダン JavaScript の基本

Chapter 2 React の基本
2-1 はじめての React
2-2 サンプルアプリの内容を確認する
2-3 JSX の基本

Chapter 3 コンポーネント開発 (基本)
3-1 コンポーネントを支える基本概念 - Props と State
3-2 条件分岐と繰り返し処理
3-3 Props ／ State の理解を深める
3-4 より高度なイベント処理

Chapter 4 コンポーネント開発 (フォーム)
4-1 フォーム操作の基本
4-2 State における構造化データの更新
4-3 検証機能の実装 - React Hook Form

Chapter 5 コンポーネント開発 (応用)
5-1 組み込みコンポーネント
5-2 コンポーネント開発でのスタイル定義
5-3 コンポーネントのその他の話題

Chapter 6 React ライブラリの活用
6-1 典型的な UI を実装する - MUI
6-2 コンポーネントの見た目／動作をカタログ表示する - Storybook
6-3 外部サービスからデータを取得する - React Query

Chapter 7 フックの活用
7-1 コンポーネント描画／破棄時に処理を実行する - 副作用フック
7-2 さまざまな値への参照を準備する - useRef 関数
7-3 状態と処理とをまとめて管理する - useReducer 関数
7-4 コンポーネントの複数階層で値を受け渡しする - useContext 関数
7-5 ステート管理ライブラリ「 Recoil 」
7-6 関数、またはその結果をメモ化する - memo ／ useMemo ／ useCallback 関数
7-7 優先順位の低い State 更新を区別する - useTransition 関数
7-8 フックの自作

Chapter 8 ルーティング
8-1 React Router の基本
8-2 ルーター対応リンクの設置
8-3 ルーター経由で情報を受け渡しする手法
8-4 Route コンポーネントの属性
8-5 ルーティングに関わるその他のテクニック

Chapter 9 テスト
9-1 単体テスト
9-2 E2E テスト

Chapter 10 TypeScript の活用
10-1 TypeScript の基本
10-2 React アプリへの TypeScript の導入

Chapter 11 Next.js の活用
11-1 Next.js の基本
11-2 App Router の基本を理解する
11-3 応用アプリ「 Reading Recorder 」を作成する
11-4 アプリの実装を読み解く
11-5 Vercel へのデプロイ

チュートリアルで React 本体に触れることと、実務の React コードを書けることの間には距離があります。実際の開発では、ルーティング、フォーム検証、サーバーからのデータ取得、テスト、そして TypeScript が当たり前のように同居するからです。本書はその「周辺まで含めた React 」を一冊で通す入門書で、著者は入門書の書き手として多くの著作を持つ山田祥寛氏。 SB クリエイティブから 2023 年 9 月に刊行され、 React 18 以降と Next.js 13 以降に対応しています。

構成はモダン JavaScript の文法確認から始まり、 JSX 、 Props と State 、イベント処理という土台を固めたうえで、 React Hook Form によるフォーム検証、 MUI ・ Storybook ・ React Query といった定番ライブラリ、 useReducer や useContext を含むフックの各論、 React Router によるルーティング、単体テストと E2E テスト、 TypeScript の導入へと積み上げていきます。終盤では Next.js の App Router を使い、「 Reading Recorder 」という読書記録アプリを組み立てて、 Vercel へのデプロイまで到達します。サンプルを動かしながら進む方式なので、写して試すサイクルが学習の軸になります。

前提として求められるのは JavaScript の基本文法に触れた経験程度で、冒頭にモダン JavaScript の章が置かれているため、 ES2015 以降の書き方に自信がなくても入っていけます。網羅型ゆえの厚みがあるので、まず通読して体系を作り、以後は手元に置いて必要な章を引き直す使い方が現実的です。 React の先に Next.js を見据えているなら、基礎から応用まで同じ著者の筆致で連続して学べるこの構成が、移行の段差を小さくしてくれます。