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'] = {})));

I recommend not assigning things to window. Using WebPack gives you commonjs or even es2015 modular code. Also I personally assign Custom component methods with a _ prefix... when components get a little large or complex it makes it much easier to see/read IMHO

I haven't abandoned the Rails asset pipeline yet. Though I do safely namespace the stuff I hang on window.

(function (app) {
  app.stuff = {} // somewhat analogous to module.exports 
}(window["www.example.com"] || (window["www.example.com"] = {})));

Perhaps one of these days I'll suck it up & start using something like WebPack.

I like the idea of prefixing custom methods with an underscore.

I'm not sure I agree with one component per file. I enjoy breaking up components into subcomponents and keep them in the same file when the subcomponents are not generic enough to stand on their own. The sub components should not be accessible from other files.

When using immutable I've found the immstruct library quite useful. I do not however like Omniscient. I feel it pulls too far away from the normal use of React.

I can give you some demo code of how nice it is to work with nested data via immstruct in React. It's neat how you can get undo redo easily. Once you've got immstruct your views can fly when you only update the parts that have changed and you can know if they've changed simple with a === comparison on the data.

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