【环境构建】使用Docker和npm创建和启动React应用的方法（TypeScript版）

背景资料

【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜で、Reactには複数のプロジェクトの起動＆作成方法があることをご紹介しました。
この記事は、「1.2.npmでTypeScriptを使用してReactプロジェクトを作成する方法」の解説記事になります。

达成（特定）目标

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

使用npm以TypeScript创建React项目的方法

docker-react-npm-typescriptをcloneし、起動に必要なdockerfileをローカルに準備します。

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が起動されます。

请提供相关资料

个人博客