2
2

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.

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

Posted at

背景

目標

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

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

  • Dockerfileの中身は以下のようになっており、nodeをベースイメージとして使用しています。
Dockerfile
#nodeの19.4.0をベースに使用する
FROM node:19.4.0
  • 以下のコマンドでdockerを起動します。
docker起動コマンド
$docker-compose up -d --build
作業用ディレクトリに移動
$cd ../react_npm_typescript_workdir/
  • npx(node package executer)create-react-appツールを使用して、reactのアプリの雛形を作成します。
  • TypeScriptreactアプリの雛形を作成するにはnpx create-react-app [ディレクトリ名] --template typescriptとディレクトリ名の後に--template typescriptというオプションを追加します。
  • create-react-appの後ろにくる文字列が作成されるディレクトリ名になります。(ここでは、react_npm_typescriptというディレクトリが作成されることになります。)
reactアプリの雛形の作成
$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を起動します。
react_start
$npm start
  • 起動が成功すればご自身のPCで設定されているデフォルトのブラウザでreactが起動されます。

参考資料

個人ブログ

2
2
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
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?