带有Django的ReactJS-实际用法

Question

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

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

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

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

提前致谢！

Answer 1

由于您想将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的几个步骤相比，这甚至更多），但相信我从长远来看会有所收获。

总结一下：

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