Pattern for dynamically loading React components based on a config json object.

ComponentIndex.js

import config from '../config'

let components = {}

//For each component in the config fiel into an object
for (var i = config.length - 1; i >= 0; i--) {
	components[config[i].name] = require(config[i].path).default
}

export default components

/* Alternative if this require business makes you too queasy */
// import First from './First'
// import Second from './Second'
// import Third from './Third'

// export const First = First
// export const Second = Second
// export const Third = Third

config.js

export default [
{
	name:'First',
	path:'./First'
},
{
	name:'Second',
	path:'./Second'
},
{
	name:'Third',
	path:'./Third'
}]

First.js

import React from 'react';

//Example components, keeping these super simple
class First extends React.Component {
	render() {
		return <h1>First</h1>
	}
}

export default First

Main.js

import React from 'react';
import Components from './ComponentIndex'
import config from '../config'

class AppComponent extends React.Component {
  render() {
    return (
      <div className="index">
      <h2>Component structure test</h2>
      	{config.map((comp) => {
      		/*Load each component in the config file in order.
      		* Note that the config object could also include props
      		* which could be passed in like so:
      		* <Component {..config.props} />
      		*/
      		if (Components.hasOwnProperty(comp.name)) {
      			let Component = Components[comp.name];
	      		return <Component key={comp.name} />
      		}
      	})}
      </div>
    );
  }
}

export default AppComponent;

Second.js

import React from 'react';

class Second extends React.Component {
	render() {
		return <h1>Second</h1>
	}
}

export default Second

Third.js

import React from 'react';

class Third extends React.Component {
	render() {
		return <h1>Third</h1>
	}
}

export default Third