reactpy-jupyter

使用Jupyter小部件实现的ReactPy客户端

立即尝试！

点击下面的徽章查看一些实时示例

入门

要安装，请使用 pip

pip install reactpy_jupyter

然后，在执行任何其他操作之前，请执行以下操作之一

1. 在笔记本顶部运行

   import reactpy_jupyter
   

2. 将 reactpy_jupyter 注册为您的配置文件中的永久IPython扩展

   c.InteractiveShellApp.extensions = [
       'reactpy_jupyter'
   ]
   

使用方法

完成入门后，您可以在Jupyter笔记本中本地创建和显示ReactPy布局

import reactpy

@reactpy.component
def ClickCount():
    count, set_count = reactpy.hooks.use_state(0)
    return reactpy.html.button(
        {"onClick": lambda event: set_count(count + 1)},
        [f"Click count: {count}"],
    )

ClickCount()

您还可以使用 reactpy_juptyer.widgetize 函数将 reactpy 元素构造函数转换为返回 ipywidget 的构造函数。如果您想将ReactPy与其他Jupyter小部件（如以下示例）结合使用，这非常有用

ClickCountWidget = reactpy_jupyter.widgetize(ClickCount)
ipywidgets.Box(
    [
        ClickCountWidget(),
        ClickCountWidget(),
    ]
)

或者，只需将 reactpy 元素实例包裹在 reactpy_jupyter.LayoutWidget 中即可

ipywidgets.Box(
    [
        reactpy_jupyter.LayoutWidget(ClickCount()),
        reactpy_jupyter.LayoutWidget(ClickCount()),
    ]
)

有关更详细的介绍，请查看此处的实时演示

开发安装

对于开发安装（需要Node.js和Yarn版本1），

$ git clone https://github.com/reactive-python/reactpy-jupyter.git
$ cd reactpy-jupyter
$ pip install -e .

要自动重新构建和刷新Jupyter，请在做出更改时启动Vite开发服务器

$ npx vite

然后，在导入 reactpy_jupyter 之前设置以下环境变量

import os
os.environ["REACTPY_JUPYTER_DEV"] = "1"
import reactpy_jupyter