Example of render engine

Example of render engine.jsx

const componentMap = {
    TemplateX: ({ children }) => (<div>{children}</div>),
    Header: ({ text }) => (<h1>{text}</h1>),
    HeroBanner: ({ imgUrl, text }) => (
      <section style={{ backgroundImage: `url(${imageUrl}) center center` }}>
        <h2>{text}</h2>
      </section>
    ),
    Markdown: ({ content }) => (<ReactMarkdown content={content} />),
    Carousel: ({ children }) => (<ReactSlick>{children}</ReactSlick>)
};

const page = {
    type: 'TemplateX',
    props: {

    },
    children: [
      {
          type: 'Header',
          props: {

          },
          children: [

          ]
      },
      {
          type: 'HeroBanner',
          props: {

          },
          children: [

          ]
      }
      {
          type: 'Carousel',
          props: {

          },
          children: [
            
          ]
      }
    ]
};

function createRenderEngine(createElement, types, ...modifiersParameters) {
  const render = (component, modifiers = []) => {
    const modifiedComponent = (!!modifiers.length && modifiers.reduce(
      (comp, modify) => modify(comp, ...modifiersParameters), component
    )) || component;

    return createElement(
      types[modifiedComponent.type],
      modifiedComponent.props || null,
      ...(modifiedComponent.children || []).map(comp => render(comp, modifiers))
    );
  };

  return render;
}

const renderEngine = createRenderEngine(React.createElement, componentMap);
ReactDOM.render(renderEngine(page), document.getElementById('main'));