React Hands On Learning
1章 Reactの世界へようこそ
1.1 本書のねらい
1.2 Reactの過去と未来
1.2.1 第2版の変更点
1.3 環境の構築
1.3.1 GitHubリポジトリ
1.3.2 React Developer Tools
1.3.3 Node.jsのインストール
2章 React学習に必要なJavaScriptの知識
2.1 変数の定義
2.1.1 constキーワード
2.1.2 letキーワード
2.1.3 テンプレート文字列
2.2 関数の作成
2.2.1 関数宣言
2.2.2 関数式
2.2.3 デフォルト引数
2.2.4 アロー関数
2.3 JavaScriptのコンパイル
2.4 オブジェクトと配列
2.4.1 デストラクチャリング
2.4.2 配列のデストラクチャリング
2.4.3 オブジェクトリテラルの改善
2.4.4 スプレッド構文
2.5 JavaScriptと非同期処理
2.5.1 Promiseとfetch
2.5.2 async/await
2.5.3 Promiseの生成
2.6 クラス宣言
2.7 ECMAScriptモジュール
2.7.1 CommonJSモジュール
3.1 関数型とは?
3.2 命令型vs.宣言型
3.3 関数型プログラミングの基本概念
3.3.1 イミュータブルなデータ
3.3.2 純粋関数
3.3.3 データの変換
3.3.4 高階関数
3.3.5 再帰
3.3.6 関数の合成
3.3.7 アプリケーションの構築
4章 Reactの基本
4.1 使用するライブラリ
4.2 React要素
4.2.1 ReactDOMで要素をブラウザに描画する
4.2.2 子要素
4.2.3 配列から子要素を生成する
4.3 Reactコンポーネント
4.3.1 Reactコンポーネントの歴史
5章 ReactとJSX
5.1 JSXを使ってReact要素を記述する
5.1.1 JSXとHTMLの違い
5.1.2 BabelによるJSXの変換
5.2 レシピのコンポーネントをJSXで記述する
5.2.1 Reactフラグメント
5.3 webpackを使ってビルド環境を構築する
5.3.1 プロジェクトの作成
5.3.2 バンドルファイルのロード
5.3.3 ソースマップ
5.3.4 Create React App
6章 ステート管理
6.1 StarRatingコンポーネント
6.1.1 useStateフックを使ってクリックイベントに対応する
6.1.2 再利用性を考慮したリファクタリング
6.2 アプリケーション全体のステート管理
6.2.1 ステート値をコンポーネントツリーの上から下に伝える
6.2.2 ユーザーの操作をコンポーネントツリーの下から上に伝える
6.3 フォーム入力を処理するアプリケーション
6.3.1 refを使ったデータアクセス
6.3.2 制御されたコンポーネント
6.3.3 カスタムフック
6.3.4 入力をステート値に反映させる
6.4 Reactコンテキスト
6.4.1 コンテキスト経由でデータを公開する
6.4.2 useContextフックからデータを取得する
6.4.3 コンテキストとステートの併用
6.4.4 コンテキストとカスタムフックの併用
7章 フック
7.1 useEffect
7.1.1 依存配列
7.1.2 依存配列の同一性チェック
7.2 useLayoutEffect
7.2.1 フックの使い方に関するルール
7.3 useReducer
7.3.1 useReducerを使った複雑なステート管理
7.4 コンポーネントのパフォーマンス改善
7.4.1 いつパフォーマンスチューニングを行うか
8章 データ
8.1 データの受信
8.2 データの送信
8.2.1 fetchを使ったファイルアップロード
8.2.2 リクエストの認証
8.3 データの保存
8.4 非同期リクエストの状態管理
8.4.1 レンダープロップ
8.4.2 仮想リスト
8.4.3 useFetchフック
8.4.4 Fetchコンポーネント
8.5 複数のリクエスト
8.5.1 関数のメモ化
8.5.2 ウォーターフォールリクエスト
8.5.3 並列リクエスト
8.6 GraphQL
8.6.1 GraphQL API
8.6.2 JavaScriptでGraphQLを利用する
9章 サスペンス
9.1 エラーバウンダリ
9.2 コードスプリッティング
9.3 Suspenseコンポーネント
9.3.1 サスペンスの応用
9.3.2 Promiseをthrowする
9.3.3 サスペンスデータソース
9.4 Fiber
10章 テスト
10.1 ESLint
10.1.1 ESLintプラグイン
10.2 Prettier
10.2.1 Prettierを設定する
10.2.2 VSCodeでPrettierを使用する
10.3 型チェック
10.3.1 PropTypes
10.3.2 Flow
10.3.3 TypeScript
10.4 テスト駆動開発(TDD)
10.4.1 TDDへの移行
10.5 Jest
10.5.1 テスト環境の構築
10.6 Reactコンポーネントのテスト
10.6.1 React Testing Library
10.6.2 要素の検索
10.6.3 イベントのテスト
10.6.4 コードカバレッジ
11章 ルーティング
11.1 React Routerの導入
11.2 React Routerプロパティ
11.3 ネストしたルート
11.4 リダイレクト
11.5 ルーティングパラメータ
11.6 ナビゲーション関数
12章 サーバーサイドReact
12.1 アイソモーフィックとユニバーサル
12.1.1 クライアントとサーバーの環境差分
12.2 Reactにおけるサーバーサイドレンダリング
12.3 Next.js
12.4 Gatsby
12.5 Reactの未来
付録A 開発環境の構築
A.1 npm
A.2 ESLint
A.3 Prettier
A.4 Jest
A.5 webpack
A.6 Babel
A.7 まとめ