Need to guidance to integrate react js application into jupyter extension

JupyterLab extensions
1

Hello all,

i am new to developing Jupyter extensions i need help to integrate react JavaScript application into Jupyter extension i have tried following doc but it’s not clear how to integrate with react JavaScript the example which there in Jupyter example github repo it is in typescript it is not working for JavaScript version. if any you having reference using react JavaScript please share.

Thank you !

1 Like
2

Thanks for asking, I am interested in this question as well!
When there was a simple way to integrate react JS into Jupyter, that would open the door to many widgets, e.g. a https://www.tldraw.com/ based image annotation tool.

3

If you want bi-directional communication between js and python, you want to develop this as a ipywidget extension. GitHub - jupyter-widgets/widget-cookiecutter: A cookiecutter template for creating a custom Jupyter widget project. or GitHub - jupyter-widgets/widget-ts-cookiecutter: A highly opinionated cookiecutter template for ipywidget extensions. may help you get started.

However, I also have a need for this, and often want to just cobble up a small react component together. Similar to how we’ve done Template Usage — ipyvuetify 1.2.2 documentation I think we should create a library that takes a file input, and compiles the jsx on the frontend using the sucrase library, so it doesn’t need any build tools.

Curious what you think of this idea.

1 Like
4

Thank you for the response, I want to integrate already developed React javascript application (not typescript) into jupyter lab extensions if any help around that it would be appreciated.

Thank you

1 Like
5

This bug Error importing ReactDOM/client · Issue #130 · jupyter-widgets/widget-ts-cookiecutter · GitHub - here Maarten helped me solve a similar problem.

I started a broader discussion here Better messaging around conflicts with sharedPackages · Issue #14294 · jupyterlab/jupyterlab · GitHub