observação

O original em inglês mudou depois desta tradução, então ela pode estar desatualizada.

Com o seu agente de código

Primeiro instale as skills do Data Client para o seu agente de código. Sem elas, os agents acertam o básico, mas deixam passar o restante, como managers em tempo real e fixtures de teste.

Claude Code plugin

Terminal

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

Execute no seu terminal

Cursor plugin

Copiar o prompt para o Cursor

Codex plugin

Terminal

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

Execute no seu terminal

Installed packages

Terminal

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

Execute no seu 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

Execute no seu 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

Execute no seu terminal

Em seguida, diga ao seu agent:

Copiar o prompt para o seu agente de programação

Instalar manualmente

NPM

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

Execute no seu terminal

Yarn

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

Execute no seu terminal

pnpm

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

Execute no seu 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>

Adicione o provider no componente de nível 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, integre o estado com 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, integre o estado com redux

NextJS

Guia completo do 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) é um framework totalmente componível para desenvolvimento com React, com Server Side Rendering opcional.

npx @anansi/cli hatch my-project

Execute no seu terminal

O Anansi inclui o Reactive Data Client automaticamente.

Seu agente de código também pode carregar as skills que esses pacotes incluem, correspondentes à versão que você instalou, com o TanStack Intent:

npm install -D @tanstack/intent
npx intent install

Execute no seu terminal

Próximo: Definir dados »

Exemplo

Explore o exemplo todo-app

Abrir no StackBlitzVer código-fonte

Carregando a demo…

Mais demos

Ferramentas compatíveis

TypeScript 4.0+

TypeScript é opcional, mas exige pelo menos a versão 4.0 e strictNullChecks para a verificação completa de tipos.

Suporte a navegadores antigos

Se sua aplicação tem como alvo navegadores mais antigos (de alguns anos atrás ou mais), certifique-se de carregar polyfills. Normalmente isso é feito com @babel/preset-env useBuiltIns: 'entry', combinado com a importação do core-js no ponto de entrada da sua aplicação.

Isso garante que apenas os polyfills necessários para os navegadores que você suporta sejam incluídos no bundle da sua aplicação.

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

Suporte ao Internet Explorer

Se você encontrar Uncaught TypeError: Class constructor Resource cannot be invoked without 'new', siga as instruções para adicionar suporte a navegadores legados aos pacotes

ReactJS 16-19 e React Native

O ReactJS 16.2 e superior é compatível (a versão com hooks!). O React 18 oferece suporte e recursos aprimorados de Suspense. React Native, React Navigation e Expo também são compatíveis.

Se você tem um projeto funcionando com outras bibliotecas React, fique à vontade para compartilhar com os outros em nossas discussões.