quinn: Page rendering using React

react-rendering.js

'use strict';

var http = require('http');

var React = require('react');
var $ = React.DOM;
var _ = require('lodash');
var respond = require('quinn-respond');
var resolveDeep = require('resolve-deep');
var Promise = require('bluebird');

function render(component, options) {
  options = options || {};
  return respond({
    headers: {
      'Content-Type': 'text/html; charset=utf8'
    },
    body: resolveDeep(component.props).then(function(resolvedProps) {
      _.each(resolvedProps, function(propValue, propKey) {
        component.props[propKey] = propValue;
      });

      if (options.staticMarkup) {
        return React.renderComponentToStaticMarkup(component);
      } else {
        return React.renderComponentToString(component);
      }
    }),
  });
}

var MyPage = React.createClass({
  renderItem: function(label) {
    return React.DOM.li({ key: label }, label);
  },

  render: function() {
    return $.html(null,
      $.head(null,
        $.title(null, 'Hello World'),
        $.meta({ name: 'title', content: 'Foo bar!' })),
      $.body(null,
        $.h1(null, this.props.heading),
        $.ul(null, this.props.x.map(this.renderItem))));
  }
});

http.createServer(function(req, res) {
  render(MyPage({
    heading: 'Fancy stuff',
    x: Promise.resolve([ 1, 2, 3 ])
  })).pipe(res);
}).listen(process.env.PORT || 3000);