create-react-appコマンドを使ってReact＆TypeScriptの環境構築をする方法を解説します。
以下の手順通りに進めれば問題なくできるはずです！
create-react-appコマンドを実行する
ターミナルで「npx create-react-app プロジェクト名 –template typescript」とコマンドを実行すればTypeScriptのReactプロジェクトが作成できます。
末尾の「–template typescript」をお忘れなく！
$ npx create-react-app react-typescript-practice --template typescript今回はreact-typescript-practiceというプロジェクト名で作成してみました。
lsコマンドで実際にプロジェクトのフォルダが作られているか確認します。
$ ls
react-typescript-practice問題なく作られてますね！
また今回はTypeScriptを導入しているので、srcフォルダ直下にはApp.jsxファイルではなくApp.tsxが作られています。
$ cd react-typescript-practice/src
$ ls
...略... App.tsx ...略...ローカルでReactの開発環境を立ち上げる
それでは上記でインストールしたReactの開発環境を立ち上げてみましょう。
プロジェクトのルートディレクトリに行って、「npm start」もしくは「yarn start」とコマンドを実行します。この2つのコマンドはぶっちゃけどちらを使っても大丈夫です。
$ cd react-typescript-practice
$ npm startターミナルの画面が切り替わって以下のようになればOKです。
Compiled successfully!
You can now view react-typescript-practice in the browser.
Local: http://localhost:3001
On Your Network: http://192.168.119.232:3001
Note that the development build is not optimized.
To create a production build, use yarn build.またブラウザの画面も新しくタブが作られて、このように切り替わるはずです。
以上でReact + TypeScriptの環境構築は完了となります！
ちなみに開発環境を閉じたい時は、「control + c」を同時に押せば閉じれます。
