{
"url": "https://unifast.dev/ja/docs/guides/react/",
"locale": "ja",
"title": "React インテグレーション",
"description": "@unifast/react を使って、シンプルな HTML レンダリングから MDX のコンポーネントマッピングまで、React アプリケーションで unifast の出力をレンダリングします。",
"section": "guides",
"body": "`@unifast/react` は、unifast の出力を React アプリケーションでレンダリングするためのユーティリティを提供します。シンプルな HTML レンダリングから MDX のコンポーネントマッピングまで対応できます。\n\n### インストール\n\n### hastToReact を使う\n\nHAst (HTML AST) を React 要素に変換します。生の HTML を注入することなく、HTML 要素をカスタム React コンポーネントにマッピングできます。\n\n```tsx\n\nconst result = compile(source, { outputKind: \"hast\" });\nconst elements = hastToReact(result.output, {\n components: {\n h1: (props) => ,\n a: (props) => ,\n pre: CodeBlock,\n },\n});\n\nfunction Page() {\n return {elements};\n}\n```\n\nこのアプローチはデフォルトで安全です。AST は生の HTML を経由せずに React 要素へ変換されます。\n\n### MDX のレンダリング\n\nMDX コンテンツには `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 // Replace headings\n h1: ({ children }) => {children}
,\n\n // Custom code blocks\n pre: ({ children, ...props }) => ,\n\n // External links open in new tab\n a: ({ href, children }) => (\n \n {children}\n \n ),\n};\n```\n\n### サーバーサイドレンダリング\n\nunifast のコンパイルは同期的に 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 \n {meta.title}
\n {content}\n \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"
}
]
}