Reactをページ全体ではなく、部分的に導入する方法

React

Reactをページ全体ではなく、部分的に導入する方法

Reactをページの一部に導入するには、特定のHTML要素をターゲットにして、その要素にReactコンポーネントをレンダリングする方法があります。
以下に、その手順とソースコードの例を示します。

必要なライブラリのインストール (ReactとReactDOM)

もしまだインストールしていない場合、以下のコマンドを使用してインストールしてください。

npm install react react-dom
# または
yarn add react react-dom

HTMLファイル

Reactコンポーネントを埋め込むためのHTMLファイルを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React 部分導入</title>
</head>
<body>
  <h1>React 部分導入の例</h1>
  <div id="react-root"></div>
  
  <!-- Reactコンポーネントのスクリプト -->
  <script type="text/babel" src="app.js"></script>
</body>
</html>

JavaScriptファイル (app.js)

Reactコンポーネントを定義し、それをHTML内の特定の要素にレンダリングします。

// シンプルなReactコンポーネント
function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log(クリックされました。
カウント: ${count + 1});
  };

  return (
    <div>
      <h2>React 部分導入の例</h2>
      <button onClick={handleClick}>クリックしてカウントアップ</button>
      <p>現在のカウント: {count}</p>
    </div>
  );
}

// Reactコンポーネントを特定の要素にレンダリング
const rootElement = document.getElementById('react-root');
if (rootElement) {
  render(<App />, rootElement);
} else {
  console.error('エラー: "react-root" 要素が見つかりません。
');
}

このようにすることで、HTMLページ全体ではなく特定の部分にReactコンポーネントを導入することができます。

の部分にReactがレンダリングされるようになっています。