如何让姜戈和 ReactJS 一起工作？

对 Django 来说是新的，对 ReactJS 来说甚至更新。我一直在研究 AngularJS 和 ReactJS，但最终决定使用 ReactJS。尽管 AngularJS 拥有更多的市场份额，但它似乎在人气方面超过了 AngularJS，而且据说 ReactJS 回升得更快。

抛开那些垃圾不谈，我开始学习 Udemy 的课程，在几个视频之后，看看 Udemy 与 Django 的整合有多好似乎很重要。这就是当我不可避免地碰壁，只是让它启动和运行，什么样的文件是在那里，使我没有我的车轮几个小时和夜晚。

实际上没有任何全面的教程，或 pip软件包，我偶然发现。我遇到的少数几个没有工作或过时，例如 pyreact。

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

我认为当我从 Django 模型开始渲染的时候，这将很快崩溃，尽管 Django 剩余框架听起来好像也包括在内。甚至还不足以看到 Redux 是如何影响这一切的。

无论如何，有人有一个清楚的方式，他们使用 Django 和 ReactJS，他们愿意分享？

无论如何，对于 AngularJS 和 Django 来说，文档和教程都是丰富多彩的，所以我们很容易就按照这种方式开始使用任何前端框架... ... 这不是最好的理由。

130072 次浏览
小开
最佳答案

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

  1. 反应会消耗你的 Django REST API。前端和后端没有任何连接。React 将向您的 REST API 发出 HTTP 请求，以便获取和设置数据。
  2. 在 Webpack (模块捆绑器) & Babel (传送器)的帮助下，React 将把 Javascript 捆绑并传输到单个或多个文件中，这些文件将放置在条目 HTML 页面中。学习 Webpack，Babel，Javascript 和 React 以及 Redux (一个状态容器).我 相信你不会使用 Django 模板，而是允许反应呈现前端。
  3. 在呈现此页面时，React 将使用 API 来获取数据，以便 React 可以呈现数据。你对 HTTP 请求，Javascript (ES6) ，承诺，中间件和响应的理解在这里是至关重要的。

以下是我在网上发现的一些 应该可以帮助的东西(基于一个快速的谷歌搜索) :

希望这个能引导你走向正确的方向！祝你好运！希望其他专门研究姜戈的人能够对我的回应有所帮助。

小开

我也感受到了你的痛苦，因为我也开始让姜戈和反应小组合作了。我做过几个 Django 项目，我觉得 React.js 和 Django 很匹配。然而，一开始就可能令人望而生畏。我们在这里是站在巨人的肩膀上;)

我是这样想的，它们都是一起工作的(从大局来看，如果我错了，请有人纠正我)。

  • Django 和它的数据库(我更喜欢 Postgres)在一边(后端)
  • Django rest-提供与外部世界接口的框架(如移动应用程序和反应等)
  • Reactjs、 Nodejs、 Webpack、 Redux (或者 MobX?)在另一边(前端)

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

我找到了一个很好的锅炉模板，正是这种情况下，它的工作方式开箱即用。只需按照自述 https://github.com/scottwoodall/django-react-template操作，一旦完成，就可以运行一个相当不错的 Django Reactjs 项目。 这绝不是为了生产，而是作为一种方式，让您深入挖掘，看看事情是如何连接和工作！

我想提出一个小小的改变: 按照设置说明，但是在进入设置后端的第2步之前(Django here https://github.com/scottwoodall/django-react-template/blob/master/backend/README.md) ，更改设置的需求文件。

您将在项目中的/backend/demand/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 框架的最新稳定版本。

希望能帮上忙。

小开

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

如果您有一个已经具有 django 模板的项目，那么您必须在要加载应用程序的页面中加载您的反应域呈现。在我的例子中，我已经有了 姜戈管道，并且我刚刚添加了浏览器扩展。(https://github.com/j0hnsmith/django-pipeline-browserify)

在这个例子中，我使用 django-eline 加载了这个应用程序:

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

您的“ 入口点，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 管道的优点是在 collectstatic期间处理静态信息。

小开

对于那些来自后端或基于 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']
}
};
小开

第一种方法是构建单独的 Django 和 React 应用程序。Django 将负责提供使用 Django REST 框架构建的 API，React 将使用 Axios 客户机或浏览器的获取 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中添加一个 URL 来服务这个模板

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 文件。

继续前进，并导航内部的反应应用程序，然后安装 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'}),
]
}

这样就可以将 捆绑追踪器插件添加到 Webpack，并指示它在父文件夹中生成 webpack-stats.json。

确保在 config/webpack.config.prod.js中也对生产执行相同的操作。

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

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

小开

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

本教程 很好地解释了这一点，特别是:

我看到以下模式(几乎每个 Web 框架都有) :

--使用自己的“前端”Django 应用程序进行响应: 加载一个单独的 HTML 模板，让 React 管理前端(难度: 中等)

- Django REST 作为一个独立的 API + React 作为一个独立的 SPA (难度: 难，它涉及 JWT 进行身份验证)

- 混合和匹配: 迷你反应应用程序内的 Django 模板(难度: 简单)

小开

我知道这已经晚了好几年，但我要为下一个踏上这段旅程的人说出来。

与 DjangoRESTFramework 相比，GraphQL 更有帮助，也更容易。它也更灵活的方面，你得到的反应。你得到了你想要的，而不必通过过滤反应来得到你想要的。

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

小开

希望提供一个比这里任何一个更细致入微的答案，特别是自从4年前这个问题最初被问到以来，有些事情已经改变了，而且因为许多投票最多的答案声称你必须把它设置为两个独立的应用程序是不准确的。

你有两个主要的架构选择:

  1. 使用类似 创建-反应-应用程序和 Django REST 框架的完全解耦的客户机/服务器方法
  2. 一种混合架构，您可以在其中设置 React 构建管道(可能使用 网络包) ，然后将编译后的文件作为静态文件包含在 Django 模板中。

这些可能看起来像这样:

选项1(客户端/服务器体系结构) :

Client / Server Architecture

选择二(混合架构) :

Hybrid Architecture

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

在“ Django 开发人员使用的现代 JavaScript”系列中有更多的信息，包括 选择你的建筑、 将 JS 构建集成到 Django 项目中和 构建一个单页面的 React 应用程序。

老实说，我是那个系列的作者。


提交答案