Reactビギナーズガイド コンポーネントベースのフロントエンド開発入門

詳細目次

まえがき

第I部　基礎

1章　Hello world
1.1　セットアップ
1.2　ハロー、Reactワールド
1.3　内部で起こっている処理
1.4　React.DOM.*
1.5　特別なDOMの属性
1.6　ブラウザの拡張機能（ReactDeveloperTools）
1.7　予告：カスタムコンポーネント

2章　コンポーネントのライフサイクル
2.1　最低限の構成
2.2　プロパティ
2.3　propTypes
2.3.1　プロパティのデフォルト値
2.4　ステート
2.5　ステートを持ったテキストエリアのコンポーネント
2.6　DOMのイベント
2.6.1　従来のイベント処理
2.6.2　Reactでのイベント処理
2.7　プロパティとステート
2.8　初期状態をプロパティとして渡す（アンチパターン）
2.9　外部からコンポーネントへのアクセス
2.10　プロパティの事後変更
2.11　ライフサイクルのメソッドA
2.12　ライフサイクルの例：すべてをログに記録する
2.13　ライフサイクルの例：ミックスイン
2.14　ライフサイクルの例：子コンポーネントの使用
2.15　パフォーマンスの向上：コンポーネントの更新を阻止する
2.16　PureRenderMixin

3章　<excel>：高機能な表コンポーネント
3.1　まずはデータから
3.2　表のヘッダーを描画するループ
3.3　コンソールに表示された警告への対応
3.4　<td>のコンテンツの追加
3.4.1　コンポーネントへの機能追加
3.5　並べ替え
3.5.1　コンポーネントへの機能追加
3.6　並べ替えの矢印
3.7　データの編集
3.7.1　編集可能なセル
3.7.2　入力フィールドのセル
3.7.3　データの保存
3.7.4　まとめと仮想DOMの差分
3.8　検索
3.8.1　ステートとUI
3.8.2　コンテンツのフィルタリング
3.8.3　検索への機能追加
3.9　操作手順の再実行
3.9.1　再生への機能追加
3.9.2　別の実装方法
3.10　表データのダウンロード

4章　JSX
4.1　ハロー、JSX
4.2　JSXのトランスパイル
4.3　Babel
4.4　クライアント側でのトランスパイル
4.5　JSXでのトランスパイル
4.6　JSXでのJavaScript
4.7　JSXでの空白
4.8　JSXでのコメント
4.9　JSXでのHTMLエンティティ
4.9.1　XSS対策
4.10　スプレッド演算子
4.10.1　親から渡された属性とスプレッド演算子
4.11　複数のノードの生成
4.12　JSXとHTMLの違い
4.12.1　classとforは指定できない
4.12.2　styleにはオブジェクトを指定する
4.12.3　閉じタグは必須
4.12.4　キャメルケースの属性名
4.13　JSXとフォーム
4.13.1　onChangeハンドラ
4.13.2　valueとdefaultValue
4.13.3　<textarea>の値
4.13.4　<select>の値
4.14　JSX版のExcelコンポーネント

第II部　実践

5章　開発環境のセットアップ
5.1　アプリケーションのひな型
5.1.1　ファイルとフォルダー
5.1.2　index.html
5.1.3　CSS
5.1.4　JavaScript
5.1.5　モダンなJavaScript
5.2　必要なソフトウェアのインストール
5.2.1　Node.js
5.2.2　Browserify
5.2.3　Babel
5.2.4　Reactなど
5.3　ビルドの実行
5.3.1　JavaScriptのトランスパイル
5.3.2　JavaScriptのパッケージング
5.3.3　CSSのパッケージング
5.3.4　ビルドの結果
5.3.5　開発と同時のビルド
5.4　デプロイ
5.5　これからの作業

6章　アプリケーションのビルド
6.1　Whinepadバージョン0.0.1
6.1.1　セットアップ
6.1.2　コーティングの開始
6.2　コンポーネント
6.2.1　セットアップ
6.2.2　コンポーネント一覧
6.2.3　<Button>コンポーネント
6.2.4　Button.css
6.2.5　Button.js
6.2.6　フォーム
6.2.7　<Suggest>コンポーネント
6.2.8　<Rating>コンポーネント
6.2.9　ファクトリーとなる<FormInput>コンポーネント
6.2.10　<Form>コンポーネント
6.2.11　<Actions>コンポーネント
6.2.12　<Dialog>コンポーネント
6.3　アプリケーションの設定
6.4　<excel>コンポーネント（改良版）
6.5　<whinepad>
6.6　全体をまとめる

7章　品質チェック、型チェック、テスト、そして繰り返し
7.1　package.json
7.1.1　Babelの設定
7.1.2　スクリプト
7.2ESL　int
7.2.1　セットアップ
7.2.2　実行
7.2.3　ルール全体
7.3F　low
7.3.1　セットアップ
7.3.2　実行
7.3.3　型チェックのための準備
7.3.4　<Button>の修正
7.3.5　app.js
7.3.6　プロパティとステートの型チェックに関する補足
7.3.7　型のインポートとエクスポート
7.3.8　型変換
7.3.9　インバリアント
7.4　テスト
7.4.1　セットアップ
7.4.2　最初のテスト
7.4.3　Reactでのテスト
7.4.4　<Button>のテスト
7.4.5　<Actions>のテスト
7.4.6　その他の操作のシミュレーション
7.4.7　インタラクション全体のテスト
7.4.8　カバレージ

8章　Flux
8.1　考え方の要点
8.2　Whinepadの見直し
8.3 Store
8.3.1　Storeでのイベント
8.3.2　<whinepad>からStoreを利用する
8.3.3　<excel>からStoreを利用する
8.3.4　<Form>からStoreを利用する
8.3.5　Storeとプロパティの使い分け
8.4　Action
8.4.1　CRUDのAction
8.4.2　検索と並べ替え
8.4.3　<whinepad>からActionを利用する
8.4.4　<excel>からActionを利用する
8.5　Fluxのまとめ
8.6　イミュータブル
8.6.1　イミュータブルなStoreのデータ
8.6.2　イミュータブルなデータの操作

索引