Web開発
セクション 32 / 40
React
画面を“部品（ブロック）”で組み立てる
React（リアクト）は、Webの画面を“部品（コンポーネント）”を組み合わせて作るための道具です。レゴブロックのように、小さな部品を組み立てて画面を作ります。
なぜ便利？
- 「ボタン」「カード」「ヘッダー」などを部品にして、何度も使い回せる。
- 同じ部品を直せば、使っている場所すべてに反映される（修正がラク）。
- データが変わると画面が自動で更新される（例：「いいね」を押すと数字がすぐ変わる）。
たとえば商品一覧なら、「商品カード」という部品を1つ作って、データの数だけ並べるだけ。1個ずつ手で作らなくてよくなります。
このサイトもReactの部品でできている
あなたが見ているサイドバーやクイズも、それぞれ“部品（コンポーネント）”です。
次のNext.jsの土台
Reactは“表側（フロント）”の代表格。次に学ぶNext.jsは、このReactをさらに便利に使うための土台です。
理解度チェック
すべて正解すると、次のセクションが開きます（はい・いいえ）。
Q1.Reactは、画面を“部品（コンポーネント）”を組み合わせて作る道具である。
Q2.部品を使い回せるので、同じ見た目を何度も手作りせずに済む。
Q3.Reactでは、データが変わっても画面は自動では変わらない。
すべての問いに「はい・いいえ」で答えると押せます