使用你的编程智能体进行设置

Claude Code

终端

claude plugin marketplace add reactive/data-client --scope project \
  --sparse .claude-plugin .agents/skills
claude plugin install data-client@data-client --scope project

在终端中运行

复制给 Claude Code 的提示词

Cursor

复制给 Cursor 的提示词

然后，在新的聊天中：

复制给 Cursor 的提示词

Codex

终端

codex plugin marketplace add reactive/data-client \
  --sparse .claude-plugin --sparse .agents/skills
codex plugin add data-client@data-client

在终端中运行

复制给 Codex 的提示词

Other agents

复制给编程代理的提示词

无论你使用哪一种，你的智能体都会运行 Data Client 的设置 skill，它会安装这些包、接好 provider，并链接这些包附带的 skill，让你的智能体了解最新的 API，例如实时 manager 和测试 fixture。这就是全部设置，你可以直接前往定义数据。

手动设置

这些步骤是不借助智能体的相同设置。如果你的智能体已运行了设置，请跳过它们：它已经完成了每一步。

安装包

NPM

npm install --save @data-client/react @data-client/test @data-client/rest

在终端中运行

Yarn

yarn add @data-client/react @data-client/test @data-client/rest

在终端中运行

pnpm

pnpm add @data-client/react @data-client/test @data-client/rest

在终端中运行

esm.sh

<script type="importmap">
{
  "imports": {
    "@data-client/react": "https://esm.sh/@data-client/react",
    "@data-client/test": "https://esm.sh/@data-client/test",
    "@data-client/rest": "https://esm.sh/@data-client/rest"
  }
}
</script>

在顶层组件中添加 provider

Web

index.tsx

import { DataProvider } from '@data-client/react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.body).render(
  <DataProvider>
    <App />
  </DataProvider>,
);

或者，将状态与 redux 集成

React Native

index.tsx

import { DataProvider } from '@data-client/react';
import { AppRegistry } from 'react-native';
import App from './App';

const Root = () => (
  <DataProvider>
    <App />
  </DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);

或者，将状态与 redux 集成

NextJS

完整的 NextJS 指南

app/layout.tsx

import { DataProvider } from '@data-client/react/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <DataProvider>{children}</DataProvider>
      </body>
    </html>
  );
}

Expo

app/_layout.tsx

import { Stack } from 'expo-router';
import { DataProvider } from '@data-client/react';

export default function RootLayout() {
  return (
    <DataProvider>
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </DataProvider>
  );
}

Anansi

Anansi（beta）是一个完全可组合的 React 开发框架，可选支持服务端渲染。

npx @anansi/cli hatch my-project

在终端中运行

Anansi 已自动集成 Reactive Data Client。

链接智能体的 skill

这些包为你的编程智能体附带了 skill，与你安装的版本相匹配。链接它们，让 Claude Code、 Cursor 和 Codex 加载它们，并提交这些链接：

npx --no data-client-skills

在终端中运行

在添加、移除或升级 @data-client 包后再次运行它。详情请参阅 Agent Skills。

下一步：定义数据 »

示例

探索 todo-app 示例

在 StackBlitz 中打开查看源码

正在加载演示…

更多演示

支持的工具

TypeScript 4.0+

TypeScript 是可选的，但要获得完整的类型约束，至少需要 4.0 版本并开启 strictNullChecks。

旧版浏览器支持

如果你的应用面向较旧的浏览器（几年甚至更久之前的），请务必加载 polyfill。通常的做法是使用 @babel/preset-env useBuiltIns: 'entry'，并在应用入口处导入 core-js。

这样可以确保应用的打包产物中只包含目标浏览器所需的 polyfill。

例如 TypeError: Object.hasOwn is not a function

Internet Explorer 支持

如果你看到 Uncaught TypeError: Class constructor Resource cannot be invoked without 'new'，请按照说明为包添加旧版浏览器支持

ReactJS 16-19 与 React Native

支持 ReactJS 16.2 及以上版本（也就是带 hook 的版本！）。React 18 提供了更完善的 Suspense 支持和特性。React Native、React Navigation 和 Expo 均受支持。

如果你有一个结合其他 React 库正常运行的项目，欢迎在我们的讨论区与大家分享。