Создание приложения React без перезагрузки с помощью Express в разработке

Question

Я создал базовое приложение реакции с помощью приложения Create 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/" в package.json внутри CRA, чтобы соединить сервер и клиент

Вот сервер

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' });
});

Я перезапустил создание приложения реакции и сервера в консоли, но теперь, когда ядобавить что-то между div в компоненте ничего не загружается.Я полагаю, что сервер webpack dev начинает работать неправильно.Как сделать так, чтобы перезагрузка в CRA работала и делала запрос на выражение каждый раз, когда я изменяю что-то в компоненте?

Answer 1

При запуске create-реагировать на приложение с экспресс-, вам нужно запустить приложение server.js express в отдельном узле процесса, чем реакция-js-приложение.Также вам необходимо указать прокси в вашем package.json.

Используйте эти команды в отдельных терминалах:

node server.js

и в отдельном терминале:

npm start

Престижность этого урока: https://dev.to/loujaybee/using-create-react-app-with-express