# Need to guidance to integrate react js application into jupyter extension
**URL:** https://discourse.jupyter.org/t/need-to-guidance-to-integrate-react-js-application-into-jupyter-extension/18477
**Category:** extensions
**Created:** [March 16, 2023, 1:38pm UTC](https://discourse.jupyter.org/t/need-to-guidance-to-integrate-react-js-application-into-jupyter-extension/18477 "2023-03-16T13:38:16Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@Rajasekhar\_Naidu](https://discourse.jupyter.org/u/Rajasekhar_Naidu)
#### Post date: [March 16, 2023, 1:38pm UTC](https://discourse.jupyter.org/t/need-to-guidance-to-integrate-react-js-application-into-jupyter-extension/18477/1 "2023-03-16T13:38:16Z")
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 !
---
### Author:  [@kolibril13](https://discourse.jupyter.org/u/kolibril13)
#### Post date: [March 17, 2023, 9:04am UTC](https://discourse.jupyter.org/t/need-to-guidance-to-integrate-react-js-application-into-jupyter-extension/18477/2 "2023-03-17T09:04:35Z")
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/](https://www.tldraw.com/) based image annotation tool.
>
>
> There are many react components, e.g.
> https://mafs.dev/guides/display/coordina…tes
> or
> https://github.com/tldraw/tldraw#contents
> and it would be very interesting to embed them into the output of a Jupyter notebook.
>
> In jupyter-compare-view, we have one long javascript-string (https://github.com/Octoframes/jupyter\_compare\_view/tree/main/vendor)
>
> \`\`\`
> var compare\_view;(()=\>{"use strict";var e={};(e=\>{ ... and so on ...
> \`\`\`
> that is directly embedded into the .ipynb file:
>
>
>
> \
>
> I don't know much about React.
> Is it possible for any react app to be compiled into this kind of compressed string that can simply be embedded into the notebook?
> That would be a very portable solution.
>
> Only drawback: The size of the notebooks might increase.
> But I think a reasonable file size is anything below 20 MB.
> 20 MB sounds a lot for version control, but with the Jupyter Plugin Jupytext that's not a problem.
> Jupytext generates plain text documents with code only from the notebook, and these are automatically synced. These plain text documents can then be committed, while the big .ipynb files are in .gitignore
---
### Author:  [@maartenbreddels](https://discourse.jupyter.org/u/maartenbreddels)
#### Post date: [March 17, 2023, 2:50pm UTC](https://discourse.jupyter.org/t/need-to-guidance-to-integrate-react-js-application-into-jupyter-extension/18477/3 "2023-03-17T14:50:50Z")
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.](https://github.com/jupyter-widgets/widget-cookiecutter) or [GitHub - jupyter-widgets/widget-ts-cookiecutter: A highly opinionated cookiecutter template for ipywidget extensions.](https://github.com/jupyter-widgets/widget-ts-cookiecutter) 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](https://ipyvuetify.readthedocs.io/en/latest/template_usage.html) 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.
---
### Author:  [@Rajasekhar\_Naidu](https://discourse.jupyter.org/u/Rajasekhar_Naidu)
#### Post date: [March 17, 2023, 3:14pm UTC](https://discourse.jupyter.org/t/need-to-guidance-to-integrate-react-js-application-into-jupyter-extension/18477/4 "2023-03-17T15:14:14Z")
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
---
### Author:  [@paddymul](https://discourse.jupyter.org/u/paddymul)
#### Post date: [March 30, 2023, 1:53pm UTC](https://discourse.jupyter.org/t/need-to-guidance-to-integrate-react-js-application-into-jupyter-extension/18477/5 "2023-03-30T13:53:52Z")
This bug [Error importing ReactDOM/client · Issue #130 · jupyter-widgets/widget-ts-cookiecutter · GitHub](https://github.com/jupyter-widgets/widget-ts-cookiecutter/issues/130) - 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](https://github.com/jupyterlab/jupyterlab/issues/14294)