R

ReflexKR

Reflex 官方文档

用 Reflex 入门 Python 全栈 Web 开发

·

课程概览

1

Reflex 简介与开发环境

2

用组件绘制界面

3

State 与 Var:让数据驱动界面

4

事件与表单:添加客户

5

数据处理与图表

6

总结、调试与下一步

·

附录

用 Reflex 入门 Python 全栈 Web 开发

课程概览

用一个 Python 文件做出客户管理应用的 4 小时入门课程

4 小时共6课基于 Reflex 0.10.0

在 4 小时里,我们只用一个 Python 文件(约 220 行),从头到尾做出一个包含客户列表 + 添加表单 + 性别统计图表的 Web 应用。全程不写一行 HTML、CSS 或 JavaScript。

适合人群

  • 掌握 Python 基础语法(函数、列表、字典、类)的人
  • 第一次接触 Web 开发,或者想不另学前端(React)就做出 Web 应用的人
  • 想把数据分析、自动化脚本的结果做成网页展示的人

学习目标

学完本课程后,你将能够:

  1. 用 uv 创建并运行 Reflex 项目。
  2. 组合组件来搭建界面,并通过关键字参数设置样式。
  3. 把数据放在 rx.State 中,让界面随数据自动变化。
  4. 接收按钮、表单事件,在服务器端用 Python 代码修改状态。
  5. 对状态进行加工,并用图表可视化。
  6. 说清楚“编译时与运行时”的区别,并修复由此引发的典型错误。

最终成果:Customer Data App

区域功能用到的 Reflex 功能
页头标题、客户数徽章、Add User 按钮rx.heading、rx.badge、State.users.length()
客户表格显示客户列表,鼠标悬停时高亮该行rx.table、rx.foreach
添加对话框输入姓名、邮箱、性别后提交rx.dialog、rx.form、on_submit
性别图表用横向条形图显示各性别的客户数rx.recharts.bar_chart、on_load

准备工作

  • Windows 10/11、macOS、Linux 任选其一(Windows 推荐使用 WSL,但不是必需的)
  • uv(统一管理 Python 和依赖包)
  • Node.js 22.22.0 及以上(Reflex 0.10 要求的最低版本)
  • VS Code 等代码编辑器,以及浏览器
  • 本教程使用的版本:Reflex 0.10.0、Python 3.12

课程安排(共 240 分钟)

时间课次主题核心产出
0:00–0:35第1课Reflex 简介与开发环境默认应用在浏览器中运行
0:35–1:15第2课用组件绘制界面卡片布局和页头
1:15–1:25休息
1:25–2:10第3课State 与 Var客户表格
2:10–2:55第4课事件与表单添加客户对话框
2:55–3:05休息
3:05–3:45第5课数据处理与图表性别条形图
3:45–4:00第6课总结、调试与作业复习完整流程

如何使用本教程

  • 每一课都按照学习目标 → 概念讲解 → 跟着敲代码 → 动手练习 → 检查点的顺序展开。
  • 讲师笔记是录制视频或现场授课时需要口头展开的要点。如果用于写博客,也可以改写成正文说明。
  • 代码会在每一课中一点点往上加,最终完整代码见附录。

下一课 →

第1课 · Reflex 简介与开发环境

订阅新课时和新课程通知

本课程新增课时或推出后续课程时,我们会发邮件通知你。

收集项目:电子邮箱 · 用途:本课程的新课时和上线通知 · 保存期限:直到你要求删除。不会用于其他用途,也不会提供给他人。回复任意通知邮件,我们会立即删除。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

以纯文本显示,不支持链接和格式。

R

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费,没有横幅广告。如果对你有帮助,欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明
한국어English日本語简体中文EspañolDeutsch

© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0

Built with Reflex