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
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
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
¡Eso es prácticamente 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».
¡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 este artículo.
Añadir comentario