背景
- 【環境構築】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と手順を記したリポジトリ - takuma-competition/docker-react-yarn-javascript
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 ドキュメント
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9ZG9ja2VyJUUzJTgxJUFFLWQlRTMlODIlQUElRTMlODMlOTclRTMlODIlQjclRTMlODMlQTclRTMlODMlQjMlRTMlODAlODElRTMlODMlODclRTMlODIlQkYlRTMlODMlODMlRTMlODMlODElRTMlODMlODklRTMlODMlQTIlRTMlODMlQkMlRTMlODMlODklRTMlODElQTMlRTMlODElQTYlRTQlQkQlOTUlRUYlQkMlOUYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTlhZmRjNjI4ZTY5MjlkNjUxMDc0OGEyMmNhNDA0MzE3&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrZWl0ZWFuJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zMzBkZDMyNjc4YzY5YmUwNWRhOGM2NDU2MzI4MzAxOA&blend-x=142&blend-y=486&blend-mode=normal&s=4c94d4abd7ad805c29d3c1431969afab)
dockerの-dオプション、デタッチドモードって何? - Qiita
-dで実行されるモード。デタッチドモード。docker-compose up -d nginx mysql-dはデタッチドモードのオプション。バックグラウンドでcontainerを立ち上げる。###バッググラウンドで立ち上げるとは…
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9eWFybiVFMyU4MSVBN2NyZWF0ZS1yZWFjdC1hcHAlRTMlODIlOTIlRTMlODElOTklRTMlODIlOEIlRTMlODElQUIlRTMlODElQUYlRUYlQkMlOUYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTUzNDg5NWZkZGZmNzlkM2RkNjU1M2NhN2QxMjJhNjE3&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBSeW9zdWtlU29tZXlhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xMDg2MDBlYjkwMmNjNGY2NWQ3MGRiNWJkZmMwYmMyMw&blend-x=142&blend-y=486&blend-mode=normal&s=bcd29faec6927439e681b122838310a4)
yarnでcreate-react-appをするには? - Qiita
Reactのアプリの雛形を作成するコマンドといえばnpx create-react-app my-appに馴染みがあるのではないでしょうか。私も特に疑問も持たずに、これまでこのコマンドでアプリ…
![](https://takuma-tech.com/wp-content/uploads/cocoon-resources/blog-card-cache/f36a394aaafc297e0aed7984b7b24a42.png)
Getting Started | Create React App
Create React App is an officially supported way to create single-page React
Qiita記事
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwJUU3JTkyJUIwJUU1JUEyJTgzJUU2JUE3JThCJUU3JUFGJTg5JUUzJTgwJTkxRG9ja2VyJUUzJTgxJUE2JUUzJTgyJTk5UmVhY3QlRTMlODIlOTJ5YXJuJUUzJTgxJUE2JUUzJTgyJTk5JUU4JUI1JUI3JUU1JThCJTk1JUUzJTgxJTk3JUUzJTgxJUE2JUU0JUJEJTlDJUU2JTg4JTkwJTI2JUU4JUI1JUI3JUU1JThCJTk1JUUzJTgxJTk5JUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JUVGJUJDJTg4SmF2YVNjcmlwdCVFNyVCNyVBOCVFRiVCQyU4OSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MmVhNjQyOTJkOGVkNWYzYzUwZWZhYTZlZmY2YTYwNTI&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0YWt1bWEtMTIzNCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTVkMTYzMDdjYjFlZmIwODlmZmY2YjRkMDVkYjZjNDk&blend-x=142&blend-y=486&blend-mode=normal&s=658c16d90a56fcbb65cf40cd753c2001)
【環境構築】DockerでReactをyarnで起動して作成&起動する方法(JavaScript編) - Qiita
背景【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜で、Reactには複数のプロジェクトの起動&作成方法があることを…