带有Django的ReactJS-实际用法

Question 1

我对React有点困惑，我很喜欢它。它比Angular更为冗长（带有|过滤器的ng-repeat是无价的），但是还可以。

让我烦恼的是，我应该如何将React与Django模板一起使用。我应该将所有JavaScript连同“ HTML”标记一起放入模板中。

实施Angular非常无缝。我只是将一些属性放到template / django表单类中，然后在单独的文件中编写了javascript。包括该文件，就完成了。

如何对“使用”做出反应？正确的方法是什么？

提前致谢！

Question 2

由于您想将React与Django模板一起使用，因此我假设React代码只会影响页面的特定部分。基于该假设编写以下说明。

首先，您不必将所有JS代码都放在模板中-实际上，那是一团糟。

您可以使用Webpack创建一个单独的基于JS的构建过程（请参阅此方法）。这增强了客户端代码的功能，从而允许您在浏览器中使用CommonJS模块，您可以直接从npm中提取该模块，包括React。

Webpack将依次生成一个包（或多个包，具体取决于应用程序的性质和Webpack配置），您需要<script>像往常一样通过标签将其包含在Django模板中。

现在，您需要进行React.render()调用以在现有页面布局中的某个位置呈现React应用程序。您需要使用具有特定ID /类名称的空HTML元素作为应用程序的安装点。

但需要注意的是：您不能直接从浏览器或Django模板访问CommonJS模块。所以你

将React您的应用暴露给该window对象，或者
使用粘合代码创建一个模块来处理应用程序初始化并将该方法公开给window对象。

在任何情况下，您都需要直接从模板中调用初始化代码（查看胶水代码示例，以及对应用程序初始化的调用）。

此初始化步骤还允许您将Django模板中可用的变量传递给JS代码。

最终的Django模板将如下所示：

{% load staticfiles %}
{% extends 'base.html' %}

{% block scripts %}
<script type="text/javascript" src="{% static 'path/to/app.bundle.js' %}"></script>
<script type="text/javascript">
  // Initialization glue code
  window.MyApp.init({el: '.app-mountpoint'});
</script>
{% endblock %}

{% block content %}
<!-- Your template contents -->

<!-- The mount point of your app -->
<div class="app-mountpoint" />
{% endblock %}

和胶水代码：

var React = require('react');

var MyAppComponent = require('MyAppComponent');


window.MyApp = {

  init: function (opts) {
    var mountPoint = document.querySelector(opts.el);

    React.render(<MyAppComponent />, mountPoint);
  }

};

我知道所有这些可能在一开始就让人感到不知所措（与您使用Angular的几步相比，甚至更多），但相信我从长远来看会有所收获。

总结一下：

在单独的JS文件中编写React代码
使用Webpack（利用CommonJS模块）捆绑您的React代码
将捆绑包包含在Django模板中
使用Django模板中的粘合代码渲染React代码

Question 3

如果您将前端和后端视为两个不同的独立实体怎么办？我的意思是：

Django应该只是一个API，并以json数据作为响应
前端只能是nginx服务的静态文件
您可能必须处理CORS，才能允许两者之间进行通信。一种选择是允许来自您的前端的预检请求，另一种选择是设置nginx代理。这是一个单独的问题，如果需要更多详细信息，则应进行搜索。

我认为这种体系结构使您可以将事物分开，而不处理它们的集成。前端/反应生态系统上的事情已经太复杂了，因此我认为必须考虑配置的简单性。

我也很想知道部署过程将如何寻找该体系结构（使用什么工具？），因此如果您有建议，请添加注释，我将相应地更新响应以为将来的读者提供有用的信息。

Question 4

我实现了与您所要求的类似的东西。我的前端完全在使用Webpack编译的reactjs上，而我的模板是在Django中创建的。

所以我做以下：

使用react-router并进行响应以创建.jsx / .js代码。
使用webpack进行编译。
使用django-webpack

因此，django-webpack的工作原理非常好，并且可以帮助您在django之外隔离编译，以使想法以一种可扩展的好方式工作。