# Instalar y renderizar con React

<PageBadges />

Para una aplicación web nueva, usa el [inicio rápido de la CLI](/es/getting-started/quickstart). El
proyecto inicial mantenido para React y Vite incluye el binding, la configuración y esquemas de
ejemplo.

Para añadir form0 a una aplicación existente:

```bash
npm install form0-react form0-core
```

La aplicación anfitriona también debe proporcionar dependencias peer compatibles:

- Node.js 22 o posterior para la instalación y las herramientas de compilación
- React 18 o 19
- React DOM 18 o 19
- `@vanilla-extract/css` 1.17.4 o posterior

## Renderizar un esquema

```jsx
import { FormRenderer } from "form0-react"
import "form0-react/index.css"
import schema from "./contact.form0.json"

export function ContactForm() {
  return (
    <FormRenderer
      schema={schema}
      onSubmit={(record, meta) => {
        console.log(record)
        console.log(meta.rawValues)
      }}
    />
  )
}
```

`schema` debe contener un objeto de formulario válido de `form0-core`. Empieza con
[Edita tu primer esquema](/es/getting-started/schema-edit) o consulta el
[objeto formulario](/es/core/schema/form).

`onSubmit` recibe un registro estructurado de form0. El segundo argumento expone valores sin
transformar, estado repetible, marcas de tiempo y el resumen de validación. Consulta
[Valores, instantáneas y envío](/es/bindings/react/values-snapshots-submission).

> [!NOTE]
> `FormRenderer` ejecuta el motor en el hilo principal de forma predeterminada. Las aplicaciones
> Vite pueden usar el worker incluido con `engineMode="worker"`.