React Base Fiddle (CJSX)

Starting point for creating JSFiddles with React and CJSX. This uses React with Addons.

by also

HTML

<script src="//fb.me/react-0.13.0-rc2.js"></script>
<script src="//wzrd.in/standalone/coffee-react-transform"></script>
<script src="http://bit.ly/cjsx-jsfiddle-integration"></script>

CoffeeScript

messages = []
appComponent = null
logAF = null

log = (message) ->
  messages.push(message)
  if logAF == null
    logAF = requestAnimationFrame ->
      logAF = null
      appComponent.forceUpdate()

Logger = (name) ->
  makeLoggerFunction = (o, method) ->
    o[method] = ->
        @log method

  result = log: (message) ->
    log("#{name} - #{message}")
    true

  makeLoggerFunction(result, n) for n in ['componentWillMount', 'componentDidMount', 'shouldComponentUpdate', 'componentDidUpdate', 'componentWillUpdate']
  result

Outside = React.createClass
  mixins: [Logger('Outside')]
  onClick: ->
    log('before setState');
    this.setState(updated: true)
    log('after setState');
  render: ->
    @log('render')
    <div onClick={@onClick}>
      <p>Hello World!</p>
      {@props.children}
    </div>

Inside = (n) -> React.createClass
  mixins: [Logger('Inside ' + n)]
  render: ->
    @log('render')
    <p>{@props.children}</p>

I1 = Inside(1)
I2 = Inside(2)
I3 = Inside(3)
element =
  <Outside>
    <I1>
      <strong>Look at me!</strong>
    </I1>
    <I2><I3/></I2>
  </Outside>

Unchanging = React.createClass
  shouldComponentUpdate: -> false
  render: -> @props.children

App = React.createClass
  render: ->
    <div>
      <Unchanging>{@props.children}</Unchanging>
      <pre>{@props.messages.join('\n')}</pre>
    </div>

log('before render')
appComponent = React.render <App messages={messages}>{element}</App>, document.body
log('after render')