Course overview

This short course covers the concepts you'll use every day when building Reflex apps, and you learn them by clicking. Every example comes with a live, working preview right below it, so you can read the code and immediately try it out.

What you'll learn

• Making the page change when you click a button (State and event handlers)
• Showing different content depending on a condition (rx.cond)
• Rendering a list on the page (rx.foreach)
• Why you can't use if, for or len() in UI code (compile time vs. runtime)
• Composing and styling components (children, props, style)
• Creating an app and its pages

Why this order?

The official Reflex docs start with components and styling and build up from there. This course flips the order and starts with clicking a button to make a number go up. Once you've seen the page react, the remaining concepts follow naturally as "the things you need to make that happen."

1. In Lesson 1 you make a number go up, and in Lessons 2 and 3 you change the page with conditions and lists.
2. Lesson 4 answers the question "So why can't I just use if?" It's the most important lesson in the course.
3. In Lesson 5 you style your UI, now that you know how things work under the hood, and in Lesson 6 you put everything together into a small app.

Before you start

• Basic Python (functions, classes, lists)
• A development environment with Reflex installed. If you don't have one yet, work through Lesson 1 of Full-Stack Python Web Development with Reflex first.

You can try every example on this page without installing anything. If you'd like to type them out yourself, add the example function to your Reflex project's main file and register it with app.add_page(function_name).

Source material

This course is based on the official Reflex docs page Getting Started › Basics, with the order and explanations reworked for beginners. All example code was run and verified on Reflex 0.10.0.