Node.js React编译时没有错误,但浏览器上没有显示任何组件

Node.js React编译时没有错误,但浏览器上没有显示任何组件,node.js,reactjs,express,webpack,react-redux,Node.js,Reactjs,Express,Webpack,React Redux,我是新来的 我已使用npm安装创建React应用程序安装React。 我已经创建了一个server.js文件,我的文件结构在这里 package.json server.js文件 Webpack.config.js文件 在运行时npm运行启动。它侦听足够的端口并编译所有内容,没有错误。但是,在浏览器上,它不显示React的任何组件。它只是运行,什么也不做 src/index.js文件 从“React”导入React; 从“react dom”导入react dom; 从“./registerS

我是新来的

我已使用
npm安装创建React应用程序
安装React。
我已经创建了一个
server.js
文件,我的文件结构在这里

package.json

server.js文件

Webpack.config.js文件

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

src/index.js文件

从“React”导入React;
从“react dom”导入react dom;
从“./registerServiceWorker”导入registerServiceWorker;
从“react router dom”导入{BrowserRouter,Link,Route}
从'react redux'导入{Provider};
从“redux thunk”导入thunk;
从“redux”导入{createStore,applyMiddleware};
从“./App”导入应用程序;
从“/问候语”导入问候语;
从“./signup/signup”导入SignupPage;
const stores=createStore(
(state={}=>state,
applyMiddleware(thunk)
);
ReactDOM.render((
),document.getElementById('app');
registerServiceWorker();
如何清除我的代码。我不知道我在哪里犯了错误。帮助我!!
提前感谢。:-)

我想你对
create-react-app
的功能和工作原理感到困惑。从文档:

您不需要安装或配置Webpack或Babel等工具。 它们是预配置和隐藏的,以便您可以专注于代码

只要创建一个项目,你就可以开始了

在引擎盖下,它用webpack构建您的项目。 因此,如果您想修改/添加网页包,您应该查看
npm run eject
命令

运行npm run eject将所有配置文件和可传递的依赖项(Webpack、Babel、ESLint等)复制到您的项目中,这样您就可以完全控制它们。像npm start和npm run build这样的命令仍然可以工作,但它们会指向复制的脚本,以便您可以调整它们。在这一点上,你只能靠自己了

看来你不需要自己的
webpack.config.js
文件了。此外,如果您希望webpack development server将您的API请求代理到API服务器,则可以添加下一个:
“代理”:http://localhost:3001/“
放入
package.json
文件,以允许
网页开发服务器
将请求重定向到服务器


希望它有意义

控制台中有错误吗?控制台显示没有错误!!我会尝试在git中添加我的应用程序,我会留下一个链接。你应该在浏览器中打开开发者工具(我推荐Chrome),看看浏览器端发生了什么。我已使用opera浏览器的React开发者工具扩展检查React发生了什么。它说没有任何东西与反应有关。是的,非常感谢。我走错了路。我在YouTube上看了一个老教程。你说得对,我对
create react app
感到困惑。我会学得更好。很好的一天!!
{
      "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"
      }
    }
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!'));
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']
    }
}
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();