第一种方法是构建单独的 Django 和 React 应用程序。 Django 将负责提供使用 Django REST 框架构建的 API，React 将使用 Axios 客户端或浏览器的 fetch API 使用这些 API。 您需要有两台服务器，用于开发和生产，一台用于 Django（REST API），另一台用于 React（提供静态文件）。
第二种方法不同前端和后端应用将耦合。基本上，您将使用 Django 来为 React 前端提供服务并公开 REST API。所以你需要将 React 和 Webpack 与 Django 集成，这些是你可以遵循的步骤
首先生成你的 Django 项目，然后在这个项目目录中使用 React CLI 生成你的 React 应用程序
对于 Django 项目，使用 pip 安装 django-webpack-loader：
pip install django-webpack-loader
接下来将应用添加到已安装的应用中，并通过添加以下对象在settings.py 中进行配置
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': '',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
}
然后添加一个 Django 模板，该模板将用于挂载 React 应用程序并由 Django 提供服务
{ % load render_bundle from webpack_loader % }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Django + React </title>
</head>
<body>
<div id="root">
This is where React will be mounted
</div>
{ % render_bundle 'main' % }
</body>
</html>
然后在urls.py 中添加一个 URL 来服务这个模板
from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView
urlpatterns = [
url(r'^', TemplateView.as_view(template_name="main.html")),
]
如果此时您同时启动 Django 和 React 服务器，您将收到一个 Django 错误，指出 webpack-stats.json 不存在。所以接下来你需要让你的 React 应用程序能够生成统计文件。
继续并在您的 React 应用中导航，然后安装 webpack-bundle-tracker
npm install webpack-bundle-tracker --save
然后弹出你的Webpack配置并转到config/webpack.config.dev.js然后添加
var BundleTracker = require('webpack-bundle-tracker');
//...
module.exports = {
plugins: [
new BundleTracker({path: "../", filename: 'webpack-stats.json'}),
]
}
这会将BundleTracker插件添加到Webpack并指示它在父文件夹中生成webpack-stats.json。
确保在 config/webpack.config.prod.js 中也为生产执行相同的操作。
现在，如果你重新运行你的 React 服务器，webpack-stats.json 将被生成，Django 将能够使用它来查找有关由 React 开发服务器生成的 Webpack 包的信息。
还有一些事情要做。您可以从此tutorial 找到更多信息。