118. Virtual DOM II - createElement

JavaScript Meta

簡単  - accepted / - tried

この問題は113. Virtual DOM Iの続きです。

上記の問題は解決済みになっているなら、React.createElement()のinterfaceを見よう:

React.createElement(  type,  [props],  [...children])
  1. 1番目の引数はtype、Custom Componentもサポートしているが、この問題においてはHTMLタグ名だけを想定すると良い。
  2. 2番目はprops、常用のHTML属性の集合
  3. その他の引数はchildren、Reactにおいては色なdata typeをサポートしているが、この問題では、Elementを表示するMyElementとTextNodeを表示するstringしかないと想定すると良い。

createElement() と render()を実装してください、下記のコードは113. Virtual DOM Iのサンプルコードが生成するHTML Elementと同じになる想定。

const h = createElementrender(h(  'div',  {},  h('h1', {}, ' this is '),  h(    'p',    { className: 'paragraph' },    ' a ',    h('button', {}, ' button '),    ' from ',    h('a',       { href: 'https://bfe.dev' },       h('b', {}, 'BFE'),      '.dev')  )))

補足

  1. この問題の目的は、Reactのimplementationを再現することではない。113. Virtual DOM Iと違うobject formatでもOK
  2. ref、key など基本機能以外featureは、他の問題で解決するので、こちらは無視して良い。 Re-renderは考慮してなくても良い、別の問題がある。

常にもっといい方法を求めよう。