CODEWITHSUNDEEP
reactjswebpack
kmithi1
kmithi1

Reputation: 1758

ReactDom.render not rendering the html content

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.

Upvotes: 0

Views: 3187

Answers (1)

Krasimir
Krasimir

Reputation: 13529

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

Upvotes: 3

Related Questions