ReflexKR

Full-Stack Python Web Development with Reflex

Course overview

Meet Reflex and set up your environment

Drawing the screen with components

State and Vars: let data draw the screen

Events and forms: adding customers

Shaping data and charts

Wrap-up, debugging and next steps

Appendix

Full-Stack Python Web Development with Reflex

Course overview

A 4-hour beginner course: build a customer management app in a single Python file

4 hours6 lessonsReflex 0.10.0

Lesson 1

0:00–0:35

Meet Reflex and set up your environment

Lesson 2

0:35–1:15

Drawing the screen with components

Lesson 3

1:25–2:10

State and Vars: let data draw the screen

Lesson 4

2:10–2:55

Events and forms: adding customers

Lesson 5

3:05–3:45

Shaping data and charts

Lesson 6

3:45–4:00

Wrap-up, debugging and next steps

In 4 hours, you'll build a web app with a customer list, an add form and a gender breakdown chart from start to finish, all in a single Python file (about 220 lines). You won't write a single line of HTML, CSS or JavaScript.

Who this is for

You know basic Python syntax (functions, lists, dictionaries, classes)
You're new to web development, or you want to build web apps without learning a separate frontend stack (React)
You want to put your data analysis or automation scripts behind a web UI

Learning goals

By the end of the course, you'll be able to:

Create and run a Reflex project with uv.
Compose components into a page and style them with keyword arguments.
Keep data in rx.State and make the page update when that data changes.
Handle button and form events and change state with Python code on the server.
Transform state and visualize it as a chart.
Explain the difference between "compile time vs. runtime" and fix the classic errors it causes.

What you'll build: Customer Data App

Area	What it does	Reflex features used
Header	Title, customer count badge, Add User button	`rx.heading`, `rx.badge`, `State.users.length()`
Customer table	Lists customers and highlights a row on hover	`rx.table`, `rx.foreach`
Add dialog	Enter a name, email and gender, then submit	`rx.dialog`, `rx.form`, `on_submit`
Gender chart	Horizontal bars showing customers per gender	`rx.recharts.bar_chart`, `on_load`

What you need

Windows 10/11, macOS or Linux (WSL is recommended on Windows, but not required)
uv (manages Python and packages together)
Node.js 22.22.0 or later (the minimum version Reflex 0.10 requires)
A code editor such as VS Code, and a web browser
Versions used in this course: Reflex 0.10.0, Python 3.12

Schedule (240 minutes total)

Time	Lesson	Topic	Key outcome
0:00–0:35	Lesson 1	Meet Reflex and set up your environment	The default app opens in your browser
0:35–1:15	Lesson 2	Drawing the screen with components	Card layout and header
1:15–1:25	Break
1:25–2:10	Lesson 3	State and Vars	Customer table
2:10–2:55	Lesson 4	Events and forms	Add-customer dialog
2:55–3:05	Break
3:05–3:45	Lesson 5	Shaping data and charts	Gender bar chart
3:45–4:00	Lesson 6	Wrap-up, debugging and next steps	Review of the whole flow

How to use this course

Each lesson follows the same order: learning goals → concepts → code-along → exercises → checkpoint.
Instructor note blocks are talking points for video recordings or live classes. If you turn a lesson into a blog post, you can rewrite them as regular body text.
The code grows a little in each lesson until it's complete. The final code is in the appendix.

Lesson 1 · Meet Reflex and set up your environment

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.

Questions & answers

Ask anything about this lesson. Questions from every language version of this page appear together.

ReflexKR

Learn Python and Reflex by doing. Every example was run and verified on Reflex 0.10.0.

ReflexKR is free, with no banner ads. If it helped you, you can support it with a coffee. ☕ Buy us a coffee

Affiliate disclosure

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex