React With Django, Not auto refreshing without npm run dev - reactjs

Question

I've built React components in Django, but every time I update my react component I have to run
npm run dev + reload the browser to see the changes.
How can I fix this issue to make react refresh automatically after changes?
I have --watch on my script but still doesn't work
package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.5",
"babel-loader": "^8.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"react-router-dom": "^5.2.0"
}
}
index.js
import App from "./components/App";
App.js
import React, {Component} from "react";
import {render} from "react-dom";
import HomePage from "./HomePage";
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="center">
<HomePage/>
</div>
);
}
}
export default App;
const appDiv = document.getElementById("app");
render(<App />, appDiv);
Homepage.js
import React, {Component} from 'react';
class Homepage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
test 1
</div>
);
}
}
export default Homepage;

Answer 1

The reason is very obvious, you have integrated React in your Django application manually without CRA(create-react-app), and your Django page is isolated from your React application, Django will only detect changes in your .py files.
But there are some workaround for this, either you can use this package for your Django app -
https://github.com/fabiogibson/django-livesync
Or you can also try browsersync, which is a little complicated to integrate with Django, but possible.

Answer 2

A simple solution is to use the two terminals simultaneously - one for Python manage.py runserver and the other for npm run dev.