【React入門】超簡潔なReact開発の始め方（vite）

環境

Windows11

確認事項

npmが入っているか確認

$ npm -v
9.5.0

入っていない場合は https://nodejs.org/ja/ からダウンロード

Reactアプリを入れる

$ npm create vite@latest . --template react-ts

※ 上記はカレントディレクトリにReactアプリを入れる例で.を入れたいファイル名にするとファイルが作成されてそこに色々入る

アプリを起動

$ npm install

$ npm run dev

エラーが出ずにReactの画面がブラウザで表示されたらOK

以下はCreate React Appで作成したときのエラーで、Create React Appは2022/4/12を最後に更新が止まっているとのこと
コメントありがとうございますmm

トラブルシューティング

以下の個所が19.0.0だったため18.x.xにして大体のことは解決

"dependencies": {
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  // 他の依存関係
}

そのあとはnode_modilesフォルダを削除してもう一度npm installを叩く

それでも解決しないなら以下

# 1. `package-lock.json` を削除
$ rm package-lock.json

# 2. `node_modules` を削除
$ rm -rf node_modules

# 3. `webpack` を dependencies から削除
$ npm uninstall webpack

# 4. 依存関係を再インストール
$ npm install

備忘録

web-vitalsとwebpackがうまくインストールできなかった

$ npm install react-scripts@latest
$ npm install web-vitals