TypeScript 入門の記録（５）Create React Appを利用する

前回、WSL2（Ubuntu）上で、TypeScript Deep Dive 日本語版のReact & TypeScript のプロジェクト作成と実行確認ができたので、今回は、その続き「Create React Appを利用する場合」を試します。

Create React Appを利用する

Create React Appは、Reactの公式チュートリアルで利用したことがあります。React のチュートリアルでは、Create React Appで生成されたプロジェクトの src ディレクトリ配下のファイルを削除して、そこに新たに三目並べのindex.cssとindex.jsを作成しました。今回は、Create React App のTypeScriptテンプレートを利用します。

Create React App のインストール

WSL2(Ubuntu) を起動して、そのままターミナルでCreate React App をインストールをしても良いのですが、VS Codeのターミナルからインストール実行したいと思います。

VSCodeのリモート側のターミナルでCreate React Appをインストール

問題なくインストールできたので、TypeScriptのテンプレートを指定してアプリケーションを作成します。

TypeScriptのテンプレートプロジェクトができた

ディレクトリの移動と実行をするといいよ！って書いてあるので、試してみます。

npm startをターミナルで実行すると。。。

実行結果

自動的にブラウザがポップアップして、実行結果が表示されました。今後は、TypeScriptのコードを変更すれば、自動的にコンパイルされ、ブラウザがリロードされるはずです。

テンプレートのTypeScriptのコードを更新してみる

以前試したReactチュートリアルは、src 配下に新しく作成した index.js を編集しましたが、TypeScript は、src/App.tsx を編集すれば良さそうです。編集して保存すると、自動的にビルドが実行されました。

おお、編集結果を保存したら、ビルドが始まった！

ブラウザに結果が反映されていればOKです。

自動的リロード、表示更新された！

思ったとおりの結果が確認できたので、満足です。今日の目標は、これで達成できました（小さいステップでやっていきます）今日の学習は、ここまで。次回以降は、TypeScriptで何かを作りたいので、サバイバルTypeScriptの「作って学ぶTypeScript」から、やっていこうと思います。