Why do React and Webpack throw an error when using JSX?

Question

React

When run, it gives an error on the JSX syntax, here is my file:

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

console.log(React); 

function HelloWorld() {
    return (
        <div>
        ^
            <h1>Hello World</h1>
        </div>
    )
}

render (<HelloWorld/>, document.getElementById('root'));

Installed babel-loader, @babel/preset-env, @babel/preset-react, @babel/core, react, react-dom.
In webpack.base.conf.js

const path = require('path');

const PATHS = {
    src: path.join(__dirname, '../src'),
    dist: path.join(__dirname, '../dist'),
    assets: 'assets/'
}

module.exports = {

    externals: {
        paths: PATHS
    },
    entry: {
        app: PATHS.src
    },
    output: {
        filename: `${PATHS.assets}js/[name].js`,
        path: PATHS.dist,
        publicPath: '/'
    },
    module: {
        rules: [{
            test: /\.js|jsx$/,
            loader: 'babel-loader',
            exclude: '/node-modules/'
            },

here is everything https://github.com/nadya1999/learn-react.git

Answer 1

plugins: @babel/plugin-transform-react-jsx
config like this

module: {
        rules: [
            {
                test: /\.js|jsx$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            "@babel/plugin-transform-react-jsx",
                            "@babel/plugin-proposal-class-properties"
                        ]
                    }
                }
            }