ReactJS与Django – 真正的用法
我用React搞了一下，我非常喜欢。 它比Angular更详细（ng-repeat with | filter是无价的），但是可以。
这个东西，这是我的bug，是我应该如何使用React与Django模板。 我应该把所有的JavaScript与“HTML”标记一起放入模板中。
实现Angular是相当无缝的。 我只是把一些属性到模板/ Django的表单类，然后写在一个单独的文件的JavaScript。 包括该文件，并完成。
如何“使用”反应？ 什么是正确的方式？
提前致谢！
既然你想使用React和Django模板，我假设React代码只会影响页面的特定部分。 下面的解释是基于这个假设写的。
首先，你不必把所有的JS代码放在模板中 – 事实上，这将是一个烂摊子。
你可以使用Webpack创build一个单独的基于JS的构build过程（ 查看这个howto ）。 这增强了您的客户端代码的function，允许您在浏览器中使用CommonJS模块，您可以直接从npm下载，包括React 。
反过来，Webpack将生成一个捆绑包（或多个捆绑包，这取决于应用程序的性质和Webpackconfiguration），您需要像往常一样通过<script>标签将其包含在Django模板中。
现在，您需要进行React.render()调用，以在现有页面布局的某处呈现您的React应用程序。 您需要使用具有特定ID /类名称的空HTML元素作为应用程序的挂载点。
但是有一点需要注意：不能直接从浏览器或Django模板访问CommonJS模块。 所以无论你，
- 将
React和您的应用展示给window对象，或者 - 用胶水代码创build一个模块来处理应用程序初始化，并将该方法暴露给
window对象。
在任何情况下，您都需要直接从模板中调用初始化代码（查看粘合代码的示例以及对应用程序初始化的调用 ）。
这个初始化步骤还允许您将Django模板中可用的variables传递给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代码
如果将前端和后端视为两个不同的独立实体呢？ 我的意思是说：
- Django应该只是一个API，并使用json数据进行响应
- 前端应该只是nginx提供的静态文件
- 您可能不得不与CORS打交道，以便在两者之间进行沟通。 一种select是允许来自前端的预检请求，另一种select是设置一个nginx代理。 这是一个单独的问题，如果您需要更多的细节，您应该search它。
我认为这种架构可以让你保持分离，而不是处理它们的整合。 在前端/ React生态系统中，事情已经太复杂了，所以我认为configuration的简单性已经被考虑进去了。
我也有兴趣了解一个部署过程如何寻找这个架构（使用什么工具？），所以如果你有build议，请添加评论，我会相应地更新响应，为未来的读者提供有用的信息。
我实现了类似于你所要求的东西。 我的前端完全是在使用webpack编译reactjs和我的模板在Django中创build。
所以我做了以下：
- 使用react-router并作出反应来创build.jsx / .js代码。
- 使用webpack编译。
- 使用django-webpack
所以django-webpack的工作真的很好，并帮助你隔离django之外的编译，以获得认为工作在一个很好的和可扩展的方式。
