VNode

A VNode is created by the h function. For example:

import { render, Component } from 'preact'

class ComponentConstructor extends Component {
  get defaultProps() {
    return { fieldA: 'example' }
  }
  render({ fieldA, otherField }) {
    return (<div>
      Hello World. { fieldA } 
      { otherField }
    </div>)
  }
}

const FunctionalComponent = ({ prop }) => {
  return (<span>A message: { prop }</span>)
}

// h returns:
// - class component
const c = <ComponentConstructor otherField="test" />
console.log(c, 'Prototype:', c.nodeName.prototype)
// - stateless component
const f = <FunctionalComponent prop="test" />
console.log(f, 'Prototype:', f.nodeName.prototype)
// - string component
console.log(<string-element prop="test" />)

VNode {
  nodeName: [Function: ComponentConstructor],
  children: [],
  attributes: { otherField: 'test' },
  key: undefined
} Prototype: ComponentConstructor {}
VNode {
  nodeName: [Function: FunctionalComponent],
  children: [],
  attributes: { prop: 'test' },
  key: undefined
} Prototype: undefined
VNode {
  nodeName: 'string-element',
  children: [],
  attributes: { prop: 'test' },
  key: undefined
}

VNode: Virtual DOM Node.

Name	Type & Description
constructor	new () => VNode
	Constructor method.
nodeName	(string | function(new: Component) | Function)
	The string of the DOM node to create or Component constructor to render.
children	!Array<(VNode | string | boolean | number | undefined)>
	The children of node. Can be scalar values (string, number, boolean, null, undefined, etc), more Virtual DOM elements, or infinitely nested arrays of the above.
key	(string | number)
	The key used to identify this VNode in a list.
attributes	Object
	The properties of this VNode.