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}")

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

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

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

element =
  <Outside><Inside>
    <strong>Look at me!</strong>
  </Inside></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')