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 run eject会将所有配置文件和传递依赖项（Webpack，Babel，ESLint等）复制到项目中，以便您可以完全控制它们。像npm start和npm run build这样的命令仍然有效，但它们会指向复制的脚本，以便您可以调整它们。在这一点上，你是独立的。

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

希望它能够成为现实

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

1 个答案: