javascript - 自分のReactに似たフレームワーク、コンポーネントシステムを実装しようとしています

Question

ほとんどの場合、Vue.js または React を使用してフロントエンド Web アプリを構築しますが、それは主に、それらのコンポーネント システムの仕組みが気に入っているからです。だから今、私はReactのような独自のJavaScriptフレームワークを構築しようとしています.これは私がこれまでに行ったことです:

私は JavaScript に Babel を使用しています。これはすべて webpack にバンドルされています。babel-plugin-transform-jsxを使用して、この jsx 型式を変換します。

var object = (
  <article>
    <h1>Hello, kitten!</h1>
    <img href="http://placekitten.com/200/300" alt="A cute kitten"/>
    It is soooo cute.
  </article>
)

この JavaScript オブジェクトに:

var object = {
  elementName: 'article',
  attributes: {},
  children: [
    {
      elementName: 'h1',
      attributes: {},
      children: ['Hello, kitten!']
    },
    {
      elementName: 'img',
      attributes: {
        href: 'http://placekitten.com/200/300',
        alt: 'A cute kitten'
      },
      children: null
    },
    'It is soooo cute.'
  ]
}

このオブジェクトを使用して実際の DOM を構築する方法は知っていますが、次のように、JSX 内に別のコンポーネントを含めたいとしましょう。

render() {
   <article>
      <OtherComponent />
   </article>
}

そして、OtherComponent クラス内には、React と同じように、その親に挿入されるレンダー関数があります。どうやってやるの？