Apps, pages and a fruit basket

This is the last lesson. You'll see how to hook the UI functions you've built up to real web addresses, then bring together everything from Lessons 1 to 5 into one small app.

6-1. Apps and pages (2 min)

You create a Reflex app with rx.App and connect UI functions to web addresses (routes) with add_page.

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


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

• app = rx.App() must be at the top level of your main file. Reflex looks for your app under the name app.
• route="/" is your site's home page. You can keep adding pages, as in app.add_page(about, route="/about").
• If you leave out route, the function name becomes the address: index maps to /, and about to /about.

6-2. Putting it all together: a fruit basket (4 min)

This basket lets you add and remove fruit with buttons. It's short, but it uses every concept in this course.

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="/")

Let's go through which lesson each part of the code comes from.

Notice how the same len works in a handler but becomes .length() in the UI. If you can answer Lesson 4's question, "When does this code run?", you've got the Reflex basics down.

Next steps

Now that you have the basics, it's time to build a real app.

• Full-Stack Python Web Development with Reflex: this site's 4-hour course. You build a customer management app with tables, forms, dialogs and charts from scratch.
• Chat app tutorial: build a chat app that streams AI responses in real time.
• Vars and Var operations: the full list of the Var operations you got a taste of in this course.
• Events and Pages: more triggers and routing options.
• How Reflex works: how Lesson 4's compile time and runtime work under the hood.

Exercises

1. Change add_fruit so the same fruit never goes into the basket twice. You're inside a handler, so you can use if fruit not in self.basket.
2. Add a "Clear" button that empties the basket in one go.
3. Show a "Full!" badge once the basket holds 5 or more fruits. This is UI code, so use Var operations and rx.cond.

Checkpoint

• You can register a page with rx.App and add_page.
• You can explain which concept each line of the fruit basket code uses.
• You know why the same calculation uses different syntax in a handler than in the UI.