ReactJS 与 Django - 实际使用

Question

我在 React 上玩了一会儿，我非常喜欢它。它比 Angular 冗长得多(ng-repeat with | filter 是无价的)但没关系。

困扰我的是我应该如何将 React 与 Django 模板一起使用。我是否应该将所有 javascript 与“HTML”标记一起放入模板中。

Angular 的实现非常无缝。我只是将一些属性放入模板/django 表单类中，然后在单独的文件中编写 javascript。包含该文件即可完成。

如何“使用”react？什么是正确的方法？

提前致谢!

Answer 1

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

首先，您不必将所有 JS 代码都放在模板中 — 事实上，那样会很乱。

您可以创建一个单独的基于 JS 的构建过程 using Webpack (check out this howto)。这增强了客户端代码的功能，允许您在浏览器中使用 CommonJS 模块，您可以直接从 npm 中提取这些模块，包括 React .

Webpack 反过来会生成一个包(或多个包，取决于您的应用程序的性质和 Webpack 配置)，您需要通过 <script> 将其包含在 Django 模板中。像往常一样标记。

现在你需要制作 React.render()调用以在现有页面布局中的某处呈现您的 React 应用程序。您需要使用具有特定 ID/类名称的空 HTML 元素作为应用程序的挂载点。

但这里有一个警告:您不能直接从浏览器或 Django 模板访问 CommonJS 模块。所以要么你，

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

在任何情况下，您都需要直接从模板调用初始化代码(查看 an example of glue code 和 call to app initialization)。

此初始化步骤还允许您将 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 代码