Creación de una extensión JupyterLab de React / Redux

Hola, me llamo Miguel y en esta ocasión les traigo este nuevo artículo.

En esta publicación de blog, me gustaría demostrar cómo crear una extensión de demostración de JupyterLab que aprovecha React y Redux, junto con TypeScript.

Esto es con lo que terminaremos:

Pero, ¿Cómo podemos llegar allí?

La documentación de los widgets JupyterLab habilitados para React es escasa y no siempre está actualizada. Espero rectificar eso con esta publicación en la que haremos lo siguiente:

1. Empiece a configurar nuestro entorno de desarrollo.
2. Ejecutar cookiecutterpara crear la estructura básica y las dependencias de una nueva extensión. NOTA : no es necesario que complete este paso si está utilizando mi repositorio , esto ya está hecho.
3. Configurar partes específicas de React de la aplicación

Por supuesto, si prefiere aprender leyendo código, ¡continúe y salte a este repositorio de GitHub!

Empezando

A tener en cuenta: Muchos de estos pasos se extraen directamente de este tutorial sobre la creación de extensiones de JupyterLab . Si no está familiarizado con las extensiones de JupyterLab, ¡este tutorial es un gran recurso!

Si no lo usa conda, puede lograr resultados similares con otros administradores de entornos virtuales. Consulte aquí otros métodos de instalación .

Vamos a usar conda para administrar todas nuestras dependencias de Python.

También vamos a crear un nuevo conda entorno llamado jl-extension-env.

Ejecute el siguiente comando en su terminal:

conda create -n jl-extension-env -c conda-forge jupyterlab cookiecutter nodejs git

Podemos activar y desactivar este entorno así (automatizaremos esto usando iTerm2 en un momento).

# Activate this environment when working on this repository
conda activate jl-extension-env
# Deactivate it otherwise
conda deactivate

Corriendo cookiecutter

A tener en cuenta: omita este paso si solo está copiando mi repositorio como punto de partida. Esto ya se ha hecho por ti.

Ejecute el siguiente comando donde desee crear su nuevo proyecto.

cookiecutter https://github.com/jupyterlab/extension-cookiecutter-ts

Responda las indicaciones y luego navegue hasta el directorio recién creado.

Instalación de la extensión localmente

Instalemos dependencias y vinculemos nuestra versión de desarrollo de la extensión con JupyterLab.

# Install dependencies and build the Typescript source
yarn && yarn build
# Link your development version of the extension with JupyterLab
jupyter labextension link .

Puede observar los cambios en el directorio de origen. Utilice los siguientes comandos.

yarn watch
jupyter lab — watch

O pruebe este script para abrir automáticamente dos pestañas y ejecutar el modo de reloj en ambas.

#!/bin/sh# Replace this with the path to your repository
REPOSITORY_DIR=/Users/davisford/Documents/sample-react-jupyterlab-extension# Replace with the name of your conda environment
CONDA_ENV=jl-extension-env# Helper function.
# Opens a new tab and executes a command in iTerm2# Credit: https://apple.stackexchange.com/questions/110778/open-new-tab-in-iterm-and-execute-command-therenewtabi()osascript 
-e ‘tell application “iTerm2” to tell current window to set   newWindow to (create tab with default profile)’
-e “tell application ”iTerm2” to tell current session of newWindow to write text ”$@””
# Open a new tab and start running the local web dev server
newtabi “conda activate $CONDA_ENV && cd $REPOSITORY_DIR && yarn watch”# Open another new tab and open up JupyterLab
newtabi “conda activate $CONDA_ENV && cd $REPOSITORY_DIR && jupyter lab — watch”
view rawjupyterlab_dev.sh hosted with ❤ by GitHub

Trabajando con React y Redux

De acuerdo, la esencia de cómo funciona una extensión de JupyterLab es esta …

Hay un extension objeto que ejecuta todo (ubicado en index.ts). UNA MainAreaWidget se crea, y adjuntaremos nuestra aplicación React a ese widget mediante la extensión de JupyterLab ReactWidget.

Creamos una nueva clase llamada ReactAppWidget, que se extiende ReactWidget. Anulamos el render funcionar y configurar nuestro <Provider> (que manejará nuestra tienda Redux), y renderizamos nuestro <AppComponent>.

import React from ‘react’
import  ReactWidget  from ‘@jupyterlab/apputils’
import  Provider  from ‘react-redux’
import store from ‘../ducks/store’export class ReactAppWidget extends ReactWidget 
constructor() 
super()
render(): JSX.Element 
return (
<Provider store=store>
<AppComponent />
</Provider>
)
// Write all of your React here
const AppComponent = (): JSX.Element => 
return (
<div>
/* Your app here */
</div>
)

view rawApp.tsx hosted with ❤ by GitHub

A tener en cuenta: no he experimentado con Context aún en la configuración de JupyterLab, pero teóricamente envolverías tu ContextProvider alrededor <AppComponent /> aquí como de costumbre.

¡Eso es practicamente todo! <AppComponent /> puede ser cualquier React válido que desee: este render La función es similar a la de una aplicación React normal. index.tsx punto de entrada.

He usado redux-toolkit para administrar la tienda de la aplicación, si no está familiarizado con redux-toolkit, es esencialmente la CreateReactApp de Redux. Proporciona un conjunto de mejores prácticas estándar para que su proyecto se conecte y se ejecute rápidamente. Personalmente amo esta biblioteca.

¡Avanza y desarrolla!

¡Estás listo para comenzar! Iniciar ambos watch modos, ¡y estás en el negocio!

Una vez que JupyterLab se abra en su navegador, haga clic en el icono «Comandos» y busque «Sample React Redux Extension».

¡Entonces verás esta genial aplicación!

¡Felicidades! ¡Está listo para comenzar a trabajar en su propia extensión React / Redux JupyterLab!

Espero que esta guía te haya resultado útil. Si tiene algún problema para que esto funcione, abra un problema en mi Repositorio de GitHub.

Solución de problemas y otros problemas

Hay un comportamiento extraño relacionado con cerrar y volver a abrir la extensión en la misma sesión.

• Probablemente sea 100% culpa mía. Arreglaré el repositorio si / cuando lo averigüe.
• Por ahora, esto se deja como ejercicio para el lector 🙂

A veces watch El modo no parece actualizarse muy bien. Intente actualizar manualmente su página en el navegador después de realizar cambios.

• Si eso no funciona, simplemente cierre las pestañas de JupyterLab y vuelva a abrirlas,

Si obtiene errores de compilación al desinstalar la extensión localmente, intente desvincularla también

jupyter labextension unlink [your-extension-name]

Gracias por leer.