# @datalayer/jupyter-react 中文文档

规范地址：https://npmcn.com/package/%40datalayer/jupyter-react/

版本：2\.0\.21
npm 元数据更新时间：2026-10-21T18:41:41.004Z
中文译文更新时间：2026-11-11T14:47:35.829Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40datalayer/jupyter-react
原文对照：https://npmcn.com/package/%40datalayer/jupyter-react/?lang=original
项目主页：https://github.com/datalayer/jupyter-ui#readme
源码仓库：https://github.com/datalayer/jupyter-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：27.9 MB，1879 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：111 个
- 首次发布：2022-01-29T16:03:57.813Z
- 最新版本发布：2026-10-21T18:41:40.501Z
- 近 30 天下载量：15420（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：150（近 12 个月 27 个）

## 中文简介

Jupyter React - React.js组件100%能与Jupyter兼容.

## 安装

```sh
npm install @datalayer/jupyter-react
```

也可以使用：`pnpm add @datalayer/jupyter-react`、`yarn add @datalayer/jupyter-react`、`bun add @datalayer/jupyter-react`

## README

[![Datalayer](https://images.datalayer.io/legacy/datalayer-25.svg)](https://datalayer.ai/)

[![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor&message=%E2%9D%A4&logo=GitHub&style=flat&color=1ABC9C)](https://github.com/sponsors/datalayer)

# Jupyter 反应

> \[大 **Jupyter React 2.0 发布!** 🎉
> 
> 这个主要发布包括: **断开更改** 联 合 国 `Jupyter` 财务报告和审定财务报表 `Notebook` 组件 :
> 
> -   这个 `Notebook2` 组件现在是默认 `Notebook`
> -   而不是使用 `startDefaultKernel` 组件上的道具,使用 `useJupyter({ startDefaultKernel: true })` 要买的钩子 `serviceManager` 财务报告和审定财务报表 `defaultKernel`,然后明确传递给 `Notebook2`
> -   现在需要笔记本组件 `kernel` 财务报告和审定财务报表 `serviceManager` 有条件渲染的道具
> -   见 [实例](https://npmcn.com/package/%40datalayer/jupyter-react/src/examples) 移徙模式(例如:, [PyGWalker.tsx (英语)](https://npmcn.com/package/%40datalayer/jupyter-react/src/examples/PyGWalker.tsx)(中文(简体) )

> Jupyter反应是一组 [反应.js](https://reactjs.org/) 组件,允许前端开发者构建与该组件兼容的数据产品 [朱比特语Name](https://jupyter.org/) 生态系统。 用户界面提供可执行的笔记本和单元格.

下面的图像显示可供自定义应用程序使用的 React.js 组件的相册 。 这些开源组件用于在线构建 [数据层服务](https://datalayer.ai/),是一个数据分析的协作平台.

![Jupyter React Gallery](https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-gallery.gif)

我们主持一个故事书 关于.. [https://jupyter-ui-storybook.datalayer.tech. 互联网档案馆的存檔,存档日期2013-12-22](https://jupyter-ui-storybook.datalayer.tech/) 显示各种低级的 高级 React.js 组件对构建数据产品有用.

Jupyter(Lab)笔记本是允许数据科学家分析数据集的工具. 然而,要在现有应用程序中创建自定义用户界面并不容易. [Jupyter 反应](https://jupyter-react.datalayer.tech/),一个开源库,可以填补这个空白,并提供开发者可以轻松地集成到任何React.js应用程序中的组件.

在技术堆栈方面,Jupyter(Lab)用户界面被建在了Lumino上方,这是建立用户界面和用户界面的必由之路 **无法** 被React.js等行业标准申报框架所消耗. 作为用户界面开发者,如果想在Jupyter上方创建自定义数据产品,必须坚持到Lumino,并携带不适应您特定需要的完整笔记本界面. 这不是你想要的。 您只是想暴露您需要的东西, 您想要用您最喜欢的工具包( 如 React. js) 来开发, 您也想要将 Jupyter 功能 整合到您的应用程序中 .

虽然开发者可以将 React.js 组件嵌入到 JupyterLab 中,但反之是不可能的: 你不能将 JupyterLab 嵌入到 React.js 应用程序中. 为了解决这个问题,Jupyter-React ship组件可以轻松地创建出兼容Jupyter生态系统的React.js数据产品. 这些组件可以用于任何React.js应用程序,也可以用于Docusaurus,Next.js或Remix等静态网站. 它们包裹在JupyterLab代码下并允许开发具有代码执行能力的React.js应用程序. 国家管理以祖斯坦为主.

```mermaid
flowchart LR
    subgraph Host["Host React Application"]
        HA[Components]
    end

    subgraph Zustand["Zustand Store"]
        ZA[Actions]
        ZS[State]
    end

    subgraph JupyterUI["Jupyter UI"]
        JR[React Components]
    end

    subgraph JupyterLab["JupyterLab/Lumino"]
        LC[Commands]
        LS[Signals]
        LW[Widgets]
    end

    subgraph Kernel["Jupyter Server"]
        K[Kernel]
    end

    HA -->|"dispatch"| ZA
    ZA -->|"proxy"| LC
    LC -->|"execute"| LW
    LW -->|"request"| K

    K -->|"response"| LS
    LS -->|"emit"| ZS
    ZS -->|"subscribe"| HA

    JR -.->|"wraps"| LW
```

支持IPyWidgets(通讯功能需要被固定). JupyterLite和PyScript支持在行进图上. 还可以自动补全.

您可以读取更多上下文 [抽象](https://fosdem.org/2022/schedule/event/lt_jupyter) 的谈话 [FOSDEM 2022 (英语)](https://fosdem.org/2022) (单位:千美元)[录像](http://bofh.nikhef.nl/events/FOSDEM/2022/L.lightningtalks/lt_jupyter.webm)) (中文(简体) ).

作为React.js的开发者,你只需要写几行代码就可以在应用程序中获得活的笔记本或活的单元格.

![Jupyter React Slate](https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-snippet.png)

类型文件是 [在线](https://typedoc.datalayer.tech/datalayer/jupyter-react/0.9.0/index.html)。 。 。 .

Jupyter React可用于任何React.js应用程序. 安装最新的 `@datalayer/jupyter-react` npm 软件包并获得灵感 [实例](https://github.com/datalayer/jupyter-ui/tree/main/examples) 在此仓库中.

![Jupyter React Slate](https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-notebook.png)

## 释放

Jupyter 反应发布于 [国家](https://www.npmjs.com/package/@datalayer/jupyter-react) 财务报告和审定财务报表 [PyPI 密码](https://pypi.org/project/jupyter-react)。 。 。 .

## 发展

### 运行示例

这个软件包包括多个实例应用程序,显示各种Jupyter React组件. 您可以使用其中之一运行这些示例 **维特** (建议)或 **网络软件包**。 。 。 .

#### 使用虚拟( 建议)

Vite提供更快的开发服务器启动和热模块替换(HMR).

```bash
# Install dependencies
npm install

# Start development server (default example: Notebook2Actions)
npm run dev:vite

# Or use these alternative commands
npm run start:vite              # Same as dev:vite
npm run start-local:vite        # Use local Jupyter server (http://localhost:8686)
npm run start-noconfig:vite     # Run without config
npm run build:vite              # Production build
npm run preview:vite            # Preview production build
```

Dev服务器运行于http://localhost:3208.

要运行不同的示例,请编辑其中的条目点 `index.html`数字 :

```html
<script type="module" src="/src/examples/YourExample.tsx"></script>
```

#### 使用 Web 软件包

Webpack 仍然可用于后向兼容.

```bash
# Start development server
npm run start:webpack

# Or use these alternative commands
npm run start-local:webpack     # Use local Jupyter server
npm run start-noconfig          # Run without config (webpack)
npm run build:webpack           # Production build with webpack
```

### 可用实例

以下例子可见于 `src/examples/`数字 :

-   **笔记本2 行动** - 附有行动栏管制的笔记本
-   **单元格** 编号 : **细胞图** - 单单元格实例
-   **笔记本** 编号 : **笔记本Lite** - 完整的笔记本实例
-   **控制台** 编号 : **控制台点** - 控制台实例
-   **IPy 部件** - IPyWidgets集成系统
-   **朱皮特拉布** - JupyterLab的完整应用
-   **终端** - 终端部分
-   还有...

### 图书馆的建设

```bash
# Build TypeScript library
npm run build:lib

# Full build (resources + TypeScript + webpack)
npm run build

# Production build
npm run build:prod
```

## 常见问题

### @datalayer/jupyter-react 是什么？

Jupyter React - React\.js组件100%能与Jupyter兼容\.

### 如何安装 @datalayer/jupyter-react？

在项目目录运行 npm install @datalayer/jupyter-react，或使用 pnpm add / yarn add / bun add。

### @datalayer/jupyter-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @datalayer/jupyter-react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @datalayer/jupyter-react 可以商用吗？

@datalayer/jupyter-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @datalayer/jupyter-react 的下载量有多少？

根据 npm 官方下载统计，@datalayer/jupyter-react 在 2026/10/12 – 2026/11/10 这 30 天内被下载 15,420 次，日均约 514 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @datalayer/jupyter-react 还在维护吗？

最新版本 2\.0\.21 发布于 2026/10/22（20 天前）；至今共发布 150 个版本，其中过去 12 个月发布了 27 个；首次发布于 2022/01/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。