我现在也在做同样的事情——从嵌入的 HTML 脚本标签转移到require土地。这是我正在关注的教程，这是迄今为止我的文件系统。我是在 Node 中做的，但对于 Django 项目来说应该没有什么不同，因为 React 前端代码与 API URL 以外的任何后端分离。

您的node_modules文件夹包含react-bootstrap. 在您的 中myapp.js，使用require('react-bootstrap')加载node_modules文件夹中包含的库。

1. 我应该把我的 React 代码放在哪里来处理这些 npm module（我应该使用 var React = require('react') 吗？

你可以把代码放在任何地方。如果您的文件系统如下所示：

project/
  react/
    myapp.js
  node_modules/
    react source code
    react bootstrap stuff

然后你就可以var React = require('react');在myapp.js.

2. 我是否需要以某种方式编译此代码（使用 webpack？）

是的，我会参考我之前链接的 webpack 教程，它应该解释如何将所有 React 代码编译成单个bundle.js. 这也是另一个很好的教程。该bundle.js文件包含您的requires. 所以如果你myapp.js看起来像

var React = require('react');
var ReactBootstrap = require('react-bootstrap');

那么bundle.js现在包含所有的 React 和 react-bootstrap javascript 代码，以及myapp.js源代码。

3. 然后我如何将它与 Django 集成？我是否应该将其全部编译到 myapp.js 并将其包含在我的 HTML 模板中？

我只在 Nodejs 上做过工作，但我的 React 代码到目前为止还没有触及任何 Node 代码，而且我认为它不会触及任何 Django 代码（同样，我从未做过 Django，所以我可能是错的）。您需要做的就是使用 webpack 进行编译，它会输出一个bundle.js. 你把它bundle.js放在你的 HTML 中，它会加载myapp.js。

ReactJS 代码仍然是 JS 代码。即使您在编码时确实需要/导入/其他基于module的语法，在浏览器中您仍然会通过脚本标签加载 JS 代码。

问题是如何让 webpack(bundle.js) 生成的脚本与其他“VanillaJS”脚本一起工作。例如，如果你只使用 React 编写一个单独的组件，比如一个小表格。它的数据（props/状态）将取决于另一个用 VanillaJS 编写的元素/事件，例如，django 模板渲染的按钮上的单击侦听器。那么问题来了，他们是如何相互交流的。

到目前为止，我知道的解决方案是：

当您编写 React 代码时ReactDOM.render，您可以将其存储在全局函数中，而不是使用预设的 props/state 显式调用，参数可以是 props。你先加载这个脚本，然后另一个脚本可以使用这个全局函数来触发 React 渲染组件。

我正在使用 Django Rest Framework 构建一个 API，然后从 React 连接到该 API（使用简单的 Create react 应用程序），这样前端和后端是分开的，并且应用程序非常可扩展。第二种方法是调用 create react app 然后运行 ​​build 并将您的 django 设置指向该 react 构建，这样前端就不会与后端分离。我希望这有帮助，祝你好运。