创建 Flask 和 React 全栈应用程序

Question

如何使用 React 前端和 Flask 后端创建网站？

我用flask和模板建过网站，用react做过页面，现在想把它们结合起来。

我已经尝试了一些方法，唯一有效的方法需要进入反应配置文件并且非常复杂。即使那样，使用 fetch 也很复杂，每次更改反应文件时我都必须运行 npm 运行 build。

在我看来，这似乎是一直都在做的事情，但我找不到任何简单的资源来做这件事。

关于网站，有什么我根本不了解的地方，我的做法是错误的吗？

Answer 1

专注于开发工作流，因为在如何部署到生产环境方面有无数选择。

运行以 /api 作为根 url 前缀的 Flask 应用程序，可以手动为所有路由装饰器添加前缀，也可以使用蓝图。

py/app.py

@app.route('/api')
def index():
    return {'message':'hello'}

将 Flask 开发服务器 url 添加到您的 package.json 文件

js/package.json

{
    ...,
    "proxy": "http://localhost:5000"
}

使用组件获取数据

js/Flask.js

import React, { Component } from 'react'

export class Flask extends Component {
    constructor(props) {
        super(props)
        this.state = { data: {}, status: null }
    }

    fetchData() {
        let status
        fetch('/api')
        .then((res) => {
            return {
                data: res.json(),
                status: status
            }
        })
        .then((data) => {
            this.setState({ ...data })
        }
        .catch((err) => {
            console.error(err)
        })
    }

    componentDidMount() {
        this.fetchData()
    }

    render() {
        const { data, status } = this.state
        return (
            <div>
                <h3>Status: { status }</h3>
                <pre>
                    { JSON.stringify(data) }
                </pre>
            </div>
        )
    }
}

export default Flask

最后，将组件包含在您的主组件中 App

js/App.js

import React from 'react';
import Flask from './Flask'

function App() {
  return (
    <div className="App">
      <Flask />
    </div>
  );
}

export default App;

使用您喜欢的方法启动您的 Flask 服务器，flask run 或直接执行您的脚本，然后使用 yarn 或 npm start 启动您的 JS 开发服务器。您应该会在 http://localhost:8000

处看到 api 路由的响应

只要你是运行你的 Flask 服务器 debug=True 并使用 npm start（不是 npm run build），将自动检测后端或前端所做的任何更改并重新加载您的应用程序。

创建 Flask 和 React 全栈应用程序

Create a Flask and React Full Stack Application

flask

reactjs

react-fullstack