Question

我想创建一个带有react的前端和一个带有express的后端。

我也想同时运行它。（如果您在实际的开发情况下分别使用express和反应，请告诉我一个网址以及如何配置它，我将不胜感激。）

所以我想找到一个很好的库，叫做webpack-dev-server并加以利用。

因此，我经历了一个具有以下配置的react项目。

但是，express制作的后端服务器可以正常工作，但是react制作的前端服务器似乎不起作用。

├── build
├── ./package.json
├── ./public
│   ├── ./public/bundle.js
│   ├── ./public/favicon.ico
│   ├── ./public/index.html
├── ./server
│   └── ./server/index.js
├── ./src
│   ├── ./src/components
│   │   ├── ./src/components/About.js
│   │   ├── ./src/components/Header.js
│   │   ├── ./src/components/Home.js
│   │   └── ./src/components/NoMatch.js
│   ├── ./src/App.css
│   ├── ./src/App.js
│   ├── ./src/index.css
│   ├── ./src/index.js
│   └── ./src/serviceWorker.js
├── ./.babelrc
├── ./webpack.config.js
├── ./webpack.dev.config.js
└── ./yarn.lock

服务器代码很简单。

import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import 'babel-polyfill';

const express = require('express');
const app = express();
const port = 3000;
const devPort = 3001;

if(process.env.NODE_ENV == 'development') {
    console.log('Server is running on development mode');

    const config = require('../webpack.dev.config');
    let compiler = webpack(config);
    let devServer = new WebpackDevServer(compiler, config.devServer);
    devServer.listen(devPort, () => {
    console.log('webpack-dev-server is listening on port', devPort);
    });
}

app.locals.pretty = true;

app.use('/', express.static(__dirname + '/../public'));

app.use('/api/getList',(req, res) => {
    const result = [
        { id: 1, name: 'Steve', age: 20 },
        { id: 2, name: 'Steve', age: 20 },
        { id: 3, name: 'Steve', age: 20 },
        { id: 4, name: 'Steve', age: 20 },
        { id: 5, name: 'Steve', age: 20 },
        { id: 6, name: 'Steve', age: 20 }
    ];
    return res.json(result);
});

app.listen(port, () => {
  console.log('Server Running on port 3000');
});

这是Header.js中components文件夹下的代码。

import React, { Component } from 'react';

class Home extends Component {
    render() {
        return(
            <ui>
                <li><a href='/'>Home</a></li>
                <li><a href='/about'>About</a></li>
            </ui>
        );
    }
}
export default Home;

此代码来自Home.js。

其他组件的编码如下。

import React, { Component } from 'react';

class Home extends Component {
    render() {
        return(
            <h1>Home</h1>
        );
    }
}
export default Home;

取决于您是否在App.js代码中使用了react-router-dom，主页可能不可见。

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Header from './components/Header';
import Home from './components/Home';
import About from './components/About';
import NoMatch from './components/NoMatch';
import './App.css';

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <Header/>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/about" component={About} />
                    <Route component={NoMatch} />
                </Switch>
            </BrowserRouter>
        );
    }
}

export default App;

这是webpack.dev.config.js的内容

var path = require("path");
var webpack = require('webpack');

module.exports = {
    entry: [
        './src/index.js',
        'webpack-dev-server/client?http://0.0.0.0:3001',
        'webpack/hot/only-dev-server'
    ],
    devtool: 'inline-source-map',
    mode:'development',
    output: {
        path: __dirname + '/',
        filename: 'bundle.js'
    },
    devServer: {
        hot: true,
        filename: 'bundle.js',
        publicPath: '/',
        historyApiFallback: true,
        contentBase: './public',
        proxy: {
            "**": "http://localhost:3000"
        }
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                },
            },
            {
                test: /\.css$/,
                use: [{
                    loader: 'style-loader' ,
                }, {
                    loader: 'css-loader',
                }]
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        limit: 10000,
                    },  
                }]
            },

        ]
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
};

我将告诉您我的github以获取更多代码。您也可以在此处作为问题进行答复。 https://github.com/Mineru98/react-express

Answer 1

您将需要在Header组件中使用Link组件，而不是直接锚定

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Header extends Component {
  render() {
    return(
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    );
  }
}
export default Header;

react-router-dom无法与Express和React结合使用

1 个答案: