![見出し画像](https://assets.st-note.com/production/uploads/images/72648610/rectangle_large_type_2_18f6c88c937c7ddd7301ed4ef128a0d8.jpeg?width=1200)
TypeScript 入門の記録(5)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のターミナルからインストール実行したいと思います。
![](https://assets.st-note.com/img/1645341616965-SE6Bd909bD.png?width=1200)
問題なくインストールできたので、TypeScriptのテンプレートを指定してアプリケーションを作成します。
![](https://assets.st-note.com/img/1645342919206-IIewzIqwMA.png?width=1200)
ディレクトリの移動と実行をするといいよ!って書いてあるので、試してみます。
![](https://assets.st-note.com/img/1645343139947-96f9U9CnVl.png?width=1200)
![](https://assets.st-note.com/img/1645343181958-AKU90VIE8d.png?width=1200)
自動的にブラウザがポップアップして、実行結果が表示されました。今後は、TypeScriptのコードを変更すれば、自動的にコンパイルされ、ブラウザがリロードされるはずです。
テンプレートのTypeScriptのコードを更新してみる
以前試したReactチュートリアルは、src 配下に新しく作成した index.js を編集しましたが、TypeScript は、src/App.tsx を編集すれば良さそうです。編集して保存すると、自動的にビルドが実行されました。
![](https://assets.st-note.com/img/1645344059712-TxT0sFUrC3.png?width=1200)
ブラウザに結果が反映されていればOKです。
![](https://assets.st-note.com/img/1645344255703-boT0bhqMAv.png?width=1200)
思ったとおりの結果が確認できたので、満足です。今日の目標は、これで達成できました(小さいステップでやっていきます)今日の学習は、ここまで。次回以降は、TypeScriptで何かを作りたいので、サバイバルTypeScriptの「作って学ぶTypeScript」から、やっていこうと思います。
この記事が気に入ったらサポートをしてみませんか?