如何让 Django 和 ReactJS 一起工作?

IT技术 django reactjs
2021-03-30 02:54:44

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 的文档和教程很多,所以很容易走这条路来开始使用任何前端框架......这不是最好的理由。

6个回答

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

  1. React 将使用您的Django REST API前端和后端没有以任何方式连接。React 将向您的 REST API 发出 HTTP 请求以获取和设置数据。
  2. React 在Webpack(module捆绑器)和 Babel(转译器)的帮助下,会将您的 Javascript 捆绑并转换为单个或多个文件,这些文件将放置在入口 HTML 页面中。学习 Webpack、Babel、Javascript 以及 React 和 Redux(一个状态容器)相信您不会使用 Django 模板,而是允许 React 渲染前端。
  3. 当这个页面被渲染时,React 将使用 API 来获取数据,以便 React 可以渲染它。您对HTTP 请求、Javascript (ES6)、Promise、中间件和 React 的理解在这里至关重要。

以下是我在网上找到的一些应该有所帮助的内容(基于快速的 Google 搜索):

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

我会用这篇文章替换那个死掉的第二个链接,我跟着这个,它主要工作...... medium.com/labcodes/configuring-django-with-react-4c599d1eae63
2021-05-25 02:54:44
在现有项目和全新项目上多次尝试第二个链接后,我至少让他们说话了。线路{% render_bundle 'main' %}是错误的,应该是{% render_bundle "main" %}
2021-06-08 02:54:44
我将查看 YouTube 教程。我之前确实看过这两个教程。尽管我密切关注第 1 条,但它不起作用。(复制并粘贴了大部分代码)。那是在现有项目上,但我会尝试一个新项目。第 2 条使用了已弃用的软件包,并且最近没有更新。无论如何,阅读有关 AngularJS 和 Django 的更多信息,听起来仍然使用 Django REST API。我想我正在寻找不添加该维度的解决方案,但这听起来似乎是不可避免的。
2021-06-09 02:54:44
好的,我通过取出过时的文章更新了我的答案。它已超过 2 年,因此肯定需要将其移除。编号的子弹有用吗?你有什么理解上的困难?
2021-06-15 02:54:44
第二个链接不起作用。请更新链接。
2021-06-20 02:54:44

我也感觉到你的痛苦,因为我也开始让 Django 和 React.js 一起工作。做过几个 Django 项目,我认为 React.js 非常适合 Django。但是,开始可能会令人生畏。我们站在巨人的肩膀上;)

这就是我的想法,它们一起工作(大图,如果我错了,请有人纠正我)。

  • 一侧(后端)的 Django 及其数据库(我更喜欢 Postgres)
  • Django Rest-framework 提供与外界的接口(即移动应用程序和 React 等)
  • 另一端(前端)的 Reactjs、Nodejs、Webpack、Redux(或者可能是 MobX?)

Django 和“前端”之间的通信是通过 Rest 框架完成的。确保您获得了 Rest 框架的授权和权限。

我为这个场景找到了一个很好的锅炉模板,它开箱即用。只需按照自述文件https://github.com/scottwoodall/django-react-template进行操作,完成后,您将运行一个非常不错的 Django Reactjs 项目。这绝不是为了生产,而是作为一种让您深入了解事物如何连接和工作的方式!

我想建议的一个微小变化是:在进入设置后端的第二步之前按照设置说明进行操作(此处为 Django https://github.com/scottwoodall/django-react-template/blob/master /backend/README.md),更改设置的需求文件。

您将在 /backend/requirements/common.pip 的项目中找到该文件,将其内容替换为

appdirs==1.4.0
Django==1.10.5
django-autofixture==0.12.0
django-extensions==1.6.1
django-filter==1.0.1
djangorestframework==3.5.3
psycopg2==2.6.1

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

我希望这有帮助。

一年后,我切换到 VUE.js ( vuejs.org )。我让它与 Django 模板一起工作,它将通过 Django Rest Framework 与数据库通信。它又快又轻(~20kb)
2021-06-01 02:54:44

正如其他人回答您的那样,如果您正在创建一个新项目,您可以将前端和后端分开,并使用任何 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 ”可以是在模板中加载您的react应用程序的 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.

第一种方法是构建单独的 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>

然后添加一个 URLurls.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 应用程序能够生成 stats 文件。

继续并在您的 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 开发服务器生成的 Webpack 包的信息。

还有一些其他的事情要做。您可以从本教程中找到更多信息

您可以简单地为静态文件使用静态主机和 CDN。例如,您可以使用 GitHub Pages 将 React 应用程序和 CloudFlare 作为 CDN 托管。对于服务器端渲染,您需要另一种设置,例如使用 Express 服务器,但也有静态托管服务提供服务器端渲染,如 Netlify。
2021-05-31 02:54:44
你需要以耦合方式运行 webpack-dev-server 吗?因为在教程中他正在运行它。根据我的理解,它需要运行,因为 django 使用它来保持包更新。这是正确的吗?如果这是在生产中如何工作,即我还需要两台服务器吗?
2021-06-03 02:54:44
你能详细说明第一种方法吗?据我了解,它将包含一个express运行服务器,该服务器将提供 React 静态 JS 文件,并且该 JS 文件将执行 ajax 请求以从 Django 服务器获取数据。浏览器首先访问express服务器,它对 Django 一无所知。我对么?使用这种方法可以像服务器端渲染这样的东西吗?
2021-06-15 02:54:44
在开发中,您需要同时运行 Django 开发服务器和 React/Webpack 开发服务器。在生产中,您只需要运行一台服务器 (Django),因为 Django 将负责提供由npm run build
2021-06-20 02:54:44
感谢您的澄清。
2021-06-20 02:54:44

希望提供一个比这里任何一个都更细致的答案,尤其是自从大约 4 年前最初提出这个问题以来有些事情已经发生了变化,并且因为许多最高投票的答案声称您必须将其设置为两个独立的应用程序不准确。

您有两个主要的架构选项:

  1. 使用create-react-appDjango REST Framework 之类的完全解耦的客户端/服务器方法
  2. 一种混合架构,您可以在其中设置 React 构建管道(可能使用webpack),然后将编译后的文件作为静态文件包含在 Django 模板中。

这些可能看起来像这样:

选项 1(客户端/服务器架构):

客户端/服务器架构

选项 2(混合架构):

混合架构

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

适用于 Django 开发人员的现代 JavaScript ”系列中有更多信息,包括选择您的架构将您的 JS 构建集成到 Django 项目中以及构建单页 React 应用程序

完全披露,我是该系列的作者。