{
  "url": "https://unifast.dev/vi/docs/guides/react/",
  "locale": "vi",
  "title": "Tích hợp React",
  "description": "Render đầu ra của unifast trong ứng dụng React bằng @unifast/react, từ render HTML đơn giản đến ánh xạ component MDX đầy đủ.",
  "section": "guides",
  "body": "`@unifast/react` cung cấp các tiện ích để render đầu ra của unifast trong ứng dụng React - từ render HTML đơn giản đến ánh xạ component MDX đầy đủ.\n\n### Cài đặt\n\n### Sử dụng hastToReact\n\nChuyển HAst (HTML AST) thành các React element. Cách này cho phép bạn ánh xạ các phần tử HTML sang React component tùy chỉnh mà không cần inject HTML thô.\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\nHướng tiếp cận này an toàn ngay từ mặc định - AST được chuyển đổi thành các React element mà không chạm vào HTML thô.\n\n### Render MDX\n\nĐối với nội dung MDX, sử dụng `compileToReact` để lấy trực tiếp một React component:\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### Ánh xạ component\n\nCả `hastToReact` và `compileToReact` đều nhận một map `components`. Hãy sử dụng nó để thay thế các phần tử HTML mặc định bằng React component tùy chỉnh của bạn:\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-Side Rendering\n\nQuá trình biên dịch của unifast là đồng bộ và chạy trong Node.js, rất phù hợp cho 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### Xem thêm\n\n- [compileToReact()](/docs/packages/react/compile-to-react) - Tài liệu tham chiếu API\n- [hastToReact()](/docs/packages/react/hast-to-react) - Tài liệu tham chiếu API\n- [Sử dụng MDX](/docs/guides/mdx) - Hướng dẫn biên dịch 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"
    }
  ]
}