React という名前はよく聞くけれど、結局何をするものなのかが分かりにくい、という方に向けた記事です。

言葉の説明だけだとイメージしにくいので、2026年11月に React 19.3 で小さなコンポーネントを作り、変換結果やテストの出力を見ながら確かめました。

React は画面を部品で組み立てる JavaScript のライブラリ

React の公式ドキュメントでは、React は「ユーザーインターフェース(UI)を描画するための JavaScript ライブラリ」と説明されています。

UI はボタン・文字・画像のような小さな単位から作られている、とも書かれています。

出典: Describing the UI - React

この小さな単位を、React では「コンポーネント」と呼びます。

ボタンやフォーム、ヘッダーなどをコンポーネントとして作り、それを組み合わせて1つの画面にする、というのが React の基本的な考え方です。

読み方はリアクト、React.js も同じもの

React は「リアクト」と読みます。

「React.js」「ReactJS」「React JavaScript」と書かれることもありますが、どれも同じ React のことです。

npm のパッケージ名は react で、画面(ブラウザの DOM)に表示する部分は react-dom という別のパッケージになっています。

確かめた環境

• Node.js 22.23.4(Docker の node:22)
• React 19.3.1・react-dom 19.3.1(2026-11-07 に npm view react version で見た最新版も 19.3.1 でした)
• Vite 8.3.6(npm create vite@latest の react テンプレート)
• Vitest 5.1.0・Testing Library(@testing-library/react 16.3.3)・jsdom 31.0.0
• 画面の確認は Chromium 156

コンポーネントは関数で書く

ボタンを押した回数を数えるだけのコンポーネントを作りました。

// src/Counter.jsx
import { useState } from 'react';

export default function Counter({ label }) {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{label}: {count}回</p>
      <button onClick={() => setCount(count + 1)}>押す</button>
    </div>
  );
}

コンポーネントは、画面の中身を返す JavaScript の関数です。

label は親から受け取る値で、React では props と呼びます。

useState は、コンポーネントが覚えておく値(ここでは押した回数)を持つための仕組みです。

return の中の HTML のような部分は JSX という書き方で、そのままではブラウザで動きません。

JSX は jsx() の呼び出しに変換される

JSX が何になるのかを見るために、Vite でこのファイルだけを圧縮なしでビルドしました。

npx vite build --ssr src/Counter.jsx --outDir ssr-out --minify false

出力は次のとおりです。

import { useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
// src/Counter.jsx
function Counter({ label }) {
	const [count, setCount] = useState(0);
	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("p", { children: [
		label,
		": ",
		count,
		"回"
	] }), /* @__PURE__ */ jsx("button", {
		onClick: () => setCount(count + 1),
		children: "押す"
	})] });
}
export { Counter as default };

<div> や <button> が、jsx("button", { ... }) のような関数の呼び出しに変わっています！

JSX は HTML ではなく、「この要素をこういう中身で作ってほしい」という指示を書くための書き方だと分かります。

onClick も、HTML の属性ではなく関数としてそのまま渡されています。

ボタンを押すと、変わった文字だけが書き換わる

React の大きな特徴は、値(状態)を変えると画面が自動で書き換わることです。

Vitest と Testing Library で、ボタンを2回押したときの動きを確かめました。

// src/Counter.test.jsx(抜粋)
it('ボタンを押すと数字だけが変わる', () => {
  render(<Counter label="クリック" />);
  const p = screen.getByText(/クリック/);
  expect(p.textContent).toBe('クリック: 0回');
  fireEvent.click(screen.getByRole('button', { name: '押す' }));
  fireEvent.click(screen.getByRole('button', { name: '押す' }));
  expect(p.textContent).toBe('クリック: 2回');
  expect(screen.getByText(/クリック/)).toBe(p);
});

 ✓ src/Counter.test.jsx > Counter > renderToString で HTML になる 4ms
 ✓ src/Counter.test.jsx > Counter > ボタンを押すと数字だけが変わる 38ms

 Test Files  1 passed (1)
      Tests  2 passed (2)

テストは通りました。

コードの中で書いたのは setCount(count + 1) だけで、<p> の文字を書き換える処理は書いていません。

それでも表示は「0回」から「2回」に変わりました！

また、最後の行で、押す前に取った <p> と押した後の <p> が同じ要素であることも確かめています。

<p> を作り直したのではなく、同じ要素の中の文字だけが書き換わった、ということです。

ブラウザでも、Counter を1つ表示するだけのページを作って確かめました。

押す前は「0回」です。

「押す」を2回押すと、「2回」に変わりました。

jQuery などで「この要素の文字を書き換える」と自分で書いていた部分を、React が代わりにやってくれるイメージです (・∀・)

サーバーで HTML にすることもできる

同じコンポーネントを、react-dom/server の renderToString で HTML の文字列にしました。

import { renderToString } from 'react-dom/server';

const html = renderToString(<Counter label="クリック" />);
console.log(html);

<div><p>クリック<!-- -->: <!-- -->0<!-- -->回</p><button>押す</button></div>

<!-- --> は、文字のつなぎ目に React が入れた目印のコメントです。

Next.js などのフレームワークは、この仕組みを使ってサーバー側で HTML を作っています。

Vite で作った React アプリの HTML は空っぽ

npm create vite@latest で作ったアプリを npm run build すると、dist/index.html は次のようになりました。

npm create vite@latest app -- --template react --no-interactive
cd app
npm install
npm run build

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>app</title>
    <script type="module" crossorigin src="/assets/index-DSXtc1GT.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-DykytF2W.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

<body> の中は <div id="root"></div> だけで、文字は1つもありません。

では、画面の中身はどこにあるのでしょうか？

画面の中身は、読み込まれた JavaScript(このとき 222.44 kB、gzip で 69.28 kB)が、ブラウザの中で作ります。

ビルドした dist を npm run preview で配信してブラウザで開くと、HTML には書かれていない見出しやボタンが表示されました。

入口の src/main.jsx には、この root に React のアプリを表示するコードが書かれていました。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

ブラウザで動く画面を作るのは得意ですが、HTML にあらかじめ文字を入れておきたい場合は、さきほどの renderToString のような仕組みを持つフレームワークを使うことになります。

参考:React を始める方法と、React の今の運営

以前は Create React App(create-react-app)で始めるのが定番でしたが、React チームは2025年2月に、新しいアプリでの Create React App を非推奨にしたとのことです。

代わりに、Next.js・React Router・Expo などのフレームワークか、Vite・Parcel・Rsbuild などのビルドツールを使うよう案内されています。

出典: Sunsetting Create React App - React

また、React はもともと Meta(旧 Facebook)が作ったライブラリですが、2026年2月に、Linux Foundation の下にできた React Foundation へ移ったと発表されています。

React・React Native・JSX は、Meta ではなく React Foundation のものになったとのことです。

出典: The React Foundation: A New Home for React Hosted by the Linux Foundation - React

おわりに

React は、画面をコンポーネントという部品に分けて作り、値が変わったら変わったところだけを書き換えてくれるライブラリでした。

JSX が関数の呼び出しに変わるところを一度見ておくと、「HTML の中に JavaScript を書いている」のではなく「JavaScript で画面の作り方を書いている」ことがつかみやすいと思います。

React を動かすには、開発とビルドのときに Node.js が必要です。

Node.js のバージョンを切り替えたいときは、こちらの記事も参考にしてください。

→ Node.jsのバージョンの切り替え方法

Laravel と組み合わせて React を使う方法は、こちらで書いています。

→ Inertia.jsの基本的な書き方を流れで紹介します

まずは小さなコンポーネントを1つ作って、動かしてみてください！