まずは、これだけ
Reactは、画面を小さな部品に分け、データの変化に合わせて表示を更新するためのJavaScriptライブラリ。
画面をコンポーネントへ分けて考える
Reactでは、ボタン、検索欄、商品カード、ヘッダーなどをコンポーネントという単位で作ります。小さな部品を組み合わせて、大きな画面を構成します。
分けて作る
役割ごとに小さな部品へ整理する。
組み合わせる
部品を親子関係で組み、大きな画面にする。
再利用する
同じ見た目や動きを別の場所でも使う。
状態が変わると、必要な表示を更新する
状態とは、入力中の文字、選択されたタブ、カートの商品数など、画面が覚えている現在のデータです。Reactでは状態が変わると、その状態を使う画面を改めて計算し、表示へ反映します。
1操作ボタンや入力
2状態変更データが変わる
3再計算表示内容を決める
4比較必要な変更を探す
5更新画面へ反映する
Reactが向いている画面
操作やデータの変化が多く、同じ部品を繰り返し使うWebアプリで力を発揮します。管理画面、SNS、ECサイト、予約画面などが代表例です。
操作が多い
入力や選択に合わせて画面が頻繁に変化する。
部品が多い
カードやフォームを何度も再利用する。
チーム開発
部品単位で担当やテストを分けやすい。
反対に、数ページの会社案内や文章中心の記事ページなら、Reactを使わずHTML・CSS・JavaScriptで作るほうが単純な場合もあります。
Reactだけでアプリのすべてが揃うわけではない
Reactが主に担当するのは画面作りです。ページのURL構成、データの取得方法、公開用ビルド、サーバー処理などは、別の道具やNext.jsのようなフレームワークと組み合わせます。
また、コンポーネントを細かく分けすぎたり、状態を必要以上に増やしたりすると、かえって追いづらくなります。部品化は目的ではなく、変更しやすい画面を作るための手段です。
ここまでのまとめ
Reactは「部品」と「状態」を使い、データに応じて変化する画面を整理して作るための道具です。