nota

El original en inglés cambió después de esta traducción, así que puede estar desactualizada.

Con tu agente de programación

Primero instala las skills de Data Client para tu agente de programación. Sin ellas, los agentes aciertan con lo básico pero se pierden el resto, como los managers en tiempo real y los fixtures de prueba.

Claude Code plugin

Terminal

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

Ejecútalo en tu terminal

Cursor plugin

Copiar el prompt para Cursor

Codex plugin

Terminal

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

Ejecútalo en tu terminal

Installed packages

Terminal

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

Ejecútalo en tu terminal

Skills CLI

Terminal

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

Ejecútalo en tu terminal

OpenSkills

Terminal

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

Ejecútalo en tu terminal

Luego dile a tu agente:

Copiar el prompt para tu agente de programación

Instalación manual

NPM

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

Ejecútalo en tu terminal

Yarn

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

Ejecútalo en tu terminal

pnpm

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

Ejecútalo en tu terminal

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>

Agrega el proveedor en el componente de nivel superior

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>,
);

Como alternativa, integra el estado con 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);

Como alternativa, integra el estado con redux

NextJS

Guía completa de 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) es un framework totalmente componible para el desarrollo con React, con renderizado del lado del servidor opcional.

npx @anansi/cli hatch my-project

Ejecútalo en tu terminal

Anansi incluye Reactive Data Client automáticamente.

Tu agente de programación también puede cargar las skills que incluyen estos paquetes, ajustadas a la versión que instalaste, con TanStack Intent:

npm install -D @tanstack/intent
npx intent install

Ejecútalo en tu terminal

Siguiente: Definir los datos »

Ejemplo

Explora el ejemplo todo-app

Abrir en StackBlitzVer código fuente

Cargando la demo…

Más demos

Herramientas compatibles

TypeScript 4.0+

TypeScript es opcional, pero requiere al menos la versión 4.0 y strictNullChecks para una verificación de tipos completa.

Compatibilidad con navegadores antiguos

Si tu aplicación apunta a navegadores antiguos (de hace unos años o más), asegúrate de cargar polyfills. Normalmente esto se hace con @babel/preset-env useBuiltIns: 'entry', junto con la importación de core-js en el punto de entrada de tu aplicación.

Así te aseguras de que solo se incluyan en el bundle de tu aplicación los polyfills necesarios para los navegadores que quieres soportar.

Por ejemplo, TypeError: Object.hasOwn is not a function

Compatibilidad con Internet Explorer

Si ves Uncaught TypeError: Class constructor Resource cannot be invoked without 'new', sigue las instrucciones para agregar compatibilidad con navegadores heredados a los paquetes

ReactJS 16-19 y React Native

Se admite ReactJS 16.2 y posteriores (¡la versión con hooks!). React 18 ofrece un soporte y unas funcionalidades mejoradas de Suspense. Se admiten tanto React Native como React Navigation y Expo.

Si tienes un proyecto funcionando con otras bibliotecas de React, compártelo con los demás en nuestras discusiones.