November 30, 2023

Como utilizar ReactPy

Tutorial

Python

React

Instalación

Instalación de ReactPY

Primero debemos instalar las dependencias:

pip3 install 'reactpy[fastapi]'

Las comillas se utilizan en bash (y otros shells) para manejar cadenas de texto que contienen caracteres especiales. Los corchetes [] son caracteres especiales en muchos contextos de shell, ya que se utilizan para definir expresiones regulares o patrones de coincidencia. Al poner el nombre del paquete entre comillas, le estás diciendo al shell que trate todo el contenido dentro de las comillas como una cadena de texto literal y que no interprete ninguno de los caracteres como especiales.

Por lo tanto, cuando ejecutas pip install 'reactpy[fastapi]', estás indicando que bash trate los corchetes como parte del nombre del paquete que estás intentando instalar con pip, en lugar de interpretarlos como una expresión regular o un patrón de coincidencia. Esto permite que el comando se ejecute correctamente.

Instalación de uvicorn

Uvicorn es un servidor ASGI (Asynchronous Server Gateway Interface) muy rápido basado en uvloop y httptools. Uvicorn está diseñado para servir aplicaciones web basadas en Python que cumplen con la especificación ASGI.

ASGI es un estándar que permite a las aplicaciones web Python manejar tanto las solicitudes HTTP síncronas tradicionales como las conexiones WebSockets asíncronas y otras formas de comunicación HTTP.

Uvicorn es comúnmente usado junto a frameworks web asíncronos como FastAPI y Starlette, debido a su alta velocidad y eficiencia. Permite aprovechar la concurrencia a nivel de sistema operativo, lo que puede llevar a un rendimiento significativamente mayor en comparación con los servidores WSGI tradicionales.

Para instalarlo utilizarémos:

Una vez instalado, puedes usar Uvicorn para ejecutar tu aplicación FastAPI o Starlette con un comando como este (donde main es el archivo de tu aplicación y app es la instancia de la aplicación):

una vez tengamos instaladas las depenencias, podemos abrir el editor con el comando:

code .

Comenzando el proyecto

Primero crearemos el fichero main.py (Aunque sea ReactJs, no utilizaremos JSX)

# Importamos las clases Component y html de la librería reactpy.
# Component nos permitirá crear componentes de React en Python.
# html nos ayudará a crear elementos HTML en nuestros componentes.
from reactpy import component, html

# Importamos la función configure del módulo reactpy.backend.fastapi.
# Esta función nos permitirá configurar nuestra aplicación FastAPI para usar componentes de ReactPy.
from reactpy.backend.fastapi import configure

# Importamos FastAPI, un framework moderno y rápido (de alto rendimiento) para la creación de APIs web en Python.
from fastapi import FastAPI

# Definimos un nuevo componente llamado HelloWorld usando la anotación @Component.
# Este componente simplemente devuelve un div que contiene el texto "Hello World".
@component
def HelloWorld():
    return html.div("Hello World")

# Creamos una nueva instancia de FastAPI.
app = FastAPI()

# Configuramos nuestra aplicación FastAPI para usar el componente HelloWorld que hemos definido antes.
# Esto significa que cuando se acceda a nuestra aplicación web, se mostrará el componente HelloWorld.
configure(app, HelloWorld)

Ahora procederemos a levantar el servidor:

uvicorn main:app --reload // Reload mantendrá el código actualizado para que no tengamos que refrescar la página

Si el servidor se levanta correctamente, veremos en el terminal:

INFO:     Will watch for changes in these directories: ['/home/tuUsuario/ReactPy']
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     Started reloader process [3362] using WatchFiles
INFO:     Started server process [3364]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
INFO:     127.0.0.1:36676 - "GET / HTTP/1.1" 200 OK
INFO:     127.0.0.1:36676 - "GET /index.a1f87a11.js HTTP/1.1" 200 OK
INFO:     127.0.0.1:36700 - "GET /index.a1f87a11.js HTTP/1.1" 200 OK
INFO:     127.0.0.1:36676 - "GET /reactpy-logo.ico HTTP/1.1" 200 OK
INFO:     ('127.0.0.1', 36710) - "WebSocket /_reactpy/stream" [accepted]
INFO:

Así que desde el navegador abriremos la URL 127.0.0.1:8000

Como no utilizaremos JSX, la sintaxis que utilizaremos es la siguiente

return html.div(
        html.h1("Lista de taeras"),
        html.ul(
            html.li("Tarea 1"),
            html.li("Tarea 2"),
        )
    );

La magia de todo esto es que lo que está ocurriendo por debajo es que ReactPy lo que está haciendo es compilar el código a javascript, esto lo podrémos ver las herramientas de desarollo del editor:

Un nuevo componente

Para seguir probando esta librería, vamos a crear otro componente en el mismo fichero:

@component
def Item(text):
    return html.li(text)

Con esto ya podriamos sustituir html.li("Tarea 1") por Item(”Tarea 1”)

@component
def HelloWorld():
    return html.div(
        html.h1("Lista de taeras"),
        html.ul(
            Item("Tarea con componente 1"),
            Item("Tarea con componente 2"),
        )
    );

Añadiendo CSS a nuestros componentes:

@component
def Item(text):
    return html.li({
        "class": "item",
        "style": {
            "color": "blue"
        }
    }, text)

Renderizado condicional

** hola **

Written by Pol Valle

I am particularly drawn to developing applications that are not only functional but also visually appealing and easy to use. I accomplish this by implementing SOLID principles and clean architecture, and applying testing to ensure quality.