背景
- 【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜で、
Reactには複数のプロジェクトの起動＆作成方法があることをご紹介しました。 - この記事は、「2.1.
yarnでJavaScriptを使用してReactプロジェクトを作成する方法」の解説記事になります。
目標
yarnでJavaScriptを使用してReactプロジェクトを作成できるようになる。
yarnでJavaScriptを使用してReactプロジェクトを作成する方法
- docker-react-yarn-javascriptを
cloneし、起動に必要なdockerfileをローカルに準備します。
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と手順を記した...
github.com
Dockerfileの中身は以下のようになっており、nodeをベースイメージとして使用しています。
#nodeの19.4.0をベースに使用する
FROM node:19.4.0
- 以下のコマンドで
dockerを起動します。
$docker-compose up -d --build
vscodeでコンテナ内部に入ります。vscodeでコンテナ内部に入る方法は【環境構築】Docker container内部にVS Codeで入って作業する方法を参照ください。vscodeでターミナルを起動し、作業用にdocker-compose.ymlでマウント時に作成された作業用のディレクトリに移動します。
$cd ../react_yarn_javascript_workdir/
yarnでreactのアプリの雛形を作成します。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 ドキュメント
docs.docker.jp
dockerの-dオプション、デタッチドモードって何？ - Qiita
-dで実行されるモード。デタッチドモード。docker-compose up -d nginx mysql-dはデタッチドモードのオプション。バックグラウンドでcontainerを立ち上げる。###バッググラウンドで立ち上げるとは…
qiita.com
yarnでcreate-react-appをするには？ - Qiita
Reactのアプリの雛形を作成するコマンドといえば
npx create-react-app my-app
に馴染みがあるのではないでしょうか。
私も特に疑問も持たずに、これまでこのコマンドでアプリを生成してきました。
しかし、これ...
qiita.com
Getting Started | Create React App
Create React App is an officially supported way to create single-page React
create-react-app.dev
Qiita記事
【環境構築】DockerでReactをyarnで起動して作成&起動する方法（JavaScript編） - Qiita
背景
【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜で、Reactには複数のプロジェクトの起動＆作成方法があることをご紹介しました...
qiita.com
