Question

我使用Create React App创建了一个基本的React应用。我删除了所有默认文件，并将其添加到索引文件中。

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

class App extends Component {
constructor() {
    super();
    this.state = {};
}

async componentDidMount() {
    const response = await fetch('/express_backend');
    const json = await response.json();
    this.setState({ data: json.express });
}

render(){
    return (
        <div>{this.state.data}</div>
    );
}
}

ReactDOM.render(<App/>, document.getElementById('root'));

此应用有效。我可以在div之间添加一些字母，保存时会重新加载。但是，当我添加简单的Express服务器时，重新加载会停止。我还将"proxy": "http://localhost:5000/"添加到CRA中的package.json中，以连接服务器和客户端

这是服务器

const express = require('express');
const app = express();
const port = 5000;

app.listen(port, () => console.log(`Listening on port ${port}`));

// create a GET route
app.get('/express_backend', (req, res) => {
res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
});

我在控制台中重新启动了Create react app和server，但是现在当我在组件中的div之间添加smth时，没有任何重载。我猜webpack开发服务器无法正常工作。每次更改组件的尺寸时，如何在CRA中重新加载工作并提出表达请求？

Answer 1

在运行带有express的create-react-app时，您需要在不同于react-js-app的单独节点进程中运行server.js express应用。另外，您需要在package.json中指定代理。

在单独的终端中使用以下命令：

node server.js

并在单独的终端中：

npm start

本教程的荣誉：https://dev.to/loujaybee/using-create-react-app-with-express

创建React App时不要在Express中重新加载

1 个答案: