由于您想将React与Django模板一起使用，因此我假设React代码只会影响页面的特定部分。 基于该假设编写以下说明。
首先，您不必将所有JS代码都放在模板中-实际上，那是一团糟。
您可以使用Webpack创建一个单独的基于JS的构建过程（请参阅此方法）。这增强了客户端代码的功能，允许您在浏览器中使用CommonJS模块，您可以直接从npm中提取该模块，包括React。
Webpack将依次生成一个包（或多个包，具体取决于应用程序的性质和Webpack配置），您需要
<script>像往常一样通过标签将其包含在Django模板中。
现在，您需要进行
React.render()调用以在现有页面布局中的某个位置呈现React应用程序。您需要使用具有特定ID
/类名称的空HTML元素作为应用程序的安装点。
但需要注意的是：您不能直接从浏览器或Django模板访问CommonJS模块。所以你
- 将
React
您的应用暴露给该window
对象，或者 - 用粘合代码创建一个模块来处理应用程序初始化并将该方法公开给
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 pre window.MyApp.init({el: '.app-mountpoint'});</script>{% endblock %}{% block content %}<!-- Your template contents --><!-- The mount point of your app --><div />{% 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的几个步骤相比，这甚至更多），但相信我从长远来看会有所收获。
总结一下：
- 在单独的JS文件中编写React代码
- 使用Webpack（利用CommonJS模块）捆绑您的React代码
- 将捆绑包包含在Django模板中
- 使用Django模板中的粘合代码渲染React代码
