Apps, páginas y una cesta de frutas

Llegamos a la última lección. Verás cómo conectar las funciones de interfaz que has creado hasta ahora a direcciones web reales y, juntando todo lo aprendido en las lecciones 1 a 5, terminarás una pequeña app.

6-1. Apps y páginas (2 min)

Una app Reflex se crea con rx.App, y las funciones de la interfaz se conectan a una dirección web (route) con add_page.

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


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

• app = rx.App() debe estar en el nivel superior del archivo principal. Reflex busca la app por el nombre app.
• route="/" es la página de inicio del sitio. Puedes seguir añadiendo páginas, como en app.add_page(about, route="/about").
• Si omites route, la dirección será el nombre de la función: index es / y about es /about.

6-2. Todo junto: la cesta de frutas (4 min)

Una cesta a la que añades y quitas frutas con botones. Es corta, pero contiene todos los conceptos de este curso.

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

Veamos en qué lección aprendiste cada parte del código.

Fíjate en que el mismo len funciona en el manejador, pero en la interfaz se convierte en .length(). Si sabes responder a la pregunta de la lección 4, "¿cuándo se ejecuta esto?", ya dominas los fundamentos de Reflex.

Próximos pasos

Ya tienes los fundamentos: ahora toca crear una app de verdad.

• Desarrollo web full stack con Python y Reflex: el curso de 4 horas de este sitio. Crearás desde cero una app de gestión de clientes con tablas, formularios, cuadros de diálogo y gráficos.
• Tutorial de la Chat app (en inglés): crea una app de chat que recibe y muestra en tiempo real las respuestas de una IA.
• Var y operaciones de Var (en inglés): la lista completa de las operaciones de Var que has probado en este curso.
• Eventos y páginas (en inglés): más disparadores y más formas de definir rutas.
• How Reflex works (en inglés): explica cómo funcionan por dentro el tiempo de compilación y el tiempo de ejecución de la lección 4.

Ejercicios

1. Modifica add_fruit para que la misma fruta no entre dos veces en la cesta. Como estás dentro de un manejador, puedes usar if fruit not in self.basket.
2. Añade un botón "Clear" que vacíe la cesta de una sola vez.
3. Haz que aparezca una insignia "Full!" cuando la cesta tenga 5 frutas o más. Como es código de la interfaz, usa operaciones de Var y rx.cond.

Lista de comprobación de esta lección

• Sé registrar páginas con rx.App y add_page.
• Sé explicar qué concepto representa cada línea del código de la cesta de frutas.
• Entiendo por qué la sintaxis es distinta cuando hago el mismo cálculo en un manejador o en la interfaz.