在2025年创建一个React + Flask项目
💡
原文英文，约2200词，阅读约需8分钟。
📝
内容提要
本文介绍了如何在2025年创建一个React + Flask项目，主要使用Vite替代create-react-app搭建React应用。内容涵盖项目结构、环境配置、Flask后端创建及前后端集成，最终实现简单的API调用以展示当前时间。
🎯
关键要点
- 本文介绍了如何在2025年创建一个React + Flask项目，使用Vite替代create-react-app搭建React应用。
- 确保安装Python 3.12和Node.js 22版本，或其他相对较新的版本。
- 使用命令npm create vite@latest创建React项目，选择react模板。
- Vite支持热模块替换（HMR），可以在开发过程中自动刷新浏览器。
- 在React项目中创建一个api目录，并在其中设置Python虚拟环境。
- 使用pip安装Flask和python-dotenv作为后端依赖。
- 创建一个简单的Flask API，返回当前时间，并配置.env文件。
- 通过Vite的代理功能，将API请求转发到Flask服务器，简化前后端交互。
- 在package.json中添加api命令，以便通过npm运行Flask服务器。
- 使用fetch()函数从前端调用Flask API，并在页面上显示当前时间。
- React的状态管理使得页面在API响应后自动更新，展示当前时间。
- 最终实现了一个现代的React + Flask应用模板，适合未来几年使用。
❓
延伸问答
如何在2025年创建一个React + Flask项目？
可以使用Vite替代create-react-app来搭建React应用，并配置Flask作为后端。
Vite与create-react-app有什么区别？
Vite是一个更现代的工具，支持热模块替换（HMR），而create-react-app已经不再维护。
如何配置Flask后端以返回当前时间？
在Flask中创建一个简单的API，使用`@app.route('/api/time')`返回当前时间的JSON格式。
如何在React中调用Flask API？
使用`fetch()`函数从React组件中调用Flask API，并在页面上显示返回的时间。
在项目中如何设置Python虚拟环境？
在项目目录中使用`python -m venv venv`命令创建虚拟环境，并通过`source venv/bin/activate`激活。
如何通过Vite配置代理以简化API请求？
在`vite.config.js`中添加代理配置，将所有以`/api`开头的请求转发到Flask服务器的5000端口。
➡️
