I created a basic react app with Create React App. I removed all default files and added this into index file.
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'));
This app works. I can add some letters between divs and it reloads when saving. But when I add simple Express server the reloading stops. I also add "proxy": "http://localhost:5000/" into package.json inside CRA to connect server and client
Here is the server
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' });
});
I restarted both Create react app and server in console but now when I add smth between divs in the component nothing is reloading. I guess webpack dev server starts working improperly. How can I make reloading in CRA work and make request to express each time when I change smth in component?
5000is the standard port for webpack-dev-server so it's probably not a conflict between express and webpack. Do you notice any error in the console or in the network panel ?