{
  "url": "https://unifast.dev/de/docs/guides/react/",
  "locale": "de",
  "title": "React-Integration",
  "description": "Rendern Sie unifast-Ausgaben in React-Anwendungen mit @unifast/react – vom einfachen HTML-Rendering bis zum vollständigen MDX-Komponenten-Mapping.",
  "section": "guides",
  "body": "`@unifast/react` bietet Hilfsfunktionen zum Rendern von unifast-Ausgaben in React-Anwendungen – vom einfachen HTML-Rendering bis zum vollständigen MDX-Komponenten-Mapping.\n\n### Installation\n\n### Verwendung von hastToReact\n\nKonvertieren Sie den HAst (HTML-AST) in React-Elemente. Dies ermöglicht es Ihnen, HTML-Elemente ohne Einfügen von rohem HTML auf benutzerdefinierte React-Komponenten abzubilden.\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\nDieser Ansatz ist standardmäßig sicher – der AST wird in React-Elemente umgewandelt, ohne rohes HTML zu verwenden.\n\n### MDX rendern\n\nVerwenden Sie für MDX-Inhalte `compileToReact`, um direkt eine React-Komponente zu erhalten:\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### Komponenten-Mapping\n\nSowohl `hastToReact` als auch `compileToReact` akzeptieren eine `components`-Map. Verwenden Sie diese, um Standard-HTML-Elemente durch benutzerdefinierte React-Komponenten zu ersetzen:\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### Server-seitiges Rendering\n\nDie unifast-Kompilierung ist synchron und läuft in Node.js, was sie ideal für SSR macht:\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### Siehe auch\n\n- [compileToReact()](/docs/packages/react/compile-to-react) – API-Referenz\n- [hastToReact()](/docs/packages/react/hast-to-react) – API-Referenz\n- [MDX verwenden](/docs/guides/mdx) – Leitfaden zur MDX-Kompilierung",
  "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"
    }
  ]
}