score:3

Accepted answer

hope that helps. do something like that.

helloworld.jsx

import react, { component } from 'react';
import reactdom from 'react-dom';

export default class helloworld extends component {
    render() {
        return (
            <div classname='greeting-div'>
                <div>
                    hello world jsx
                </div>
            </div>
        );
    }
}
reactdom.render(
  <helloworld/>,
  document.getelementbyid('greeting-div')
);

index.html

<!doctype html>
<html lang="en">
  <head>
    <title>my first react example</title>
  </head>
  <body>
    <div id="greeting-div"></div>
    <script type="text/javascript" src="path_of_your_outpur_script" ></script>
  </body>
</html>

webpack.config.js :

var webpack = require("webpack");
var autoprefixer = require("autoprefixer");
var paths = require("./paths.js");
var files = require('./files.js');
var path = require("path");

module.exports = {
    entry: {
    path.resolve(__dirname, 'path_of_your_helloworld.jsx'),
    },

    output: {
        path: paths.webappassets,
        publicpath: "",
        filename: "[name].js",
        chunkfilename: "[chunkhash].js",
        librarytarget: 'var',
        library: '[name]'
    },
};

Related Query

More Query from same tag