JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

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

JavaScript 1.7

/** @jsx React.DOM */

var Hello = React.createClass({

	getInitialState: function() {
		return { r: 5 };
	},

	componentDidMount: function() {
		requestAnimationFrame(this.tick);
	},

	tick: function() {
		this.setState({ r: this.state.r + 1 });

		requestAnimationFrame(this.tick);
	},
  
	render: function() {
		return (
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" id="svg-floorplan">
				<circle cx="64" cy="64" fill="#C80000" r="64" />
				<g id="svg-floorplan-overlay">
					<circle cx="64" cy="64" fill="#00C800" r={this.state.r % 50} />
				</g>
			</svg>
		);
	}
});
 
React.renderComponent(<Hello />, document.body);