How to use the preact.h function in preact

function tag (mixed) {
      if (!arguments.length || (!mixed && mixed !== 0)) {
        return h(name, attrs)
      } else if (mixed.nodeName || arguments.length > 1) {
        return h(name, attrs, flatten(slice(arguments)))
      } else if (isArray(mixed)) {
        return h(name, attrs, flatten(mixed))
      } else if (!isObject(mixed)) {
        return h(name, attrs, mixed)
      } else if (has(mixed, 'toString')) {
        return h(name, attrs, String(mixed))
      }

      // attributes
      attrs = assign(attrs, mixed)
      return tag
    }

const Intro = () =>
  div("intro flex-row",
    div("flex-cell",
      h("h2", {}, "Differential Programming in JavaScript"),
      p(
        b("Propel"), ` provides a GPU-backed numpy-like infrastructure
        for scientific computing in JavaScript.  JavaScript is a fast,
        dynamic language which, we think, could act as an ideal workflow
        for scientific programmers of all sorts.`),
      p(
        headerButton("/docs", "API Ref"),
        // Hide notebook link until more developed.
        // headerButton("/notebook", "Notebook"),
        headerButton("http://github.com/propelml/propel", "Github")
      )
    ),
    div("intro-notebook flex-cell", nb.cell(tanhGrads))
  );

type: 'checkbox',
                        checked: alwaysOnTop,
                        click: () => this.setState({alwaysOnTop: !alwaysOnTop})
                    },
                    {type: 'separator'},
                    {
                        label: 'Exit',
                        click: () => app.quit()
                    }
                ]
            }),

            h('main', {},
                h(LyricsBox, {loading, lyrics, url, position, total, autoscroll}),
                h('div', {class: 'fade-in'}),
                h('div', {class: 'fade-out'})
            )
        )
    }
}

const Balance = ({balance}) =>
  h(
    'div',
    {class: 'balance-block'},
    h('h2', undefined, 'Balance'),
    h(
      'p',
      {class: 'balance-value'},
      h('span', undefined, isNaN(Number(balance)) ? balance : `${printAda(balance)}`),
      h(AdaIcon, {className: 'ada-sign-big'})
    )
  )

function(child) {
			var navElement = Object.assign({}, child);
			var navElementProps = Object.assign({}, navElement.attributes);
			if (typeof navElementProps.sublink !== 'undefined') {
				if (typeof navElementProps.className === 'undefined') navElementProps.className = navigationSublinkPrefix+'-'+navElementProps.sublink;
				else navElementProps.className += ' ' + navigationSublinkPrefix+'-'+navElementProps.sublink;
				navElementProps.key = 'sublink_'+generateUniqueId();
				delete navElementProps.sublink;
				childrenToRender.push(
					h(
						navElement.type, navElementProps, navElement.children
					)
				);
			}
			else childrenToRender.push(navElement);
		}
	);

materialDom(props) {
    return h(
      "aside",
      _extends(
        {
          style: "visibility:hidden",
          role: "alertdialog",
          ref: control => {
            this.control = control;
          }
        },
        props
      ),
      h("div", { className: "mdc-dialog__surface" }, props.children),
      h("div", { className: "mdc-dialog__backdrop" })
    );
  }
}

delete outProps.type;
		return h(
			'a',outProps, outProps.children
		);
	}
	else if (outProps.type == 'label') {
		delete outProps.type;
		return h(
			'label',outProps, outProps.children
		);
	}
	else if (outProps.type == 'input' || outProps.type == 'submit' || outProps.type == 'reset'){
		if (outProps.type == 'input') outProps.type = 'button';
		outProps.value = outProps.children;
		delete outProps.children;
		return h(
			'input',outProps
		);
	}
	return h(
		'button',outProps, outProps.children
	);
}

positionAbove: [left, top],
                            positionBelow: [nx * gridSize, ny * gridSize],
                            length: (subsequence.length - 1) * gridSize,
                            current,
                            gridSize
                        }))

                        doneTreeBones.push(...subsequence.map(node => node.id))
                    }
                }
            }

            if (column.length > 0) nodeColumns.push(h('g', {key: x}, column))
        }

        return [h('g', {}, edges), h('g', {}, nodeColumns)]
    }

export default function h(tag, props, ...children) {
  let defaultProps = props || {};
  let wrappedChildren = wrapChildren(children);
  if (hasStream(defaultProps) || isStream(wrappedChildren)) {
    return preactH(reactive(tag), {...defaultProps, children$: wrappedChildren});
  }
  return preactH(tag, defaultProps, ...wrappedChildren);
}

export const PropelIndex = (props) => {
  return div("index",
    h(Splash, props),
    h(Intro, null),
    h(UseIt, null),
    h(Perks, null),
    h(TrainingExample, null),
    h(Footer, null),
  );
};