React 编译没有错误，但浏览器上没有显示组件

Question

我是 React 新手。

我已经使用 npm install create-react-app 安装了 React。 我创建了一个server.js 文件，我的文件结构在这里。

package.json

{
      "name": "my-app",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "axios": "^0.17.1",
        "babel-loader": "^7.1.2",
        "body-parser": "^1.18.2",
        "classnames": "^2.2.5",
        "express": "latest",
        "lodash": "latest",
        "morgan": "^1.9.0",
        "prop-types": "latest",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-router": "^4.2.0",
        "react-router-dom": "^4.2.2",
        "react-scripts": "1.0.17",
        "validator": "^9.2.0",
        "webpack-hot-middleware": "^2.21.0",
        "html-webpack-plugin": "latest"
      },
      "scripts": {
        "start": "nodemon --watch server --exec babel-node -- server.js",
        "start-dev": "node server.js",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      },
      "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-react-hmre": "^1.1.1",
        "nstall": "^0.2.0",
        "react-hot-loader": "^3.1.3",
        "react-redux": "^5.0.6",
        "redux": "^3.7.2",
        "redux-thunk": "^2.2.0",
        "webpack": "^3.10.0",
        "webpack-dev-middleware": "^2.0.3"
      }
    }

server.js 文件

import path from "path";

import express from 'express';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from './webpack.config.dev';
import bodyParser from 'body-parser';

import users from './src/Actions/users';

const app = express();

app.use(bodyParser.json());

app.use('/api/users',users);

const compiler = webpack(webpackConfig);

app.use(webpackMiddleware(compiler, {
    hot:true,
    publicPath: webpackConfig.output.publicPath,
    noInfo: true
}));
app.use(webpackHotMiddleware(compiler));

app.use(express.static('public'));

app.get('*',(req,res)=>{
    res.sendFile(path.join(__dirname,'./public/index.html'));
});
app.listen(5001, () => console.log('Example app listening on port 5001!'));

Webpack.config.js 文件

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

module.exports = {
    devtool:'eval-source-map',

    entry: [
        'webpack-hot-middleware/',
        path.resolve(__dirname, './src/index.js')
    ],

    output:{
        path: path.join(__dirname, 'public'),
        filename: "[name].bundle.js",
        publicPath: '/'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ],
    devServer: {
        hot: true,
        inline: false,
        contentBase: "./"
    },
    module:{
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: [
                'react-hot-loader/webpack',
                'babel-loader?' +
                'babelrc=false,' +
                'presets[]=es2015,' +
                'presets[]=react'
            ]
        }]
    },
    resolve:{
        extensions:['.js']
    }
}

正在运行 npm run start 。它侦听足够的端口并编译所有内容而没有错误。但是，在浏览器上它不显示任何 React 组件。它只是运行，什么也不做。

src/index.js 文件

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter, Link, Route } from 'react-router-dom'
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';

import App from './App';
import Greet from './Greetings';
import SignupPage from './signup/signup';

const stores = createStore(
    (state = {}) => state,
    applyMiddleware(thunk)
);

ReactDOM.render((
    <Provider store={stores}>
    <BrowserRouter >
        <div>
            <Route component={App}>
            </Route>
            <div id={'jumbo'} className='container css'>
                <Route exact path='/' component={Greet}/>
                <Route path='/signup' component={SignupPage}/>
            </div>
        </div>
    </BrowserRouter>
    </Provider>
), document.getElementById('app'));
registerServiceWorker();

如何清除我的代码。我不知道我在哪里做错了。帮我 ！！ 提前致谢。 :-)

Answer 1

我认为您对 create-react-app 的作用及其工作原理感到困惑。来自create-react-app docs：

您无需安装或配置 Webpack 或 Babel 等工具。 它们是预先配置和隐藏的，因此您可以专注于代码。

只需创建一个项目，就可以开始了。

在后台，它使用 webpack 构建您的项目。 所以如果你想修改/添加 webpack，你应该查看npm run eject 命令。

运行 npm runeject 会将所有配置文件和传递依赖项（Webpack、Babel、ESLint 等）直接复制到您的项目中，以便您完全控制它们。 npm start 和 npm run build 等命令仍然有效，但它们会指向复制的脚本，以便您可以调整它们。此时，您只能靠自己了。

看来您不需要自己的webpack.config.js 文件。此外，如果您想让 webpack 开发服务器代理您的 API 请求到您的 API 服务器，您可以将下一个："proxy": "http://localhost:3001/" 添加到您的 package.json 文件中，以允许 webpack-dev-server 将您的请求重定向到您的服务器。

希望它有意义