背景
- 【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜で、
React
には複数のプロジェクトの起動&作成方法があることをご紹介しました。 - この記事は、「1.2.
npm
でTypeScript
を使用してReact
プロジェクトを作成する方法」の解説記事になります。
目標
npm
でTypeScript
を使用してReact
プロジェクトを作成できるようになる。
npmでTypeScriptを使用してReactプロジェクトを作成する方法
- docker-react-npm-typescriptを
clone
し、起動に必要なdockerfile
をローカルに準備します。
GitHub - takuma-competition/docker-react-npm-typescript: typescriptを使用してnpmでreactを起動するdockerfileと手順を記したリポジトリ
typescriptを使用してnpmでreactを起動するdockerfileと手順を記したリポジトリ - takuma-competition/docker-react-npm-typescript
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_npm_typescript_workdir/
npx(node package executer)
のcreate-react-app
ツールを使用して、react
のアプリの雛形を作成します。TypeScript
でreact
アプリの雛形を作成するにはnpx create-react-app [ディレクトリ名] --template typescript
とディレクトリ名の後に--template typescript
というオプションを追加します。create-react-app
の後ろにくる文字列が作成されるディレクトリ名になります。(ここでは、react_npm_typescript
というディレクトリが作成されることになります。)
$npx create-react-app react_npm_typescript --template typescript
react
のアプリをinstall
するかを聞かれるのでy
を入力してEnter
を押します。
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y)
- 作成されたディレクトリに移動します。
$cd react_npm_typescript/
react
を起動します。
$npm 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://takuma-tech.com/wp-content/uploads/cocoon-resources/blog-card-cache/5fa156e01a5c7b2585f20de5e447f7f4.jpg)
プロジェクトを実行!npm startの使い方【初心者向け】 | TechAcademyマガジン
初心者向けにnpm startの使い方について解説しています。npmコマンドを使ってファイルやプロジェクトの実行をすることができます。node inspectorを実行してデバッグするサンプルプログラムを実際に書いています。
![](https://takuma-tech.com/wp-content/uploads/cocoon-resources/blog-card-cache/08f636c88bf16ba6ca9be95eb6dff36b.jpg)
よく見かけるNode.js・npm・npx・yarnが何かをまとめた | Vueは友達
Node.js・npm・npx・yarnはプログラミングを始めた時は何をしているか分からずとりあえず使っていたがちゃんと理解した方がいいと思ってまとめた記事
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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwJUU3JTkyJUIwJUU1JUEyJTgzJUU2JUE3JThCJUU3JUFGJTg5JUUzJTgwJTkxRG9ja2VyJUUzJTgxJUE3UmVhY3QlRTMlODIlOTJucG0lRTMlODIlOTIlRTQlQkQlQkYlRTclOTQlQTglRTMlODElOTclRTMlODElQTYlRTQlQkQlOUMlRTYlODglOTAlMjYlRTglQjUlQjclRTUlOEIlOTUlRTMlODElOTklRTMlODIlOEIlRTYlOTYlQjklRTYlQjMlOTUlRUYlQkMlODhUeXBlU2NyaXB0JUU3JUI3JUE4JUVGJUJDJTg5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hOWUwNjU3Mzg0N2IxZjFkODJhMDZlZWYzYTIwNjEwZg&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0YWt1bWEtMTIzNCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTVkMTYzMDdjYjFlZmIwODlmZmY2YjRkMDVkYjZjNDk&blend-x=142&blend-y=486&blend-mode=normal&s=1d444884d57baf703823d908a323a760)
【環境構築】DockerでReactをnpmを使用して作成&起動する方法(TypeScript編) - Qiita
背景【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜で、Reactには複数のプロジェクトの起動&作成方法があることを…