企业官网建设流程全解析

Reflex 纯 Python Web 应用教程：3 步跑通第一个计数器

【免费下载链接】reflex🕸️ Web apps in pure Python 🐍项目地址: https://gitcode.com/GitHub_Trending/re/reflex

Reflex 是一个用纯 Python 编写前后端的 Web 全栈框架：不写 JavaScript、不维护两套代码库，UI 和逻辑都定义在同一个 Python 文件里，运行后编译成前端应用并在浏览器打开。本文带你从空白模板走到看懂它的数据流向。

它解决什么问题

传统全栈开发通常是 FastAPI 后端 + React 前端的两套代码，中间还要手写一层 API 胶水代码。Reflex 把这压成一份 Python 代码库：UI 用 Python 函数调用描述，业务逻辑写在普通类里，JS 那一层由框架替你生成。

它是怎么工作的

一句话：UI 部分编译成跑在浏览器里的 React（Next.js）前端，其余逻辑以 Python 形式跑在 FastAPI 后端上，两端通过 WebSocket 传递事件和状态更新。

上图是最典型的 Reflex 应用结构：State类持有数据，类方法充当事件处理器，页面函数返回组件树。仓库内置 50 多个组件（按钮、表格、图表等），不够用时还可以自己封装现成的 React 组件，参见 docs/wrapping-react/overview.md。

3 步跑起来

需要 Python 3.10+，官方文档建议用uv管理依赖：

mkdir counter && cd counter uv init uv add reflex uv run reflex init # 模板选择里选 (0) 空白应用 uv run reflex run

首次运行会编译前端，稍等片刻后浏览器打开 http://localhost:3000。之后改代码保存即热重载，不用重启进程。

点击按钮后发生了什么

把默认模板替换成这个计数器：

import reflex as rx class State(rx.State): count: int = 0 @rx.event def increment(self): self.count += 1 def index(): return rx.hstack( rx.button("加一", on_click=State.increment), rx.heading(State.count), ) app = rx.App() app.add_page(index)

数据流向：点击按钮 →on_click把事件发到服务器 →State.increment在后端执行并修改count→ 前端检测到状态变化，自动重新渲染。需要记住的规则有两条：状态只能在事件处理器里修改；渲染时引用State.count而不是self.count。条件与循环渲染用rx.cond/rx.foreach，不能用 Python 的if/for，这是新手最常见的坑。

边界：适合什么，注意什么

💡 适合：数据仪表盘、内部管理系统、聊天与 AI 应用、多页站点——官方文档站本身就是 Reflex 构建的。

几个注意点：

• 前端编译链依赖 Bun，首次运行会自动下载，保持网络畅通；
• .web/目录是生成产物，不要手改，也不要提交；
• 需要精细浏览器交互时，走封装 React 组件的路线，而不是在应用里手写 JS；
• 组件列表和 API 随版本变化较快，具体以官方文档为准。

下一步

推荐路径：

1. 读懂计数器示例：docs/getting_started/introduction.md
2. 做一个真实的数据仪表盘：docs/getting_started/dashboard_tutorial.md
3. 弄清编译与事件机制：docs/advanced_onboarding/how-reflex-works.md

下一条命令：在你的项目目录里执行uv run reflex run，然后打开 dashboard 教程，把示例里的State换成你自己的数据。

【免费下载链接】reflex🕸️ Web apps in pure Python 🐍项目地址: https://gitcode.com/GitHub_Trending/re/reflex