React Component Structure

readme.md

Guidelines

Each file should define a single (i.e. one) React component.

Dependencies

• lodash
• immutable

Immutable Data

Expose a single state attribute named data that is an immutable map. When state changes, rebuild the immutable map.

getInitialState: function () { 
  return { data: Immutable.Map({ ... }); }
}

example_component.js

(function (app) {
  var components = (app.components || (app.components = {}));
  
  app.components.ExampleComponent = React.createClass(
    mixins: [],
    
    propTypes: {...},
    
    getInitialState: function () { 
      return {
        data: Immutable.Map({ ... });
      }
    },
      
    render: function () { ... },
    
    // event handlers
    onClick: function () { ... },
    
    // custom component methods
    data: function (key) {
      return this.state.data.get(key);
    },
    
    doStuff: function () { ... }
  });
  
}(window['www.example.com'] || (window['www.example.com'] = {})));

Good points. I'm struggling with finding the sweet spot of how much to break the app up into separate files.

On top of that, I've discovered a friendly way to use RequireJS with Rails. But now I need to decide how many pre-compiled assets to create vs individual JavaScript files to load as modules. Though having all the options is quite nice. https://medium.com/@hopsoft/requirejs-rails-73e7050cf173