React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const createComponent = (type, defaultProps = {}, defaultChildren = null) => {
    return (props) => {
        const { children, ...options } = props;

        return React.createElement(
            type,
            Object.assign({}, defaultProps, options),
            (children) ? children : defaultChildren
        );
    };
};

const Banner = ({ children, TextComponent }) => {
    return <div className="banner">
        <TextComponent>{children}</TextComponent>
    </div>;
}

const SayHelloComponent = ({ ParagraphComponent }) => {
    return <ParagraphComponent>Hello</ParagraphComponent>;
}

const ParentComponent = () => {
    const inject = {
        ParagraphComponent: createComponent(Banner, {
            TextComponent: createComponent('span', {
                className: "my-pretty-class",
            }),
        }),
    }

    return <SayHelloComponent {...inject} />;
}

var Hello = () => 
	<div><ParentComponent /> my injected beauty.</div>

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);