ReactPy - Crea Aplicaciones de React con Python

En este tutorial aprenderas a usar una biblioteca de Python llamada ReactPy la cual nos permite crear aplicaciones web FullStack usando solo Python, ademas como su nombre indica esta biblioteca esta inspirada en React (La biblioteca frontend de Javascript), así que si ya sabes las bases de React y Python, ahora puedes crear aplicaciones fullstack usando un solo lenguaje (otra vez).

Requerimientos

Para entender este tutorial es necesario:

Tener Bases en React
Tener Bases en Python

¿Qué es ReactPy?

ReactPy es una biblioteca para construir interfaces de usuario en Python sin necesidad de Javascript. Las interfaces de ReactPy están hechas de componentes que se ven y se comportan de manera similar a los que se encuentran en ReactJS. Diseñada con la simplicidad en mente, ReactPy puede ser utilizada por aquellos que no tienen experiencia en desarrollo web, a la vez que es lo suficientemente potente para crecer con tus ambiciones.

Creación de Proyecto de ejemplo

Primero antes de empezar vamos a crear un Entorno Virtual para nuestro Proyecto de ReactPy llamado reactpy-tutorial.

Un entorno virtual es un espacio aislado que permite tener una versión específica de Python y todas las dependencias necesarias para un proyecto. Esto es útil para evitar conflictos entre las dependencias de diferentes proyectos.

Primero, Abre tu terminal en Linux/Mac o la línea de comandos en Windows. Luego Navega a la Carpeta donde quieres Crear tu Proyecto y usa el comando cd para cambiar al directorio donde deseas crear tu proyecto. Por ejemplo:

cd ruta/a/la/carpeta

o en mi caso como quiero navegar al escritorio:

cd Desktop

Luego crea una Nueva Carpeta para el Proyecto, llamada reactpy-tutorial usando el comando mkdir:

mkdir reactpy-tutorial

Luego, navega dentro de la carpeta recién creada:

cd reactpy-tutorial

Luego Crea el Entorno Virtual y utiliza el siguiente comando para crear un entorno virtual llamado venv dentro de la carpeta del proyecto:

python -m venv venv

Nota: En algunos sistemas, puedes necesitar usar python en lugar de python3.

Luego Activa el Entorno Virtual usando los siguientes comandos:

En Windows, usa:

.\venv\Scripts\activate

En Linux o Mac, usa:

source venv/bin/activate

Una vez activado el entorno virtual, verás que el nombre del entorno aparece al comienzo de la línea de comandos. Esto indica que cualquier paquete que instales se instalará solo en este entorno aislado.

Luego puedes desactivar el Entorno Virtual, cuando hayas terminado de trabajar en tu proyecto, puedes desactivar el entorno virtual escribiendo:

deactivate

¡Listo! Ahora tienes un entorno virtual en Python listo para tu proyecto reactpy-tutorial.

Instalación de ReactPy

Para instalar ReactPy debemos tener en cuenta que como este al final es combinado con código de Backend, este modulo se puede usar con multiples frameworks de Backend como:

fastapi - https://fastapi.tiangolo.com
flask - https://palletsprojects.com/p/flask/
sanic - https://sanicframework.org
starlette - https://www.starlette.io/
tornado - https://www.tornadoweb.org/en/stable/

Ahora si te preguntas si puede funcionar con Django o con codigo personalizado de backend, tambien es posible aunque con otras configuraciones

Por ejemplo si quieres usar ReactPy con tu propio backend puedes instalar simplemente el modulo y combinarlo

pip install reactpy

o si planeas usando con un backend como starlette, puedes ejecutar lo siguiente:

pip install "reactpy[starlette]"

Luego crea un archivo main.py con el siguiente código:

from reactpy import component, html, run

@component
def App():
    return html.h1("Hello, world!")

run(App)

Ejecuta el servidor con python main.py y si visitas http://localhost:8000, veras un Hello World.

o tambien puedes ejecutar lo siguiente para ver una aplicación de ejemplo:

python -c "import reactpy; reactpy.run(reactpy.sample.SampleApp)"

Usando un servidor HTTP

La forma más sencilla de ejecutar ReactPy es con la función run(). Este es el método que verá utilizado a lo largo de esta documentación. Sin embargo, esto ejecuta su aplicación utilizando un servidor de desarrollo que es excelente para realizar pruebas, pero probablemente no lo sea si está implementando en producción. Asi que es recomendable combinarlo con un Framework Backend de Python, a continuacion probaremos con FastAPI.

pip install fastapi uvicorn

Luego actualicemos main.py con lo siguiente:

from fastapi import FastAPI
from reactpy import component, html
from reactpy.backend.fastapi import configure


@component
def HelloWorld():
    return html.h1("Hello, world!")


app = FastAPI()
configure(app, HelloWorld)

Debug Mode

Esto te permite activar mensajes de errores en tu aplicacion, por ejemplo con el siguiente código:

@component
def App():
    return html.div(GoodComponent(), BadComponent())


@component
def GoodComponent():
    return html.p("This component rendered successfully")


@component
def BadComponent():
    msg = "This component raised an error"
    raise RuntimeError(msg)

Crear interfaces

@component
def App():
    return html.div(
    html.h1("My Todo List"),
    html.ul(
        html.li("Design a cool new app"),
        html.li("Build it"),
        html.li("Share it with the world!"),
    )
)

tambien es posible renderizar imagenes:

@component
def App():
    return html.img(
        {
            "src": "https://picsum.photos/id/237/500/300",
            "style": {"width": "50%"},
            "alt": "Puppy",
        }
    )

Renderizando datos

@component
def TaskList():
    tasks = [
        {"id": 0, "text": "Make breakfast", "priority": 0},
        {"id": 1, "text": "Feed the dog", "priority": 0},
        {"id": 2, "text": "Do laundry", "priority": 2},
        {"id": 3, "text": "Go on a run", "priority": 1},
        {"id": 4, "text": "Clean the house", "priority": 2},
        {"id": 5, "text": "Go to the grocery store", "priority": 2},
        {"id": 6, "text": "Do some coding", "priority": 1},
        {"id": 7, "text": "Read a book", "priority": 1},
    ]
    tasks = [html.li(task['text']) for task in tasks]
    return html.ul(tasks)



@component
def App():
    return html.div(TaskList())

aunque al igual que React, tambien debemos proveer un Key unico:

    tasks = [html.li({"key": task['id']},task['text']) for task in tasks]
    return html.ul(tasks)

Separación por Componentes

Una parte importante de los componentes es que nos permiten separar una interfaz grande en multiples partes, y aqui no es la excepcion, así que tambien podemos crear multiples componentes usando ReactPy

@component
def Task(props):
    return html.li({"key": props['id']}, props['text'])

@component
def TaskList():
    tasks = [
        {"id": 0, "text": "Make breakfast", "priority": 0},
        {"id": 1, "text": "Feed the dog", "priority": 0},
        {"id": 2, "text": "Do laundry", "priority": 2},
        {"id": 3, "text": "Go on a run", "priority": 1},
        {"id": 4, "text": "Clean the house", "priority": 2},
        {"id": 5, "text": "Go to the grocery store", "priority": 2},
        {"id": 6, "text": "Do some coding", "priority": 1},
        {"id": 7, "text": "Read a book", "priority": 1},
    ]
    tasks = [Task(task) for task in tasks]
    return html.ul(tasks)

Estilos

Los estilos pueden ser añadidos usando la tipica propiedad class o style, veamos como queda con estilos en linea:

def Task(props):
    if props['priority'] > 1:
        return html.li({"key": props['id'], "style": {
            "background": "yellow",
            'padding': "1rem",
            'border': "1px solid black",
            'margin': "1rem",
        }}, f"⚠ {props['text']} - {props['priority']}")
    else:
        return html.li({"key": props['id'],
                        "style": {
            "background": "skyblue",
            'padding': "1rem",
            'border': "1px solid black",
            'margin': "1rem",
        }
        }, f"{props['text']} - {props['priority']}")

Manejo de Eventos

    def handle_click(e):
        print("clicked")

    if props['priority'] > 1:
        return html.li({"key": props['id'], "style": {
            "background": "yellow",
            'padding': "1rem",
            'border': "1px solid black",
            'margin': "1rem",
        }}, f"⚠ {props['text']} - {props['priority']}")
    else:
        return html.li({"key": props['id'],
                        "style": {
            "background": "skyblue",
            'padding': "1rem",
            'border': "1px solid black",
            'margin': "1rem",
        }
        },
            html.div(
            {
                "style": {
                    'display': "flex",
                    'justify-content': "space-between",
                }
            },
            f"{props['text']} - {props['priority']}",
            html.button({'on_click': handle_click}, "Delete")
            )
        )

Manejar Estado

ReactPy tambien provee hooks, que son funciones que nos permite alterar el comportamiento de la aplicacion, por ejemplo actualizar el estado, o ejecutar determinada logica cuando algun dato cambie.

from reactpy import component, html, hooks

    counter, set_counter = hooks.use_state(0)

    def handle_click(e):
        set_counter(counter + 1)
        print("clicked")

...


    html.div(
    {
        "style": {
            'display': "flex",
            'justify-content': "space-between",
        }
    },
    f"{props['text']} - {props['priority']} - {counter}",
    html.button({'on_click': handle_click}, "Increment")
    )
 )

Otras funcionalidades

Tiene un Modo Debug
HTML con ReactPy Esta parte de la documentación explica como es que se pueden crear interfaces usando solo funciones de ReactPy, ademas de como pasar atributos para los elementos HTML

Conclusión

ReactPy es una biblioteca bastante fácil de usar sobretodo si ya conoces las bases de React, y aunque aun esta en desarrollo, me gusta mucho la experiencia de desarrollo, ademas que permitira a muchos desarrolladores crear aplicaciones web Fullstack solo usando Python. Por ahora este un overview pero muy pronto espero probar muchas otras caracteristicas cuando sea mas estable.

Lista de Frameworks que pueden ser ejecutados con ReactPy