React Render Multiple Components using Rx

index.js

import render from './utils/render'

const map = [
  {
    node: '.root',
    component: Component,
  },
]

render(map).subscribe(console.log('React rendered all components'))

render.js

import React from 'react'
import ReactDOM from 'react-dom'
import Rx from 'rx-lite'

/**
 * const map = [
 *  {
 *    node: '.selector',
 *    component: ComponentProvider
 *  },
 * ]
 */
export default (map) =>
  Rx.Observable.from(map)
    .filter((item) => document.querySelector(item.node))
    .flatMap((item) =>
      Rx.Observable.from(document.querySelectorAll(item.node))
        .map((node) => ({ node, component: item.component }))
    )
    .do((item) => ReactDOM.render(React.createElement(item.component), item.node))