ReflexKR

Full-Stack-Webentwicklung mit Python und Reflex

Kursüberblick

Reflex kennenlernen und Umgebung einrichten

Die Oberfläche mit Komponenten zeichnen

State und Vars: Daten zeichnen die Oberfläche

Events und Formulare: Kunden hinzufügen

Daten aufbereiten und Diagramme

Zusammenfassung, Debugging und nächste Schritte

Anhang

Full-Stack-Webentwicklung mit Python und Reflex

Kursüberblick

4-stündiger Einsteigerkurs: eine Kundenverwaltungs-App in einer einzigen Python-Datei

4 Stunden6 LektionenReflex 0.10.0

Lektion 1

0:00–0:35

Reflex kennenlernen und Umgebung einrichten

Lektion 2

0:35–1:15

Die Oberfläche mit Komponenten zeichnen

Lektion 3

1:25–2:10

State und Vars: Daten zeichnen die Oberfläche

Lektion 4

2:10–2:55

Events und Formulare: Kunden hinzufügen

Lektion 5

3:05–3:45

Daten aufbereiten und Diagramme

Lektion 6

3:45–4:00

Zusammenfassung, Debugging und nächste Schritte

In 4 Stunden baust du mit einer einzigen Python-Datei (rund 220 Zeilen) von Anfang bis Ende eine Web-App mit Kundenliste, Formular zum Hinzufügen und Diagramm nach Geschlecht. Dabei schreibst du keine einzige Zeile HTML, CSS oder JavaScript.

Zielgruppe

Du kennst die Python-Grundlagen (Funktionen, Listen, Dictionaries, Klassen).
Du bist neu in der Webentwicklung oder möchtest Web-Apps bauen, ohne extra ein Frontend-Framework wie React zu lernen.
Du möchtest deine Datenanalysen oder Automatisierungsskripte über eine Weboberfläche zugänglich machen.

Lernziele

Am Ende des Kurses kannst du:

mit uv ein Reflex-Projekt anlegen und starten,
eine Oberfläche aus Komponenten zusammensetzen und sie über Keyword-Argumente gestalten,
Daten in rx.State ablegen und die Oberfläche automatisch diesen Daten folgen lassen,
Button- und Formular-Events entgegennehmen und den State mit Python-Code auf dem Server ändern,
den State aufbereiten und als Diagramm visualisieren,
den Unterschied zwischen „Compile-Zeit und Laufzeit“ erklären und die typischen Fehler beheben, die daraus entstehen.

Das Ergebnis: Customer Data App

Bereich	Funktion	Verwendete Reflex-Features
Header	Titel, Badge mit der Kundenanzahl, Button „Add User“	`rx.heading`, `rx.badge`, `State.users.length()`
Kundentabelle	Zeigt die Kundenliste, hebt die Zeile unter dem Mauszeiger hervor	`rx.table`, `rx.foreach`
Dialog zum Hinzufügen	Name, E-Mail und Geschlecht eingeben und absenden	`rx.dialog`, `rx.form`, `on_submit`
Diagramm nach Geschlecht	Anzahl der Kunden pro Geschlecht als horizontale Balken	`rx.recharts.bar_chart`, `on_load`

Was du brauchst

Windows 10/11, macOS oder Linux (unter Windows ist WSL empfehlenswert, aber nicht nötig)
uv (verwaltet Python und Pakete in einem Tool)
Node.js 22.22.0 oder neuer (die Mindestversion für Reflex 0.10)
Einen Code-Editor wie VS Code und einen Webbrowser
Referenzversionen dieses Kurses: Reflex 0.10.0, Python 3.12

Zeitplan (insgesamt 240 Min.)

Zeit	Lektion	Thema	Ergebnis
0:00–0:35	Lektion 1	Reflex kennenlernen und Umgebung einrichten	Die Standard-App läuft im Browser
0:35–1:15	Lektion 2	Die Oberfläche mit Komponenten zeichnen	Karten-Layout und Header
1:15–1:25	Pause
1:25–2:10	Lektion 3	State und Vars	Kundentabelle
2:10–2:55	Lektion 4	Events und Formulare	Dialog zum Hinzufügen von Kunden
2:55–3:05	Pause
3:05–3:45	Lektion 5	Daten aufbereiten und Diagramme	Balkendiagramm nach Geschlecht
3:45–4:00	Lektion 6	Zusammenfassung, Debugging, Aufgaben	Den gesamten Ablauf wiederholen

So nutzt du dieses Material

Jede Lektion folgt dem Ablauf Lernziel → Konzept → Code mittippen → Übung → Checkpoint.
Die Hinweis für Lehrende-Kästen enthalten Punkte, die du bei einer Videoaufnahme oder im Live-Kurs mündlich erklären kannst. In einem Blogartikel kannst du sie auch in den Fließtext übernehmen.
Der Code wächst von Lektion zu Lektion. Den vollständigen Code findest du im Anhang.

Weiter →

Lektion 1 · Reflex kennenlernen und Umgebung einrichten

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

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

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

Built with Reflex