---
title: "Configurar React"
slug: "setup-react"
category: "Introducción"
hosts: "react"
locale: "es"
order: 3
---

# Configurar React

arcWidgets ofrece 22 componentes configurables para aplicaciones de negocio. Describes la vista en `data` y conectas las interacciones con tu estado y tu API mediante callback props.

## Instalación

```bash
npm install --save-exact @arcrider/arcwidgets-react@0.1.0-alpha.5
```

Esta documentación corresponde a `0.1.0-alpha.5`. El paquete necesita React y React DOM 18 o 19 y se ejecuta en el navegador. Los estilos están incluidos; no hace falta un import CSS aparte. La versión es una alfa: comprueba los flujos que usas antes de actualizar.

## Primer widget

Este ejemplo completo se puede usar como `App.tsx` en una app React de navegador:

```tsx
import { ArcWidgetBadge, ArcWidgetKanban } from '@arcrider/arcwidgets-react';
import { useState } from 'react';

const lang = document.documentElement.lang.startsWith('en')
  ? 'en'
  : document.documentElement.lang.startsWith('es')
    ? 'es'
    : 'de';
const t = (de: string, en: string, es: string) =>
  lang === 'en' ? en : lang === 'es' ? es : de;

const startLanes = [
  {
    id: 'open',
    title: t('Offen', 'Open', 'Abierto'),
    items: [
      {
        id: 'brief',
        title: t('Angebot vorbereiten', 'Prepare quote', 'Preparar oferta'),
        tag: t('Heute', 'Today', 'Hoy'),
        color: '#d97706',
      },
    ],
  },
  {
    id: 'done',
    title: t('Erledigt', 'Done', 'Hecho'),
    items: [] as { id: string; title: string; tag: string; color: string }[],
  },
];

export default function Example() {
  const [lanes, setLanes] = useState(startLanes);
  const [selected, setSelected] = useState(
    t(
      'Karte ziehen oder anklicken',
      'Drag or click a card',
      'Arrastra o pulsa una tarjeta',
    ),
  );
  return (
    <>
      <ArcWidgetKanban
        id="tasks"
        data={{
          height: '300px',
          swimlanes: lanes.map((lane) => ({
            ...lane,
            items: lane.items.map((item) => ({
              id: item.id,
              title: item.title,
              subtitle: (
                <ArcWidgetBadge
                  data={{
                    value: item.tag,
                    singleColor: item.color,
                    borderRadius: '6px',
                  }}
                />
              ),
              clickable: true,
              draggable: true,
              borderPosition: 'left',
              borderColor: item.color,
              borderWidth: '4px',
            })),
          })),
        }}
        onItemClick={(_event, { item_index }) =>
          setSelected(`${t('Aufgabe', 'Task', 'Tarea')} ${item_index + 1}`)
        }
        onItemDrop={async (payload) => {
          const next = lanes.map((lane) => ({
            ...lane,
            items: [...lane.items],
          }));
          const [item] = next[payload.source_swimlane_index].items.splice(
            payload.item_index_in_section,
            1,
          );
          next[payload.target_swimlane_index].items.splice(
            payload.target_index_in_section,
            0,
            item,
          );
          setLanes(next);
          setSelected(t('Karte verschoben', 'Card moved', 'Tarjeta movida'));
        }}
      />
      <p aria-live="polite">{selected}</p>
    </>
  );
}
```

## Datos y eventos

`data` contiene la configuración específica del widget. Importa el tipo de datos correspondiente del mismo paquete cuando lo necesites, por ejemplo `ArcWidgetKanbanData`. `id` en el componente es opcional e identifica la instancia del widget.

Los callbacks están en el componente. En Kanban, `onItemClick` informa un evento del navegador y la posición de la tarjeta. Con varias columnas o grupos usa todos los índices adecuados del payload. El fallback genérico es `onAction(type, ...args)`; un callback concreto tiene prioridad.

El acceso a datos, el almacenamiento, la navegación y el manejo de errores viven en tu aplicación. Los slots de contenido admitidos aceptan JSX, así que puedes combinar tus propios componentes con más widgets.

## Ejemplos completos y contexto para IA

El paquete incluye las fuentes de todos los ejemplos de widgets y aplicaciones en `examples/docs/`. Cada archivo exporta un componente React completo.

El enlace Markdown de una página React entrega el mismo contenido React. Para asistentes de IA existen el [índice React](/docs/react/llms.txt) y la [exportación React completa](/docs/react/llms-full.txt).

## Siguiente

- [Los 22 componentes](/docs/react/intro/react-components)
- [Estado y eventos](/docs/react/patterns/react-state-events)
- [JSX y widgets anidados](/docs/react/patterns/nested-widget-descriptors)
- [Plantilla de dashboard](/docs/react/templates/react-starter)
- [Renderizado en servidor y solución de problemas](/docs/react/faq/react-troubleshooting)
- [Paquete y licencias](/docs/react/faq/react-paket-und-lizenzierung)