How to use the webiny-app.createComponent function in webiny-app

// TODO: const i18n = React.isValidElement(label) && isElementOfType(label, i18n.getComponent());
        // if (_.isString(this.props.label) || i18n) {
        if (_.isString(this.props.label)) {
            const { Icon } = this.props.modules;
            label = (
                <a>
                    {this.props.icon ?  : null}
                    <span>{label}</span>
                </a>
            );
        }
        return label;
    }
};

export default createComponent(TabHeader, { modules: ['Icon'], styles });

const { render, modules: { Button }, ...props } = this.props;

        if (render) {
            return render.call(this);
        }

        return <button>;
    }
}

// Receives all standard Button component props
Action.defaultProps = {
    wizard: null
};

export default createComponent(Action, { modules: ["Button"] });
</button>

class Footer extends React.Component {
    render() {
        if (this.props.render) {
            return this.props.render.call(this);
        }

        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

export default createComponent(Footer, { styles });

this.props.className
        );

        return (
            
                {this.props.children}
            
        );
    }
}

Footer.defaultProps = {
    align: null
};

export default createComponent(Footer, { modules: ['Panel'], styles });

class Footer extends React.Component {
    render() {
        if (this.props.render) {
            return this.props.render.call(this);
        }

        const classes = classSet(this.props.styles.footer, this.props.className);
        return <div style="{this.props.style}">{this.props.children}</div>;
    }
}

Footer.defaultProps = {
    style: {}
};

export default createComponent(Footer, { styles });

Dropdown.defaultProps = {
    align: "normal",
    caret: true,
    closeOnClick: true,
    disabled: false,
    listStyle: null,
    className: null,
    onShow: _.noop,
    onShown: _.noop,
    onHide: _.noop,
    onHidden: _.noop,
    type: "default"
};

export default createComponent(Dropdown, { styles });

const classes = classSet(this.props.styles.header, this.props.className);
        return (
            <div style="{this.props.style">
                {icon} {this.props.title}
                {this.props.children}
            </div>
        );
    }
}

Header.defaultProps = {
    title: null,
    icon: null
};

export default createComponent(Header, { styles });

class Body extends React.Component {
    render() {
        if (this.props.render) {
            return this.props.render.call(this);
        }

        const classes = classSet(this.props.styles.body, this.props.className);
        return <div style="{this.props.style}">{this.props.children}</div>;
    }
}

Body.defaultProps = {
    style: null
};

export default createComponent(Body, { styles });

);

        return (
            
                {this.props.children}
            
        );
    }
}

Body.defaultProps = {
    noPadding: false,
    noColor: false,
};

export default createComponent(Body, { modules: ['Panel'], styles });

this.props.noPadding && styles.noPadding,
                    this.props.className
                )}
            >
                {this.props.children}
            
        );
    }
}

Body.defaultProps = {
    noPadding: false,
    style: null
};

export default createComponent(Body, { styles });