【create-react-app】でReact＆TypeScriptの環境構築してみよう！

create-react-appコマンドを使ってReact＆TypeScriptの環境構築をする方法を解説します。

以下の手順通りに進めれば問題なくできるはずです！

create-react-appコマンドを実行する
ローカルでReactの開発環境を立ち上げる

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.

またブラウザの画面も新しくタブが作られて、このように切り替わるはずです。