由于您想将 React 与 Django 模板一起使用，我假设 React 代码只会影响页面的特定部分。以下说明是基于该假设编写的。

首先，您不必将所有 JS 代码都放在模板中——事实上，那会很混乱。

您可以使用 Webpack创建一个单独的基于 JS 的构建过程（查看此操作方法）。这增强了您的客户端代码的功能，允许您在浏览器中使用 CommonJS module，您可以直接从 npm 中提取这些module，包括React。

Webpack 反过来将生成一个包（或多个包，取决于您的应用程序的性质和 Webpack 配置），您需要<script>像往常一样通过标签将其包含在 Django 模板中。

现在，您需要React.render()调用以在现有页面布局中的某处呈现您的 React 应用程序。您需要使用具有特定 id/class 名称的空 HTML 元素作为应用程序的挂载点。

但这里有一个警告：你不能直接从浏览器或 Django 模板访问 CommonJS module。所以无论你，

• 将React您的应用程序暴露给该window对象，或
• 创建一个带有胶水代码的module来处理应用程序初始化并将该方法公开给window对象。

在任何情况下，您都需要直接从模板调用初始化代码（查看粘合代码示例和对应用程序初始化的调用）。

此初始化步骤还允许您将 Django 模板中可用的变量传递给 JS 代码。

最终的 Django 模板将如下所示：

{% load staticfiles %}
{% extends 'base.html' %}

{% block scripts %}
<script type="text/javascript" src="{% static 'path/to/app.bundle.js' %}"></script>
<script type="text/javascript">
  // Initialization glue code
  window.MyApp.init({el: '.app-mountpoint'});
</script>
{% endblock %}

{% block content %}
<!-- Your template contents -->

<!-- The mount point of your app -->
<div class="app-mountpoint" />
{% endblock %}

和胶水代码：

var React = require('react');

var MyAppComponent = require('MyAppComponent');


window.MyApp = {

  init: function (opts) {
    var mountPoint = document.querySelector(opts.el);

    React.render(<MyAppComponent />, mountPoint);
  }

};

我知道所有这些在一开始听起来可能令人难以抗拒（与您使用 Angular 的几个步骤相比甚至更多），但相信我从长远来看它是值得的。

所以总结一下：

1. 在单独的 JS 文件中编写 React 代码
2. 使用 Webpack（利用 CommonJS module）来捆绑你的 React 代码
3. 在 Django 模板中包含包
4. 使用 Django 模板中的胶水代码呈现 React 代码

如果您将前端和后端视为两个不同的独立实体会怎样？我的意思是：

1. Django 应该只是一个 API 并以 json 数据响应
2. 前端应该只是由 nginx 服务的静态文件
3. 您可能必须处理CORS以允许两者之间的通信。一种选择是允许来自前端的预检请求，另一种选择是设置 nginx 代理。这是一个单独的问题，如果您需要更多详细信息，您应该搜索它。

我认为这种架构允许您将事物分开而不是处理它们的集成。前端/React 生态系统的事情已经太复杂了，所以我认为必须考虑配置的简单性。

我也有兴趣了解部署过程将如何查找此架构（使用哪些工具？），因此，如果您有任何建议，请添加评论，我将相应地更新响应，为未来的读者提供有用的信息。

我实现了类似于你所问的东西。我的前端完全是使用 webpack 编译的 reactjs，我的模板是在 django 中创建的。

所以我做以下： -

1. 使用 react-router 和 react 创建 .jsx/.js 代码。
2. 使用 webpack 编译。
3. 使用django-webpack

所以 django-webpack 工作得非常好，可以帮助你在 django 之外隔离你的编译，让 thinks 以一种很好的和可扩展的方式工作。