Skip to content

Latest commit

 

History

History
32 lines (22 loc) · 1 KB

vnodes.md

File metadata and controls

32 lines (22 loc) · 1 KB

Virtual Nodes

Hyperscript concept allows to create HyperText with JavaScript. A virtual node is a Javascript object that represents a DOM element. The h() function is a way to abstract the vnodes produced ('h' from 'hyperscript').

h('span', {class: 'yellow'}, 'Hello')

The output of this function call will produces a vnode like this:

{
  type: "span",
  props: {
    class: "yellow"
  },
  children: ['Hello']
}

This vnode is useful only for the engine which will compute the DOM modifications, so a h() function is the only thing you manipulate.

The engine will then produce this:

<span class="yellow">Hello</span>

To go further

This concept was introduced by ReactJS like libraries (MithrilJS, Hyperapp, etc.) And you can find some tools which allows you to use JSX, which is a new syntax producing vnodes without using h() because of a compiler doing it for you. We will not use it in this library because of the new syntax to learn and the extra tools needed (BabelJS).