【無料で読める】はじめてのReact – JavaScript初心者でもできるWebフロントエンド入門

フロントエンドJavaScriptという言葉をご存知でしたら一度はReactという単語について聞いたことがあるのではと思います。

そうでなくても、サクサク動くWebアプリ、例えばTwitterなどを一度は使用したことがあるはずです。

画面を移動することをしなくてもキーワードを入れるだけで検索候補を表示したり、新しい情報を画面に簡単に追加したり、

Webサイトに従来では考えられないような多様な機能を追加することができるのがReactの特徴です。

本書はそんなReactをとりあえず始めてみたい。どんなことができるのか知りたい、実際にコードを動かして理解したいという人に向いた本当の入門書です

1. Reactについて

1.1 Reactとは？
1.2 Webフロントエンドとは？
1.3 従来のWebフロントエンドの何が問題だったのか？
1.4 Reactをマスターするための抑えておきたいポイント

2. 環境構築なしでReactをはじめる
2.1 CodePenを使う
2.2 CDNからReactを読み込む
2.3 Reactのコンポーネントを作成してマウントする

3. ES6とBabel

3.1 ES6
3.2 Babel
3.3 JSX
3.4 props
3.5 state
3.6 仮想DOM
3.7 propsとstateを利用したコンポーネント間での値の受け渡し
3.8 Reactとリスト
3.9 フォームの扱い

コラム – Reactの採用実績
コラム – Reactのライセンス
コラム – ローカルファイルからデモを実行する

4. Reactのライフサイクル

4.1 ライフサイクルとは？
4.2 マウント時
4.3 更新時
4.4 破棄時
4.5 エラー発生時
5. Reactと非同期HTTP

5.1 Reactとfetch API
5.2 なぜReactで非同期HTTPが重要なのか？
5.3 外部のAPIからUIを構築する
コラム async/awaitでfetchを使用する

6. create-react-app

6.1 ビルドツールの必要性
6.2 環境構築
6.3 create-react-app
6.4 Reactを実運用で使う場合のJSファイルの配信方法

7. サードパーティコンポーネントの利用

7.1 Reactのエコシステム
7.2 react-modal
7.3 react-dates

8. Reactとスタイルシート

8.1 Reactとインラインスタイル
8.2 ReactとCSS
8.3 UIモジュールとそのCSSをインポートする

9. 実用的なSPAを作ってみる

9.1 SPAとは？
9.2 SPAが従来のWebページと異なる点
9.3 SPAをReactで作成する