Django 本身不支持 React 的热重载，需通过 npm run build 手动构建生产静态文件，并由 Django 静态文件服务机制加载；直接运行 python manage.py runserver 不会自动响应 React 源码变更。
django 本身不支持 react 的热重载，需通过 `npm run build` 手动构建生产静态文件，并由 django 静态文件服务机制加载；直接运行 `python manage.py runserver` 不会自动响应 react 源码变更。
在 Django-React 集成项目中，常见误区是期望 Django 开发服务器（runserver）像 npm start 一样自动热更新 React 源码——但二者运行机制本质不同：npm start 启动的是 CRA（Create React App）的开发服务器，内置 Webpack Dev Server，支持实时编译与 HMR；而 Django 仅作为后端框架，负责托管已构建完成的静态资源，不会监听或重新编译 src/ 下的 JSX/TSX 文件。
✅ 正确工作流如下：
-
开发阶段保持双进程并行（推荐）：
- 终端 1：进入 react_app/ 目录，运行 npm start（端口 3000），用于快速迭代 UI；
- 终端 2：配置 Django 代理 API 请求至 http://localhost:3000（避免 CORS），例如在 react_app/src/setupProxy.js 中添加：
const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:8000', // Django 开发服务器地址 changeOrigin: true, }) ); }; - 此时前端由 CRA 独立服务，享受热重载，后端 API 由 Django 提供。
-
生产部署或需 Django 统一托管前端时（即 python manage.py runserver 显示自定义页面）：
确保 react_app 已正确构建并输出到 Django 可识别的静态目录（如 myproject/staticfiles/）；
-
在 react_app/package.json 中配置构建目标路径（可选）：
"homepage": ".",
-
运行构建命令：
cd react_app && npm run build
-
Django 需正确配置静态文件服务：
# settings.py import os BASE_DIR = Path(__file__).resolve().parent.parent.parent # 根据实际路径调整 REACT_APP_DIR = os.path.join(BASE_DIR, 'react_app') STATICFILES_DIRS = [ os.path.join(REACT_APP_DIR, 'build', 'static'), ] STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') # collectstatic 输出目录 # 确保 DEBUG=True 时能服务静态文件（开发环境） STATIC_URL = '/static/' -
更新 views.py，返回构建后的 index.html：
from django.views.generic import TemplateView from django.contrib.staticfiles.views import serve def index(request): return serve(request, 'index.html') # 或更推荐使用 TemplateView（自动处理静态路径） # urlpatterns += [path('', TemplateView.as_view(template_name='index.html'))] 关键步骤：每次修改 React 源码后，必须重新执行 npm run build，再刷新 Django 页面（无需重启 runserver，但需确保 DEBUG=True 且静态文件已正确映射）。
⚠️ 注意事项：
- npm run build 生成的是生产优化版代码（压缩、哈希文件名等），不可直接编辑 build/ 内容；
- 若使用 collectstatic 部署，请确认 STATICFILES_STORAGE 未启用 CDN 缓存导致旧资源残留；
- create-react-app 默认构建产物为单页应用（SPA），Django 需对所有非 API 路径回退至 index.html（可通过 whitenoise 或 Nginx 配置实现）；
- 切勿将 react_app/src/ 直接放在 Django templates/ 下——React 组件需经构建才能被浏览器解析。
总结：Django 不是前端开发服务器，它只负责交付静态资产。真正的开发效率来自 CRA 的 npm start；而 Django 的角色是统一部署入口与 API 网关。理解这一职责分离，是成功集成的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
