ReactJS 与 Django - 实际使用

Question

我在 React 上玩了一下，我很喜欢它。它比 Angular 冗长得多（ng-repeat with | filter 是无价的）但是没关系。

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

实施 Angular 非常顺畅。我只是将一些属性放入 template/django 形式 class 然后在一个单独的文件中写 javascript 。包含该文件即可完成。

如何"use"反应？什么是正确的方法？

提前致谢！

Answer 1

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

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

您可以创建一个单独的基于 JS 的构建过程using Webpack (check out this howto). That enhances your client-side code's capabilities, allowing you to use CommonJS modules in the browser, which you can directly pull from npm, including React。

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

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

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

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

在任何情况下，您都需要直接从模板调用初始化代码（查看 an example of glue code, and the 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 的几个步骤相比甚至更多），但相信我它会在漫长的运行中得到回报。

所以总结一下：

在单独的 JS 文件中编写 React 代码
使用 Webpack（利用 CommonJS 模块）捆绑您的 React 代码
在您的 Django 模板中包含该包
在 Django 模板中使用胶水代码呈现 React 代码

Answer 2

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

所以我执行以下操作：-

使用 react-router 和 react 来创建 .jsx/.js 代码。
使用webpack编译。
使用django-webpack

所以 django-webpack 工作得非常好，可以帮助您将编译隔离在 django 之外，让您的想法以一种漂亮且可扩展的方式工作。

Answer 3

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

Django 应该只是一个 API 并响应 json 数据
The frontend should be only static files served by nginx
您可能需要处理 CORS 才能允许两者之间的通信。一种选择是允许来自前端的预检请求，另一种选择是设置 nginx 代理。这是一个单独的问题，如果您需要更多详细信息，您应该搜索它。

我认为这种架构允许您将事物分开，而不是处理它们的集成。 frontend/React 生态系统已经太复杂了，所以我认为必须考虑配置的简单性。

我也有兴趣了解部署过程如何寻找此架构（使用什么工具？），所以如果您有建议请添加评论，我会相应地更新回复以提供有用的信息供未来的读者使用。

ReactJS 与 Django - 实际使用

ReactJS with Django - real usage

django

reactjs