Question

我和React有点混乱，我非常喜欢它。它比Angular（ng-repeat with | filter无价值）要冗长得多，但还不错。

让我烦恼的是，我应该如何使用React和Django模板。我应该将所有的javascript与＆＃34; HTML＆＃34;一起放入模板中标记。

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

如何＆＃34;使用＆＃34;何反应？什么是正确的方法？

提前致谢！

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的几个步骤相比更是如此），但相信我从长远来看会有所回报。

总结：

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

Answer 2

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

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

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

我还有兴趣了解部署过程如何查找此体系结构（使用哪些工具？），因此如果您有建议，请添加评论，我会相应更新响应以提供有用的信息对于未来的读者。

Answer 3

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

所以我这样做： -

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

所以django-webpack非常好用，可以帮助你在django之外隔离你的编译，让思考以一种漂亮和可扩展的方式工作。

ReactJS与Django - 真实使用

3 个答案: