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

Question

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

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

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

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

Answer 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/) 编写