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:
- Empiece a configurar nuestro entorno de desarrollo.
- Ejecutar
cookiecutter
para 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. - 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!
Índice
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
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.
Añadir comentario