JSFiddle - React, Tailwind, and code Playground

by NV

HTML

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

CSS

body {font: 14px sans-serif}

JavaScript 1.7

/**
 * @jsx React.DOM
 */


var App = React.createClass({
	getInitialState: function() {
		return {x: 42}
	},
	render: function() {
		var valueLink = {
			value: this.state.x,
			requestChange: function(x) {
				this.setState({x: x});
			}.bind(this)
		};
		var valueLinkFloat = {
			value: this.state.x,
			requestChange: function(x) {
				this.setState({x: parseFloat(x)});
			}.bind(this)
		};
		return <div>
			<input type="number" valueLink={valueLink}/> as a string<br/>
			<input type="number" valueLink={valueLinkFloat}/> as a number :(
		</div>
	}
});

React.renderComponent(
	<App/>,
	document.body
);