React.jsの本がありました。
目次を見て、並んでいる項目によって、筆者の考えているReact.jsの学習順序が分かります。
こういう順番で理解を進めて行けば、スムーズになるのかな？と。
その他の本も参考にして、プログラミング学習がスムーズになるように工夫したいです。
- React.js&Next.js超入門 第2版
- 目次
- 書評
React.js&Next.js超入門 第2版
目次
Chapter 1 Reactを準備しよう！
1-1 Reactを動かそう！
フロントエンドとバックエンド
複雑な画面表示を支える技術
JavaScriptの開発って？
Reactってなに？
必要なのはNode.jsと「npm」
開発ツールは必要か？
HTMLファイル1つでReactアプリ！
Reactの最新版はver. 17
Reactでメッセージを表示しよう
表示を更新しよう
1-2 プロジェクト開発をしよう
Node.jsを用意しよう
Windows版のインストール
macOS版のインストール
Create React Appを使おう
プロジェクト操作のコマンドについて
プロジェクトを実行してみる
プロジェクトの中身をチェック！
プロジェクトをビルドしよう
React Developer Toolsを使おう
スタンドアロン版について
スタンドアロン版を動かす
1-3 Visual Studio Codeを用意しよう
開発ツールの準備について
Visual Studio Codeの日本語化
入力支援機能について
ターミナルについて
この章のまとめ
Chapter 2 JSXをマスターしよう！
2-1 Reactの基本を復習しよう
HTMLファイルの内容をチェック！
DOMの仕組みを理解しよう
表示作成の基本スクリプト
スクリプトを分離しよう
複雑な表示を作るには？
2-2 Bootstrapでデザインしよう
ページのデザインはどうする？
CDNでBootstrapを使う
ReactエレメントでBootstrapを使う
Bootstrapのテキスト表示クラス
フォームの表示
その他の重要なコンテンツについて
2-3 JSXを使おう！
JSXを準備しよう
JSXを書いてみよう！
JSXに値を埋め込む
属性の値を設定する
スタイルの設定
関数でJSXを作る
2-4 JSXの構文的な使い方
条件で表示する
真偽値による表示の切り替え
配列によるリストの表示
mapを使った表示の繰り返し
アロー関数を活用しよう
2-5 表示の更新とイベント
表示を更新する
更新が動かない！
クリックして更新する
フォームの値を利用する
この章のまとめ
Chapter 3 コンポーネントをマスターしよう！
3-1 コンポーネントを作ろう
コンポーネントってなに？
シンプルな「関数」コンポーネント
コンポーネントを表示しよう
「属性」を利用しよう
計算するコンポーネント
関数からクラスへ！
コンポーネントのクラス
簡単なコンポーネントを作ってみよう
属性を利用する
3-2 プロジェクトでコンポーネント開発！
プロジェクト、再び！
プロジェクトの表示用ファイルについて
index.htmlについて
index.jsについて
Appコンポーネントについて
Appコンポーネントを書き換えよう
属性を利用する
コンポーネントを別ファイルにする
3-3 ステートを使いこなそう
ステートを利用しよう
ステートを用意する
ステートの更新
イベントをバインドしよう
ステートで表示を切り替える
プロパティとステートの連携
リスト表示コンポーネント
3-4 コンポーネントの様々な機能
子エレメントを活用するには？
フォームの利用
値のチェックを行うには？
コンポーネントのイベント作成
onCheckイベントを持ったコンポーネント
コンテキストについて
コンテキストを使おう
Providerでコンテキストを変更する
コンテキストでテーマを作る
この章のまとめ
Chapter 4 フックで状態管理しよう！
4-1 フックを使ってみよう
クラスから関数へ！
フック（Hooks）とは？
ステートフックについて
フックでステートを表示する
ステートで数字をカウントする
ステートは複数作れる！
あらゆる値は「ステート」で保管する
4-2 関数コンポーネントを使いこなす
属性で値を渡す
双方向に値をやり取りする
フォームを利用する
4-3 副作用フックの利用
更新時に処理を実行する
複数の副作用フック
副作用のスキップ
4-4 独自フックを作ろう
関数コンポーネントの汎用性
独自フックの基本
数字をカウントするフックを作る
より複雑な操作を行うフック
アルゴリズムをフックに抽出する
useCalcで各種の計算を行う
4-5 ステートフックの永続化
ステートはリロードで消える！
ローカルストレージに保管するフックを作る
usePersistフックでデータを保存する
4-6 簡易メモを作る！
フックを使ってメモアプリを作る
App.jsを作成する
MemoPageコンポーネントを作る
Memoコンポーネントを作る
Itemコンポーネントを作る
AddFormコンポーネントを作る
DelFormコンポーネントを作る
FindFormコンポーネントを作る
この章のまとめ
Chapter 5 Next.jsでReactをパワーアップ！
5-1 Next.jsを使おう
Reactの限界
Next.jsってなに？
Next.jsプロジェクトを作ろう
プロジェクトの構成をチェック！
Next.jsは「pages」でページを用意する
ページを作ろう！
index.jsを作成しよう
スタイルを適用する
styled-jsxを使おう！
CSSファイルは「styles」フォルダで！
<head>をコンポーネント化しよう
5-2 複数ファイルを活用しよう
複数のページを作ろう
レイアウトを考えよう
レイアウト用コンポーネントの作成
ページでレイアウトを利用する
静的ファイルの利用
Imageコンポーネントを利用する
5-3 外部データを利用しよう
サーバーからデータを取得する
JSONデータを用意しよう
SWRを利用する
useSWRでステートを用意する
テキストデータはエラーになる？
Web APIについて
hello APIをチェックする
データ用コンポーネントを用意する
hello APIにidパラメータを追加する
hello APIをページから利用する
[id].jsでIdパラメータを処理する
複数パラメータの取得
[...params].jsを利用する
5-4 プログラマブル電卓を作ろう
計算履歴を記録する電卓アプリ
作成するスクリプトについて
Funcモジュールを作る
func APIを作成する
Calcコンポーネントを作る
Calcコンポーネントの内容をチェック！
この章のまとめ
Chapter 6 FirebaseでReactをパワーアップ！
6-1 Firebaseでデータベース！
Firebaseって何？
Firebaseってどういうもの？
Firebaseプロジェクトを作る
「プロジェクトの概要」をチェック！
「Web」アプリを追加する
Firebase SDKのコードはどこに？
Firebase SDKのコードについて
6-2 Firestoreデータベースを使おう
Cloud FirestoreとRealtime Database
データベースを作ろう
Firestore画面について
Firestoreのデータ構造
データを作成しよう
セキュリティルールの修正
6-3 JavaScriptからFirestoreを利用する
ReactでFirebaseを使おう！
Fireコンポーネントを用意しよう
Firestoreアクセスの手順
fire/index.jsを作成する
Firestoreアクセスの流れ
なぜ、useEffectを使うのか？
ドキュメントの作成
ドキュメントの新規作成処理について
ページのリダイレクト
ドキュメントの削除
ドキュメントの検索
検索ページを作る
6-4 Authでユーザー認証しよう
ユーザー認証ってなに？
ユーザー認証の設定
Authenticationによる認証の基本処理
Googleによるログインを利用する
Firestoreをログイン必須にする
ログインしたらFirestoreを表示する
6-5 メッセージが送れるアドレスブック
メッセージ機能付きアドレス帳
アプリの設計をしよう
index.jsを作成する
add.jsを作成する
info.jsを作成する
これから先はどうするの？
Addendum JavaScript超入門！
A-1 JavaScriptの基本を超簡単おさらい！
この章の目的は？
この章で説明すること
値と変数について
文の終わりについて
制御構文について
配列について
「関数」について
アロー関数について
オブジェクトについて
オブジェクトを使う
メソッドについて
クラスを使おう！
Reactのために必要な知識とは？
書評
目次を見ると、React.jsの学習要素や順番が見えてきます。
最初からフックを学んでも良いのかもしれませんが、歴史的な経緯を知っておく意味で、コンポーネントの使い方が先に来ているのかと思います。
本書を参考にして、React.jsの学習方法を検討してみたいと思います。
