次の方法で共有

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) を使用する必要があります。

重要

WSL を使用して Linux ディストリビューションをインストールすると、ファイルを格納するためのディレクトリが作成されます\\wsl\Ubuntu-20.04 (Ubuntu-20.04 が、使用している Linux ディストリビューションに置き換えられます)。 Windows ファイルエクスプローラーでこのディレクトリを開くには、WSL コマンド ラインを開き、cd ~ を使用してホーム ディレクトリを選択します。次に、explorer.exe . コマンドを入力します。NodeJS をインストールしたり、使用するファイルをマウントされた C ドライブ (/mnt/c/Users/yourname$) に保存したりしないように注意してください。 そのようにすると、インストールとビルドにかかる時間が大幅に長くなります。

React のインストール

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

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

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

  3. Vite を使用して React をインストールする方法:

    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 アプリの実行を停止できます。

注記

Vite には、Babel、esbuild、Rollup を使用したフロントエンド ビルド パイプラインが含まれますが、バックエンドのロジックまたはデータベースは処理しません。 Node.js バックエンドを使用する、サーバーでレンダリングされる Web サイトを React で構築したい場合は、シングルページ アプリ向けの Vite をインストールするのではなく Next.jsをインストールすることをお勧めします。 また、静的なコンテンツ指向の Web サイトを構築する場合は、Gatsby のインストールを検討することもできます。

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

その他のリソース