Got a .coffee file with JSX? Here's how you can transpile to .js with Reacts JSX parsed.

app.coffee

`/** @jsx React.DOM */`

converter = new Showdown.converter

Comment = React.createClass
  render: ->
    rawMarkup = converter.makeHtml @props.children.toString()
    `<div className="comment">
      <h2 className="comment">{this.props.author}</h2>
      <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
    </div>`

CommentBox = React.createClass
  loadCommentsFromServer: ->
    $.ajax
      url: @props.url
      success: (data) =>
        @setState {data}

  handleCommentSubmit: (comment) ->
    comments = @state.data
    comments.push comment
    $.ajax
      url: @props.url
      type: 'POST'
      data: comment
      success: (data) =>
        @setState {data}

  getInitialState: ->
    {data: []}

  componentWillMount: ->
    @loadCommentsFromServer()
    setInterval(@loadCommentsFromServer, @props.pollInterval)

  render: ->
    `<div className="commentBox">
      <h1>Comments</h1>
      <CommentList data={this.state.data}></CommentList>
      <CommentForm onCommentSubmit={this.handleCommentSubmit}></CommentForm>
     </div>`

CommentList = React.createClass
  render: ->
    commentNodes = @props.data.map (comment) ->
      `<Comment author={comment.author}>{comment.text}</Comment>`
    `<div className="commentList">{commentNodes}</div>`

CommentForm = React.createClass
  handleSubmit: ->
    author = @refs.author.getDOMNode().value.trim()
    text   = @refs.text.getDOMNode().value.trim()
    @props.onCommentSubmit {author, text}
    @refs.author.getDOMNode().value = ""
    @refs.text.getDOMNode().value   = ""
    false

  render: ->
    `<form className="commentForm" onSubmit={this.handleSubmit}>
      <input type="text" placeholder="Your name" ref="author" />
      <input type="text" placeholder="Say something..." ref="text" />
      <input type="submit" value="Post" />
    </form>`

module.exports =
  start: ->
    React.renderComponent(`<CommentBox url="/comments.json" pollInterval={2000} />`, $("#container")[0])

app.jsx

/** @jsx React.DOM */;
var Comment, CommentBox, CommentForm, CommentList, converter;

converter = new Showdown.converter;

Comment = React.createClass({
  render: function() {
    var rawMarkup;
    rawMarkup = converter.makeHtml(this.props.children.toString());
    return React.DOM.div( {className:"comment"}, 
      React.DOM.h2( {className:"comment"}, this.props.author),
      React.DOM.span( {dangerouslySetInnerHTML:{__html: rawMarkup}} )
    );
  }
});

CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    var _this = this;
    return $.ajax({
      url: this.props.url,
      success: function(data) {
        return _this.setState({
          data: data
        });
      }
    });
  },
  handleCommentSubmit: function(comment) {
    var comments,
      _this = this;
    comments = this.state.data;
    comments.push(comment);
    return $.ajax({
      url: this.props.url,
      type: 'POST',
      data: comment,
      success: function(data) {
        return _this.setState({
          data: data
        });
      }
    });
  },
  getInitialState: function() {
    return {
      data: []
    };
  },
  componentWillMount: function() {
    this.loadCommentsFromServer();
    return setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return React.DOM.div( {className:"commentBox"}, 
      React.DOM.h1(null, "Comments"),
      CommentList( {data:this.state.data}),
      CommentForm( {onCommentSubmit:this.handleCommentSubmit})
     );
  }
});

CommentList = React.createClass({
  render: function() {
    var commentNodes;
    commentNodes = this.props.data.map(function(comment) {
      return Comment( {author:comment.author}, comment.text);
    });
    return React.DOM.div( {className:"commentList"}, commentNodes);
  }
});

CommentForm = React.createClass({
  handleSubmit: function() {
    var author, text;
    author = this.refs.author.getDOMNode().value.trim();
    text = this.refs.text.getDOMNode().value.trim();
    this.props.onCommentSubmit({
      author: author,
      text: text
    });
    this.refs.author.getDOMNode().value = "";
    this.refs.text.getDOMNode().value = "";
    return false;
  },
  render: function() {
    return React.DOM.form( {className:"commentForm", onSubmit:this.handleSubmit}, 
      React.DOM.input( {type:"text", placeholder:"Your name", ref:"author"} ),
      React.DOM.input( {type:"text", placeholder:"Say something...", ref:"text"} ),
      React.DOM.input( {type:"submit", value:"Post"} )
    );
  }
});

module.exports = {
  start: function() {
    return React.renderComponent(CommentBox( {url:"/comments.json", pollInterval:2000} ), $("#container")[0]);
  }
};

browserify-bundle.js

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
/** @jsx React.DOM */;
var Comment, CommentBox, CommentForm, CommentList, converter;

converter = new Showdown.converter;

Comment = React.createClass({
  render: function() {
    var rawMarkup;
    rawMarkup = converter.makeHtml(this.props.children.toString());
    return React.DOM.div( {className:"comment"}, 
      React.DOM.h2( {className:"comment"}, this.props.author),
      React.DOM.span( {dangerouslySetInnerHTML:{__html: rawMarkup}} )
    );
  }
});

CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    var _this = this;
    return $.ajax({
      url: this.props.url,
      success: function(data) {
        return _this.setState({
          data: data
        });
      }
    });
  },
  handleCommentSubmit: function(comment) {
    var comments,
      _this = this;
    comments = this.state.data;
    comments.push(comment);
    return $.ajax({
      url: this.props.url,
      type: 'POST',
      data: comment,
      success: function(data) {
        return _this.setState({
          data: data
        });
      }
    });
  },
  getInitialState: function() {
    return {
      data: []
    };
  },
  componentWillMount: function() {
    this.loadCommentsFromServer();
    return setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return React.DOM.div( {className:"commentBox"}, 
      React.DOM.h1(null, "Comments"),
      CommentList( {data:this.state.data}),
      CommentForm( {onCommentSubmit:this.handleCommentSubmit})
     );
  }
});

CommentList = React.createClass({
  render: function() {
    var commentNodes;
    commentNodes = this.props.data.map(function(comment) {
      return Comment( {author:comment.author}, comment.text);
    });
    return React.DOM.div( {className:"commentList"}, commentNodes);
  }
});

CommentForm = React.createClass({
  handleSubmit: function() {
    var author, text;
    author = this.refs.author.getDOMNode().value.trim();
    text = this.refs.text.getDOMNode().value.trim();
    this.props.onCommentSubmit({
      author: author,
      text: text
    });
    this.refs.author.getDOMNode().value = "";
    this.refs.text.getDOMNode().value = "";
    return false;
  },
  render: function() {
    return React.DOM.form( {className:"commentForm", onSubmit:this.handleSubmit}, 
      React.DOM.input( {type:"text", placeholder:"Your name", ref:"author"} ),
      React.DOM.input( {type:"text", placeholder:"Say something...", ref:"text"} ),
      React.DOM.input( {type:"submit", value:"Post"} )
    );
  }
});

module.exports = {
  start: function() {
    return React.renderComponent(CommentBox( {url:"/comments.json", pollInterval:2000} ), $("#container")[0]);
  }
};

},{}],2:[function(require,module,exports){
app = require("./app.js");
$(function() {
  return app.start();
});
},{"./app.js":1}]},{},[2])

gulpfile-with-browserify.coffee

gulp       = require('gulp')
coffee     = require('gulp-coffee')
gutil      = require('gulp-util')
browserify = require('gulp-browserify')
react      = require('gulp-react')
concat     = require('gulp-concat')

gulp.task 'coffee-reactify', ->
  gulp.src('./app/js/**/*.coffee')
    .pipe(coffee({bare:true, header: false}).on('error', gutil.log))
    .pipe(react())
    .pipe(gulp.dest('./workspace/'))

gulp.task 'browserify', ['coffee-reactify'], ->
  gulp.src('./workspace/startup.js')
    .pipe(browserify({debug: false}).on('error', gutil.log))
    .pipe(concat('browserify-bundle.js'))
    .pipe(gulp.dest('./workspace/'))

gulp.task 'default', ->
  gulp.run 'coffee-reactify', 'browserify'

  gulp.watch './app/js/**/*.coffee', ->
    gulp.run 'coffee-reactify', 'browserify'

gulpfile.coffee

gulp       = require('gulp')
coffee     = require('gulp-coffee')
gutil      = require('gulp-util')
react      = require('gulp-react')

gulp.task 'coffee', ->
  gulp.src('./app/js/**/*.coffee')
    .pipe(coffee({bare:true, header: false}).on('error', gutil.log))
    .pipe(gulp.dest('./workspace/'))

gulp.task 'jsxify', ['coffee'] ->
  gulp.src('./workspace/**/*.js')
    .pipe(react())
    .pipe(gulp.dest('./workspace/'))

gulp.task 'default', ->
  gulp.run 'coffee', 'jsxify'