React 環境構築

背景

転職先の会社ではReactで開発していると聞いており、暇な有休消化期間を使ってやってみました。環境構築をするにあたり注意点がわかったので、忘れてもまた思い出せるよう、記事にします。

教科書にした動画

【2025年最新】世界一簡単なReact講座！JavaScript初心者・中級者は必見
https://youtu.be/TgU-FT2WdS4?si=k8XRf0EevHFCofaR

前提条件

• VSCode、Node.jsは既にインストール済み

ビルドツール Vite でプロジェクト生成

まずVSCodeのターミナルで、ファイルを格納する階層まで cd コマンドで移動しておく。画像の赤枠内のコードをターミナルにコピーペーストして、Enterキーで実行する。

発生したエラーと解決方法

エラー

コマンド npm install で node_modules のディレクトリが入らない。

npm install

原因と解決策

ターミナルに cd my-vue-app と表示されているのに、無視して npm install を実行していました。エラー発生時にスクリーンショットを残すのを見逃しているので、添付画像では正常にインストールできています。

cd ディレクトリ のコマンドで階層を移動してから、再度 npm install を実行すると、node_modules まで入りました。

npm run dev でサーバー起動

npm run dev

URLが発行され、Ctrl + Click で Vite のデフォルトページが表示される。