本文へスキップします。

【参】モーダルJS:読み込み
書籍DB:詳細

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

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

  • 著者Stoyan Stefanov牧野 聡
  • 定価2,750円 (本体2,500円+税)
  • 判型B5変
  • 248頁
  • ISBN978-4-87311-788-1
  • 発売日2017/03/11
  • 発行元オライリー・ジャパン

FacebookのエンジニアによるReactの入門書!

ReactによるコンポーネントベースのWebフロントエンド開発の入門書。Reactでは小さくて管理が容易なコンポーネントを組み合わせて、大きくて強力なアプリケーションを作成できます。本書の前半は入門編で、簡単なサンプルを使いながらReactの基本やJSXについて学びます。後半は、実際のアプリケーション開発に必要なものや開発を助けてくれるツールについての解説です。具体的には、JavaScriptのパッケージングツール(Browserify)、ユニットテスト(Jest)、構文チェック(ESLint)、型チェック(Flow)、データフローの最適化(Flux)、イミュータブルなデータ(immutableライブラリ)などを取り上げます。対象読者は、ES2015(ES6)の基本をマスターしているフロントエンド開発者。
まえがき

第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 イミュータブルなデータの操作

索引