特定のclassのあるエレメントにReactのアプリを表示したい

なぜ特定のクラスにReactのアプリを出したいのか？

通常、Reactは<div id="root"></div>というところにアプリを描画します。
index.htmlには上記divだけ置いて、SPAとして処理を行うことが多いでしょう。

ところが、レガシーなPHPに組み込む際、どうしてもReactを複数個所に設置したいときがあります。

たとえば、TODOリストを想像してください。
複数リストがあります。
そのリストの一番右にボタンをつくりたいわけです。
そのボタンを押したときの処理を含めて、Reactでつくりたい。

どうすれば良いのか

main.tsx

const elements = document.querySelectorAll(".target-class");

elements.forEach((element) => {
  ReactDOM.createRoot(element).render(<App />);
});

こうですね！
いつも1回しかReactDOM.createRootをしないと思いますが、elementsで拾ったところに出せば大丈夫です。

しかし邪道だと思うので、そもそもpreactとかlitでweb componentsにするべきでしょうな。