# 1.開発環境構築

# 前提

  • nodeコマンドが使えること
    • バージョンは14以上が望ましい
node -v
# v15.6.0
1
2

# 雛形の生成

  • create-react-appという公式のジェネレータを使う
    • コマンドを実行したディレクトリにreact-handsonというディレクトリが生成される
# 雛形の生成(ちょっと時間かかる)
npx create-react-app --template typescript react-handson

# 生成したプロジェクトへ移動
cd react-handson
1
2
3
4
5

# 動作確認

TIP

停止する時は Ctl + c

template

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

vscode1 vscode2

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

hotreload

Last Updated: 2021/01/26