Fractal Project Structure with React and Redux - pros/cons
<p>I would like to know what are the pros and cons of using a <strong>Fractal Structure</strong> in a React + Redux project and I was wondering if anyone has any experience with this approach or if there are pitfalls which are not immediately visible from the docs.</p>

<blockquote>
  <p><em>(Fractal structure)</em> Also known as: Self-Contained Apps, Recursive Route Hierarchy, Providers, etc</p>
</blockquote>

<p>Context:
I'm looking at <a href="https://github.com/davezuko/react-redux-starter-kit">react-redux-starter-kit</a> and it suggests to use a <a href="https://github.com/davezuko/react-redux-starter-kit/wiki/Fractal-Project-Structure">fractal structure</a> to organize the folders. If I understood well, this approach require to organize the project folders by feature and nest the route recursively.</p>

<p>So, if I have a "events" resources where</p>

<ul>
<li><code>/events</code> lists all the events</li>
<li><code>/events/new</code> show a form to insert a new event</li>
<li><code>/events/1/details</code> show the details about the event with
id 1</li>
</ul>

<p>Starting from the boilerplate, I have to add the new route folder like: </p>

<pre><code>├── src                      # Application source code
│   ├── main.js              # Application bootstrap and rendering
│   ├── components           # Reusable Presentational Components
│   ├── containers           # Reusable Container Components
│   ├── layouts              # Components that dictate major page structure
│   ├── static               # Static assets (not imported anywhere in source code)
│   ├── styles               # Application-wide styles (generally settings)
│   ├── store                # Redux-specific pieces
│   └── routes               # Main route definitions and async split points
│       ├── index.js         # Bootstrap main application routes with store
│       ├── Root.js          # Wrapper component for context-aware providers
~       ~
│       ├── Events           # Fractal route
│       │   ├── index.js     # Route definitions and async split points
│       │   ├── components   # Presentational React Components
│       │   ├── container    # Connect components to actions and store
│       │   ├── modules      # Collections of reducers/constants/actions or single DUCK module
│       │   └── routes       # Fractal sub-routes (** optional) &lt;-------------
│       │       │
│       │       └── New
│       │       │   ├── index.js     # Route definitions and async split points
│       │       │   ├── assets       # Assets required to render components
│       │       │   ├── components   # Presentational React Components
│       │       │   ├── container    # Connect components to actions and store
│       │       │   ├── modules      # Collections of reducers/constants/actions or single DUCK module
│       │       │   └── routes       # Fractal sub-routes (** optional) &lt;-------------
│       │       │
│       │       └── Details
│       │           ├── index.js     # Route definitions and async split points
│       │           ├── assets       # Assets required to render components
│       │           ├── components   # Presentational React Components
│       │           ├── container    # Connect components to actions and store
│       │           ├── modules      # Collections of reducers/constants/actions or single DUCK module
│       │           └── routes       # Fractal sub-routes (** optional) &lt;-------------
~       ~
│       └── NotFound         # Capture unknown routes in component
~
</code></pre>

<p>With <code>New</code> and <code>Details</code> folder nested under the root <code>Event</code> folder.</p>

<p>The docs highlight this main pros:</p>

<ul>
<li>It scales better than a flat directory structure, with folders for
components, containers, etc.</li>
<li>Routes can be be bundled into "chunks"
using webpack's code splitting and merging algorithm</li>
<li>Since logic is self-contained, routes can easily be broken into separate
repositories and referenced with webpack's DLL plugin for flexible,
high-performance development and scalability.</li>
</ul>