如何让 Django 和 ReactJS 一起工作？

Question

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

原文由 cjones 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

以下是我在网上找到的一些 应该 有帮助的东西（基于快速的 Google 搜索）：

• Django 和 React API Youtube 教程
• 使用 React 设置 Django （用 archive.org 链接替换断开的链接）
• 使用上面加粗的术语搜索其他资源。首先尝试“Django React Webpack”。

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

原文由 KA01 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我也感受到了你的痛苦，因为我也开始让 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 框架的最新稳定版本。

我希望这有帮助。

原文由 imolitor 发布，翻译遵循 CC BY-SA 3.0 许可协议