Question

我目前正在关注this react tutorial，而我正在关注＆＃34; Playing with the single page app＆＃34;部分。当我按照指示运行简单的Web服务器并转到浏览器上的相应地址时，我在控制台上看到一个完全空白的页面：

bundle.js:1 Uncaught ReferenceError: ReactDOM is not defined
    at Object.<anonymous> (bundle.js:1)
    at t (bundle.js:1)
    at bundle.js:1
    at bundle.js:1

我的文件在这里：https://github.com/Joonpark13/react-tutorial

注意事项：

而不是使用教程中描述的指令（NODE_ENV = production node_modules / .bin / webpack -p）进行编译以进行生产，我只使用＆＃34; webpack＆＃34; （当我实际运行服务器时，我完全按照教程中的描述使用命令。）
而不是将app-client.js，routes.js和AppRoutes.js分成三个单独的文件，如教程中所述，我将所有这些文件合并到AppRoutes.js中。

当我导航到指定的地址时，我完全不知道为什么没有显示！

选定的相关文件：

AppRoutes.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, IndexRoute, Router, browserHistory } from 'react-router';
import Layout from './Layout';
import IndexPage from './IndexPage';
import AthletePage from './AthletePage';
import NotFoundPage from './NotFoundPage';

class AppRoutes extends React.Component {
    render() {
        const routes = (
            <Route path="/" component={Layout}>
                <IndexRoute component={IndexPage} />
                <Route path="athlete/:id" component={AthletePage} />
                <Route path="*" component={NotFoundPage} />
            </Route>
        );

        return (
            <Router history={browserHistory} routes={routes} onUpdate={() => window.scrollTo(0, 0)} />
        );
    }
}

ReactDOM.render(<AppRoutes />, document.getElementById('main'));

webpack.config.js：

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: path.join(__dirname, 'src', 'components', 'AppRoutes.js'),
    output: {
        path: path.join(__dirname, 'src', 'static', 'js'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: path.join(__dirname, 'src'),
            loader: ['babel-loader'],
            query: {
                cacheDirectory: 'babel_cache',
                presets: ['react', 'es2015']
            }
        }]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            mangle: true,
            sourcemap: false,
            beautify: false,
            dead_code: true
        })
    ]
};

的index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Judo Heroes - A Universal JavaScript demo application with React</title>

    <link rel="stylesheet" href="/css/style.css">
  </head>

  <body>
    <div id="main"></div>

    <script src="/js/bundle.js"></script>
  </body>
</html>

React教程加载页面空白

0 个答案: