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

问题描述

我正在与React混淆一点，我很喜欢。这比Angular更详细（ng-repeat with | filter是无价的），但是确定。

这个东西，那是我应该怎么用与Django模板反应。我应该把所有的JavaScript都放入模板以及HTML标记。

实现角度是相当无缝的。我只是把一些属性放在template / django表单类中，然后在一个单独的文件中写了javascript。包含该文件并完成。

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

提前感谢

解决方案

因为你想和Django模板一起使用React，所以我假设React代码只会影响页面的特定部分。以下说明是根据该假设编写的。

首先，您不需要将所有的JS代码放在模板中 - 事实上，这将是一团糟。

您可以创建单独的基于JS的构建过程使用Webpack （查看此howto ）。这可以增强您的客户端代码的功能，允许您在浏览器中使用CommonJS模块，您可以直接从npm下载，包括 React 。

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

现在您需要使 React.render（）调用将React应用程序呈现在现有页面布局中的某个位置。您需要使用具有特定ID /类名称的空HTML元素作为应用程序的挂载点。

但是，这里提醒您：您无法访问CommonJS模块直接从浏览器或Django模板。所以要么你这个

• 公开 React 和你的应用程序到窗口对象，或


• 创建一个包含粘贴代码的模块来处理应用程序初始化，并将该方法暴露给窗口 object。

在任何情况下，您都需要直接从模板中调用初始化代码（check out < a href =https://github.com/translate/pootle/blob/1700d26ce2977da58a48a0a79454343b6829563c/pootle/static/js/admin/app.js#L27-L46>胶合代码的示例，而< a href =https://github.com/translate/pootle/blob/1700d26ce2977da58a48a0a79454343b6829563c/pootle/templates/admin/projects.html#L12-L20>调用应用初始化）。

此初始化步骤还允许您将Django模板中的变量传递给JS代码。

最终的Django模板将看起来像像这样：

  {％load staticfiles％} 
 {％extends'base.htm l'％} 
 
 {％block scripts％} 
< script type =text / javascriptsrc ={％static'path / to / app.bundle.js'％ }>< /脚本> 
< script type =text / javascript> 
 //初始化粘贴代码
 window.MyApp.init（{el：'.app-mountpoint'}）; 
< / script> 
 {％endblock％} 
 
 {％block content％} 
<！ - 您的模板内容 - > 
 
<！ - 应用程序的挂载点 - > 
< 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代码

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 priceless) but ok.

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.

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

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

Thanks in advance!

解决方案

Since you want to use React along with Django templates, I assume the React code will only affect specific parts of your page. The following explanations are written based on that assumption.

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

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 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.

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.

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

• 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.

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).

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

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

And the glue 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.

So summarizing:

1. Write React code in separate JS files
2. Use Webpack (leveraging CommonJS modules) to bundle your React code
3. Include the bundle in your Django templates
4. Render the React code using glue code in Django templates

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