JSFiddle - React, Tailwind, and code Playground

by Ville Anttonen

HTML

<script src="http://fb.me/react-with-addons-0.9.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.9.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var Message = React.createClass({
    render : function(){
        return <p><b>{this.props.sender}</b> {this.props.message}</p>
    }
});

var DogeMixin = {
    sayings : ["wow",
               "such example",
               "very useful",
               "much learn",
               "so research",
               "so deep"],
    randomSaying : function(){
        var length = this.sayings.length
        return this.sayings[Math.floor(Math.random() * length)]
    },
    speakDoge : function(){
        var msg = {sender : "Doge",
                   message : this.randomSaying()}
        this.setState({
            msgs : this.state.msgs.concat([msg])
        });
    },
    componentDidMount : function(){
        setInterval(this.speakDoge,2000)
    }
}

var Messages = React.createClass({
    mixins: [DogeMixin],
    getInitialState : function(){
        return { msgs : []}
    },
    render : function() {
        return this.state.msgs.length > 0 ? this.renderMsgs() : this.renderNoMsgs()
    },
    renderMsgs : function(){
        return (
               <div>
               <img src="http://i.imgur.com/81qyN1y.jpg" />
               <ul>
                  {this.state.msgs.map(function (msg){
                    return <li><Message sender={msg.sender} message={msg.message} /></li>
                  })}
               </ul>
               </div>)
    },
    renderNoMsgs : function(){
        return <h1>No messages..yet</h1>
    }
});


React.renderComponent(<Messages/>, document.body);