# Getting Started with Reactive Data Client

```bash
npm install @data-client/react @data-client/test @data-client/rest
```

> **Tip: Use Agent Skills**
>
> Prefer to scaffold via your AI agent? See [Agent Skills](https://dataclient.io/docs/getting-started/agent-skills.md) and run `/data-client-setup`.

## Add provider at top-level component {#add-provider-at-top-level-component}

**Web**

```tsx title="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>,
);
```

Alternatively [integrate state with redux](https://dataclient.io/docs/guides/redux.md)

**React Native**

```tsx title="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);
```

Alternatively [integrate state with redux](https://dataclient.io/docs/guides/redux.md)

**NextJS**

[Full NextJS Guide](https://dataclient.io/docs/guides/ssr.md#nextjs)

```tsx title="app/layout.tsx"
import { DataProvider } from '@data-client/react/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <DataProvider>{children}</DataProvider>
      </body>
    </html>
  );
}
```

**Expo**

```tsx title="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](https://github.com/ntucker/anansi) (beta) is a fully composable framework for React development with optional
Server Side Rendering.

```bash title="bash"
npx @anansi/cli hatch my-project
```

Anansi includes Reactive Data Client automatically.

[Next: Define Data »](https://dataclient.io/docs/getting-started/resource.md)

## Example

Example app: [todo-app](https://github.com/reactive/data-client/tree/master/examples/todo-app) ([`src/index.tsx`](https://github.com/reactive/data-client/blob/master/examples/todo-app/src/index.tsx), [`src/RootProvider.tsx`](https://github.com/reactive/data-client/blob/master/examples/todo-app/src/RootProvider.tsx))

## Supported Tools

<details>

<summary>TypeScript 4.0+</summary>

TypeScript is optional, but requires at least version [4.0](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#variadic-tuple-types) and [strictNullChecks](https://www.typescriptlang.org/tsconfig#strictNullChecks) for full type enforcement.

</details>

<details>

<summary>Older browser support</summary>

If your application targets older browsers (a few years or more), be sure to load polyfills.
Typically this is done with [@babel/preset-env useBuiltIns: 'entry'](https://babeljs.io/docs/en/babel-preset-env#usebuiltins),
coupled with importing [core-js](https://www.npmjs.com/package/core-js) at the entrypoint of your application.

This ensures only the needed polyfills for your browser support targets are included in your application bundle.

For instance `TypeError: Object.hasOwn is not a function`

</details>

<details>

<summary>Internet Explorer support</summary>

If you see `Uncaught TypeError: Class constructor Resource cannot be invoked without 'new'`,
follow the instructions to [add legacy browser support to packages](https://dataclient.io/docs/guides/legacy-browser.md)

</details>

<details>

<summary>ReactJS 16-19 and React Native</summary>

ReactJS 16.2 and above is supported (the one with hooks!). React 18 provides improved [Suspense](https://dataclient.io/docs/api/useSuspense.md)
support and features. Both React Native, [React Navigation](https://reactnavigation.org/) and [Expo](https://docs.expo.dev) are supported.

If you have a working project using other
React libraries, [feel free to share with others](https://github.com/reactive/data-client/discussions/2422) in our
discussions.

</details>