# Integrar en React

- Human documentation: [https://docs.univer.ai/es-ES/guides/boards/getting-started/integrations/react](https://docs.univer.ai/es-ES/guides/boards/getting-started/integrations/react)

- Agent Markdown: [https://docs.univer.ai/es-ES/guides/boards/getting-started/integrations/react.md](https://docs.univer.ai/es-ES/guides/boards/getting-started/integrations/react.md)

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

- Source: [boards/getting-started/integrations/react.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/getting-started/integrations/react.es-ES.mdx)

---

Consulta primero la [instalación y el uso básico](https://docs.univer.ai/es-ES/guides/boards/getting-started/installation.md). Este ejemplo usa React para montar Univer Boards en un contenedor con una altura explícita.

### Pasos de integración

1. Inicializa Univer en `useEffect`.
2. Libera Univer en `useEffect cleanup`.

### Código de ejemplo

Cada montaje usa su propio contenedor hijo. La destrucción se ejecuta en una microtarea tras la limpieza de React para evitar desmontar una raíz React anidada durante un commit.

```tsx
import { useEffect, useRef } from 'react'
import { UniverBoardsPlugin } from '@univerjs-pro/boards'
import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'
import BoardsUIesES from '@univerjs-pro/boards-ui/locale/es-ES'
import { UniverInkUIPlugin } from '@univerjs-pro/ink-ui'
import InkUIesES from '@univerjs-pro/ink-ui/locale/es-ES'
import { UniverLicensePlugin } from '@univerjs-pro/license'
import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'
import DesignesES from '@univerjs/design/locale/es-ES'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import DocsUIesES from '@univerjs/docs-ui/locale/es-ES'
import { UniverDrawingPlugin } from '@univerjs/drawing'
import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'
import DrawingUIesES from '@univerjs/drawing-ui/locale/es-ES'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverUIPlugin } from '@univerjs/ui'
import UIesES from '@univerjs/ui/locale/es-ES'

import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'
import '@univerjs/drawing-ui/lib/index.css'
import '@univerjs-pro/ink-ui/lib/index.css'
import '@univerjs-pro/boards-ui/lib/index.css'

export function UniverEditor() {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const host = containerRef.current
    if (!host) return
    const container = document.createElement('div')
    container.style.height = '100%'
    host.append(container)

    const univer = new Univer({
      locale: LocaleType.ES_ES,
      locales: {
        [LocaleType.ES_ES]: mergeLocales(
          DesignesES,
          UIesES,
          DocsUIesES,
          DrawingUIesES,
          InkUIesES,
          BoardsUIesES,
        ),
      },
    })

    univer.registerPlugin(UniverLicensePlugin, {
      license: 'your license.txt',
    })
    univer.registerPlugin(UniverRenderEnginePlugin)
    univer.registerPlugin(UniverUIPlugin, { container })
    univer.registerPlugin(UniverDocsPlugin)
    univer.registerPlugin(UniverDocsUIPlugin)
    univer.registerPlugin(UniverDrawingPlugin)
    univer.registerPlugin(UniverDrawingUIPlugin)
    univer.registerPlugin(UniverInkUIPlugin)
    univer.registerPlugin(UniverBoardsPlugin)
    univer.registerPlugin(UniverBoardsUIPlugin)

    univer.createUnit(UniverInstanceType.UNIVER_BOARD, {})

    return () => {
      queueMicrotask(() => {
        univer.dispose()
        container.remove()
      })
    }
  }, [])

  return <div ref={containerRef} style={{ height: 600 }} />
}
```