ReactJS 与 Django-real 用法

我当时在玩“反应”游戏，我很喜欢。它比 Angular (带有 | filter 的 ng- 重复是无价的)冗长得多，但还好。

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

实现 Angular 非常顺畅。我只是将一些属性放入 template/django 表单类中，然后在一个单独的文件中编写 javascript。把那个文件包括进去，就搞定了。

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

先谢谢你！

28700 次浏览
小开
最佳答案

因为您希望将 React 与 Django 模板一起使用，所以我假设 React 代码只会影响页面的特定部分。下面的解释是基于这一假设写成的。

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

您可以创建一个单独的基于 JS 的构建过程 使用 Webpack(看看这个如何)。这增强了客户端代码的能力，允许您在浏览器中使用 CommonJS 模块，您可以直接从 npm (包括 做出反应)中提取这些模块。

Webpack 依次生成一个 bundle (或多个 bundle，这取决于应用程序的性质和 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 代码
小开

我实施了一些类似你要求的东西。我的前端完全在使用 webpack 编译的 reactjs 上，我的模板是用 django 创建的。

所以我这样做:-

  1. 使用 response-router 和 response 来创建. jsx/. js 代码。
  2. 使用 webpack 编译。
  3. 使用 Django-webpack

因此，django-webpack 工作得非常好，可以帮助您将编译隔离在 django 之外，从而以一种良好且可伸缩的方式工作。

小开

如果你把前端和后端看作是两个不同的、独立的实体，会怎么样呢? 我的意思是:

  1. Django 应该只是一个 API，并使用 json 数据进行响应
  2. 前端应该只是 nginx 提供的静态文件
  3. 您可能必须处理 CORS以允许两者之间的通信。一种选择是允许来自前端的飞行前请求，另一种选择是设置 nginx 代理。这是一个单独的问题，你应该搜索它，如果你需要更多的细节。

我认为这种体系结构允许将事物分离，而不需要处理它们的集成。在前端/React 生态系统中，事情已经太复杂了，所以我认为必须考虑配置的简单性。

我还有兴趣了解部署过程如何寻找这种体系结构(使用什么工具?)，所以请添加评论，如果你有建议，我会更新相应的回应，以提供有用的信息给未来的读者。


提交答案