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 を使用することをお勧めします。
WSL コマンドライン (Ubuntu) を開きます。
新しいプロジェクト フォルダーを作成し (
mkdir ReactProjects
)、そのディレクトリに移動します (cd ReactProjects
)。npx を使用したインストール:
npx create-react-app my-app
Note
npx は、npm がグローバル インストールの代わりにパッケージを実行するために使用するパッケージ ランナーです。 これは基本的に、React の一時的なインストールを作成し、新しいプロジェクトごとに最新バージョンの React が使用されるようにします (上記のグローバル インストールを実行した時点で最新だったバージョンではありません)。 NPX パッケージ ランナーを使用してパッケージを実行すると、コンピューター上で多数のパッケージをインストールすることによる汚染を軽減するのにも役立ちます。
最初に、create-react-app とそれに関連付けられているパッケージを一時的にインストールするためのアクセス許可が要求されます。 完了したら、新しいアプリのディレクトリ ("my app" または選択した名前) に変更します:
cd my-app
新しい React アプリを開始します。
npm start
このコマンドは Node.js サーバーを起動し、アプリを表示する新しいブラウザー ウィンドウを起動します。 Ctrl + C キーを使用すると、コマンド ラインでの React アプリの実行を停止できます。
Note
React アプリの作成には、Babel と webpack を使用したフロントエンドのビルド パイプラインが含まれますが、バックエンドのロジックまたはデータベースは処理されません。 Node.js バックエンドを使用する、サーバーでレンダリングされる Web サイトを React で構築したい場合は、シングルページ アプリ向けに作成された、この create-react-app のインストールではなく Next.jsをインストールすることをお勧めします。 また、静的なコンテンツ指向の Web サイトを構築する場合は、Gatsby のインストールを検討することもできます。
Web アプリを運用環境に展開する準備ができたら、
npm run build
を実行すると、"build" フォルダーにアプリのビルドが作成されます。 詳細については、「React アプリの作成ユーザー ガイド」を参照してください。
既存の Web アプリへの React の追加
React は JavaScript ライブラリであり、最も基本的な形式は、テキスト ファイルの集まりなので、コンピューターにツールやライブラリをインストールすることなく React アプリを作成できます。 Web ページに "分散された対話機能" を追加するだけで、ビルド ツールは必要ありません。 HTML ページにプレーンな <script>
タグを追加するだけで、React コンポーネントを追加できます。 React ドキュメントの「Add React in One Minute (1 分間で React を追加する)」の手順に従ってください。
その他のリソース
- React のドキュメント
- React アプリの作成のドキュメント
- Windows または Linux 用 Windows サブシステム(WSL) のどちらにインストールする必要がありますか
- Next.js のインストール
- Gatsby をインストールする
- Windows 用 React Native をインストールする
- Windows での NodeJS のインストール
- WSL での NodeJS のインストール
- 「Using React in Visual Studio Code (Visual Studio Code での React の使用)」チュートリアルを試してください。
- React ラーニング パスを試す