在Django项目中添加React

Question

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

问题是我已经开始使用可下载的React入门套件,我不确定如何以"正确"的方式做事,并且使用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.所以是时候进行切换,但我不完全确定如何.

我已经运行npm install react,并npm install react-bootstrap从我的里面static/js在Django目录.这创建了一个node_modules包含各种文件的文件夹.

所以来自困惑的新手的三个问题:

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

Answer 1

我现在也在做同样的事情 - 从嵌入式HTML脚本标签转移到require陆地.这是我正在关注的教程,到目前为止这是我的文件系统.我在Node中这样做,但对于Django项目来说它应该不同,因为React前端代码与API URL之外的任何后端分离.

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

1. 我应该把我的React代码放在哪里使用这些npm模块(我应该使用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.