CoffeeScript example for simple/enjoyable React.js prototyping (NOT recommended for production use).

Cakefile

# Cake task to generate destructuring code based on all the tag-like elements found in the target file.
# This will generate some false positives, so you'll want to inspect the results closely.

# If anyone wants to tweak the RegExp, or the whole detection block, I'd love to see it!

__= require 'coffee-script/lib/coffee-script/helpers'
_= require 'underscore'
React= require 'react'

tagRE= /[\W]{1}(\([\w]*)/g
blacklist= ['do']

option '-f', '--file [FILE]', '(tags) File to extract tags from.'
option '-q', '--quiet', '(tags) Only output the destructuring code.'
option '-l', '--long', '(tags) Use long-style output (multiple lines)'
task 'tags', "Prints list of tags used in source file (for use with React components)", (opts)->
  
  return console.log  "File not specified. Use:\n cake -f FILENAME tags" unless opts.file?

  filename= if __.ends opts.file, '.coffee'
      "#{ opts.file }"
    else
      "#{ opts.file }.coffee"

  if test '-f', filename
    console.log "Scanning ", filename unless opts.quiet
    content= cat filename
    domKeys= _.keys React.DOM
    allTags= _ content.match tagRE
      .chain()
      .map (tag)-> tag.slice 2
      .uniq()
      .compact()
      .without blacklist...
      .value()
    reactTags= _ allTags
      .intersection domKeys
    otherTags= _ allTags
      .difference domKeys

    console.log "
      The syntax parser is basic (RegExp), so you'll need to verify 
      these results, but this should get you started:\n
    " unless opts.quiet

    if opts.long
      console.log "{\n ", reactTags.join('\n  '), "\n}= React.DOM\n"
    else
      console.log "{", reactTags.join(', '), "}= React.DOM\n"

    console.log "# Non React.DOM tags:"
    console.log "# #{ otherTags.join ', ' }"
  else
    console.log "Not found!", filename

reactjs-coffeescript-example.coffee

React.Helpers= _.extend {}, React.addons,
  __: null # When components have no attrs (I use underscore, thus __ instead of _)
  _nbsp: '\u00a0' # equiv of  
  _times: '\u00d7' # equiv of ×

usingReactDOM= ->
  # Builds an execution context, then wraps the function in a 'with' block.
  # CAREFUL! This is NOT for production use! Be sure you understand what 'with' is doing:
  # (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with)
  [scopes..., fn]= arguments
  context= _.extend {}, React.Helpers, React.DOM, scopes...
  eval "var innerFn= function(){ with( context ){ return (#{ String(fn) }).apply(this, arguments) }}"
  ->
    innerFn.apply this, arguments
    

# Class: MyComponent
MyComponent= React.createClass
  displayName: 'MyComponent'
  
  render: usingReactDOM ->
    # I use the (tag ...) format when creating virtual dom nodes, I think it
    # looks a little more tag-like. And lisp-y too, come to think of it.
    (div className:'root',
      (form __,
        (do @renderField)
      )
    )
    
  renderField: usingReactDOM ->
    (p __,
      (label __,
        (span __, "Username:")
        (input type:'text', name:'username')
      )
    )

 # ETC and so on...
 
 # When moving to production, I remove the usingReactDOM call and import (via destructuring)
 # the tags I actually use (which is usually not that many per component) like this:
 #
 #  {div, form, input, p}= React.DOM
 #
 # You can use the attached cake task as a good starting point, if you're using a lot
 # of tags.

# Remember: Language features aren't "evil," just misunderstood. If you think any feature
#           of the language you use is evil, it means you don't know enough about your
#           language. DON'T BE AFRAID TO LEARN NEW THINGS. Learning destroys ignorance.

https://reactjs.co This is the official free online convention and tutorial book for React.JS Developers. React is not only the View (in MVC) anymore. ReactJS For Dummies: Why & How to Learn React Redux, the Right Way.