Reactは、Facebook開発の、現在人気のJavaScriptライブラリです。フロントエンド開発にjQueryを使ってきたが、色々と複雑になってきた。jQueryだけでは却って大変だな、ちょっと機能が足りないな、と思っている方はいませんか？そんな方に是非お勧めしたいのが、Reactです。本書は、Reactの基本について、10のPartに分けてサンプルコードとともに詳しく解説しています。本書掲載のサンプルは、サポートページ（https://wings.msn.to/index.php/-/A-03/WGS-JSF-004/）からダウンロード可能です。どんどん動かして試してみてください。【目次】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 ComponentPart 8：フォームの実装 テキストエリア 選択ボックス リストボックス ラジオボタン チェックボックス（単一） チェックボックス（複数） ファイル入力ボックスPart 9：ライフサイクルメソッド 主なライフサイクルメソッド コンポーネントの初期化 - constructor(props) コンポーネントの描画 - render() 文書ツリーへの追加／破棄時 - componentDidMount()／ componentWillUnmount() Props／Stateによる更新時 - shouldComponentUpdate(nextProps, nextState) コンポーネントの再描画時 - componentDidUpdate(prevProps, prevState, snapshot) ライフサイクルメソッドの例 Part 10：ルーティング ルーターの基本 ルーティング機能を管理するBrowserRouterコンポーネント ルーティング設定を表すRouteコンポーネント ルーティング経由のリンクを生成するLinkコンポーネント さまざまなルーティングの手法 パスの一部をパラメータ―として引き渡す - ルートパラメーター ルートの記述順序 現在のパスを強調表示する コンポーネントを入れ子に設置する 書籍情報 著者プロフィール 基本情報 サポートサイト【著者プロフィール】山田 祥寛（やまだ よしひろ）Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGS プロジェクト」の代表でもある。主な著書に「速習 EcmaScript2018」「速習 webpack」「速習 Vue.js」「速習 ASP.NET Core」「速習 TypeScript」（WINGSプロジェクト・Kindle版）、「改訂新版JavaScript本格入門」「Angularアプリケーションプログラミング」（技術評論社）、「独習C# 新版」「独習PHP 第3版」（翔泳社）、「はじめてのAndroidアプリ開発 第2版」（秀和システム）など。https://wings.msn.to/
Author: Yoshihiro Yamada