Components

Zygo uses React components as its unit of routing. A component module must export as default a React component:

module.exports.default = React.createClass({ ... }); //or:
export default React.createClass({ ... }); //es6!

JSPM handles the loading of ES6 for you, so there is no reason not to start using it today! \(^_^)/

Components need data, and zygo abstracts this need out with handlers. Handlers are specified in the component's statics property:

export default React.createClass({
  statics: {
    handler: './shared', //A handler that is shared between client and server
    clientHandler: './client-only', //A handler that is run on the client only.
    serverHandler: './server-only' //A handler that is run on the server only.
  },
  ...
});

Only one handler is run for a given component at render time - clientHandler and serverHandler take precedence over handler. All handlers are loaded and run by JSPM. Note that this means in order to use core node modules in your server-side handlers, you will need to install them via jspm: jspm install http fs path for instance.

As detailed here, handlers populate the global context object. This is passed to your component's render function via this.props:

export default React.createClass({
  statics: {
    handler: './my-handler'
  },

  render: function() {
    //populated by my-handler
    return <div> {this.props.handlerLoadedData} </div>;
  }
})