Reactのプログラムをウェブページ内で複数回使いたい

Question

React をページ内の一部分で使用したいと考えています。
いくつかのチュートリアルを見るとどれも要素IDの指定(ReactDOM.createRootの部分)をJSファイル内で指定していることがほとんどで、他プロジェクトで使いまわしたり id が動的に決まる場合に使いにくく感じています。
また、１ページ内で何度か使用したい場合の正しい書き方がわからず、強引に以下のようにしています。
このような用途を実現するにはどのように書くのが正しい書き方なのでしょうか？

※プログラムはブラウザ上でそのまま動作できるよう babel + webpack でトランスパイルしています。

<div id="button1"></div>
<div id="button2"></div>

<script src="app.js"></script>
<script>
    LikeButton.init(document.getElementById('button1'));
    LikeButton.init(document.getElementById('button2'));
</script>

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }

  // このメソッドを追加
  static init(elem) {
    const root = ReactDOM.createRoot(elem);
    root.render(e(LikeButton));
  }
}

// グローバル変数にしている
window.LikeButton = LikeButton;

Answer 1

また、１ページ内で何度か使用したい場合の正しい書き方がわからず、強引に以下のようにしています。

1ページで複数回のcreateRootを行っても全く問題ありません。というより、Facebook自身がそのような使い方をしているとのことです。