背景
-
【環境構築】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をベースイメージとして使用しています。
Dockerfile
#nodeの19.4.0をベースに使用する
FROM node:19.4.0
- 以下のコマンドで
dockerを起動します。
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というディレクトリが作成されることになります。）
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が起動されます。
参考資料
個人ブログ