Reactの基本が分かったら、実務に必要な周辺技術へ進みます。この記事では何から学ぶべきかを「目的別」に整理し、学習順の迷子を防ぎます。
次の壁：複数ページ（ルーティング）
React単体は画面の部品化が得意ですが、URLごとにページを切り替えるにはルーティングが必要です。代表的なのが React Router です。
学ぶとできること：
/は一覧、/todos/:idは詳細- 戻る/進むが自然に動く
- URL共有ができる
次の壁：API通信（バックエンド連携）
TODOをサーバに保存したい場合、API通信が必要です。最初は fetch でOKです。
学ぶとできること：
- GETで一覧取得
- POSTで追加
- DELETEで削除
- ローディング/エラー表示
API通信は「状態管理」とセットで扱うと実務的です。
次の壁：状態管理（アプリが大きくなると必要）
stateが増えると「どこで何を持つか」が課題になります。最初は次の順で十分です。
- コンポーネント内のuseState
- 親で持ってpropsで渡す（リフトアップ）
- Context API（小〜中規模）
- Redux / Zustand など（規模・チームにより）
重要なのは「いきなり大きい道具を使わない」ことです。
次の一歩：おすすめの小プロジェクト
入門の次にちょうど良い練習題材です。
- メモアプリ（CRUD + localStorage）
- 検索付き一覧（filter + debounce）
- 簡易管理画面（API + 表 + ページング）
「小さく作って改善」を繰り返すと、Reactの理解が実戦化します。
コメント