インタラクティブなカウンター

以下が実際に動作するカウンターです。クリックして動作を確認してください：

現在のカウント: 0

クリックして増加

実装の解説

このカウンターは、ReactのuseStateフックを使用して実装されています。 コンポーネントのコードを見てみましょう：

import { useState } from 'react';

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

  return (
    <div className="counter">
      <p>現在のカウント: {count}</p>
      <button 
        onClick={() => setCount(count + 1)}
        className="counter-button"
      >
        クリックして増加
      </button>
    </div>
  );
}

コードの説明

1. 状態管理:

   • useState(0)で初期値0の状態変数countを作成
   • setCount関数で状態を更新

2. イベントハンドリング:

   • ボタンクリック時にsetCount(count + 1)を実行
   • 現在の値に1を加えた新しい値で状態を更新

3. スタイリング:

   • CSSを使用して見やすいデザインに
   • ホバー効果でインタラクティブ性を向上

MDXでの使用方法

MDXファイルでこのコンポーネントを使用するには、以下のようにインポートします：

import Counter from '../../components/Counter';

<Counter client:load />

まとめ

このように、MDXを使うことで通常の文章とインタラクティブなコンポーネントを シームレスに組み合わせることができます。これにより、より魅力的で 理解しやすいコンテンツを作成できます。