Server side render Reactjs

buttons.js

var React = require('react/addons')

var Button = React.createClass({
  getInitialState: function() {
    return {active:false}
  },
  click: function() {
    this.setState({active: !this.state.active})
  },
  render: function() {
    var text = this.state.active ? 'Enable' : 'Disable',
      className = "btn btn-" + (this.state.active ? 'info' : 'primary')
    return <button type="button" className={className} onClick={this.click}>{text}</button>
  }
})

var ButtonGroup = React.createClass({
  render: function() {
    return <div>
      <Button />
      <Button />
      <Button />
    </div>
  }
})

module.exports = {
  Button: Button,
  ButtonGroup: ButtonGroup
}

main.js

var React = require('react/addons')

var ButtonGroup = require('./buttons').ButtonGroup

React.render(
  <ButtonGroup />,
  document.querySelector('#example')
)

package.json

{
  "name": "reactm",
  "version": "1.0.0",
  "description": "Reactjs NPM tools and so on",
  "main": "server.js",
  "dependencies": {
    "browserify": "^7.0.0",
    "enchilada": "^0.11.0",
    "node-jsx": "^0.12.4",
    "react": "^0.12.1",
    "react-tools": "^0.12.1",
    "express": "^4.10.6",
    "reactify": "^0.17.1"
  },
  "author": "Y.Voloshchuk",
  "license": "ISC"
}

server.js

var express = require('express')
var app = express()
var React = require('react')
var enchilada = require('enchilada')
var reactify = require('reactify')

require('node-jsx').install()

var ButtonGroup = React.createFactory(require('./buttons.js').ButtonGroup)

app.get('/', function(req, res){
  var html = React.renderToString(ButtonGroup({}))
  var data = '' +
      '<div id=example>' + html + '</div>' +
      '<script src="/main.js"></script>'
  res.send(data)
})

app.use(enchilada({
    src: __dirname, // location of your js files
    debug: true,
    transforms: [ reactify ]
}))

app.listen(3000)