在 Django 项目中添加 React

Question

我是一名 Django 开发人员，刚刚开始将 React 添加到我的应用程序的一个页面，到目前为止我非常喜欢它。（这是一个带有主页、关于页面等的普通 Django 应用程序，还有一个带有交互式图表的 "chart" 页面，我想在 React 中构建交互式部分。）

问题是我是从 downloadable React starter kit 开始的，但我不确定如何按照 'right' 的方式做事，而且使用 Django 为我的项目提供服务很复杂（全部教程似乎假设您正在使用节点，而我不是）。

现在我的 Django 模板中只有这个：

<div id="myapp"></div>
<script src="/static/js/vendor/react.js"></script>
<script src="/static/js/vendor/JSXTransform.js"></script>
<script src="/static/js/myapp.js"></script>

并且 myapp.js 拥有所有的 React 代码。我知道这并不是成熟的现代 JS 做事方式。

现在我想使用 React Bootstrap，但似乎唯一明智的方法是使用 npm。所以是时候进行转换了，但我不完全确定如何进行。

我在 Django 的 static/js 目录中有运行 npm install react 和 npm install react-bootstrap。这创建了一个 node_modules 文件夹，里面有各种文件。

所以一个困惑的新手的三个问题：

我应该将我的 React 代码放在哪里以使用这些 npm 模块（我应该使用 var React = require('react') 吗？
我是否需要以某种方式编译此代码（使用 webpack？）
然后如何将其与 Django 集成？我是否应该将其全部编译为 myapp.js 并将其包含在我的 HTML 模板中？

Answer 1

我现在也在做同样的事情——从嵌入式 HTML 脚本标签转移到 require 领域。 Here is the tutorial I am following, and here is my file system 到目前为止。我是在 Node 中做的，但对于 Django 项目来说应该没有什么不同，因为 React 前端代码与 API URL 之外的任何后端分离。

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

Where should I put my React code to work with these npm modules (should I use var React = require('react')?

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

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

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

Do I need to compile this code somehow (using webpack?)

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

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

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

How do I then integrate this with Django? Should I compile it all to myapp.js and just include that in my HTML template?

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

Answer 2

ReactJS代码仍然是JS代码。即使你在编码时使用 require/import/other 基于模块的语法，在浏览器中你仍然会通过脚本标签加载 JS 代码。

问题是如何让 webpack(bundle.js) 生成的脚本与其他 'VanillaJS' 脚本一起工作。例如，如果你只使用 React 编写一个单独的组件，比如一个小 table。它的数据（props/state）将取决于另一个用 VanillaJS 编写的 element/event，例如，由 django 模板渲染的按钮上的点击监听器。那么问题来了，他们之间是如何沟通的

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

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

Answer 3

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

在 Django 项目中添加 React

Adding React inside a Django project

django

reactjs