JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>

CSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

Babel + JSX

console.clear();

var usernames = ['Joe', 'Peter', 'Simon'],
	status = ['online', 'offline', 'away'],
	data = usernames.map(function(value, index) {
	    return outputData(false, index);
    });

/**
 *	Returns an object consisting of a username and status.
 *	@param {Boolean} rand  should the username be randomly selected or just based on the username array index.
 *	@param {Number} index  the array index value within the usernames array.
 */
function outputData(rand, index) {
	return {
        username: !rand ? usernames[index] : _.sample(usernames),
        status: _.sample(status)
    }
};

var Buddy = Backbone.Model.extend();

/**
 *	Buddies Collection
 *	Listens for any events published by the dummy event emitter, then accesses the correct model in the collection to be updated. 
 *	The correct model is then set with the newly published data.
 *	@return {undefined}	
 */
var Buddies = Backbone.Collection.extend({
	model: Buddy,
    
    initialize: function() {
    	this.listenTo(Backbone.Events, 'buddy:status.update', this.updateData, this);
    },
    
    updateData: function(response) {
        var buddyToUpdate = this.findWhere({username: response.username});
        if(buddyToUpdate) {
            buddyToUpdate.set(response);
        }
    }
});

var BuddiesView = Backbone.View.extend({
    
    initialize: function() {
    	this.listenTo(this.collection.model, 'update', this.render, this);
    },
    
    render: function() {
		
		ReactDOM.render(<BuddiesComponent collection={this.collection.toJSON()} />, this.el);

        return this;
    }
});

var BuddiesComponent = React.createClass({
    render: function() {
    	console.log(this.props.collection);
        var buddies = this.props.collection.map(function(buddy) {
            return <BuddyComponent key={buddy.username} model={buddy} />;
        });

        return (
            <ul className="buddies">
            	{buddies}
            </ul>
        );
    }
});

var BuddyComponent =...