【環境構築】DockerでReactをyarnで起動して作成&起動する方法(JavaScript編)

背景

目標

  • yarnJavaScriptを使用してReactプロジェクトを作成できるようになる。

yarnでJavaScriptを使用してReactプロジェクトを作成する方法

GitHub - takuma-competition/docker-react-yarn-javascript: javascriptを使用してyarnでreactを起動するdockerfileと手順を記したリポジトリ
javascriptを使用してyarnでreactを起動するdockerfileと手順を記したリポジトリ - GitHub - takuma-competition/docker-react-yarn-javascript: javascriptを使用してyarnでreactを起動するdockerfileと手順を記した...
  • Dockerfileの中身は以下のようになっており、nodeをベースイメージとして使用しています。
#nodeの19.4.0をベースに使用する
FROM node:19.4.0
  • 以下のコマンドでdockerを起動します。
$docker-compose up -d --build
$cd ../react_yarn_javascript_workdir/
  • yarnreactのアプリの雛形を作成します。
  • create react-appの後ろにくる文字列が作成されるディレクトリ名になります。(ここでは、react_yarn_javascriptというディレクトリが作成されることになります。)
$yarn create react-app react_yarn_javascript
  • 作成されたディレクトリに移動します。
$cd react_yarn_javascript/
  • reactを起動します。
$yarn start
  • 起動が成功すればご自身のPCで設定されているデフォルトのブラウザでreactが起動されます。

参考資料

docker-compose コマンド概要 — Docker-docs-ja 1.12.RC2 ドキュメント
dockerの-dオプション、デタッチドモードって何? - Qiita
-dで実行されるモード。デタッチドモード。 docker-compose up -d nginx mysql -dはデタッチドモードのオプション。 バックグラウンドでcontainerを立ち上げる。 バッググラウンドで立ち上...
yarnでcreate-react-appをするには? - Qiita
Reactのアプリの雛形を作成するコマンドといえば npx create-react-app my-app に馴染みがあるのではないでしょうか。 私も特に疑問も持たずに、これまでこのコマンドでアプリを生成してきました。 しかし、これ...
Getting Started | Create React App
Create React App is an officially supported way to create single-page React

Qiita記事

【環境構築】DockerでReactをyarnで起動して作成&起動する方法(JavaScript編) - Qiita
背景 【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜で、Reactには複数のプロジェクトの起動&作成方法があることをご紹介しました...