速習 React
山田祥寛 著
サポート終了
| 著者 | 山田祥寛 |
|---|---|
| 出版社 | WINGSプロジェクト |
| 価格 | 500円（税込） |
| 判形 | Kindle版・4色 |
| ページ数 | 151ページ |
| 発売日 | 2018年8月27日 |
| シリーズ | 速習（QUICK MASTER - WINGS） |
| 対象レベル | 初級 |
2022年10月、React Hooksに対応し、React 18の情報で書き直した「速習 React 第2版」（Kindle）を刊行しました。
手軽に学べる。初級者のためのReact解説書。
Reactは、Facebook開発の、現在人気のJavaScriptライブラリです。フロントエンド開発にjQueryを使ってきたが、色々と複雑になってきた。jQueryだけでは却って大変だな、ちょっと機能が足りないな、と思っている方はいませんか？
そんな方に是非お勧めしたいのが、Reactです。
本書は、Reactの基本について、10のPartに分けてサンプルコードとともに詳しく解説しています。本書掲載のサンプルは、サポートページからダウンロード可能です。どんどん動かして試してみてください。
更新履歴
- 正誤訂正：2021年5月4日 更新
目次
- 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コンポーネント
- さまざまなルーティングの手法
- パスの一部をパラメータ―として引き渡す - ルートパラメーター
- ルートの記述順序
- 現在のパスを強調表示する
- コンポーネントを入れ子に設置する
正誤表
| 該当頁 | 該当箇所 | 修正刷 |
|---|---|---|
| 訂正箇所 | 訂正事項 | 更新日 |
| p.- | 『「?:」演算子／「&&」演算子』の本文末尾 | - |
| 「&&」演算子は左辺がtrueの場合に（全体がtrueであることが明らかなので）右辺の実行をスキップします（ショートカット演算）。ここでは、この性質を利用しているわけです。 | 「&&」演算子は左辺がfalseの場合に（全体がfalseであることが明らかなので）右辺の実行をスキップします（ショートカット演算）。ここでは、この性質を利用してtrueの場合にのみ右辺を出力しているわけです。 | 2019/12/23 |
| p.- | ［リスト］MyCover.js（comp-nestプロジェクト） | - |
| export default class MyBook extends Component { | export default class MyCover extends Component { | 2021/05/04 |
FAQ
現在、FAQはありません。
ダウンロード
お問い合わせ
書籍に関するご質問や誤りのご報告、ご意見・ご感想などをお寄せください。
お問い合わせの前にFAQ・正誤表をご確認ください。すでに掲載済みの内容については個別回答が難しい場合があります。