如何在现有的 django 网站上开始使用 react

Posted 2023-02-24

【中文标题】如何在现有的 django 网站上开始使用 react

【英文标题】：How to start using react on existing django website

【发布时间】：2017-05-05 21:50:12

【问题描述】：

我的团队开发了一个 django 网站，其中包含许多页面，这些页面完全无需 javascript 或可能使用少量 jquery 操作。我们想尝试使用 react 库来加速我们的页面并添加页面导航而不需要重新加载整个页面（我们选择 react 是因为我们用 react 实现了一些 SPA 网站，我们喜欢它）。我们的页面也应该使用禁用 js。

我想从一页开始，上面有 5 个表格。如果提交任何表单，则重新加载页面，字段中填充的数据会丢失并且工作缓慢。我想在 ajax 上实现发送数据并在服务器应答后更改一些 html。

每个 react 教程都说要在内部编写带有 html 标记的 jsx 组件，用 babel 将其转换为纯 js，并在页面加载时动态添加页面。或者，如果您想在服务器上呈现页面，您需要使用独立节点服务器。但是我已经有一个强大的 django 模板引擎来在服务器端渲染模板，我还需要渲染具有特定 django 内容的模板，例如多语言内容、用户变量等。

我可以在服务器端使用 django 完全呈现页面，并在加载后说反应，那个特定的 div 它是一个具有初始状态和现有 html 标记的组件吗？或者您可以告诉我另一个解决方案，而无需完全重写我的网站。谢谢。

【参考方案1】：

嗯，有点。每个 React 应用程序都从指定要渲染的根 HTML 元素开始。如果您只想使用 react 渲染网站的一部分，只需指定一个覆盖您想要的部分的元素。像这样的：

ReactDOM.render(<MyMainComponent />, document.getElementById('myReactSection'));

但是，这样做会覆盖其中的任何现有 HTML (https://facebook.github.io/react/docs/react-dom.html#render)。所以你需要 React 来重新渲染已经存在的 html。

另外，你不需要需要 babel 来编写反应代码，它只是非常有用（与webpack 一起）生成单个 javascript 包文件以发送到客户端最初使用令人敬畏的新 ES6 语法 (https://babeljs.io/learn-es2015/) 编写

【讨论】：

关于“理想”方法的任何想法（或参考）？用 React 完全替换 Django 模板，还是只用 React 渲染页面的一部分，其余部分使用 Django 模板引擎？我最近阅读了很多关于如何将 React 与 Django 集成的文章，这两种方法似乎彼此完全不同。很高兴听到 @taylorc93 或其他人的想法