1.開発環境構築

前提

• nodeコマンドが使えること
  • バージョンは14以上が望ましい

node -v
# v15.6.0

• 入っていなければ公式からダウンロードしてください
  • https://nodejs.org/ja/ (opens new window)

雛形の生成

• create-react-appという公式のジェネレータを使う
  • コマンドを実行したディレクトリにreact-handsonというディレクトリが生成される

# 雛形の生成(ちょっと時間かかる)
npx create-react-app --template typescript react-handson

# 生成したプロジェクトへ移動
cd react-handson

動作確認

• 以下のコマンドを入力しアプリ起動
  • npm start
• ブラウザが勝手に開いて以下の画面が表示されればOK
  • http://localhost:3000/ (opens new window)でアクセスできる

TIP

停止する時は Ctl + c

• VSCodeでプロジェクトを開く

• ホットリロードの確認
  • npm startでアプリを起動した状態でコードを修正してみる
  • src/App.tsxを開きEdit src/App.tsx and save to reload.の文言を適当に書き換えて保存する
  • 自動でリロードが走りコンソールにログが流れる
  • ブラウザが勝手にリロードされ変更が反映される