React.js: composition

HTML

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

JavaScript 1.7

/**
 * @jsx React.DOM
 */

var Addition = React.createClass({
	getInitialState: function() {
		return {x: 1, y: 2};
	},
	render: function() {
		var x = this.state.x;
		var y = this.state.y;
		return <p>
			<NumberField value={x} onValueChange={this.xChange}/>
			+
			<NumberField value={y} onValueChange={this.yChange}/>
			=
			{x + y}
		</p>;
	},
	xChange: function(value) {
		this.setState({x: value});
	},
	yChange: function(value) {
		this.setState({y: value});
	}
});


var NumberField = React.createClass({
	render: function() {
		return <input type="number" value={this.props.value} onInput={this.onInput}/>;
	},
	onInput: function(e) {
		if (!this.props.onValueChange) {
			return;
		}
		var value = parseInt(e.target.value, 10);
		return this.props.onValueChange(value);
	}
});


React.renderComponent(
	<Addition/>,
	document.getElementById('addition_container')
);