When you write a React application, for most of the projects, all the Components are loaded at once, which is a good thing because once the app has fully loaded on the client, and you are offline, all components are there!

Some projects have requirements for a modular architecture, where the user only loads parts of the application — let say you want to load a different app per type of user. Thanks to React Code-Splitting and Webpack support this can be done.

The example that I’m going to show here is very simple and does not consider complex applications architecture or other strategies as Server Side Rendering, but it is a good starting point to achieve a modular architecture.

Besides React Code-Splitting and Webpack, it is important to refer to react-loadable as it takes care of code-splitting very easily.

This is what it looks like to define a component with react-loadable:

let MyComponent = Loadable({

loader: () => import('./MyComponent'),

loading: () => <div>Loading...</div>

});

At the time of this writting, I’m using CRA (create-react-app) 1.1.4 and react-loadable 5.4.0.

The following example is based on CRA. I just splitted the Header and Body into 2 separate components (see below), leaving the initial app smaller and faster on initial load.

import React, { Component } from 'react';

import Loadable from 'react-loadable';

import './App.css'; // Modules configured. This can come from a database...

const available = ['Header', 'Body']; class App extends Component {

state = { modules: [], active: [] }; // Toggle module

toggleModule = (nome) => {

const { active } = this.state, modules = []; // Add or remove from list

let i = active.indexOf(nome);

if (i > -1) active.splice(i, 1);

else active.push(nome); // Create loadables. THIS IS THE MAGIC!

active.map(m => {

return modules.push(Loadable({

loader: () => import('./'+m), // Here can be any component!

loading: () => <div>Loading { m }...</div>,

}));

});

this.setState({ ...this.state, modules, active });

} render() {

const { modules, active } = this.state;

return (

<div className="App"> { modules.map((item, i) => {

let Module = modules[i]

return <Module key={i} />

}) } <ul>

{ available.map((name, i) => (

<li key={i}>

{ name }

<input type="checkbox"

checked={active.indexOf(name) > -1}

onClick={e => this.toggleModule(name)}

/>

</li>

))}

</ul>

</div>

);

}

} export default App;

For the purpose of a demonstration, I’m holding the active components in local state and I also render a list of the available components to let the user trigger the modular behavior.

To complete the example, here is the Header.js:

import React from 'react';

import logo from './logo.svg'; const Header = () => (

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<h1 className="App-title">Welcome to React</h1>

</header>

) export default Header;

… and the Body.js:

import React from 'react'; const Body = () => (

<p className="App-intro">

To get started, edit <code>src/App.js</code> and save to reload.

</p>

) export default Body;

Run the app and watch your network calls when you toggle the items.

Have fun! :)