1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

お題は不問!Qiita Engineer Festa 2023で記事投稿!

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

Last updated at Posted at 2023-07-13

背景

目標

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

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

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

参考資料

個人ブログ

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?