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 type="text/template" class="js-person">
	<p>Name: <%= name %></p>
	<p>Age: <%= age %></p>
	<p>Sex: <%= sex %></p>
	<p>Eye Colour: <%= eyeColour %></p>
    
    <button	class="btn btn-default js-name">Change Name</button>
    <button	class="btn btn-default js-age"">Change Age</button>
    <button	class="btn btn-default js-sex">Change Sex</button>
    <button	class="btn btn-default js-eyes">Change Eye Colour</button>
</script>

CSS

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

body {
    padding: 5%;
}

Babel + JSX

console.clear();

// Create a Backbone Model
// Create a Backbone View
// Pass View off to React Component
// Trigger Model events and have react update

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');
    }
});

$('.js-app').html( (new App({
	model: new Person
})).render().el );

var Button = React.createClass({
	handleClick: function(event) {
    	event.preventDefault();
        console.log('Being clicked');
    },
    render: function() {
        return (
        	<div>
              <button onClick={this.handleClick}>Click {model.name}</button>
          </div>
    	)
    }
});

var Widget = React.createClass({
	render: function() {
    	return (
        	<div>
            	<h1>{model.name} supports {model.team}</h1>
            </div>
        )
    }
});

var App = React.createClass({
	componentWillMount: function() {
    	console.log('Mounted');
    },
	render: function() {
    	return (
        	<div>
        		<Button />
            	<Widget />
           ...