django - 在 Django 项目中添加 React

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 的 static/js 目录中运行了 npm install react 和 npm install react-bootstrap 。这创建了一个 node_modules 文件夹，其中包含各种文件。

困惑的新手提出三个问题:

1. 我应该将 React 代码放在哪里才能与这些 npm 模块一起使用(我应该使用 var React = require('react') 吗？
2. 我是否需要以某种方式编译此代码(使用 webpack？)
3. 我如何将其与 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 文件夹中包含的库。

1. 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');。

2. 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 源代码。

3. 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。