React和Flask交互

在Web开发中，React和Flask是两种非常流行的技术，React是一种用于构建用户界面的JavaScript库，而Flask则是一个轻量级的Python Web框架，它们可以结合使用，以实现前端和后端的交互，以下是关于React和Flask交互的详细指南：

1、安装和配置

React: 使用Create React App创建一个新的React项目。

Flask: 使用pip安装Flask：pip install flask。

2、创建一个简单的Flask应用

“`python

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route(‘/’)

def index():

return render_template(‘index.html’)

@app.route(‘/api/data’, methods=[‘GET’])

def get_data():

data = {‘key’: ‘value’}

return jsonify(data)

if __name__ == ‘__main__’:

app.run(debug=True)

“`

3、创建一个简单的React应用

使用Create React App创建一个新的React项目。

在src文件夹下创建一个名为App.js的文件，并编写以下代码：

“`javascript

import React, { useState, useEffect } from ‘react’;

function App() {

const [data, setData] = useState(null);

useEffect(() => {

const fetchData = async () => {

const response = await fetch(‘http://localhost:5000/api/data’);

const jsonData = await response.json();

setData(jsonData);

};

fetchData();

}, []);

return (

<div>

<h1>React和Flask交互示例</h1>

{data && <pre>{JSON.stringify(data, null, 2)}</pre>}

</div>

);

}

export default App;

“`

4、运行Flask和React应用

首先运行Flask应用：python app.py，这将启动一个本地服务器，监听在5000端口上。

在另一个终端窗口中，导航到React项目的根目录，并运行：npm start，这将启动一个开发服务器，并在浏览器中打开React应用。

5、查看交互结果

在浏览器中打开React应用，你应该能看到从Flask API获取的数据，数据将以JSON格式显示在页面上。