React逆引きリファレンス – 実装から逆にたどる、Reactリファレンス。

基本構文と使い方

3

JSXの書き方 JSXでclass名を指定するコメントの書き方

値受け渡し

4

propsでコンポーネントを再利用するデフォルトpropsを設定する propsに型をつけるユニオンタイプを使ったpropsの定義

ステートと副作用

4

useStateで状態を管理する useEffectで最初に１回実行する useEffectで最後に１回実行する useRefの使い所

イベント処理

4

onClickで関数を呼び出す引数付きイベント関数フォームのsubmitイベントキーボードイベントの取得

コンポーネント設計

3

関数コンポーネントの定義複数要素を返すコンポーネントの書き方配列を返すコンポーネントの書き方

スタイリング

4

条件によるスタイル切り替え styled-componentsでスタイルを定義する CSS Modulesの使い方 className による CSS 適用

コンテキスト

2

useContextで値を共有する方法 useContextでHttpClient(axios)を共有するサンプル

条件分岐・表示切り替え

4

if文での条件分岐 switch文での分岐三項演算子で条件分岐 if文の代替：短絡評価（`&&`）

繰り返し・ループ

1

繰り返しでのコンポーネント描画

ルーティング

4

ルーティングの実装リンク遷移とコンポーネント<Link>ルートパラメータの取得ネストされたルート

フォーム処理

5

入力フォームの双方向バインディング複数のinputをまとめて処理するラジオボタンの制御チェックボックスの制御フォームのバリデーション

再利用・カスタムフック

3

ロジックの共通化カスタムフックをイベントで起動カスタムフックを使ったAPIの実装

状態管理

4

状態管理ライブラリ5選Zustand状態管理ライブラリ「Zustand」について Zustandのインストールと基本設定 Zustandのデータ永続化

テスト

4

ユーザー操作をテストする方法（`fireEvent`, `userEvent`）Jest + React Testing Library の基本構成テストの実行方法（Jest + React Testing Library）コンポーネントのテスト実装例

パフォーマンス最適化

6

不要な再レンダリングを防ぐテクニック useMemoの使い方 useMemo利用時の注意事項 useCallback の使い方 useCallback利用時の注意事項 useMemo と useCallback の違いと使い分け

よくあるTips・トラブル対応

4

ページが真っ白になるときの対処法 useEffectが無限ループになる keyの警告が出る理由とその対処法 propsが渡ってこないときの原因と対策