19、整合ReactJS与Flask：构建功能完备的Web应用

整合ReactJS与Flask：构建功能完备的Web应用

1. ReactJS基础应用

在本次演示中， RunsBox 类通过 /api/runs.json 这个URL进行实例化。当页面显示后，React会调用该URL，期望获取一个跑步记录列表，并将其传递给 Runs 和 Run 实例。

需要注意的是，我们使用 window.RunsBox 而非 RunBox ，这是因为Babel转译器不会暴露 runs.jsx 文件中的全局变量。所以，我们要将变量设置为 window 变量的属性，以便在 <script> 标签之间共享。

直接在浏览器中进行转译不是一个好主意，更好的做法是提前将JSX文件进行转译。

2. ReactJS与Flask结合

通常，开发React应用的人会使用Node.js编写服务器端代码，因为使用单一语言并借助其生态系统中的工具来开发应用会更简单。不过，使用Flask来服务React应用也完全没问题。HTML页面可以使用Jinja2进行渲染，转译后的JSX文件可以像普通JavaScript文件一样作为静态文件使用。我们可以将React的分发文件以JS文件的形式添加到Flask的静态目录中。

我们创建一个名为 dashboard 的Flask应用，其初始结构如下：