Full-Stack-Webentwicklung mit Python und Reflex
·
Kursüberblick
1
Reflex kennenlernen und Umgebung einrichten
2
Die Oberfläche mit Komponenten zeichnen
3
State und Vars: Daten zeichnen die Oberfläche
4
Events und Formulare: Kunden hinzufügen
5
Daten aufbereiten und Diagramme
6
Zusammenfassung, Debugging und nächste Schritte
·
Anhang
Zeit 3:45–4:00
Die App, die du heute gebaut hast, dreht sich um einen einzigen Kreislauf: State → Oberfläche (Var) → Event (Handler) → State-Änderung. Egal wie groß eine Reflex-App wird, es kommen nur weitere Runden dieses Kreislaufs hinzu.
| Konzept | Im Code | Merksatz |
|---|---|---|
| Komponente | rx.box(kind, eigenschaft=wert) | Positionsargumente sind Kinder, Keyword-Argumente sind Eigenschaften |
| Seite | app.add_page(index, on_load=...) | Eine Seite = eine Funktion |
| State | class State(rx.State) | Typannotation ist Pflicht, Serverspeicher pro Session |
| Var | State.users.length() | In Oberflächen-Funktionen kein Wert, sondern ein Ausdruck |
| Schleife/Bedingung | rx.foreach, rx.cond | Für Vars statt for und if |
| Event | @rx.event def add_user(self, ...) | Der einzige Weg, den State zu ändern; echtes Python |
| Formular | rx.form(on_submit=...) + name= | name wird zum Schlüssel in form_data |
| Kontrollierte Komponente | open= + on_open_change= | Setter selbst definieren (0.10) |
| Computed Var | @rx.var def ...() -> typ | Ein Wert, der aus anderem State berechnet wird |
| Diagramm | rx.recharts.bar_chart(data=...) | Die Daten sind eine list[dict] |
| Symptom | Ursache | Lösung |
|---|---|---|
TypeError: object of type '...Var' has no len() | len() auf einer Var in einer Oberflächen-Funktion | .length() |
VarTypeError: Cannot convert Var ... to bool | if / and / or auf einer Var | rx.cond(...) |
VarTypeError: Cannot iterate over Var | for über eine Var | rx.foreach(...) |
AttributeError: ... has no attribute 'set_xxx' | Annahme, es gäbe automatische Setter (ältere Materialien) | Setter selbst mit @rx.event definieren |
| Daten werden auch beim Klick auf Abbrechen hinzugefügt | Buttons in Formularen haben standardmäßig den type submit | type="button" |
TypeError: __init__() got an unexpected keyword argument | name des Eingabefelds passt nicht zum Feldnamen der dataclass | Namen exakt angleichen |
| Der Dialog öffnet sich nicht | Nur open= gesetzt, on_open_change fehlt | Immer beide zusammen verwenden |
| Das Diagramm bleibt leer | Die Diagrammdaten werden nie befüllt | on_load registrieren oder Computed Var verwenden |
3 Debugging-Gewohnheiten
uv run reflex compile --dry. So findest du Syntax- und Var-Fehler im Oberflächen-Code schnell, ohne den Server zu starten.print() in deine Handler. Handler sind Python auf dem Server, deshalb erscheint print(form_data) im Server-Terminal. Ein print in einer Oberflächen-Funktion wird dagegen nur einmal beim Start der App ausgegeben.Die Aufgaben sind nach Schwierigkeit sortiert. Jede vertieft eines der Konzepte von heute.
rx.icon("trash-2")), das beim Klick den jeweiligen Kunden löscht. Tipp: Argumente übergibst du so: on_click=lambda: State.delete_user(user.email).value= + on_change= (kontrollierte Komponente) und zeige in der Tabelle eine per Computed Var gefilterte Liste. Probiere on_change=State.set_search.debounce(300), damit erst gesucht wird, wenn die Eingabe pausiert.rx.toast.error zurück und lässt den Dialog offen.Customer an, lies sie in on_load und schreib in add_user hinein. Die Kunden sollen auch nach dem Neuladen der Seite oder einem Neustart des Servers erhalten bleiben. Installiert wird mit uv add "reflex[db]"; für Reflex 0.10 wird empfohlen, SQLModel direkt statt rx.Model zu verwenden.@rx.page(route="/customers/[id]") dynamische Routen an und ergänze eine Detailseite pro Kunde.models.py, state.py, components/ und pages/ auf, damit er auch bei wachsendem Umfang übersichtlich bleibt.reflex run --env prod und deploye auf Reflex Cloud oder einen eigenen Server (Docker).rx.Model oder rx.App(theme=...). Achte beim Lesen also auf die Version.Über neue Lektionen informiert werden
Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.
R
ReflexKR
Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.
ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee
Hinweis zu Affiliate-Links© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
Fragen & Antworten
Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.