Question

我能够转换jsx代码，但在浏览器中它没有加载任何东西。我也在使用babel和webpack。

app.jsx

＆＃13;

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

＆＃13;

的index.html

＆＃13;

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

＆＃13;

webpack.config.js

＆＃13;

module.exports = {
    entry: './jsx/app.jsx',
    output: {
        path: __dirname + '/js/',
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loaders: ['babel-loader']
            }
        ]
    }
}

＆＃13;

bundle.js

＆＃13;

------
------

(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"));

}),

------
------

＆＃13;

当我查看html页面源时，它显示链接到脚本标记中的bundle.js，但页面为空。您可以在Github complete code

上查看我的完整项目

我要遵循的步骤

npm run build static（我使用的是node-static）

然后在浏览器中加载index.html但页面为空白。

Answer 1

你有一个错字 - ReactDOM应该是ReactDom。控制台中显示的错误是Uncaught ReferenceError: ReactDOM is not defined。

ReactDom.render不呈现html内容

1 个答案: