reactjs application - can't get my hello world to show up

Question

Background / Problem

I'm trying to build understand my first react/webpack/nodejs app. I am able to build / launch it by opening a browser and navigating to http://localhost:3333/ , but the hello world message I'm expecting is not showing. Instead I think it's trying to give me a directory listing of a folder...? Not too sure but all I see is "~/"

npm run dev results

me@DESKTOP-123:/mnt/c/Users/me/source/repos/reactjstutorial$ npm run dev

> reactjstutorial@1.0.0 dev /mnt/c/Users/me/source/repos/reactjstutorial
> webpack-dev-server

ℹ ｢wds｣: Project is running at http://localhost:3333/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /mnt/c/Users/me/source/repos/reactjstutorial/build
ℹ ｢wdm｣: Hash: e855fbe9a7da7f9b8f40
Version: webpack 4.43.0
Time: 1854ms
Built at: 06/28/2020 8:37:19 PM
        Asset      Size  Chunks                   Chunk Names
    bundle.js  1.26 MiB    main  [emitted]        main
bundle.js.map  1.46 MiB    main  [emitted] [dev]  main
Entrypoint main = bundle.js bundle.js.map
[0] multi (webpack)-dev-server/client?http://localhost:3333 ./app/index.jsx 40 bytes {main} [built]
[./app/index.jsx] 3.47 KiB {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:3333] (webpack)-dev-server/client?http://localhost:3333 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
    + 29 hidden modules
ℹ ｢wdm｣: Compiled successfully.

webpack.config.js

var webpack = require('webpack')
var path = require('path')

var BUILD_DIR = path.resolve(__dirname + '/build')
var APP_DIR = path.resolve(__dirname + '/app')

var config = {
        entry: APP_DIR + '/index.jsx',
        mode: 'development',
        output: {
                path: BUILD_DIR,
                filename: 'bundle.js',
                publicPath: '/'
        },
        devtool: 'source-map',
        devServer: {
                inline: true,
                contentBase: BUILD_DIR,
                port: 3333
        },

        module: {
                rules: [
                        {
                                test: /\.jsx?/,
                                include: APP_DIR,
                                loader: 'babel-loader'
                        }
                ]
        }
}
module.exports = config

Contents of app/index.jsx:

import React from 'react'
import {render} from 'react-dom'
import ReactDOM from 'react-dom'

class App extends React.Component {
   render(){
      return (
        <p>Hello world!</p>
      );
   }
}

ReactDOM.render(<App />, document.getElementById('app'));

Contents of package.json

me@DESKTOP-123:/mnt/c/Users/me/source/repos/reactjstutorial$ cat package.json
{
  "name": "reactjstutorial",
  "version": "1.0.0",
  "description": "checking out babel",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {}
}

Other questions

I was expecting to see a bundled js file in by build folder but it's currently empty Can someone explain what i'm doing wrong? thanks.

EDIT 1

Thanks for the responses guys. FWIW … I'd like to try manually so I actually understand what's happening under the hood first. Ultimately, instead of building my own application, I have to take over a massive react/nodejs app that others have written. so this is why if possible, i'd like to know how everything fits together. Having said that, i'll do both. I'll create the html file and try to play around. And then I'll take your suggestion and also try using the create react app tool

Thnks.

EDIT 2

This is where my index.html is .. and what it looks like:

me@DESKTOP-123:/mnt/c/Users/me/source/repos/reactjstutorial$ cat public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

me@DESKTOP-123:/mnt/c/Users/me/source/repos/reactjstutorial$

this is the config now for webpack. notice the first line now adds require for html-webpack-plugin... and then the corresponding plugins section at the end.

me@DESKTOP-123:/mnt/c/Users/me/source/repos/reactjstutorial$ cat webpack.config.js
const HtmlWebPackPlugin = require('html-webpack-plugin');

var webpack = require('webpack')
var path = require('path')

var BUILD_DIR = path.resolve(__dirname + '/build')
var APP_DIR = path.resolve(__dirname + '/app')

var config = {
        entry: APP_DIR + '/index.jsx',
        mode: 'development',
        output: {
                path: BUILD_DIR,
                filename: 'bundle.js',
                publicPath: '/'
        },
        devtool: 'source-map',
        devServer: {
                inline: true,
                contentBase: BUILD_DIR,
                port: 3333
        },
        module: {
                rules: [
                        {
                                test: /\.jsx?/,
                                include: APP_DIR,
                                loader: 'babel-loader'
                        }
                ]
        },
        plugins: [
                new HtmlWebPackPlugin({
                        template: path.resolve(__dirname, 'public/index.html'),
                        filename: 'index.html'
                })
        ]
}
module.exports = config

Answer 1

You need to add an html file to be served, create index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

then install html-webpack-plugin and add it to the webpack config plugins section

const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
....

plugins: [
   new HtmlWebPackPlugin({
       template: path.resolve( __dirname, 'public/index.html' ),
       filename: 'index.html'
   })
]

also I think since you're using the dev server then maybe files will be served from memory, so you'll not see it in dist folder

P.S. since you're just starting, I suggest you to start with React functional components with hooks instead of using react class components, it's the way to go now and much elegant

Edit 1

in html file, div element should have an id of app not root since in your index.jsx you render to app element

ReactDOM.render(<App />, document.getElementById('app'));

also there is no need to tell index.html file the location of your bundle as HtmlWebPackPlugin will inject it for you, so the final html file should be

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>React App</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

Edit 2

I can't stress enough to use react functional component instead of react class components especially if you're starting out, so here is the same App component using React function :)

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
    return (
        <p>Hello World!</p>
    );
}

ReactDOM.render(<App />, document.getElementById('app'));

Answer 2

You should just use create-react-app. It does all the work of setting it all up for you. Getting webpack working fully-featured takes a lot of configuring and tweaking.

npx create-react-app my-app
cd my-app
npm start

This will create a boilerplate React project inside a folder named my-app in the current directory.

Answer 3

So the issue is that you're not actually compiling or building anything. You're running the dev server before you've given anything to run.

I suggest you use Create React App or an alternative, as doing this all manually is quite the task.