[Directory Structure] What about pages?

[SachaG]

This is kind of a general question and maybe there's no real answer, but I've been struggling with how to manage pages in my React directory structure.

What I mean by "page" is a top-level component called by a route, that may also handle the layout (assuming it's not handled at the router level). The issue is that pages can sometimes be containers (i.e. they load data and then pass it on to a "dumb" component), or sometimes be dumb component themselves (they're just static pages).

And on the other hand, not all containers are pages. Sometimes a smaller component embedded in your UI will need its own data, too, even though it's not a top-level page.

So giving pages their own directory makes the smart/dumb component distinction less clear. On the other hand, splitting components by smart/dumb is less intuitive and makes it harder to find pages…

Any thoughts?

[makstr]

I was also thinking about "page management" and the best I came up so far is a simple wrapper or a builder component approach. So for every "page" I create an intermediate wrapper component which handles some additional layout directives and child component composition.

import React from 'react';
import Sidebar from './_sidebar.jsx';

// import Container from '../../containers/colors/single.jsx';
import dataComposer from '../../composers/colors/single.jsx';
import Component from './_single.jsx';
const Container = dataComposer(Component);

export default class extends React.Component {

  render() {
    const {_id} = this.props;
    return (
      <div className="bs-docs-section clearfix">
        <div className="row">
          <div className="col-md-3">
            <Sidebar />
          </div>
          <div className="col-md-9">
            <Container _id={_id}/>
          </div>
        </div>
      </div>
    );
  }

[arunoda]

@SachaG I don't think it's harder to find. How do you load these pages? I assue that's with the router.
Create a module for static pages and write only UI components.

Then import them in the router and simply display.

So, it's always possible to have UI Components and Containers. We can group them in different ways using modules.

In Mantra, you need to import everything. So, it's very clear to identify. And we'll have some tools to visualize them.