React入門｜初心者向けにコンポーネント・props・state・イベント処理の基本を整理

先に要点

React は、画面を部品ごとに分けて作るための JavaScript ライブラリです。
初心者が最初に押さえたいのは、`コンポーネント` `props` `state` `イベント処理` の4つです。
state は変わる値、props は親から渡される値 と整理するとかなり分かりやすくなります。
最初から状態管理ライブラリや Next.js まで追わなくても、まずは小さな画面を React で組めるようになれば十分です。

React ってよく聞くけど、結局なにをするものなの？ JavaScript と何が違うの？

フロントエンドを学び始めると、かなり早い段階で React の名前が出てきます。
ただ、入門記事によっては最初から用語が多くて、コンポーネント props state Hooks が一気に出てきて混乱しやすいです。

この記事では、2026年4月14日時点の React 公式 Learn / Quick Start を確認しながら、React を初めて触る人向けに まず何が分かればよいか を絞って整理します。
あとで Next.js や Zustand に進む前提でも、ここを押さえておくとかなり楽になります。

Reactとは何か

React は、画面を小さな部品に分けて組み立てるための JavaScript ライブラリです。
ざっくり言うと、同じ見た目や動きをする部品を、再利用しやすくするための道具 です。

たとえば、ブログや業務画面を作るときには、次のような部品が何度も出てきます。

ボタン
ヘッダー
記事カード
メニュー
入力フォーム

これらを毎回バラバラに書くのではなく、部品として作って使い回す のが React の基本です。

JavaScriptだけで作るのと何が違うのか

JavaScript だけでも画面は作れます。
ただ、画面が大きくなると、

どこで何を書き換えているのか分かりにくい
同じ UI を何度もコピペしやすい
状態が変わったときの更新が追いにくい

という問題が出やすくなります。

React は、こうした問題を コンポーネント と 状態の管理 で整理しやすくしてくれます。

まず理解したい4つの基本

初心者は、最初から全部覚えなくて大丈夫です。
まずは次の4つが分かれば、かなり前に進めます。

1. コンポーネント

画面を部品として分ける考え方です。ボタンやカード、一覧などを再利用しやすくします。

2. props

親コンポーネントから子コンポーネントへ渡す値です。見た目や内容を変えるために使います。

3. state

画面の中で変わる値です。開閉状態、入力値、選択中の項目などに使います。

4. イベント処理

クリックや入力など、ユーザー操作に反応して state を変える処理です。

この4つを軸に見ると、React の全体像がかなり分かりやすくなります。

コンポーネントとは何か

React では、画面を 部品 として分けます。
たとえば記事一覧ページなら、こんなふうに分けられます。

ページ全体
記事カード
カテゴリラベル
検索フォーム
ページネーション

このとき、記事カード を1つのコンポーネントにしておけば、一覧の中で何度も再利用できます。

function ArticleCard() {
  return (
    <article>
      <h2>React入門</h2>
      <p>初心者向けに基本を整理した記事です。</p>
    </article>
  );
}

もちろん、これだけだと毎回同じ内容しか出ません。
そこで次に出てくるのが props です。

propsとは何か

props は、親から子へ渡す値です。
同じコンポーネントでも、渡す値を変えることで中身を変えられます。

function ArticleCard(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      <p>{props.excerpt}</p>
    </article>
  );
}

使う側ではこう書けます。

<ArticleCard
  title="React入門"
  excerpt="コンポーネント・props・stateの基本を整理します。"
/>

初心者向けに一言でまとめると、

props = 外から受け取る値
state = 自分の中で変わる値

です。

この区別が最初にかなり大事です。

stateとは何か

state は、画面の中で変わる値です。
たとえば次のようなものは state の代表例です。

メニューが開いているか
フォームに何が入力されているか
タブのどれが選ばれているか
件数をもっと表示するか

React では、useState を使ってこうした値を持てます。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

この例で大事なのは、count が変わると画面も変わることです。
React は state の変化をもとに、必要なところを再描画します。

propsとstateの違いをもう少し直感的に言うと

たとえば、店の商品カードを考えると分かりやすいです。

商品名や価格を親が渡す → props
「お気に入りにしたか」をそのカード内で持つ → state

つまり、props は受け取る情報、state は変化を持つ情報 です。

イベント処理とは何か

React では、クリックや入力に応じて処理を書けます。
これがイベント処理です。

function LikeButton() {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? 'お気に入り済み' : 'お気に入りする'}
    </button>
  );
}

ここでは、

ボタンを押す
onClick が動く
state が変わる
表示が変わる

という流れです。

React はこの 操作 → state変更 → 表示更新 の流れがかなり大事です。

React初心者が最初につまずきやすいところ

1. propsとstateが混ざる

これがかなり多いです。
外からもらう値 と 自分で変える値 が混ざると、何をどこで変えるべきか分からなくなります。

2. JavaScriptの文法で止まる

React が難しいというより、実は JavaScript の分割代入、配列、オブジェクト、関数、アロー関数で止まることがあります。
その場合は React より先に JavaScript の基本を補強した方が早いです。

3. いきなり大きなアプリを作ろうとする

ログイン、API、検索、状態管理、ルーティングを最初から全部入れると、一気に分からなくなります。
最初は、

ボタン
カウンター
タブ切り替え
フォーム入力
一覧表示

くらいの小さな UI から始める方が定着しやすいです。

実務ではReactをどう使うのか

実務で React がよく使われるのは、画面部品が多く、更新も多い Web アプリ です。

たとえば、

管理画面
ダッシュボード
会員向け画面
検索画面
条件切り替えが多い UI

のような場面です。

要するに、ただの静的ページ より、ユーザー操作に応じて表示がよく変わる画面 と相性がよいです。

一方で、SEO や配信まで含めて考えたい公開サイトでは、React 単体より Next.js のような枠組みまで使うことが多くなります。

最初はどこまで分かれば十分か

初心者の最初の目標は、次の状態です。

コンポーネントを作って分けられる
props で値を渡せる
useState で簡単な状態を持てる
クリックや入力で表示を変えられる
小さな一覧画面やフォームを作れる

ここまでできれば、React 入門としてはかなり十分です。
そのあとで、

ルーティング
API 通信
状態管理
Next.js

に進めばよいです。

最初から Redux や大規模設計まで追う必要はありません。

次に何を学ぶべきか

React の次に進む方向は、やりたいことで変わります。

画面中心のWebアプリを作りたい

この場合は、Next.js に進むのが自然です。
React の上に、ルーティング、SSR、配信の仕組みが入ってきます。

状態管理を整理したい

複数の画面や部品で状態を共有したくなったら、Context API や Zustand が候補になります。

APIとつなぎたい

外部 API や自作 API とつないで、一覧取得や登録処理を作る流れに進むと、実務感がかなり出てきます。

よくある誤解

Reactを覚えればすぐ何でも作れる？

React は画面づくりの土台として強いですが、ルーティング、認証、API、配信は別の知識も必要です。
React だけで全部終わるわけではありません。

Reactはフレームワーク？

一般にはよくフレームワークっぽく扱われますが、整理としては UIライブラリ と考える方が分かりやすいです。
その上に Next.js のようなフレームワークが乗るイメージです。

useStateだけ分かれば十分？

最初の入口としてはかなり重要ですが、props やコンポーネント分割とセットで理解した方が実務では役立ちます。

まとめ

React は、画面を部品として分けて再利用しやすくするための JavaScript ライブラリです。
初心者は、まず コンポーネント props state イベント処理 の4つに絞って理解するとかなり進みやすくなります。

最初から難しい概念を全部詰め込むより、ボタン、フォーム、一覧、切り替え表示のような小さな UI を作りながら覚える方が定着しやすいです。
次に進むなら、公開サイトや Web アプリ全体まで含めて学びたい場合は Next.jsは難しい？初心者がつまずきやすいポイントと学ぶ順番を整理、状態管理を整理したいなら Zustandとは？Reactの状態管理ライブラリの使い方とRedux・Context APIとの違いを解説がつながりやすいです。

参考リンク

React Learn: https://react.dev/learn
React Quick Start: https://react.dev/learn?quickstart=true
React Reference: https://react.dev/reference/react