备注

这篇翻译之后英文原文有更新，内容可能已过时。

使用你的编程智能体

首先为你的编程智能体安装 Data Client 的 skill。没有它们，智能体能把基础部分做对，但会遗漏其余部分，例如实时 manager 和测试 fixture。

Claude Code plugin

终端

claude plugin marketplace add reactive/data-client
claude plugin install data-client@data-client

在终端中运行

Cursor plugin

复制给 Cursor 的提示词

Codex plugin

终端

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

在终端中运行

Installed packages

终端

# after installing Data Client: links the skills its packages ship
npx --no data-client-skills

在终端中运行

Skills CLI

终端

npx skills add reactive/data-client \
  --skill data-client \
  --skill data-client-setup \
  --skill data-client-manager \
  --skill data-client-schema \
  --skill data-client-v0.18-migration \
  --skill data-client-rest \
  --skill path-to-regexp-v8-migration \
  --skill data-client-react \
  --skill data-client-react-testing \
  --skill data-client-rest-setup \
  --skill data-client-graphql-setup \
  --skill data-client-endpoint-setup

在终端中运行

OpenSkills

终端

npx openskills install reactive/data-client/.agents/skills/data-client
npx openskills install reactive/data-client/.agents/skills/data-client-setup
npx openskills install reactive/data-client/.agents/skills/data-client-manager
npx openskills install reactive/data-client/.agents/skills/data-client-schema
npx openskills install reactive/data-client/.agents/skills/data-client-v0.18-migration
npx openskills install reactive/data-client/.agents/skills/data-client-rest
npx openskills install reactive/data-client/.agents/skills/path-to-regexp-v8-migration
npx openskills install reactive/data-client/.agents/skills/data-client-react
npx openskills install reactive/data-client/.agents/skills/data-client-react-testing
npx openskills install reactive/data-client/.agents/skills/data-client-rest-setup
npx openskills install reactive/data-client/.agents/skills/data-client-graphql-setup
npx openskills install reactive/data-client/.agents/skills/data-client-endpoint-setup

在终端中运行

然后告诉你的智能体：

复制给编程代理的提示词

手动安装

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。

你的编程智能体也可以通过 TanStack Intent 加载这些包附带的 skill，并与你安装的版本相匹配：

npm install -D @tanstack/intent
npx intent install

在终端中运行

下一步：定义数据 »

示例

探索 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 库正常运行的项目，欢迎在我们的讨论区与大家分享。