JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/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>
<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">
<div class="js-app"></div>



















<script>
(function(root, factory) {
    if (typeof exports === 'object') {
        // CommonJS
        module.exports = factory(require('backbone'), require('react'), require('react-dom'), require('underscore'));
    } else if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['backbone', 'react', 'react-dom', 'underscore'], factory);
    } else {
        // Browser globals
        root.amdWeb = factory(root.Backbone, root.React, root.ReactDOM, root._);
    }
}(this, function(Backbone, React, ReactDOM,  _) {

    'use strict';

    var collectionBehavior = {
        changeOptions: 'add remove reset sort',
        updateScheduler: function(func) { return _.debounce(func, 0); }
    };

    var modelBehavior = {
        changeOptions: 'change',
        //note: if we debounce models too we can no longer use model attributes
        //as properties to react controlled components due to https://github.com/facebook/react/issues/955
        updateScheduler: _.identity
    };

    var subscribe = function(component, modelOrCollection, customChangeOptions) {
        if (!modelOrCollection) {
            return;
        }

        var behavior = React.BackboneMixin.ConsiderAsCollection(modelOrCollection) ? collectionBehavior : modelBehavior;

        var triggerUpdate = behavior.updateScheduler(function() {
            if (component.isMounted()) {
                (component.onModelChange...

CSS

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

body {
    padding: 5%;
}

Babel + JSX

console.clear();

var Person = Backbone.Model.extend({
	defaults: {
    	'name': 'Jane Bloggs',
        'age': 23,
        'sex': 'Female',
        'eyeColour': 'Brown'
    }
});
/*var App = Backbone.View.extend({
	events: {
    	'click .js-name': 'onNameClick',
        'click .js-age': 'onAgeClick',
        'click .js-sex': 'onSexClick',
        'click .js-eyes': 'onEyesClick'
    },
	template: _.template( $('.js-person').html() ),
    initialize: function() {
    	this.listenTo(this.model, 'change', this.render);
    },
	render: function() {
    	this.$el.html( this.template( this.model.attributes ) );
        return this;
    },
    onNameClick: function() {
    	console.log('onNameClick');
        this.model.set('name', 'James Bond');
    },
    onAgeClick: function() {
    	console.log('onAgeClick');        
        this.model.set('age', '92');
    },
    onSexClick: function() {
    	console.log('onSexClick');
        this.model.set('sex', 'Male');
    },
    onEyesClick: function() {
    	console.log('onEyesClick');
        this.model.set('eyeColour', 'Blue');
    }
});*/

// React App Component
var AppComponent = React.createBackboneClass({
	changeOptions: 'change',
    onNameClick: function() {
        this.props.model.set('name', 'James Bond');
    },
    onAgeClick: function() { 
        this.props.model.set('age', 92);
    },
    onSexClick: function() {
        this.props.model.set('sex', 'Male');
    },
    onEyesClick: function() {
        this.props.model.set('eyeColour', 'Blue');
    },
    render: function() {
    	return (
        	<div>
            	<p>Name: {this.getModel().get("name")}</p>
                <p>Age: {this.getModel().get("age")}</p>
                <p>Sex: {this.getModel().get("sex")}</p>
                <p>Eye Colour: {this.getModel().get("eyeColour")}</p>
				<br />
                <button	onClick={this.onNameClick} className="btn btn-default">Change Name</button>
                <br /><br />
                <button...