作成したReactアプリを編集・ビルド・ホットリロードする方法メモ
はじめに
今回の記事の目的
とりあえずcreate-react-appを利用して作成したReactアプリに編集を加えてビルドする方法のメモ。
また、都度ビルドするのは大変なので、ホットリロード（アプリに編集を加えると自動で随時ビルドしてくれる）のやりかたをメモ。
アプリを編集する
vscodeでアプリを編集して保存する。
この時点ではlocalhost:8000の表示は変わらない。
Reactアプリケーションをビルドする方法（通常）
手動ビルド
いったん、ctrl+Cでアプリケーションを停止してから
npm run build
を実行する。
アプリ再開
PORT=8000 npm start
Reactアプリケーションをビルドする方法（ホットリロード）
さすがに面倒なので、ソースを監視して自動でビルドしてくれるよう設定する。
.envファイルの準備
.envファイルとは、環境変数を設定するためのファイルらしい。
npm startするときに見てくれるファイル。
ファイル名は.env
.envファイルの記載内容
PORT = 8000 CHOKIDAR_USEPOLLING = TRUE
2行目がホットリロードの設定。PORTの指定もついでに実施する。
.envファイルはpackage.jsonファイルと同じ場所に設置した。
アプリ再開（.envファイル設定後）
この状態でnpm startすると、ソースコードの変更を検知して自動でビルドしてくれるようになった。
おわりに
次回は下準備の続きとして、VSCodeにESLintを導入する。
tomiko0404.hatenablog.com
