npm startで起動させたブラウザに「Cannot Get \」と表示されてしまう

実現したいこと

Hello,World を表示させたい（htmlをブラウザに表示させたい）

前提

初心者でReactの環境を構築しています。
https://qiita.com/EZ_Denta/items/9e6a47f330b5a01806aeを参考に
npm start までなんとか成功したのですが、
ブラウザに「cannot Get /」と表示されてしまいました。
htmlには「Hello,World」と表示させるように設定しています。
エラー文がなく、色々試してはいますが何も変わらず困っております。。。

発生している問題・エラーメッセージ

npm start をした後のログ

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.10.31:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from './dist' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
<i> [webpack-dev-middleware] wait until bundle finished: /
asset app.js 3.05 MiB [emitted] (name: app)
runtime modules 26.2 KiB 11 modules
modules by path ./node_modules/ 1.12 MiB
  modules by path ./node_modules/webpack-dev-server/client/ 68.9 KiB 16 modules
  modules by path ./node_modules/webpack/hot/*.js 4.59 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
  modules by path ./node_modules/scheduler/ 26.3 KiB 4 modules
  modules by path ./node_modules/react/ 70.6 KiB 2 modules
  modules by path ./node_modules/react-dom/ 875 KiB
    ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
    ./node_modules/react-dom/cjs/react-dom.development.js 874 KiB [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
  ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
./src/index.js 214 bytes [built] [code generated]
webpack 5.77.0 compiled successfully in 1004 ms

該当のソースコード

package.json

{
  "name": "reacttest",
  "version": "1.0.0",
  "description": "React test",
  "private": true,
  "main": "src/index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "webpack": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.3",
    "@babel/core": "^7.17.5",
    "@babel/eslint-parser": "^7.21.3",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.6.0",
    "eslint": "^8.9.0",
    "eslint-plugin-react": "^7.28.0",
    "eslint-webpack-plugin": "^3.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

webpack.config.js

const ESLintPlugin = require('eslint-webpack-plugin')
module.exports = {
  entry: {
    app: "./src/index.js"
  },
  output: {
    path: __dirname + "/public/js",
    publicPath: "/js/",
    filename: "[name].js"
  },
  devServer: {
   historyApiFallback: true,
   static: {
    directory: './dist',
   },
    port: 8080,
    open: true,
  },
  devtool: "eval-source-map",
  mode: "development",
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: ['babel-loader']
    }, {
      test: /\.css$/,
      use: ["style-loader","css-loader"]
    }]
  },
  plugins: [
    new ESLintPlugin()
  ]
};

試したこと

①<webpack.config.js>
devServer: {
historyApiFallback: true; ←追記

②<package.json>
main: src/index.js　←src/を追記

③npx webpack
disファイルが作成されませんでした。app.jsもおそらくないです。（これが原因かもしれません）
そしてHomeディレクトリ（Appディレクトリより上の階層）にpackage.jsonとpackage.lock.jsonファイルが作成されてしまい何が起きたのかわかりませんでした。

補足情報（FW/ツールのバージョンなど）

mac M1 Ventura 13.2.1

hoshi-takanori

2023/04/05 07:41

public/index.html 作りました？ webpack.config.js の中身も参考記事と違うし…。

shii

2023/04/06 00:10

public/index.html は参考記事のものをコピペしています。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" /> <title>React App</title> </head> <body> <div id="root"></div> <script type="text/javascript" src="js/app.js" charset="utf-8"></script> </body> </html> webpack.config.js の内容は変更しております。。。当初はコピペしましたが、npm startでエラーが出てしまい、私の環境ではそのまま使用できないようでした。（おそらく）

hoshi-takanori

2023/04/06 03:30

うーん、とりあえず参考記事のリンク先 https://github.com/yuumi3/react_book の projects/hello_react は動きましたよ。というか、react の環境構築は素直にcreate-react-app で良いのでは…。

行動規範の内容に同意します

回答1件

自己解決

こちらのサイトでできました

https://reffect.co.jp/react/setup-reactを参考（というかほぼまんまです）に作成しなおしたらできました。

おまけになぜこの設定が必要なのか？といった解説がわかりやすく、勉強になりました。
ありがとうございます！！

投稿2023/04/06 06:02

shii

総合スコア4

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！