component.js

var React                 = require('react');
var CreateTransformWidget = require('./CreateTransformWidget.jsx');
var TransformWidget       = require('./TransformWidget.jsx');
var WidgetStore           = require('../stores/WidgetStore');
var event         = require('../messenger/Messenger').event;
var messenger     = require('../messenger/AppMessenger');

module.exports = React.createClass({

  getState() {
      return {
          widgets: WidgetStore.widgets
      }
  },
  
  getInitialState() {
    return this.getState();
  },
  
  [event(change)](){
    this.setState(this.getState())
  },

  componentDidMount() {
    messenger.bindInstance(this);
  },
  
  
  renderWidget(widget){
    return <TransformWidget {...widget} reactKey={widget.key} />
  },

  render() {
    return (
      <div className="widgets">
        {this.state.widgets.map(this.renderWidget)}
        <CreateTransformWidget />
      </div>
    )
  }
});