はじめに
最近Reactの学習を行っています。
そのため、プロジェクトを作成することが多いですが、意外と忘れがちなので作成方法を備忘録がわりに記載します。
方法1
プロジェクトを作成したいディレクトリをカレントディレクトリにして、以下コマンドを実行します。
npx create-react-app <プロジェクト名>
上記コマンドを実行すると、package.jsonというファイルが作成されます。このファイルはプロジェクト内のライブラリなどをインストールした際に情報が書き込まれていくファイルです。package.jsonこそがプロジェクトの核となるファイルといえます。そして、package,jsonのファイルがある階層をカレントディレクトリに設定して以下コマンドを実行していください。
npm start
これでlocalhostとしてwebアプリが実行されます。
エラーとして以下が出力されかもしれません。
Module not found: Error: Can't resolve 'web-vitals' in 'xxxx\src'
以下に解決方法が記載されています。
Module not found: Error: Can't resolve 'web-vitals' in '/app/src'
以下コマンドを実行すれば解決します。
npm install --save-dev web-vitals
要はweb-vitalsというライブラリをインストールしていないことが問題なのです。
方法2
方法2では、Viteというビルドツールを使った方法を紹介します。方法1のcreate-react-appは少し古く、現在はViteを用いた方法が一般的です。
下記コマンドを実行することでプロジェクトを作成することができます。
npm create vite@latest <プロジェクト名>
また、package.jsonのscriptsプロパティに記載されていると思いますが、開発用のサーバを立てるには以下コマンドを実行します。
npm run dev