ReactによるコンポーネントベースのWebフロントエンド開発の入門書。Reactでは小さくて管理が容易なコンポーネントを組み合わせて、大きくて強力なアプリケーションを作成できます。本書の前半は入門編で、簡単なサンプルを使いながらReactの基本やJSXについて学びます。後半は、実際のアプリケーション開発に必要なものや開発を助けてくれるツールについての解説です。具体的には、JavaScriptのパッケージングツール(Browserify)、ユニットテスト(Jest)、構文チェック(ESLint)、型チェック(Flow)、データフローの最適化(Flux)、イミュータブルなデータ(immutableライブラリ)などを取り上げます。対象読者は、ES2015(ES6)の基本をマスターしているフロントエンド開発者。
Reactビギナーズガイド
―コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov 著、牧野 聡 訳
- TOPICS
- Programming , Web , JavaScript
- 発行年月日
- 2017年03月
- PRINT LENGTH
- 248
- ISBN
- 978-4-87311-788-1
- 原書
- React: Up & Running
- FORMAT
- Print PDF EPUB
関連ファイル
目次
まえがき 第Ⅰ部 基礎 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 イミュータブルなデータの操作 索引