118. Virtual DOM II - createElement

簡単  - 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 = createElement

render(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は考慮してなくても良い、別の問題がある。

考えを喋りながら。

(1)
(45)