NPM

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

Yarn

npm install --save @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="module">
  import * from 'https://esm.sh/@data-client/react';
  import * from 'https://esm.sh/@data-client/test';
  import * from 'https://esm.sh/@data-client/rest';
</script>

Usa Agent Skills

¿Prefieres generar la estructura inicial con tu agente de IA? Consulta Agent Skills y ejecuta /data-client-setup.

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.

bash

npx @anansi/cli hatch my-project

Anansi incluye Reactive Data Client automáticamente.

Siguiente: Definir los datos »

Ejemplo

Explora el ejemplo todo-app

Abrir en StackBlitzVer código fuente

Loading demo…

More 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.