Virtual Nodes

A virtual node is a JavaScript object that represents an element in the DOM tree.

{
  name: "div",
  props: {
    id: "app"
  },
  children: [{
    name: "h1",
    props: {},
    children: ["Hi."]
  }]
}

To create a virtual node, use the h function.

const node = h("div", { id: "app" }, [h("h1", {}, "Hi.")])

Virtual node props may include any valid HTML or SVG attributes, DOM events, lifecycle events, and keys.

const button = (
  <button
    class="ui button"
    tabindex={0}
    style={{
      fontSize: "3em"
    }}
    onclick={() => {
      // ...
    }}
  >
    Click Me
  </button>
)

A function that returns a virtual node is known as a component.