Component is created with the createCustomElement core. This is called with two arguments: tag name and an options configuration.

Configuration

view — The view to be rendered in the DOM.
transformState — Function to shape state data before passed into the view.
setInitialState — Returns initial state object for the component.
properties — Creates component properties.
actions — Specifies the type and behavior for actions dispatched by component.
actionHandlers — Specifies handlers for dispatched action.
behaviors — Registers behaviors for the component.
renderer — Specify a rendering engine other than the default.

By default the view function is called with two arguments: state and helpers.

Helpers contains: dispatch, updateState, and updateProperties functions, and logger class as properties

createCustomElement('my-tag', {
    view(state, {updateProperties}) {
        const {tally} = state;
        return (
            <div>
                <h2>Click Counter</h2>
                <span>
                    <button type="button" on-click={() => updateProperties({tally: tally + 1})}>
                        Increment
                    </button>
                </span>
                <span>
                    <button type="button" on-click={() => updateProperties({tally: 0})}>
                        Clear
                    </button>
                </span>
                <div>Value: {tally}</div>
            </div>
        );
    },
    transformState(state) {
        const {properties} = state;
        return properties;
    },
    renderer: {type: snabbdom},
    properties: {
        tally: {default: 0}
    },
    actionHandlers: {
        [COMPONENT_PROPERTY_CHANGED](#!/reference/next-experience/xanadu/ui-framework/main-concepts/component{dispatch, properties: {tally}}) {
            dispatch('TALLY_CHANGED', {tally});
        }
    }
});