React examples outside of jupyter

[paddymul]

Is there a way to show the react components functioning outside of jupyter notebook. just a simple static example site that is compiled. Sometimes it is easier to just develop the react on its own.

I have experimented with HtmlWebpackPlugin, but haven't been able to get anything to work.

How do you all develop the react components outside of Jupyter?

[maartenbreddels]

Solara :)

https://solara.dev/docs/tutorial/ipywidgets should do it

[maartenbreddels]

import ipyreact
from traitlets import Unicode

class QRCodeWidget(ipyreact.ReactWidget):
    content = Unicode("").tag(sync=True)
    _esm = """
    import React from "react";
    import QRCode from "react-qr-code";

    export default function App({ content }) {
      return <QRCode value={content} />
    }

    """

page = QRCodeWidget(content="Hello World")

solara run sol.py

Or a bit more fancy:

import ipyreact
from traitlets import Unicode

import solara

class QRCodeWidget(ipyreact.ReactWidget):
    content = Unicode("").tag(sync=True)
    _esm = """
    import React from "react";
    import QRCode from "react-qr-code";

    export default function App({ content }) {
      return <QRCode value={content} />
    }

    """

qr = solara.reactive("https://solara.dev")

@solara.component()
def Page():
    solara.InputText(value=qr, label="QR Code", continuous_update=True)
    solara.Text(f"Value is: {qr}")
    QRCodeWidget.element(content=qr.value)

[paddymul]

Thank you. I think this will work for me for now. I will try to add this into an example repo.

At some point it would be nice to show a more JS-centered apprach to testing... Testing like a JS Dev would be used to. It would make it easier to onboard a JS dev onto a project.

[maartenbreddels]

I guess that is out of scope for this project and solara right? what you are referring to is pure JS development, which can then be consumed by solara and/or ipyreact.

[paddymul]

I guess it is out of scope. But I would like to show users an example of a completely developed functional anywidget example.