Interactively add React components

by phsiao2000

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.6.3/coffee-script.min.js"></script>
/*text area, adding child components interactively*/

CSS

textarea {
    display: block;
    width: 80%;
    height: 4em;
    font-family: monospace;
}

CoffeeScript

D = React.DOM

ComponentList = React.createClass
    render: -> D.div {}, @props.components

Editor = React.createClass
    getInitialState: -> value: "h1 'Example'\np 'Hello, World!'\nbutton {onClick: -> p 'Clicked!'}, 'Click Me'"
    handleRunClick: -> run @state.value
    handleClearClick: clearComponents
    handleChange: (e) -> @setState value: e.target.value
    render: ->
        D.div {}, [
            D.textarea {onChange: @handleChange, defaultValue: @state.value}
            D.button {onClick: @handleRunClick}, "Run"
            D.button {onClick: @handleClearClick}, "Clear"
        ]

Layout = React.createClass
    render: -> D.div {}, [D.p({}, "Enter CoffeeScript Here:"), Editor(), @transferPropsTo(ComponentList())]

components = []

addComponent = (c) ->
    components.push c
    updateComponents()

clearComponents = ->
    components.length = 0
    updateComponents()

updateComponents = -> layout.setProps components: components.slice 0

outputFunctions = {}

for name, constructor of D
    do (constructor) ->
        outputFunctions[name] = (a, b) ->
            addComponent if b? then constructor a, b else constructor {}, a

run = (s) -> eval "with (outputFunctions) {#{CoffeeScript.compile s}}"

layout = Layout()

React.renderComponent layout, document.body