EJSとReactを使用する方法

HTML EJS

EJSとReactを使用する方法

EJSとReactは、異なるテンプレートエンジンですが、両方を同じプロジェクトで使用することも可能です。
ただし、両者の役割は異なるため、基本的にはEJSとReactを混在させることは推奨されません。
それでも組み合わせて使う場合の方法を説明します。

1. EJSを使用してサーバーサイドレンダリングを行う
サーバーサイドでEJSを使い、HTMLを生成します。
そのHTMLにReactのルートDOMノードを配置します。

2. Reactコンポーネントをクライアントサイドでレンダリングする
EJSで生成されたHTMLに、Reactのルートとなる要素を含め、その要素に対してクライアントサイドでReactをレンダリングします。
Reactコンポーネントをインポートし、ReactDOM.renderを使用して、指定した要素内にコンポーネントを挿入します。

例:

  • EJSテンプレート (index.ejs)
<html>
<head>
    <title>My App</title>
</head>
<body>
    <div id="root"><%- content %></div>
    <script src="/path/to/react/bundle.js"></script>
</body>
</html>
  • Reactのエントリーポイント (index.js)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

この方法では、サーバーサイドでEJSを使って基本的なHTMLを生成し、その後クライアントサイドでReactが動的なコンテンツを扱います。
EJSを使って初期のHTML構造を提供し、Reactを使ってインタラクティブな部分を追加する、といった使い方が一般的です。