使用Docker环境，通过yarn启动和创建React应用程序（使用TypeScript）的方法
背景
【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & TypeScript・TypeScript〜で、Reactには複数のプロジェクトの起動＆作成方法があることをご紹介しました。
この記事は、「2.2.yarnでTypeScriptを使用してReactプロジェクトを作成する方法」の解説記事になります。
目标
yarnでTypeScriptを使用してReactプロジェクトを作成できるようになる。
如何使用yarn在React项目中使用TypeScript的方法
docker-react-yarn-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_yarn_typescript_workdir/
yarnでreactのアプリの雛形を作成します。
create react-appの後ろにくる文字列が作成されるディレクトリ名になります。（ここでは、react_yarn_TypeScriptというディレクトリが作成されることになります。）
$yarn create react-app react_yarn_typescript --template typescript
- 作成されたディレクトリに移動します。
$cd react_yarn_typescript/
reactを起動します。
$yarn start
- 起動が成功すればご自身のPCで設定されているデフォルトのブラウザでreactが起動されます。
有以下參考資料
