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>

Use Agent Skills

Prefere gerar a estrutura inicial por meio do seu agente de IA? Veja Agent Skills e execute /data-client-setup.

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.

bash

npx @anansi/cli hatch my-project

O Anansi inclui o Reactive Data Client automaticamente.

Próximo: Definir dados »

Exemplo

Explore o exemplo todo-app

Abrir no StackBlitzVer código-fonte

Loading demo…

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