Question

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

问题是我已经开始使用downloadable React starter kit并且我不确定如何以'正确'的方式做事情，并且使用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的npm install react目录中运行npm install react-bootstrap和static/js。这创建了一个包含各种文件的node_modules文件夹。

来自困惑的新手的三个问题：

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

Answer 1

我现在也在做同样的事情 - 从嵌入式HTML脚本标签转移到require土地。 Here is the tutorial I am following，到目前为止，这是我的file system。我在Node中这样做但是对于Django项目它应该不同，因为React前端代码与API URL之外的任何后端分离。

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

我应该在哪里放置我的React代码来使用这些npm模块（我应该使用var React = require（'react'）吗？

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

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

然后您可以在var React = require('react');中myapp.js进行操作。

我是否需要以某种方式编译此代码（使用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源代码。

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

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

Answer 2

ReactJS代码仍然是JS代码。即使您在编码时需要/ import /其他基于模块的语法，在浏览器中仍然会通过脚本标记加载JS代码。

问题是如何让webpack（bundle.js）生成的脚本与其他＆＃39; VanillaJS＆＃39;脚本。例如，如果您只使用React编写单个组件，就像一个小表。它的数据（道具/状态）将取决于用VanillaJS编写的另一个元素/事件，例如，由django模板呈现的按钮上的点击监听器。那么问题是，他们如何相互沟通。

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

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

Answer 3

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

在Django项目中添加React

3 个答案: