Linux 用 Windows サブシステムに React をインストールする

このガイドでは、 Vite フロントエンドツールを使用して WSL (Linux 用 Windows サブシステム) に React 開発環境を設定する手順について説明します。

Linux サーバーへのデプロイ、Docker コンテナーの使用、Bash ベースのツールの使用を計画している場合は、WSL をお勧めします。 React を初めて使用し、すぐに開始したい場合は、代わりに Windows に React を直接インストールすることを検討してください。

React の背景と、Web アプリ、モバイルアプリ (React Native)、ネイティブデスクトップアプリ (React Native for Desktop) など、さまざまなシナリオについては、React の概要を参照してください。

前提条件

WSL 2: Linux ディストリビューション (Ubuntu 推奨) を使用して WSL をインストールし、WSL 2 モードで実行されていることを確認します: wsl -l -v。 Windows 10 バージョン 2004 以降または Windows 11 が必要です。
WSL 2 のNode.js: nvm を使用して WSL ディストリビューション内に Node.js をインストールします。 WSL 内で Windows にインストールされているバージョンの Node.js を使用しないでください。

重要

マウントされた Windows ドライブ (~/projects) ではなく、WSL ファイルシステム (/mnt/c/ など) 内にプロジェクトファイルを格納します。ファイルシステムの境界を越えて作業すると、インストールとビルドの時間が大幅に遅くなります。

WSL ターミナル (Ubuntu など) を開きます。
新しいプロジェクトフォルダーを作成し、次のように入力します。
```
mkdir ~/ReactProjects
cd ~/ReactProjects
```
Vite を使用して新しい React アプリを作成します。
```
npm create vite@latest my-react-app -- --template react
```
Vite は、 my-react-app フォルダー内の新しい React プロジェクトをスキャフォールディングします。
新しいアプリフォルダーに移動し、依存関係をインストールします。
```
cd my-react-app
npm install
```
ローカル開発サーバーを起動します。
```
npm run dev
```
アプリは http://localhost:5173で利用できるようになります。 Ctrl + C キーを押してサーバーを停止します。
デプロイする準備ができたら、運用バンドルをビルドします。
```
npm run build
```
出力は、 dist フォルダーに配置されます。ホスティングオプションについては、「静的サイトの展開」を参照してください。

注記

Vite は、シングルページアプリ (SPA) に最適です。サーバー側のレンダリングまたは Node.js バックエンドが必要な場合は、代わりにNext.js することを検討してください。静的サイトの生成については、 Gatsby を参照してください。

このページはお役に立ちましたか?