kazuki.m

Appearance

sumnail

VitePressのページにReactコンポーネントを表示する

created at : 2024/09/06

VitePress
React

React コンポーネントを表示する ​

以下の手順で、VitePress のページに React コンポーネントを表示することが可能です。

1. install ​

bash
npm install react react-dom @types/react @types/react-dom

2. md ファイルにスクリプトを追加 ​

md
<div ref="el" />

<script setup>
import { createElement } from "react";
import { createRoot } from "react-dom/client";
import { ref, onMounted } from "vue";
import Sample from "./Sample";　// 表示したい React コンポーネント

const el = ref();
onMounted(() => {
  const root = createRoot(el.value);
  root.render(createElement(Sample, {}, null));
});
</script>

sample ​

実際に React コンポーネントを表示するサンプルコードを以下に示します。

サンプルコード/Sample.tsx
tsx
import React from "react";
import { useState } from "react";

export const buttonStyle = {
  color: "white",
  backgroundColor: "green",
  padding: "8px 16px",
  borderRadius: "8px",
  cursor: "pointer",
  fontSize: "16px",
};

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    const newCount = count + 1;
    setCount(newCount);
  }

  return (
    <button onClick={handleClick} style={buttonStyle}>
      Counter : {count} times clicked
    </button>
  );
}

plugin ​

React のコンポーネントを表示するのは、以上の手順で可能ですが、vite のプラグインを使用することでバンドルサイズの削減やパフォーマンスの向上が期待できます。

1. @vitejs/plugin-react をインストール ​

@vitejs/plugin-react をインストールします。

bash
npm i @vitejs/plugin-react

2. config にプラグインを追加 ​

js
// ./.vitepress/config.mts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  vite: {
    plugins: [react()],
  },
});

まとめ ​

以上の手順で、VitePress のページに React コンポーネントを表示することが可能です。

プラグインを使用することで、バンドルサイズの削減やパフォーマンスの向上が期待できます。

参考 ​