Comenzando con ReactPy

Reeditado por Platón

seguidores: 0

Primeros pasos con ReactPy
Imagen del autor

Con la creciente popularidad de ReactJS en el desarrollo web, existe una creciente demanda de un marco similar en Python para crear aplicaciones de ciencia de datos, IA y aprendizaje automático listas para la producción. Aquí es donde entra en juego ReactPy, que brinda a los 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 declarativo simple que escala de manera eficiente las aplicaciones a casos de uso complejos.

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

Ejecutar un ReactPy en un navegador web utilizando varias API de backends.
Ejecutar ReactPy en Jupyter Notebook usando widgets de Jupyter.

ReaccionarPy es una biblioteca de Python para construir interfaces de usuario sin usar JavaScript. Las interfaces de ReactPy están construidas usando componentes que ofrecen una experiencia similar a la que se encuentra en ReactJS.

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

Es bastante fácil instalar ReactPy usando pip:

pip install reactpy

Después de la instalación, intente ejecutar una aplicación de muestra utilizando el siguiente script.

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

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

Primeros pasos con ReactPy

Como podemos observar que ReactPy está funcionando perfectamente.

Primeros pasos con ReactPy

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

pip install "reactpy[fastapi]"

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

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

Cuando cree una nueva función de componente, intente agregar una función mágica @componnet 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 el título 1.
- html.b por negrita.
- html.ul y html.li para viñetas.
- html.img para imagenes

from reactpy import component, html, run @component
def App(): return html.section( html.h1("Welcome to KDnuggets"), html.p("KD stands for Knowledge Discovery."), ) run(App)

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

python reactpy_simple.py

Primeros pasos con ReactPy

Nuestra sencilla aplicación web funciona sin problemas.

Intentemos agregar más componentes html como imagen y lista, y ejecutar la aplicación usando fastapi back-end Para eso:

Importa FastAPI clase y configure Desde reactpy.backend.fastapi
Cree una función componente llamada Photo() y agregue todos los elementos HTML.
Crea un objeto de aplicación usando FastAPI objeto y configurarlo 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("KDnuggets Blog Featured Image"), html.p(html.b("KD"), " stands for:"), html.ul(html.li("K: Knowledge"), html.li("D: Discovery")), html.img( { "src": "https://www.kdnuggets.com/wp-content/uploads/about-kdn-header.jpeg", "style": {"width": "50%"}, "alt": "KDnuggets About Image", } ), ) app = FastAPI()
configure(app, Photo)

Guarde el archivo con el nombre reactpy_advance.py y ejecute la aplicación como si ejecutara cualquier aplicación FastAPI usando unicornio.

uvicorn reactpy_advance:app

Primeros pasos con ReactPy

Como podemos observar, nuestra aplicación se ejecuta con elementos HTML adicionales.

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

Primeros pasos con ReactPy

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, ejecute primero el siguiente comando para activar el widget.

import reactpy_jupyter

Or utilizan el %config funcion magica para registrar reactpy_jupyter como una extensión IPython permanente en su 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("Welcome to KDnuggets"), html.p("KD stands for Knowledge Discovery."), ) App()

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

Primeros pasos con ReactPy

from reactpy import component, html @component
def Photo(): return html.section( html.h1("KDnuggets Blog Featured Image"), html.p(html.b("KD"), " stands for:"), html.ul(html.li("K: Knowledge"), html.li("D: Discovery")), html.img( { "src": "https://www.kdnuggets.com/wp-content/uploads/about-kdn-header.jpeg", "style": {"width": "50%"}, "alt": "KDnuggets About Image", } ), ) Photo()

Primeros pasos con ReactPy

También podemos crear una aplicación interactiva usando botones y entradas, como se muestra a continuación. Puedes leer ReactPy documentación para crear la interfaz de usuario, la interactividad, el estado de gestión, los ganchos de API y las escotillas de escape.

Primeros pasos con ReactPy
GIF de ReactPy en Binder

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

ReactPy se muestra prometedor 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 el aprendizaje automático y las aplicaciones AI Python.

Abid Ali Awan (@ 1abidaliawan) es un profesional científico de datos certificado al que le encanta crear modelos de aprendizaje automático. Actualmente, se está enfocando en la creación de contenido y escribiendo blogs técnicos sobre aprendizaje automático y tecnologías de ciencia de datos. Abid tiene una Maestría en Gestión de Tecnología y una licenciatura en Ingeniería de Telecomunicaciones. Su visión es construir un producto de IA utilizando una red neuronal gráfica para estudiantes que luchan contra enfermedades mentales.