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

[cover photo]
  • 2017年03月 発行
  • 248ページ
  • ISBN978-4-87311-788-1
  • フォーマット Print PDF ePub mobi
  • 原書: React: Up & Running

オライリー・ジャパンで書籍を購入:
定価2,700円

Ebook Storeで電子版を購入:
価格2,160円

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

関連書籍

CSS3開発者ガイド 第2版
JavaScript: The Good Parts
JavaScriptパターン
アイソモーフィックJavaScript
オブジェクト指向JavaScriptの原則
開眼! JavaScript
入門 React
初めてのJavaScript 第3版
初めてのPHP、MySQL、JavaScript&CSS 第2版
モダンWeb

まえがき

第Ⅰ部 基礎

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

Feedback

皆さんのご意見をお聞かせください。ご購入いただいた書籍やオライリー・ジャパンへのご感想やご意見、ご提案などをお聞かせください。より良い書籍づくりやサービス改良のための参考にさせていただきます。
[feedbackページへ]