Empezando con ReactPy

Getting started with ReactPy

Una Guía para Principiantes sobre Cómo Construir Aplicaciones Web sin JavaScript.

Con la creciente popularidad de ReactJS en el desarrollo web, hay una creciente demanda de un framework similar en Python para construir aplicaciones de machine learning, inteligencia artificial y ciencia de datos listas para producción. Aquí es donde entra ReactPy, proporcionando a principiantes, científicos de datos e ingenieros la capacidad de crear aplicaciones similares a ReactJS en Python. ReactPy brinda a los usuarios un marco de vista simple y declarativo que escala eficientemente las aplicaciones a casos de uso complejos.

En esta publicación de blog, exploraremos ReactPy, aprendiendo cómo construir una aplicación simple y ejecutarla tanto en un navegador web como en un Jupyter Notebook. Específicamente, cubriremos:

• Convierta ideas en música con MusicLM.
• Potenciando la búsqueda con inteligencia artificial generativa
• Presentando PaLM 2

• Ejecución de un ReactPy en un navegador web usando varias API de backends.
• Ejecución de ReactPy en Jupyter Notebook utilizando widgets de Jupyter.

¿Qué es ReactPy?

ReactPy es una biblioteca de Python para construir interfaces de usuario sin usar JavaScript. Las interfaces de ReactPy se construyen utilizando componentes que ofrecen una experiencia similar a la encontrada en ReactJS.

Diseñado para la simplicidad, ReactPy tiene una curva de aprendizaje suave y una superficie de API mínima. Esto lo hace accesible para aquellos sin experiencia en desarrollo web, pero también puede escalar para admitir aplicaciones sofisticadas.

Configuración

Es bastante fácil instalar ReactPy usando pip:

pip install reactpy

Después de la instalación, intente ejecutar una aplicación de muestra usando el script a continuación.

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

Nuestra aplicación con el backend starlette se está ejecutando en una dirección local. Solo cópielo y péguelo en el navegador web.

Como podemos observar, ReactPy se está ejecutando perfectamente.

También puede instalarlo con el backend de su elección. En nuestro caso, instalaremos ReactPy con el backend fastapi.

pip install "reactpy[fastapi]"

Aquí está la lista de los backends de Python más populares que vienen con ReactPy:

• 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/

Ejecutando ReactPy en un navegador web

Ahora intentaremos construir una aplicación simple con un encabezado 1 y un párrafo y ejecutarlo en el backend predeterminado (starlette).

• Cuando cree una nueva función de componente, intente agregar una función mágica @component encima de una función.
• Después de eso, cree un esqueleto de una página web con diferentes elementos HTML como:
  • html.h1 para encabezado 1.
  • html.b para negrita.
  • html.ul y html.li para viñetas.
  • html.img para imágenes.

from reactpy import component, html, run


@component
def App():
    return html.section(
        html.h1("Bienvenido a Zepes"),
        html.p("KD significa Knowledge Discovery."),
    )


run(App)

Guarde el código anterior en un archivo reactpy_simple.py y ejecute el siguiente comando en la terminal.

python reactpy_simple.py

Nuestra aplicación web simple se está ejecutando sin problemas.

Intentemos agregar más componentes de HTML como una imagen y una lista, y ejecutar la aplicación usando el backend fastapi. Para ello:

1. Importa la clase FastAPI y configure de reactpy.backend.fastapi
2. Crea una función de componente llamada Photo() y agrega todos los elementos de HTML.
3. Crea un objeto de aplicación utilizando el objeto FastAPI y configúralo con el componente ReactPy.

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


@component
def Photo():
    return html.section(
        html.h1("Imagen destacada de Zepes Blog"),
        html.p(html.b("KD"), " significa:"),
        html.ul(html.li("K: Conocimiento"), html.li("D: Descubrimiento")),
        html.img(
            {
                "src": "https://www.kdnuggets.com/wp-content/uploads/about-kdn-header.jpeg",
                "style": {"width": "50%"},
                "alt": "Imagen de Zepes Acerca De",
            }
        ),
    )


app = FastAPI()
configure(app, Photo)

Guarda el archivo con el nombre reactpy_advance.py y ejecuta la aplicación como cualquier aplicación FastAPI usando unicorn.

uvicorn reactpy_advance:app

Como podemos observar, nuestra aplicación se está ejecutando con elementos HTML adicionales.

Para confirmar que se está ejecutando FastAPI como backend, agregaremos /docs al enlace.

Ejecutando ReactPy en Jupyter Notebook

Ejecutar y probar ReactPy en Jupyter Notebook requiere instalar un widget de Jupyter llamado reactpy_jupyter.

%pip install reactpy_jupyter

Antes de ejecutar cualquier cosa, ejecuta el siguiente comando primero para activar el widget.

import reactpy_jupyter

O usa la función mágica %config para registrar reactpy_jupyter como una extensión IPython permanente en tu archivo de configuración.

%config InteractiveShellApp.extensions = ['reactpy_jupyter']

Ahora ejecutaremos el componente ReactPy en Jupyter Notebook. En lugar de usar run(), ejecutaremos directamente una función de componente.

from reactpy import component, html


@component
def App():
    return html.section(
        html.h1("Bienvenido a Zepes"),
        html.p("KD significa Descubrimiento de Conocimiento."),
    )


App()

De manera similar a los ejemplos anteriores, ejecutaremos un ejemplo avanzado ejecutando la función Photo().

from reactpy import component, html


@component
def Photo():
    return html.section(
        html.h1("Imagen destacada de Zepes Blog"),
        html.p(html.b("KD"), " significa:"),
        html.ul(html.li("K: Conocimiento"), html.li("D: Descubrimiento")),
        html.img(
            {
                "src": "https://www.kdnuggets.com/wp-content/uploads/about-kdn-header.jpeg",
                "style": {"width": "50%"},
                "alt": "Imagen de Zepes Acerca De",
            }
        ),
    )


Photo()

También podemos crear una aplicación interactiva utilizando botones y entrada, como se muestra a continuación. Puedes leer la documentación de ReactPy para crear la interfaz de usuario, interactividad, gestión de estado, ganchos de API y escapes.

Gif de ReactPy en Binder

Conclusión

En resumen, esta publicación del blog ha proporcionado una introducción a ReactPy, demostrando cómo crear aplicaciones simples de ReactPy. Al ejecutar ReactPy dentro de un navegador web utilizando diferentes API backends y dentro de Jupyter Notebooks utilizando widgets de Jupyter, hemos visto la flexibilidad de ReactPy al permitir a los desarrolladores construir aplicaciones tanto para entornos web como de notebook.

ReactPy muestra promesa como una biblioteca de Python para crear interfaces de usuario reactivas que pueden llegar a una amplia audiencia. Con un desarrollo continuo, ReactPy puede convertirse en una alternativa convincente a React basado en JavaScript para aplicaciones de aprendizaje automático e inteligencia artificial en Python.

• Pruebe ReactPy en Binder
• Documentación de ReactPy
• Repositorio de GitHub

Abid Ali Awan (@1abidaliawan) es un profesional certificado en ciencia de datos que ama construir modelos de aprendizaje automático. Actualmente, se centra en la creación de contenido y la escritura de blogs técnicos sobre tecnologías de aprendizaje automático y ciencia de datos. Abid tiene un máster en gestión de tecnología y una licenciatura en ingeniería de telecomunicaciones. Su visión es construir un producto de inteligencia artificial utilizando una red neuronal de gráficos para estudiantes que luchan con enfermedades mentales.

We will continue to update Zepes; if you have any questions or suggestions, please contact us!