{
  "url": "https://unifast.dev/es/docs/guides/react/",
  "locale": "es",
  "title": "Integración con React",
  "description": "Renderiza la salida de unifast en aplicaciones React con @unifast/react, desde el renderizado HTML simple hasta el mapeo completo de componentes MDX.",
  "section": "guides",
  "body": "`@unifast/react` proporciona utilidades para renderizar la salida de unifast en aplicaciones React, desde el renderizado HTML simple hasta el mapeo completo de componentes MDX.\n\n### Instalación\n\n### Uso de hastToReact\n\nConvierte el HAst (el AST de HTML) a elementos React. Esto te permite mapear elementos HTML a componentes React personalizados sin inyectar HTML crudo.\n\n```tsx\n\nconst result = compile(source, { outputKind: \"hast\" });\nconst elements = hastToReact(result.output, {\n  components: {\n    h1: (props) => <h1 className=\"heading\" {...props} />,\n    a: (props) => <a className=\"link\" target=\"_blank\" {...props} />,\n    pre: CodeBlock,\n  },\n});\n\nfunction Page() {\n  return <article>{elements}</article>;\n}\n```\n\nEste enfoque es seguro por defecto: el AST se convierte en elementos React sin HTML crudo.\n\n### Renderizado de MDX\n\nPara contenido MDX, usa `compileToReact` para obtener un componente React directamente:\n\n```tsx\n\nconst result = compile(source, { inputKind: \"mdx\" });\nconst Content = compileToReact(result);\n\nfunction Page() {\n  return (\n    \n  );\n}\n```\n\n### Mapeo de componentes\n\nTanto `hastToReact` como `compileToReact` aceptan un mapa `components`. Úsalo para reemplazar los elementos HTML por defecto con componentes React personalizados:\n\n```tsx\nconst components = {\n  // Replace headings\n  h1: ({ children }) => <h1 className=\"text-3xl font-bold\">{children}</h1>,\n\n  // Custom code blocks\n  pre: ({ children, ...props }) => ,\n\n  // External links open in new tab\n  a: ({ href, children }) => (\n    <a href={href} target={href?.startsWith(\"http\") ? \"_blank\" : undefined}>\n      {children}\n    </a>\n  ),\n};\n```\n\n### Renderizado en el servidor\n\nLa compilación de unifast es síncrona y se ejecuta en Node.js, lo que la hace ideal para SSR:\n\n```tsx\n// server.tsx\n\nexport async function getStaticProps() {\n  const source = await readFile(\"content/post.md\", \"utf8\");\n  const result = compile(source, {\n    plugins: [frontmatter()],\n    outputKind: \"hast\",\n  });\n\n  return {\n    props: {\n      hast: result.output,\n      meta: result.frontmatter,\n    },\n  };\n}\n\nfunction Post({ hast, meta }) {\n  const content = hastToReact(hast);\n  return (\n    <article>\n      <h1>{meta.title}</h1>\n      {content}\n    </article>\n  );\n}\n```\n\n### Véase también\n\n- [compileToReact()](/docs/packages/react/compile-to-react) - Referencia de la API\n- [hastToReact()](/docs/packages/react/hast-to-react) - Referencia de la API\n- [Uso de MDX](/docs/guides/mdx) - Guía de compilación de MDX",
  "alternates": [
    {
      "locale": "en",
      "url": "https://unifast.dev/docs/guides/react/",
      "api": "https://unifast.dev//api/docs/guides/react.json"
    },
    {
      "locale": "ja",
      "url": "https://unifast.dev/ja/docs/guides/react/",
      "api": "https://unifast.dev//api/ja/docs/guides/react.json"
    },
    {
      "locale": "zh-CN",
      "url": "https://unifast.dev/zh-CN/docs/guides/react/",
      "api": "https://unifast.dev//api/zh-CN/docs/guides/react.json"
    },
    {
      "locale": "zh-TW",
      "url": "https://unifast.dev/zh-TW/docs/guides/react/",
      "api": "https://unifast.dev//api/zh-TW/docs/guides/react.json"
    },
    {
      "locale": "ko",
      "url": "https://unifast.dev/ko/docs/guides/react/",
      "api": "https://unifast.dev//api/ko/docs/guides/react.json"
    },
    {
      "locale": "fr",
      "url": "https://unifast.dev/fr/docs/guides/react/",
      "api": "https://unifast.dev//api/fr/docs/guides/react.json"
    },
    {
      "locale": "it",
      "url": "https://unifast.dev/it/docs/guides/react/",
      "api": "https://unifast.dev//api/it/docs/guides/react.json"
    },
    {
      "locale": "es",
      "url": "https://unifast.dev/es/docs/guides/react/",
      "api": "https://unifast.dev//api/es/docs/guides/react.json"
    },
    {
      "locale": "pt-BR",
      "url": "https://unifast.dev/pt-BR/docs/guides/react/",
      "api": "https://unifast.dev//api/pt-BR/docs/guides/react.json"
    },
    {
      "locale": "de",
      "url": "https://unifast.dev/de/docs/guides/react/",
      "api": "https://unifast.dev//api/de/docs/guides/react.json"
    },
    {
      "locale": "ru",
      "url": "https://unifast.dev/ru/docs/guides/react/",
      "api": "https://unifast.dev//api/ru/docs/guides/react.json"
    },
    {
      "locale": "hi",
      "url": "https://unifast.dev/hi/docs/guides/react/",
      "api": "https://unifast.dev//api/hi/docs/guides/react.json"
    },
    {
      "locale": "id",
      "url": "https://unifast.dev/id/docs/guides/react/",
      "api": "https://unifast.dev//api/id/docs/guides/react.json"
    },
    {
      "locale": "tr",
      "url": "https://unifast.dev/tr/docs/guides/react/",
      "api": "https://unifast.dev//api/tr/docs/guides/react.json"
    },
    {
      "locale": "vi",
      "url": "https://unifast.dev/vi/docs/guides/react/",
      "api": "https://unifast.dev//api/vi/docs/guides/react.json"
    }
  ]
}