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 Windows (デスクトップ アプリ) のどれを使うかの決定については、「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 を使用することをお勧めします。
WSL コマンドライン (Ubuntu) を開きます。
新しいプロジェクト フォルダーを作成し (
mkdir ReactProjects)、そのディレクトリに移動します (cd ReactProjects)。Vite を使用したインストール:
npm create vite@latest my-react-app -- --template reactインストールが完了したら、新しいアプリのディレクトリ ("my-react-app" または任意の名前) に移動し (
cd my-react-app)、依存関係をインストールしてから (npm install)、ローカル開発サーバーを起動します (npm run dev)。このコマンドは Node.js サーバーを起動し、アプリを表示する新しいブラウザー ウィンドウを起動します。 Ctrl + C キーを使用すると、コマンド ラインでの React アプリの実行を停止できます。
Note
Vite には、Babel、esbuild、Rollup を使用したフロントエンド ビルド パイプラインが含まれますが、バックエンドのロジックまたはデータベースは処理しません。 Node.js バックエンドを使用する、サーバーでレンダリングされる Web サイトを React で構築したい場合は、シングルページ アプリ向けの Vite をインストールするのではなく Next.jsをインストールすることをお勧めします。 また、静的なコンテンツ指向の Web サイトを構築する場合は、Gatsby のインストールを検討することもできます。
- Web アプリを運用環境にデプロイする準備ができたら、
npm run buildを実行して、"dist" フォルダーにアプリのビルドを作成します。 「静的なサイトのデプロイ」で、さらに詳細を確認できます。
その他のリソース
Windows developer