ReactJS和Django - 实际使用 [英] ReactJS with Django - real usage

问题描述

我张望了一下搞乱反应，我很喜欢它。这远远超过角（NG-重复使用|过滤器princeless）更详细。但确定

I was messing around a bit with React and I quite like it. It's much more verbose than Angular (ng-repeat with | filter is princeless) but ok.

的东西，那就是缠着我，是我应该如何使用与Django模板反应。我应该把所有的JavaScript到模板的HTML标记沿。

The thing, that is bugging me, is how I'm supposed to use React with Django templates. Should I put all the javascript into templates along with the "HTML" markup.

Implemeting角是相当浑然一体。我只是把一些属性为模板/ Django的窗体类，然后在分隔的文件中写道JS。包括文件，它的完成。

Implemeting Angular was quite seamless. I just put some attributes into template/django form class and then wrote js in a separated file. Include that file and it's done.

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

How to "use" react? What is the right way?

在此先感谢！

推荐答案

的既然你想使用Django模板一起做出反应，我假定阵营code只会影响你的页面的特定部分。以下的说明是基于这样的假设写入。的

首先，你不必把所有的JS code模板 - 事实上，这将是一个烂摊子

First of all, you don't have to put all the JS code in the template — in fact, that would be a mess.

您可以使用WebPACK中（创建一个单独的基于JS-​​构建过程的看看这个HOWTO ）。增强您的客户端code的功能，让您在浏览器中，您可以直接从NPM拉，其中的作出反应。

You can create a separate JS-based build process 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中配置），你需要在你的Django模板，包括通过＆LT;脚本＆GT; 标签照常进行。

Webpack in turn will generate a bundle (or multiple bundles, depending on the nature of your application and the Webpack configuration) which you'll need to include in your Django templates via <script> tags as usual.

现在你需要做的 React.render（）来电某处呈现在现有的页面布局你的申请作出反应。你需要用一个空的HTML元素与特定的ID /类名作为挂载点的应用程序。

Now you need to make the React.render() call to render your React application somewhere in the existing page layout. You'll need to use an empty HTML element with a specific id/class name as a mount point for the application.

但这里来了警告：你不能从浏览器或Django模板直接访问CommonJS的模块。因此，无论你，

But here comes the caveat: you cannot access CommonJS modules directly from the browser or Django templates. So either you,

• 暴露阵营键，您的应用程序的窗口对象，或


• 创建用胶水code模块来处理应用程序的初始化和揭露该方法对窗口对象。

• expose React and your app to the window object, or
• create a module with glue code to handle app initialization and expose that method to the window object.

在任何情况下，你将需要直接从模板调用初始化code（检查<一href=\"https://github.com/translate/pootle/blob/1700d26ce2977da58a48a0a79454343b6829563c/pootle/static/js/admin/app.js#L27-L46\">an例如胶水code ，而<一个href=\"https://github.com/translate/pootle/blob/1700d26ce2977da58a48a0a79454343b6829563c/pootle/templates/admin/projects.html#L12-L20\">call以应用程序初始化）。

In any of the cases you will need to call the initialization code directly from the templates (check out an example of glue code, and the call to app initialization).

这初始化步骤，您还可以在Django模板可用的变量传递给JS code。

This initialization step also allows you to pass variables available in Django templates to the JS code.

最后Django的模板将是这个样子：

The final Django template will look something like this:

{% 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 %}

和胶水code：

var React = require('react');

var MyAppComponent = require('MyAppComponent');


window.MyApp = {

  init: function (opts) {
    var mountPoint = document.querySelector(opts.el);

    React.render(<MyAppComponent />, mountPoint);
  }

};

我知道这一切可能在一开始的声音铺天盖地（甚至更多相比，你有没有和角的几个步骤），但是相信我，它的长远回报。

I know all of this might sound overwhelming at the beginning (even more compared to the few steps you had with Angular), but believe me it pays off in the long run.

所以总结：

1. 写阵营code在单独的JS文件


2. 使用WebPACK中（利用CommonJS的模块）捆绑你的阵营code


3. 包括捆绑在你的Django模板


4. 渲染使用胶水code在Django模板的阵营code

这篇关于ReactJS和Django - 实际使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！