---
title: React
---

This is the heart of Arc on the frontend: a small set of hooks and helpers that turn your
generated command and query proxies into idiomatic React. You import a proxy, call its `.use()` hook,
and get a typed, reactive instance — no API client, no DTOs, no manual loading state. Start with
[Commands](/arc/frontend/react/commands/) and [Queries](/arc/frontend/react/queries/); the rest of the pages here refine
those two with validation, scopes, and identity.

## Working with commands

| Topic | What it covers |
| ------- | ----------- |
| [Commands](/arc/frontend/react/commands/) | The `.use()` hook — instantiate, bind, validate, and execute a command from a component. |
| [Command Validation](/arc/frontend/react/commands/validation/) | Pre-flight validation: catch invalid input before the request leaves the browser. |
| [Command Scopes](/arc/frontend/react/commands/scope/) | A scope that captures changes, validation, and errors across several commands in one UI. |

## Working with queries

| Topic | What it covers |
| ------- | ----------- |
| [Queries](/arc/frontend/react/queries/) | Reading data with `.use()` — including live, observable queries that re-render on change. |

## Around the edges

| Topic | What it covers |
| ------- | ----------- |
| [Configure Arc](/arc/frontend/react/arc/) | Point the React app at your backend and set transport, headers, and identity. |
| [Identity](/arc/frontend/react/identity/) | Who the user is, and what they're allowed to see and do. |
| [Dialogs](/arc/frontend/react/dialogs/) | Consistent dialog handling for command and data-entry flows. |
| [Proxy Generation](/arc/backend/proxy-generation/) | How the typed proxies you import here are generated from C#. |
| [Storybook](/arc/frontend/react/storybook/) | The Storybook for the components Arc exposes. |
| [Story Components](/arc/frontend/react/stories/) | Building good-looking, consistent stories. |

Prefer a structured, testable approach for complex screens? See [MVVM with React](/arc/frontend/reactmvvm/).