{
  "url": "https://unifast.dev/ru/docs/guides/react/",
  "locale": "ru",
  "title": "Интеграция с React",
  "description": "Отрисовывайте вывод unifast в приложениях React с помощью @unifast/react — от простого рендеринга HTML до полного сопоставления компонентов MDX.",
  "section": "guides",
  "body": "`@unifast/react` предоставляет утилиты для отрисовки вывода unifast в приложениях React — от простого рендеринга HTML до полного сопоставления компонентов MDX.\n\n### Установка\n\n### Использование hastToReact\n\nПреобразуйте HAst (HTML AST) в элементы React. Это позволяет сопоставлять HTML-элементы с пользовательскими React-компонентами без инъекции сырого HTML.\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\nЭтот подход безопасен по умолчанию — AST преобразуется в элементы React без сырого HTML.\n\n### Отрисовка MDX\n\nДля содержимого MDX используйте `compileToReact`, чтобы сразу получить React-компонент:\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### Сопоставление компонентов\n\nКак `hastToReact`, так и `compileToReact` принимают отображение `components`. Используйте его, чтобы заменить стандартные HTML-элементы пользовательскими компонентами React:\n\n```tsx\nconst components = {\n  // Заменяем заголовки\n  h1: ({ children }) => <h1 className=\"text-3xl font-bold\">{children}</h1>,\n\n  // Пользовательские блоки кода\n  pre: ({ children, ...props }) => ,\n\n  // Внешние ссылки открываются в новой вкладке\n  a: ({ href, children }) => (\n    <a href={href} target={href?.startsWith(\"http\") ? \"_blank\" : undefined}>\n      {children}\n    </a>\n  ),\n};\n```\n\n### Серверный рендеринг\n\nКомпиляция unifast синхронна и выполняется в Node.js, что делает её идеальной для 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### Смотрите также\n\n- [compileToReact()](/docs/packages/react/compile-to-react) — справочник API\n- [hastToReact()](/docs/packages/react/hast-to-react) — справочник API\n- [Использование MDX](/docs/guides/mdx) — руководство по компиляции 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"
    }
  ]
}