In dieser Lektion baust du nur eine statische Oberfläche, noch ganz ohne State. Am Ende siehst du in einer Karte mit abgerundeten Ecken einen Header mit dem Titel „Customers“ und einer Beschreibung.

2-1. Die Projektstruktur (5 Min.)

tutorial_261019/                 # Projektwurzel (hier führst du die reflex-Befehle aus)
├── rxconfig.py                  # App-Name und Plugin-Einstellungen
├── pyproject.toml / uv.lock     # Python-Abhängigkeiten (verwaltet von uv)
├── assets/                      # statische Dateien wie Bilder → Verweis z. B. als "/favicon.ico"
├── reflex.lock/                 # Lock-Dateien der Frontend-Pakete (gehören ins Repository)
├── .web/                        # kompilierter React-Code (wird automatisch erzeugt, nicht bearbeiten)
└── tutorial_261019/             # Python-Paket mit demselben Namen wie app_name
    ├── __init__.py
    └── tutorial_261019.py       # die Datei, an der wir arbeiten (app = rx.App())

So sieht rxconfig.py aus. app_name muss genauso heißen wie der innere Ordner, sonst findet Reflex die App nicht.

import reflex as rx

config = rx.Config(
    app_name="tutorial_261019",
    plugins=[
        rx.plugins.SitemapPlugin(),
        rx.plugins.TailwindV4Plugin(),
        rx.plugins.RadixThemesPlugin(),   # liefert das Grunddesign für Buttons, Tabellen usw.
    ],
)

2-2. Die kleinste Reflex-App (5 Min.)

Lösche den gesamten Inhalt von tutorial_261019/tutorial_261019.py und beginne so:

import reflex as rx


def index() -> rx.Component:
    return rx.heading("Customers")


app = rx.App()
app.add_page(index, title="Customer Data App")

• index() ist eine Funktion, die ein Stück Oberfläche (eine Komponente) zurückgibt. Eine Seite = eine Funktion.
• app = rx.App() muss auf oberster Ebene des Moduls stehen. Reflex sucht die App über genau diesen Variablennamen.
• Weil die Funktion index heißt, registriert add_page(index) sie unter dem Wurzelpfad /. title ist der Titel im Browser-Tab.
• Läuft der Server, wird beim Speichern der Datei automatisch neu kompiliert (Hot Reload).

Im Browser prüfen — Nach dem Speichern bleibt oben links nur der Titel „Customers“ übrig. Er klebt ohne Abstand am Bildschirmrand, das ist so richtig.

2-3. Die zwei Regeln der Komponenten-Syntax (10 Min.)

Im Grunde besteht Oberflächen-Code in Reflex nur aus diesen zwei Regeln:

1. Positionsargumente = Kinder: Komponenten, die du der Reihe nach in die Klammern schreibst, landen darin als Inhalt.
2. Keyword-Argumente = Eigenschaften (Props) und Styles: Du übergibst sie als name=wert, z. B. size="6" oder margin="0".

rx.box(                                   # <div>
    rx.heading("Customers", size="6"),   # Kind 1
    rx.badge("2"),                        # Kind 2
    display="flex",                       # Style
    gap="12px",
)

• CSS-Eigenschaften schreibst du in snake_case: align-items → align_items, margin-top → margin_top.
• Namen, die mit reservierten Python-Wörtern kollidieren, bekommen ein _ angehängt: as → as_, type → type_.
• rx.color("slate", 11) greift auf die Radix-Farbpalette zu. Je höher die Zahl, desto kräftiger die Farbe, und im Dark Mode passt sie sich automatisch an. Faustregel: 1~2 für Hintergründe, 4~6 für Rahmen, 11~12 für Text.

2-4. Den Header bauen (10 Min.)

Der Header hat eine linke Seite (Titel + Badge + Beschreibung) und eine rechte Seite (Button). Den Button fügen wir in Lektion 4 ein, jetzt bauen wir nur die linke Seite.

def index() -> rx.Component:
    return rx.box(
        rx.box(
            rx.box(
                rx.heading("Customers", size="6", as_="h3", margin="0"),
                rx.badge("2", variant="soft", color_scheme="gray", radius="full"),
                display="flex",
                align_items="center",
                gap="12px",
            ),
            rx.text(
                "Your customer directory and audience breakdown.",
                size="2",
                color=rx.color("slate", 11),
                margin_top="6px",
            ),
        ),
        display="flex",
        align_items="center",
        justify_content="space-between",
        flex_wrap="wrap",
        gap="16px",
        padding="24px",
    )

• Die "2" im Badge ist ein Platzhalter. In Lektion 3 ersetzen wir sie durch State.users.length(), damit die echte Kundenanzahl erscheint.
• justify_content="space-between" schiebt die Kinder an die beiden Enden. Deshalb sitzt der Button später ganz rechts.
• flex_wrap="wrap" lässt den Button auf schmalen Bildschirmen in die nächste Zeile rutschen (für Mobilgeräte).

Im Browser prüfen — Neben dem Titel steht ein graues, rundes Badge (2), darunter ein grauer Beschreibungstext. Einen Kartenrahmen gibt es noch nicht.

2-5. In eine Karte packen (5 Min.)

Wir legen noch ein rx.box um den Header, damit eine Karte entsteht. Diese äußere Box wird zum Rahmen der ganzen App; Tabelle und Diagramm kommen später nacheinander hinein.

def index() -> rx.Component:
    return rx.box(
        header,            # die Header-Box aus 2-4
        # Tabelle (Lektion 3) und Diagramm (Lektion 5) kommen hier hinzu
        width="100%",
        min_width="0",
        max_width="64em",            # maximale Kartenbreite
        margin_x="auto",             # zentrieren
        margin_y="24px",
        border=f"1px solid {rx.color('slate', 5)}",
        border_radius="16px",
        background=rx.color("slate", 1),
        overflow="hidden",           # verhindert, dass Inhalt über die runden Ecken hinausragt
        box_shadow="0 4px 24px rgba(0, 0, 0, 0.03)",
        style={
            "& *": {"box_sizing": "border-box"},
            "& p, & h3": {"text_align": "left"},
        },
    )

• style={...} brauchst du für CSS-Selektoren, die sich nicht gut als Keyword-Argumente ausdrücken lassen. "& *" bedeutet „alle Elemente innerhalb dieser Box“.
• Innerhalb eines f-Strings kannst du rx.color(...) verwenden. Achte darauf, einfache und doppelte Anführungszeichen richtig zu mischen.

Im Browser prüfen — Der Header sitzt jetzt in einer Karte mit abgerundeten Ecken, und die Karte steht mittig auf der Seite. Ziehst du das Browserfenster schmaler, wird auch die Karte schmaler.

Übungen

1. Ändere den Beschreibungstext auf Deutsch, speichere und beobachte den Hot Reload.
2. Setze border_radius auf "4px" und auf "32px" und vergleiche den Unterschied.
3. Füge rx.color_mode.button() in den Header ein und prüfe, ob sich die Farben auch im Dark Mode stimmig ändern.

Checkpoint

• Du kannst erklären, worin sich Positions- und Keyword-Argumente unterscheiden.
• Du kannst CSS-Eigenschaften in snake_case umschreiben.
• Der Karten-Header wird mittig auf der Seite angezeigt.