Reactの環境構築：Viteでアプリを作る方法

Reactをインストールするには、Viteで新しいプロジェクトを作ります。npm create vite@latest my-app -- --template react を実行し、続けて cd my-app、npm install、npm run dev を実行します。先にNode.jsをインストールしておく必要があります。ViteはReact、JSXのコンパイル、保存するとページを再読み込みする開発サーバーを準備してくれます。

学び始めるだけなら、どれも必要ありません。下のエディタはこのページの中でReactを動かします。Viteが生成する App.jsx ファイルを簡単にしたものです。

import { useState } from 'react';

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

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

ボタンをクリックしてから、見出しのテキストを変えてみてください。入力に合わせてプレビューが更新されます。Viteの開発サーバーがページを再読み込みせずに変更を差し替えるのと同じです（これが「HMR」、ホットモジュールリプレースメントの意味です）。

前提条件：Node.js

Reactアプリをビルドするツールは Node.js で動き、そのパッケージマネージャーであるnpmも一緒に入ります。Node.jsのWebサイトから、またはnvmのようなバージョン管理ツールで現在のLTS版をインストールし、ターミナルで確認してください。

node -v
npm -v

どちらのコマンドもバージョン番号を表示するはずです。node -v が古いバージョンを表示したらアップグレードしてください。Vite 8にはNode.js 20.19以降（22系なら22.12以降）が必要で、それより古いと警告が表示されます。

ViteでReactアプリを作る

プロジェクトを置いているフォルダで、次の4つのコマンドを実行します。

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

• npm create vite@latest は最新のプロジェクトジェネレーターをダウンロードします。my-app はフォルダ名で、--template react はJavaScriptの素のReactを選びます。間にある -- は、テンプレートのオプションをnpm経由でジェネレーターに渡すためのものです。
• npm install は、package.json に書かれたReact、React DOM、Vite、その他の依存関係を node_modules にダウンロードします。
• npm run dev は開発サーバーを起動し、ローカルのアドレス（通常は http://localhost:5173）を表示します。それをブラウザで開いてください。

その後、ジェネレーターは2つの質問をします。どのリンター（OxlintまたはESLint）を設定するか、そして今すぐアプリをインストールして起動するかです。2つ目に「はい」と答えると npm install と npm run dev を代わりに実行してくれるので、最後の2つのコマンドは省略できます。TypeScriptを使う場合は --template react-ts を使ってください。ReactとTypeScriptを参照してください。

Viteが作るファイル

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

特に重要なのは次の3つです。

index.html は、ブラウザが読み込むページです。その body には空の要素 <div id="root"></div> が1つと、src/main.jsx を読み込む script タグがあります。Reactはアプリ全体をこの div の中に描画します。

src/main.jsx はエントリーポイントです。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>,
);

createRoot は #root 要素を受け取り、その中のすべてをReactの管理下に置きます。render(<App />) はそこに一番上のコンポーネントを描画します。StrictMode は追加のチェックを行う開発用の補助で、本番ビルドでは何の効果もありません（Strict Modeを参照）。このファイルを編集することはほとんどありません。

src/App.jsx は最初のコンポーネントで、編集するのはこのファイルです。Vite版は3つの画像（ヒーロー画像とViteとReactのロゴ）と App.css をインポートし、最後に export default App があります。これは先頭で export default function App() と書くのと同じで、このページの例はその形を使っています。

最初の編集をする

src/App.jsx を開き、中身を削除して自分のコンポーネントに置き換えます。保存するとブラウザが更新されます。最初に打ち込む小さなアプリを用意しました。まずここで試してみてください。

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

export default function App() {
    const [name, setName] = useState('React');

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

入力欄に打つと、見出しがそれに続きます。次に、1つ目の下に2つ目の <Greeting name="Vite" /> を追加してみてください。コンポーネントは再利用でき、コピーごとに自分の name を受け取ります。

App.jsx が大きくなったら、コンポーネントを src/Greeting.jsx のような別ファイルに移してエクスポートし、使う場所でインポートします。その方法はコンポーネントのページで紹介しています。

本番用にビルドする

開発サーバーはコードを書いている間のためのものです。公開する準備ができたら、アプリをビルドします。

npm run build
npm run preview

npm run build はJSXをコンパイルし、コードをバンドルして圧縮し、静的ファイルを dist/ フォルダに書き出します。npm run preview はそのフォルダをローカルで配信するので、実際のビルドを確認できます。dist/ は任意の静的ホスティングにアップロードできます。ビルドではReactも本番モードに切り替わり、より速く、開発用の警告も出なくなります。

Create React Appは非推奨

長い間、標準的な始め方は npx create-react-app my-app でした。2025年2月にReactチームはCreate React Appを非推奨にし、もうメンテナンスされていません。古いチュートリアルの多くはまだこれを使っているので、react-scripts start や src/index.js というエントリーファイルを目にするでしょう。コンポーネント自体はViteのプロジェクトでも同じように動きます。

代わりに使うもの：

• Vite：クライアントサイドのアプリ、学習用のプロジェクト、ウィジェットに。上で紹介した手順です。
• フレームワーク：ルーティング、サーバーレンダリング、データ読み込みを組み込みで使いたいときに。Next.jsとReact Routerのフレームワークモードがよく選ばれます。

npx create-next-app@latest my-app
npx create-react-router@latest my-app

既存のCreate React AppプロジェクトをViteに移行する主な手順は次のとおりです。vite と @vitejs/plugin-react をインストールして react-scripts を削除します。Reactプラグインを読み込む vite.config.js を追加します。index.html を public/ からプロジェクトのルートに移し、%PUBLIC_URL% のプレースホルダーを削除して、エントリーファイル用の <script type="module" src="/src/index.jsx"> タグを追加します。JSXを含むファイルの拡張子を .jsx に変えます。REACT_APP_ の環境変数を VITE_ に名前を変え、import.meta.env から読み込みます。そして package.json の react-scripts のコマンドを vite、vite build、vite preview に置き換えます。

既存のページにReactを追加する

Reactがページ全体を管理する必要はありません。サーバーで描画されたショップのカートウィジェットのように、既存サイトの1つの要素の中に描画することもできます。それでもJSXをコンパイルするためにViteのようなバンドラーは必要です。2つのパッケージをインストールします。

npm install react react-dom

次に、Reactに管理させたい要素にルートを作ります。

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

#cart の外側はすべてそのままです。1つのページに要素ごとに複数のルートを作ることもでき、それぞれ独立して動きます。