Viteを使用したReactプロジェクトのセットアップと実行

これまで、個別のReactの例を扱ってきました。実際の開発現場では、Reactアプリケーションはプロジェクトとして、あらかじめ定義された構造とツールを用いて作成・実行されます。

この章では、Viteという高速かつ軽量で、本番プロジェクトでも一般的に使用される最新のビルドツールを使って、Reactプロジェクトの作成と実行方法を学びます。

Viteを使ったReactプロジェクトの作成

新しいReactプロジェクトを作成するには、ターミナルを開いて次のコマンドを実行します：

npm create vite@latest

プロンプトに従って以下を入力します：

1. プロジェクト名の入力
2. フレームワークの選択 → Reactを選択
3. バリアントの選択 → JavaScriptを選択

セットアップが完了したら、プロジェクトフォルダに移動します：

cd project-name

プロジェクトの依存関係をインストールします：

npm install

開発サーバーの起動

Reactの開発サーバーを起動するには、次のコマンドを実行します：

npm run dev

このコマンドを実行すると：

• Viteがローカル開発サーバーを起動
• ターミナルにローカルURL（通常はhttp://localhost:5173）が表示
• このURLをブラウザで開くとReactアプリが表示

コードに加えた変更は自動的にブラウザに反映されます。

何が起こったのかの理解

開発サーバーを実行すると：

• Vite が React コードをバンドル;
• React がアプリケーションをブラウザにレンダリング;
• アプリが開発モードに入り、迅速なフィードバックに最適化。

これで実際の React プロジェクトがローカルで動作しています。