如何让Django和ReactJS一起工作？

时间：2017-01-26 04:47:03

标签： django reactjs

Django的新手，甚至更新的ReactJS。我一直在研究AngularJS和ReactJS，但决定使用ReactJS。尽管AngularJS拥有更多的市场份额，但似乎它已经逐渐消耗了AngularJS，而且据说ReactJS的发布速度更快。

除了垃圾之外，我开始在Udemy学习一门课程，看了几段视频后，看看它与Django的整合程度似乎很重要。那是当我不可避免地碰到一堵墙而刚开始运行的时候，那里有什么样的文件，这样我就不会在几个小时和几个晚上转动轮子了。

我遇到的还没有任何全面的教程或pip软件包。我遇到的少数人没有工作或约会，pyreact例如。

我想到的只是将ReactJS完全分开，但要考虑我希望ReactJS组件呈现的类和ID。将单独的ReactJS组件编译成单个ES5文件后，只需导入该单个文件进入Django模板。

我认为当我从Django模型渲染时会很快崩溃，尽管Django Rest Framework听起来像是涉及到它。甚至还不足以看出Redux如何影响所有这些。

无论如何，任何人都有明确的方式使用他们关心的Django和ReactJS分享？

无论如何，AngularJS和Django的文档和教程都很丰富，所以很有可能只是走这条路来开始使用任何前端框架......不是最好的理由。

9 个答案:

答案 0 :(得分：109)

我没有使用Django的经验，但从前端到后端和前端框架到框架的概念是相同的。

  1. React将消耗您的Django REST API 。前端和后端没有任何连接方式。 React将向您的REST API发出HTTP请求，以便获取和设置数据。
  2. 在 Webpack（模块捆绑器）＆amp;帮助下进行反应。 Babel（转换器），将您的Javascript捆绑并转换为单个或多个文件，这些文件将放置在条目HTML页面中。 了解Webpack，Babel，Javascript和React以及Redux（状态容器）。我相信你不会使用Django模板，而是允许React渲染前端。
  3. 在呈现此页面时，React将使用API​​来获取数据，以便React可以呈现它。您对 HTTP请求，Javascript（ES6），Promises，中间件和React 的理解至关重要。

    4. 以下是我在网络上发现的一些应该帮助的内容（基于快速Google搜索）：

    希望这能引导你朝着正确的方向前进！祝好运！希望专门研究Django的其他人可以加入我的回复。

答案 1 :(得分：32)

我也感受到了你的痛苦，我也开始让Django和React.js一起工作。做了两个Django项目，我认为，React.js是Django的绝佳搭档。然而，开始时可能会令人生畏。我们站在巨人的肩膀上;）

以下是我的想法，一切都在一起工作（大图，如果我错了，请有人纠正我。）

  • Django及其数据库（我更喜欢Postgres）（一端）（后端）
  • Django Rest-framework提供与外界的接口（即Mobile Apps和React等）
  • Reactjs，Nodejs，Webpack，Redux（或者可能是MobX？）在另一边（前端）

Django和＆＃39;前端之间的沟通＆＃39;是通过Rest框架完成的。确保您已获得Rest框架的授权和权限。

我找到了一个很好的锅炉模板，正是这个场景，它开箱即用。只需按照自述文件https://github.com/scottwoodall/django-react-template，一旦完成，你就会运行一个相当不错的Django Reactjs项目。 绝不是为了生产，而是为了让你深入了解事物的连接和工作方式！

我想建议的一个微小变化是： 在进入第二步设置后端（Django here https://github.com/scottwoodall/django-react-template/blob/master/backend/README.md）之前，请按照设置说明进行操作，更改设置的要求文件。

您可以在/backend/requirements/common.pip中找到项目中的文件 用此

替换其内容 
label

这将为您提供Django及其Rest框架的最新稳定版本。

我希望有所帮助。

答案 2 :(得分：16)

正如其他人回答你所说，如果你正在创建一个新项目，你可以分离前端和后端，并使用任何django rest插件为你的前端应用程序创建rest api。这是理想的世界。

如果您的项目已经安装了django模板，那么您必须在要加载应用程序的页面中加载您的react dom渲染。在我的情况下，我已经 django-pipeline ，我刚刚添加了browserify扩展。 （https://github.com/j0hnsmith/django-pipeline-browserify）

在示例中，我使用django-pipeline加载应用程序：

PIPELINE = {
    # ...
    'javascript':{
        'browserify': {
            'source_filenames' : (
                'js/entry-point.browserify.js',
            ),
            'output_filename': 'js/entry-point.js',
        },
    }
}

您的“ entry-point.browserify.js ”可以是一个ES6文件，可以在模板中加载您的反应应用程序：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app.js';
import "babel-polyfill";

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';
import reducers from './reducers/index.js';

const createStoreWithMiddleware = applyMiddleware(
  promise
)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App/>
  </Provider>
  , document.getElementById('my-react-app')
);

在您的django模板中，您现在可以轻松加载您的应用：

{% load pipeline %}

{% comment %} 
`browserify` is a PIPELINE key setup in the settings for django 
 pipeline. See the example above
{% endcomment %}

{% javascript 'browserify' %}

{% comment %} 
the app will be loaded here thanks to the entry point you created 
in PIPELINE settings. The key is the `entry-point.browserify.js` 
responsable to inject with ReactDOM.render() you react app in the div 
below
{% endcomment %}
<div id="my-react-app"></div>

使用django-pipeline的优点是在collectstatic期间处理静态。

答案 3 :(得分：9)

第一种方法是构建单独的Django和React应用程序。 Django将负责提供使用Django REST框架构建的API，React将使用Axios客户端或浏览器的fetch API来使用这些API。 您需要在开发和生产中拥有两台服务器，一台用于Django（REST API），另一台用于React（用于提供静态文件）。

第二种方法不同前端和后端应用程序将耦合。基本上，您将使用Django来提供React前端并公开REST API。因此，您需要将React和Webpack与Django集成，这些是您可以遵循的步骤

首先生成您的Django项目，然后在此项目目录中使用React CLI生成您的React应用程序

对于Django项目，使用pip安装 django-webpack-loader ：

pip install django-webpack-loader

接下来，将应用添加到已安装的应用中，并通过添加以下对象

在settings.py中对其进行配置 
WEBPACK_LOADER = {
    'DEFAULT': {
            'BUNDLE_DIR_NAME': '',
            'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        }
}

然后添加一个Django模板，用于挂载React应用程序，将由Django提供

{ % load render_bundle from webpack_loader % }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Django + React </title>
  </head>
  <body>
    <div id="root">
     This is where React will be mounted
    </div>
    { % render_bundle 'main' % }
  </body>
</html>

然后在urls.py中添加一个网址以提供此模板

from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView

urlpatterns = [

    url(r'^', TemplateView.as_view(template_name="main.html")),

]

如果此时启动Django和React服务器，您将收到Django错误，指出webpack-stats.json不存在。接下来，您需要使您的React应用程序能够生成统计信息文件。

继续在您的React应用程序中导航，然后安装webpack-bundle-tracker 

npm install webpack-bundle-tracker --save

然后弹出您的Webpack配置并转到config/webpack.config.dev.js，然后添加

var BundleTracker  = require('webpack-bundle-tracker');
//...

module.exports = {

    plugins: [
          new BundleTracker({path: "../", filename: 'webpack-stats.json'}),
    ]
}

将 BundleTracker 插件添加到Webpack并指示它在父文件夹中生成webpack-stats.json。

确保在config/webpack.config.prod.js生产中也这样做。

现在，如果重新运行React服务器，将生成webpack-stats.json，Django将能够使用它来查找有关React dev服务器生成的Webpack包的信息。

还有其他一些事情要做。您可以从此tutorial中找到更多信息。

答案 4 :(得分：8)

任何来自后端或基于Django的角色并尝试使用ReactJS的人的注释：没有人设法在第一次尝试中成功设置ReactJS环境：）

来自Owais Lone的博客可从http://owaislone.org/blog/webpack-plus-reactjs-and-django/获得;但Webpack配置上的语法已经过时了。

我建议您按照博客中提到的步骤使用以下内容替换webpack配置文件。然而，如果你是Django和React的新手，一次咀嚼一个，因为学习曲线你可能会感到沮丧。

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    context: __dirname,
    entry: './static/assets/js/index',
    output: {
        path: path.resolve('./static/assets/bundles/'),
        filename: '[name]-[hash].js'
    },
    plugins: [
        new BundleTracker({filename: './webpack-stats.json'})
    ],

 module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },


  resolve: {
        modules: ['node_modules', 'bower_components'],
        extensions: ['.js', '.jsx']
    }
};

答案 5 :(得分：1)

您可以尝试以下教程，它可以帮助您继续前进：

Serving React and Django together

答案 6 :(得分：0)

这个被接受的答案使我相信，无论如何，将Django后端和React Frontend分离都是正确的方法。实际上，有一些方法可以将React和Django耦合在一起，这在特定情况下可能更适合。

This tutorial很好地解释了这一点。特别是：

  

我看到以下模式（几乎对于每个Web框架都是通用的）：

     

-在自己的“前端” Django应用程序中进行反应：加载单个HTML模板，然后让React管理前端（难度：中等）

     

-作为独立API的Django REST +作为独立SPA的React（困难：艰苦，它涉及JWT进行身份验证）

     

-混合并匹配：Django模板中的迷你React应用（困难：简单）

答案 7 :(得分：0)

我知道这已经晚了几年，但是我准备把它放在下一个旅程中。

与DjangoRESTFramework相比，

GraphQL很有帮助，而且方法也更简单。就您得到的答复而言，它也更加灵活。您可以得到想要的东西，而不必通过响应进行筛选就可以得到想要的东西。

您可以在服务器端使用Graphene Django和React + Apollo / Relay ...您可以对其进行研究，因为这不是您的问题。

答案 8 :(得分：0)

希望提供的答案比这里的任何答案都更细微，尤其是自从大约4年前提出这一要求以来，某些事情已经发生了变化，并且由于许多最受好评的答案都要求您必须进行设置因为两个单独的应用程序不准确。

您有两个主要的体系结构选项：

  1. 使用诸如create-react-app和Django REST Framework之类的完全分离的客户端/服务器方法
  2. 一种混合体系结构，您可以在其中建立一个React构建管道（可能使用webpack），然后将已编译文件作为静态文件包含在Django模板中。

这些可能看起来像这样：

选项1（客户端/服务器体系结构）：

Client / Server Architecture

选项2（混合架构）：

Hybrid Architecture

这两者之间的决定取决于您/您团队的经验以及UI的复杂性。如果您具有丰富的JS经验，想让您的前端/后端开发人员分开，或者想将您的整个应用程序编写为React单页应用程序，则第一种选择是不错的选择。 。如果您更熟悉Django并且想快速移动，同时还对应用程序的某些部分使用React，那么第二个选项通常更好。我发现它特别适合全栈开发人员。

“ Modern JavaScript for Django Developers”系列中有很多信息，包括choosing your architecture，integrating your JS build into a Django project和building a single-page React app。

完全公开，我是该系列的作者。

相关问题
最新问题