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

  • [アーティクル]

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

シングルページ アプリ (SPA) を作成し、Bash コマンドまたはツールを使用するか、Linux サーバーへの展開または Docker コンテナーの使用を計画している場合は、以下の手順に従うことをお勧めします。 React を使用したことがなく、学習に興味を持っている場合は、create-react-app を使用して 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) を使用します。create-react-app を実行するために新しいバージョンの NodeJS を使用し、さらに新しいバージョンの Node Package manager (npm) を使用する必要があります。 正確なバージョン要件については、「React アプリ Web サイトを作成する」を参照してください。

重要

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

React をインストールする

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

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

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

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

    npx create-react-app my-app

    Note

    npx は、npm がグローバル インストールの代わりにパッケージを実行するために使用するパッケージ ランナーです。 これは基本的に、React の一時的なインストールを作成し、新しいプロジェクトごとに最新バージョンの React が使用されるようにします (上記のグローバル インストールを実行した時点で最新だったバージョンではありません)。 NPX パッケージ ランナーを使用してパッケージを実行すると、コンピューター上で多数のパッケージをインストールすることによる汚染を軽減するのにも役立ちます。

  4. 最初に、create-react-app とそれに関連付けられているパッケージを一時的にインストールするためのアクセス許可が要求されます。 完了したら、新しいアプリのディレクトリ ("my app" または選択した名前) に変更します: cd my-app

  5. 新しい React アプリを開始します。

    npm start

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

    Note

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

  6. Web アプリを運用環境に展開する準備ができたら、npm run build を実行すると、"build" フォルダーにアプリのビルドが作成されます。 詳細については、「React アプリの作成ユーザー ガイド」を参照してください。

既存の Web アプリへの React の追加

React は JavaScript ライブラリであり、最も基本的な形式は、テキスト ファイルの集まりなので、コンピューターにツールやライブラリをインストールすることなく React アプリを作成できます。 Web ページに "分散された対話機能" を追加するだけで、ビルド ツールは必要ありません。 HTML ページにプレーンな <script> タグを追加するだけで、React コンポーネントを追加できます。 React ドキュメントの「Add React in One Minute (1 分間で React を追加する)」の手順に従ってください。

その他のリソース