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

このガイドでは、Vite フロントエンド ツールを使用して、Linux 用 Windows サブシステム (WSL) 上で実行されている Linux ディストリビューション (Ubuntu) に React をインストールする方法について説明します。

シングルページ アプリ (SPA) を作成し、Bash コマンドまたはツールを使用するか、Linux サーバーへの展開または Docker コンテナーの使用を計画している場合は、以下の手順に従うことをお勧めします。 React を使用したことがなく、ただ学んでみたいとお考えの場合は、Vite を使用して Windows に直接インストールすることもできます。

React の一般的な情報、React (Web アプリ)、React Native (モバイル アプリ)、React Native for Desktop (デスクトップ アプリ) の決定については、 React の概要を参照してください。

前提条件

• Windows 10 (バージョン 1903 以降、ビルド 18362 以降) または Windows 11 の最新バージョンをインストールします
• Linux ディストリビューション (Ubuntu など) を含む Linux 用 Windows サブシステム (WSL) をインストールし、WSL 2 モードで実行されていることを確認します。 これは PowerShell を開き、「wsl -l -v」と入力することによって確認できます。
• WSL 2 に Node.js をインストールする: この手順では、インストール用の Node Version Manager (nvm) を使用します。Vite を実行するために新しいバージョンの NodeJS を使用し、さらに新しいバージョンの Node Package manager (npm) を使用する必要があります。

React のインストール

WSL に完全な React ツールチェーンをインストールするには、Vite を使用することをお勧めします。

1. WSL コマンドライン (Ubuntu) を開きます。

2. 新しいプロジェクト フォルダーを作成し (mkdir ReactProjects)、そのディレクトリに移動します (cd ReactProjects)。

3. Vite を使用したインストール:

   npm create vite@latest my-react-app -- --template react
   

4. インストールが完了したら、新しいアプリのディレクトリ ("my-react-app" または任意の名前) に移動し (cd my-react-app)、依存関係をインストールしてから (npm install)、ローカル開発サーバーを起動します (npm run dev)。

   このコマンドは Node.js サーバーを起動し、アプリを表示する新しいブラウザー ウィンドウを起動します。 Ctrl + C キーを使用すると、コマンド ラインでの React アプリの実行を停止できます。

6. Web アプリを運用環境にデプロイする準備ができたら、npm run build を実行して、"dist" フォルダーにアプリのビルドを作成します。 「静的なサイトのデプロイ」で、さらに詳細を確認できます。

その他のリソース

• React のドキュメント
• Vite
• Next.js のインストール
• Gatsby をインストールする
• デスクトップ用 React Native をインストールする
• Windows での NodeJS のインストール
• WSL での NodeJS のインストール
• 「Using React in Visual Studio Code (Visual Studio Code での React の使用)」チュートリアルを試してください。
• React ラーニング パスを試す