Program ＞ JavaScript ＞ React.js ＞ Reactビギナーズガイド

Reactビギナーズガイド †

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門 Stoyan Stefanov オライリージャパン 2017-03-11 ￥ 2,700

目次 †

まえがき

第１部　基礎 †

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コンポーネント

第２部　実践 †

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.2　ESLint
　　　　7.2.1　セットアップ
　　　　7.2.2　実行
　　　　7.2.3　ルール全体
　　7.3　Flow
　　　　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　イミュータブルなデータの操作

索引

出版社 †

O'Reilly Japan - Reactビギナーズガイド https://www.oreilly.co.jp/books/9784873117881/

著者 †

Stoyan Stefanov(@stoyanstefanov) ストヤン・ステファノフさん | Twitter https://twitter.com/stoyanstefanov

Stoyan Stefanov(ストヤン・ステファノフ)
Facebookのエンジニア。
以前はYahoo!に在籍し、オンラインの画像最適化ツールsmush.itを作成したり、パフォーマンス分析ツールYSlow 2.0 のアーキテクトを務めたりした。
著書に『JavaScriptパターン』(オライリー)や『Object-Oriented JavaScript』(Packt Publishing)がある。
『続・ハイパフォーマンスWebサイト』や『ハイパフォーマンスJavaScript』にも寄稿している。
ブログ( http://phpied.com )を執筆する傍ら、VelocityやJSConfやFronteersをはじめとする多数のイベントで精力的に講演を行っている。

学習メモ †