课程概览

这门课用简短的篇幅，带你边点边学开发 Reflex 应用时每天都会用到的概念。每个示例下方都附有真正能运行的界面，读完代码就能马上点一点，看看效果。

这门课会学到什么

• 让界面随按钮点击而变化（State 与事件处理器）
• 根据条件显示不同的界面（rx.cond）
• 把列表渲染到界面上（rx.foreach）
• 为什么界面代码里不能用 if、for、len()（编译时与运行时）
• 组合并美化组件（子组件、props、样式）
• 创建应用和页面

为什么按这个顺序

Reflex 官方文档是从组件和样式开始一步步讲起的。这门课换了个顺序，先从点按钮让数字加一开始。先亲眼看到界面有了反应，后面的概念就会自然地变成"想做到这一点所需要的东西"。

1. 第1课让数字加起来，第2、3课用条件和列表改变界面。
2. 第4课解答"为什么不能直接用 if？"这个疑问。这是整门课最重要的一课。
3. 第5课在理解原理的基础上美化界面，第6课把学过的内容汇总起来，完成一个小应用。

准备工作

• Python 基础语法（函数、类、列表）
• 已安装 Reflex 的开发环境。如果还没有，请先跟着用 Reflex 入门 Python 全栈 Web 开发的第1课完成配置。

本页的示例无需安装就能直接操作。如果想自己动手敲一遍，把示例函数放进 Reflex 项目的主文件，再用 app.add_page(函数名) 注册即可。

参考文档

本课程以 Reflex 官方文档 Getting Started › Basics 为基础，针对初学者重新编排了顺序和讲解。示例代码均已在 Reflex 0.10.0 上运行验证。