Quickstart
Learn how to build your first resource with tap.
Get started →
```ts
import { resource } from "@assistant-ui/tap";
import { useState } from "react";
const useCounter = () => {
const [count, setCount] = useState(0);
return { count, increment: () => setCount((c) => c + 1) };
};
const Counter = resource(useCounter);
```
**tap is React's hooks, headless.** You write a `resource` the same way you write a
React component, with the same hooks (`useState`, `useEffect`, `useMemo`, ...)
imported from `"react"` and the same rules. The only difference is that a resource
has no UI: instead of returning JSX, it returns a plain value (state and methods),
and it runs anywhere, inside a React component, inside another resource, or
standalone with no React at all.
If you know React hooks, you already know tap. There are only three new things:
1. You write a `use`-prefixed hook and wrap it with `resource(useName)`; the unit
returns a value instead of JSX.
2. You instantiate it by calling the factory (`Name(props)`) to get an element,
then host it with [`useResource`](/tap/docs/tap/resources#hosting-a-resource).
3. A resource tree can run [outside React](/tap/docs/tap/outside-react) entirely.
## Next steps