How to use the preact.createElement function in preact

function start() {
  const { body } = document;
  if (body == null) {
    return;
  }

  render(
    createElement(OptionsProgram, {
      ref: program => {
        // Attach the instance to `window` for debugging in the regular Web
        // Console.
        window.optionsProgram = program;
      },
    }),
    body
  );
}

import { createElement } from "preact";

/** @jsx createElement */

createElement('div');

style: absoluteStyle()
                }, sign),

                !!sign && markerMarkup()
            ),

            !!paint && h('div', {
                key: 'paint',
                className: 'shudan-paint',
                style: {
                    ...absoluteStyle(3),
                    opacity: Math.abs(paint || 0) * .5
                }
            }),

            !!selected && h('div', {key: 'selection', className: 'shudan-selection', style: absoluteStyle(4)}),

            h('div', {key: 'heat', className: 'shudan-heat', style: absoluteStyle(5)}),
            !!heat && h('div', {
                key: 'heatlabel',
                className: 'shudan-heatlabel',
                style: absoluteStyle(6)
            }, heat.text && heat.text.toString())
        )
    }
}

&& `shudan-smalllabel`,

                    ghostStone && `shudan-ghost_${ghostStone.sign}`,
                    ghostStone && ghostStone.type && `shudan-ghost_${ghostStone.type}`,
                    ghostStone && ghostStone.faint && `shudan-ghost_faint`
                )
            }, ...vertexEvents.map(eventName => ({
                [`on${eventName}`]: this[`handle${eventName}`]
            }))),

            !sign && markerMarkup(0),
            !sign && !!ghostStone && h('div', {key: 'ghost', className: 'shudan-ghost', style: absoluteStyle(1)}),

            h('div', {key: 'stone', className: 'shudan-stone', style: absoluteStyle(2)},
                !!sign && h('div', {key: 'shadow', className: 'shudan-shadow', style: absoluteStyle()}),
                !!sign && h('div', {
                    key: 'inner',
                    className: classnames(
                        'shudan-inner',
                        'shudan-stone-image',
                        `shudan-random_${random}`,
                        `shudan-sign_${sign}`,
                    ),
                    style: absoluteStyle()
                }, sign),

                !!sign && markerMarkup()
            ),

            !!paint && h('div', {
                key: 'paint',
                className: 'shudan-paint',

render() {
        let {innerProps = {}, style = {}, maxVertexSize = Infinity} = this.props
        let {ref: innerRef = () => {}} = innerProps

        return h(Goban, Object.assign({}, this.props, {
            innerProps: Object.assign({}, innerProps, {
                ref: el => (innerRef(el), this.element = el),
            }),

            style: Object.assign({
                visibility: this.state.visibility
            }, style),

            vertexSize: Math.min(this.state.vertexSize, maxVertexSize)
        }))
    }
}

lines.map(({v1, v2, type}, i) =>
                            h(Line, {key: i, v1, v2, type, vertexSize})
                        )

'shudan-busy': busy,
                        'shudan-coordinates': showCoordinates
                    }
                ) + ' ' + (this.props.class || this.props.className || ''),

                style: Object.assign({
                    display: 'inline-grid',
                    gridTemplateRows: showCoordinates ? '1em 1fr 1em' : '1fr',
                    gridTemplateColumns: showCoordinates ? '1em 1fr 1em' : '1fr',
                    fontSize: vertexSize,
                    lineHeight: '1em'
                }, this.props.style || {})
            }),

            showCoordinates && h(CoordX, {xs, style: {gridRow: '1', gridColumn: '2'}, coordX}),
            showCoordinates && h(CoordY, {height, ys, style: {gridRow: '2', gridColumn: '1'}, coordY}),

            h('div',
                {
                    className: 'shudan-content',
                    style: {
                        position: 'relative',
                        width: `${xs.length}em`,
                        height: `${ys.length}em`,
                        gridRow: showCoordinates ? '2' : '1',
                        gridColumn: showCoordinates ? '2' : '1'
                    }
                },

                h(Grid, {
                    vertexSize,
                    width,

return createElement(
      'div',
      {
        class: 'tile',
      },
      createElement('h3', {}, `Preact: ${count}`),
      createElement(
        'p',
        {},
        `${rows} rows and ${columns} columns `,
        createElement(PreactExtension, {
          name: 'smiley',
        }),
      ),
      createElement(
        'button',
        {
          onClick: this.increment,
        },
        '+',
      ),
      createElement(
        'button',
        {
          onClick: this.decrement,
        },
        '-',
      ),
    );
  }
}

marker && marker.type && `shudan-marker_${marker.type}`,
                    marker && marker.type === 'label'
                        && marker.label
                        && (marker.label.includes('\n') || marker.label.length >= 3)
                        && `shudan-smalllabel`,

                    ghostStone && `shudan-ghost_${ghostStone.sign}`,
                    ghostStone && ghostStone.type && `shudan-ghost_${ghostStone.type}`,
                    ghostStone && ghostStone.faint && `shudan-ghost_faint`
                )
            }, ...vertexEvents.map(eventName => ({
                [`on${eventName}`]: this[`handle${eventName}`]
            }))),

            !sign && markerMarkup(0),
            !sign && !!ghostStone && h('div', {key: 'ghost', className: 'shudan-ghost', style: absoluteStyle(1)}),

            h('div', {key: 'stone', className: 'shudan-stone', style: absoluteStyle(2)},
                !!sign && h('div', {key: 'shadow', className: 'shudan-shadow', style: absoluteStyle()}),
                !!sign && h('div', {
                    key: 'inner',
                    className: classnames(
                        'shudan-inner',
                        'shudan-stone-image',
                        `shudan-random_${random}`,
                        `shudan-sign_${sign}`,
                    ),
                    style: absoluteStyle()
                }, sign),

                !!sign && markerMarkup()
            ),

render() {
    const { piral, rows, columns } = this.props;
    const { count } = this.state;
    const { PreactExtension } = piral;

    return createElement(
      'div',
      {
        class: 'tile',
      },
      createElement('h3', {}, `Preact: ${count}`),
      createElement(
        'p',
        {},
        `${rows} rows and ${columns} columns `,
        createElement(PreactExtension, {
          name: 'smiley',
        }),
      ),
      createElement(
        'button',
        {
          onClick: this.increment,
        },
        '+',
      ),
      createElement(