速習 React

本書の特徴

手軽に学べる。初級者のためのReact解説書。

Reactは、Facebook開発の、現在人気のJavaScriptライブラリです。
フロントエンド開発にjQueryを使ってきたが、色々と複雑になってきた。jQueryだけでは却って大変だな、ちょっと機能が足りないな、と思っている方はいませんか？
そんな方に是非お勧めしたいのが、Reactです。
本書は、Reactの基本について、10のPartに分けてサンプルコードとともに詳しく解説しています。本書掲載のサンプルは、サポートページからダウンロード可能です。どんどん動かして試してみてください。

まとめて読んで更にスキルアップのこんな書籍

・Vue.jsを新しいAPI「Composition API」で学ぶ

「速習 Vue.js 3 - Composition API編」（WINGSプロジェクト）

・ビュー（見た目）に特化したシンプルなJavaScriptフレームワークVue.jsを素早くマスターしよう。

「速習 Vue.js 3」（WINGSプロジェクト）

・altJSのデファクトスタンダード「TypeScript」を素早くマスターしよう

「速習 TypeScript 第2版」（WINGSプロジェクト）

・今や習得必須なECMAScriptをサクッと学ぼう

「速習 ECMAScript 2018」（WINGSプロジェクト）

・JavaScript開発には欠かせないwebpackをサクッと学習

「速習 webpack」（WINGSプロジェクト）

・本格的なフロントエンド開発向けフレームワーク「Angular」に挑戦してみよう

「Angularアプリケーションプログラミング」（技術評論社）

・JavaScriptの基本知識をきちんと押さえよう

「改訂新版JavaScript本格入門　～モダンスタイルによる基礎から現場での応用まで」（技術評論社）

本書について取り上げていただいたブログさま

Contents

Part 1：イントロダクション: 　React登場の経緯
　　jQueryの問題点とポストjQueryへ
　　主なJavaScriptライブラリ／フレームワーク
　対象読者
　サンプルプログラムについて
Part 2：Reactの基本: 　React開発の準備
　　create-react-appの準備とアプリの作成
　　　［1］create-react-appをインストールする
　　　［2］プロジェクトを作成する
　　　［3］プロジェクトフォルダーの内容を確認する
　　　［4］アプリを起動する
　　補足：npm startコマンド
　サンプルアプリの内容を確認する
　　トップページの準備 - index.html
　　アプリを起動するためのエントリーポイント - index.js
　　アプリを構成するコンポーネント - App.js
　React要素のレンダリング
　　renderメソッドで直接タグを出力する
　　React要素を一定時間間隔で更新する
　補足：ブラウザーだけでReactアプリを実行する
Part 3：JSXの基本: 　JSXのルール
　　唯一のルート要素を持つこと
　　空要素は「～/>」で終えること
　　名前の異なる属性が存在する
　　コメント構文は利用できない
　テンプレートにJavaScript式を埋め込む - {…}
　　エスケープ処理を解除する
　　属性値を動的に設定する
　　　（1）属性値前後のクォートは付けない
　　　（2）style属性の指定にはオブジェクトを利用する
　　　（3）属性をまとめて設定する
　補足：JSXの実体
Part 4：コンポーネントの基本: 　関数コンポーネントとクラスコンポーネント
　コンポーネントへのパラメーターの引き渡し
　　さまざまな型の値をコンポーネントに渡す
　　オブジェクトを個々の属性に展開する
　　要素配下のテキストを引用する
　　コンポーネントを入れ子にする
Part 5：プロパティ型の検証（prop-types）: 　prop-typesの基本
　prop-typesの特殊なデータ型
　　（1）PropTypes.instanceOf
　　（2）PropTypes.oneOf
　　（3）PropTypes.oneOfType
　　（4）PropTypes.arrayOf
　　（5）PropTypes.shape
　プロパティ値の既定値を定義する
　補足：型定義のもうひとつの記法
Part 6：条件分岐と繰り返し処理: 　繰り返し処理
　　注意：リスト項目を特定するためのキー
　　リスト項目を変数に代入する
　条件分岐
　　「?:」演算子／「&&」演算子
　　即時関数
　　関数／メソッド
Part 7：イベント処理とState: 　イベント処理の基本
　　（1）イベントハンドラーを設定するのはonEvent属性
　　（2）bindの意味
　　（3）イベントオブジェクトを参照する
　bindのための他のアプローチ
　　（1）コンストラクターでbindする
　　（2）アロー関数で宣言する
　　（3）クラスプロパティを利用
　イベントハンドラーに引数を渡す
　イベントプーリング
　　イベントオブジェクトを維持する方法
　　　（1）特定の値だけを退避しておく
　　　（2）persistメソッド
　コンポーネントの状態を管理する - State
　　Stateの基本
　　子コンポーネント→親コンポーネントの情報伝達
　　フォーム操作の基本
　　補足：Uncontrolled Component
Part 8：フォームの実装: 　テキストエリア
　選択ボックス
　リストボックス
　ラジオボタン
　チェックボックス（単一）
　チェックボックス（複数）
　ファイル入力ボックス
Part 9：ライフサイクルメソッド: 　主なライフサイクルメソッド
　　コンポーネントの初期化 - constructor(props)
　　コンポーネントの描画 - render()
　　文書ツリーへの追加／破棄時 - componentDidMount()／ componentWillUnmount()
　　Props／Stateによる更新時 - shouldComponentUpdate(nextProps, nextState)
　　コンポーネントの再描画時 - componentDidUpdate(prevProps, prevState, snapshot)
　ライフサイクルメソッドの例
Part 10：ルーティング: 　ルーターの基本
　　ルーティング機能を管理するBrowserRouterコンポーネント
　　ルーティング設定を表すRouteコンポーネント
　　ルーティング経由のリンクを生成するLinkコンポーネント
　さまざまなルーティングの手法
　　　パスの一部をパラメータ―として引き渡す - ルートパラメーター
　　　ルートの記述順序
　　　現在のパスを強調表示する
　　　コンポーネントを入れ子に設置する
書籍情報: 　著者プロフィール
　基本情報
　サポートサイト

手軽に学べる。初級者のためのReact解説書。

まとめて読んで 更にスキルアップのこんな書籍

本書について取り上げていただいたブログさま

まとめて読んで更にスキルアップのこんな書籍