Apps, Seiten und ein Obstkorb

Die letzte Lektion. Du siehst, wie du deine UI-Funktionen mit echten Webadressen verknüpfst, und baust anschließend aus allem, was du in Lektion 1 bis 5 gelernt hast, eine kleine App.

6-1. Apps und Seiten (2 Min.)

Eine Reflex-App erstellst du mit rx.App, und mit add_page verknüpfst du UI-Funktionen mit Webadressen (Routes).

def index():
    return rx.text("Root Page")


app = rx.App()
app.add_page(index, route="/")

• app = rx.App() muss auf oberster Ebene der Hauptdatei stehen. Reflex sucht die App unter dem Namen app.
• route="/" ist die Startseite der Website. Weitere Seiten fügst du einfach hinzu, etwa mit app.add_page(about, route="/about").
• Lässt du route weg, wird der Funktionsname zur Adresse: index wird zu /, about zu /about.

6-2. Alles zusammen: der Obstkorb (4 Min.)

Ein Korb, in den du per Button Obst legst und wieder herausnimmst. Er ist kurz, enthält aber alle Konzepte dieses Kurses.

FRUITS = ["Apple", "Banana", "Cherry", "Grape", "Mango", "Peach"]


class BasketState(rx.State):
    basket: list[str] = []

    @rx.event
    def add_fruit(self):
        # Event handlers run real Python: pick the next fruit in the list.
        self.basket.append(FRUITS[len(self.basket) % len(FRUITS)])

    @rx.event
    def remove_last(self):
        if self.basket:
            self.basket.pop()


def fruit_basket():
    return rx.vstack(
        rx.hstack(
            rx.heading("My basket", as_="h2", size="5"),
            # Var operations: .length() and % work on vars in components.
            rx.badge(BasketState.basket.length()),
            rx.cond(
                BasketState.basket.length() % 2 == 0,
                rx.badge("even", color_scheme="green"),
                rx.badge("odd", color_scheme="orange"),
            ),
            align="center",
        ),
        rx.cond(
            BasketState.basket.length() > 0,
            rx.list.unordered(rx.foreach(BasketState.basket, rx.list.item)),
            rx.text("The basket is empty.", color_scheme="gray"),
        ),
        rx.hstack(
            rx.button("Add fruit", on_click=BasketState.add_fruit),
            rx.button("Remove last", on_click=BasketState.remove_last, variant="soft"),
        ),
        align="start",
    )


app = rx.App()
app.add_page(fruit_basket, route="/")

Gehen wir durch, in welcher Lektion du die einzelnen Teile des Codes kennengelernt hast.

Achte darauf, dass dasselbe len im Handler funktioniert, in der Oberfläche aber zu .length() wird. Wenn du die Frage aus Lektion 4, „Wann läuft dieser Code?“, beantworten kannst, beherrschst du die Reflex-Grundlagen.

Nächste Schritte

Die Grundlagen sitzen, jetzt ist es Zeit für eine richtige App.

• Full-Stack-Webentwicklung mit Python und Reflex: der vierstündige Kurs auf dieser Website. Du baust von Grund auf eine Kundenverwaltungs-App mit Tabelle, Formularen, Dialogen und Diagrammen.
• Chat-App-Tutorial (auf Englisch): Du baust eine Chat-App, die KI-Antworten in Echtzeit empfängt und anzeigt.
• Vars und Var-Operationen (auf Englisch): die vollständige Liste der Var-Operationen, die du in diesem Kurs kennengelernt hast.
• Events und Seiten (auf Englisch): weitere Trigger und Routing-Möglichkeiten.
• How Reflex works (auf Englisch): erklärt, wie Kompilierzeit und Laufzeit aus Lektion 4 intern funktionieren.

Übungen

1. Ändere add_fruit so, dass keine Obstsorte zweimal im Korb landet. Da du im Handler bist, kannst du if fruit not in self.basket verwenden.
2. Füge einen „Clear“-Button hinzu, der den Korb auf einmal leert.
3. Lass ein „Full!“-Badge erscheinen, sobald 5 oder mehr Früchte im Korb liegen. Da es um UI-Code geht, verwendest du Var-Operationen und rx.cond.

Checkliste zu dieser Lektion

• Ich kann mit rx.App und add_page Seiten registrieren.
• Ich kann erklären, welches Konzept hinter jeder Zeile des Obstkorb-Codes steckt.
• Ich weiß, warum sich die Syntax unterscheidet, je nachdem ob ich dieselbe Berechnung im Handler oder in der Oberfläche durchführe.