Thoughts on React components.

react-components.md

React components

• Single responsibility
• Optional props to alter styling
• Skip having lists as props

Examples

Basic folder structure.

/shared/Hero
/shared/Hero/index.jsx
/shared/Hero/components/Title.jsx
/shared/Hero/components/Wrapper.jsx
/shared/Hero/components/Preamble.jsx
/shared/Hero/components/Navigation.jsx
/shared/Hero/components/NavigationItem.jsx
...

Using Hero component

//
// shared/Hero/index.jsx
//

'use strict';

var Title = require('components/Title'),
  Wrapper = require('components/Wrapper'),
  Preamble = require('components/Preamble'),
  Navigation = require('components/Navigation'),
  NavigationItem = require('components/NavigationItem');

module.exports = {
  Title: Title,
  Wrapper: Wrapper,
  Preamble: Preamble,
  Navigation: Navigation,
  NavigationItem: NavigationItem
};

//
// feature/Component.jsx
//

'use strict';

var Hero = require('shared/Hero');

var Component = React.createClass({
  render: function () {
    return (
      <Hero.Wrapper backgroundImage="/images/background-image.jpg">
        <Hero.Title>Awesome stuff</Hero.Title>
        <Hero.Preamble>Another text</Hero.Preamble>
      </Hero.Wrapper>
    );
  }
});

//
// feature/AdvancedComponent.jsx
//

'use strict';

var Hero = require('shared/Hero');

var Component = React.createClass({
  render: function () {
    return (
      <Hero.Wrapper backgroundImage="/images/background-image.jpg">
        <Hero.Title>Awesome stuff</Hero.Title>
        <Hero.Preamble>Another text</Hero.Preamble>

        <Hero.EmbedOverlay>
          <Hero.Embed embed={data.embed} />
        </Hero.EmbedOverlay>

        <Hero.Navigation color="black">
          {data.navigation.map(function (navigation) {
            return (
              <Hero.NavigationItem href={navigation.href}>
                {navigation.label}
              </Hero.NavigationItem>
            );
          })}
        </Hero.Navigation>
      </Hero.Wrapper>
    );
  }
});