ReactDom.render not rendering the html content

Question

I am able to transpile the jsx code but in browser its not loading anything. I am using babel and webpack too.

app.jsx

const ReactDom = require('react-dom');
const React = require('react');
ReactDOM.render(
    <h1>Hello World</h1>,
    document.getElementById("root")
);

index.html

<html>
    <head>

    </head>
    <body>
        <div id="root"></div>
        <script type="text/javascript" src="./js/bundle.js">
        </script>
    </body>
</html>

webpack.config.js

module.exports = {
    entry: './jsx/app.jsx',
    output: {
        path: __dirname + '/js/',
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loaders: ['babel-loader']
            }
        ]
    }
}

bundle.js

------
------

(function(module, exports, __webpack_require__) {

const ReactDom = __webpack_require__(15);
const React = __webpack_require__(4);
ReactDOM.render(React.createElement(
    'h1',
    { htmlFor: 'yes' },
    'Hello World'
), document.getElementById("root"));

}),

------
------

When I looked into html page source it showing linked to bundle.js in script tag but page is blank. You can check my complete project on Github complete code

Steps I am following to run

npm run build static (I am using node-static)

then loading index.html in browser but page is blank.

Any errors in your browser console? Without seeing your directory structure I suspect it might be a pathing issue — monners
– monners, Commented Jan 17, 2018 at 3:52

Krasimir · Accepted Answer · 2018-01-17 04:10:10Z

3

You have a typo - ReactDOM should be ReactDom. The error that is shown in the console is Uncaught ReferenceError: ReactDOM is not defined.

answered Jan 17, 2018 at 4:10

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactDom.render not rendering the html content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related