Am Ende dieser Lektion läuft die Reflex-Standard-App in deinem Browser, und du kannst in einem Satz erklären, wie Reflex aus Python-Code eine Web-App macht.

1-1. Was ist Reflex? (10 Min.)

Eine Web-App besteht normalerweise aus zwei Teilen:

• Frontend: die Oberfläche, die im Browser läuft. Sie wird meist mit HTML, CSS und JavaScript (z. B. React) gebaut.
• Backend: Logik und Daten auf dem Server, geschrieben z. B. in Python (Django, FastAPI).

In der Regel musst du also zwei Sprachen lernen und dazwischen eine API entwerfen. Reflex ist ein Full-Stack-Framework, mit dem du Frontend und Backend komplett in Python schreibst.

Das funktioniert in drei Schritten:

1. Kompilieren: Die Python-Funktionen, die die Oberfläche beschreiben (Komponenten), werden beim Start der App einmal ausgeführt und in React-Code übersetzt. Das Ergebnis landet im Ordner .web/.
2. Der State lebt auf dem Server: Die Daten (State) und die Funktionen, die Events verarbeiten, laufen in Python auf dem Server.
3. Synchronisierung über WebSocket: Klickst du auf einen Button, schickt der Browser ein Event an den Server. Der Server sendet nur den geänderten State zurück, und die Oberfläche wird automatisch neu gezeichnet.

Die eine Python-Datei links teilt sich in zwei Wege: Die Oberflächen-Funktionen werden zu React kompiliert und gehen an den Browser, der State bleibt auf dem Server und wird über den Hin- und Rückweg ②→③ mit der Oberfläche synchron gehalten.

1-2. Die Entwicklungsumgebung vorbereiten (10 Min.)

uv installieren: uv verwaltet Python-Versionen, virtuelle Umgebungen und Pakete in einem Tool.

# Windows (PowerShell)
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

# macOS / Linux
curl -LsSf https://astral.sh/uv/install.sh | sh

Node.js prüfen: Reflex nutzt Node.js oder Bun, um die Pakete für die Oberfläche (React) zu installieren und auszuführen. Reflex 0.10 setzt Node 22.22.0 oder neuer voraus.

node -v   # muss v22.22.0 oder neuer sein

1-3. Projekt anlegen und starten (10 Min.)

uv init tutorial_261019        # Python-Projekt anlegen
cd tutorial_261019
uv add reflex                  # Reflex installieren (wird in pyproject.toml eingetragen)
uv run reflex init             # Grundgerüst der Reflex-App erzeugen (Template auswählen)
uv run reflex run              # Entwicklungsserver starten

• uv run führt den Befehl in der virtuellen Umgebung des Projekts (.venv) aus. Du musst sie nicht extra aktivieren.
• reflex init fragt nach einem Template. Wenn du mit einer leeren App starten willst, kannst du es direkt angeben: uv run reflex init --template blank.
• Sobald reflex run fertig ist, öffnest du die Adresse aus der Log-Zeile App running at: http://localhost:3000 im Browser. Ist Port 3000 belegt, weicht Reflex auf 3001 o. Ä. aus.
• Standardmäßig läuft das Frontend auf Port 3000 und das Backend auf Port 8000.
• Der erste Start kann 1~3 Minuten dauern, weil die Pakete für die Oberfläche heruntergeladen werden. Du brauchst dafür eine Internetverbindung.
• Zum Beenden des Servers drückst du im Terminal Ctrl + C.

Im Browser prüfen — Öffnest du direkt nach dem Anlegen mit --template blank die Adresse http://localhost:3000, solltest du diese Seite sehen. Das Sonnen-Symbol oben rechts schaltet den Dark Mode um.

1-4. Zwei häufige Fehler unter Windows (5 Min.)

Diese Probleme sind bei der Vorbereitung des Kurses tatsächlich aufgetreten. Die Teilnehmenden stoßen sehr wahrscheinlich auf dieselben, also weise am besten vorab darauf hin.

• Mit setx gesetzte Umgebungsvariablen gelten erst in neu geöffneten Terminals. Nutzt du das Terminal in VS Code, starte auch VS Code neu.
• Meldet winget, dass kein installiertes Paket gefunden wurde, prüfst du mit winget list --name Node die tatsächliche Paket-ID.

Checkpoint

• node -v zeigt 22.22.0 oder neuer.
• Nach uv run reflex run siehst du die Standardseite im Browser.
• Du kannst in eigenen Worten erklären: „Oberflächen-Funktionen werden einmal kompiliert, Event-Funktionen laufen jedes Mal auf dem Server.“