JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<div class="js-app"></div>

CSS

body {
    font-family: Roboto;
    font-size: 18px;
    padding: 16px;
    line-height: 1.5;
    font-weight: normal;
    color: #ccc;
    background: #292929;
}

h1, h2, h3 {
    font-weight: normal;
}

h1 {
    font-size: 34px;
}

h2 {
    font-size: 24px;
}

.pg-heading {
    margin-bottom: 0;
}

a {
    color: #95baf6;
    transition: opacity .3s;
	
	&:hover {
    	opacity: 0.75;
	}
}

Babel + JSX

var model = {
	"name": "Kyle Houston",
    "team": "Everton",
    "sex": "Male"
};

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

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 />
            </div>
        )
    }
});

ReactDOM.render(<App model={model} />, document.body.querySelector('.js-app'));