Instantly share code, notes, and snippets.

Embed
What would you like to do?
React.js temperature converter sample app http://bl.ocks.org/NV/193d039f286bf56f9c01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Temperature Converter</title>
</head>
<body>
<script src="http://fb.me/react-0.10.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script type="text/jsx" src="TemperatureConverter.js"></script>
</body>
</html>
/**
* @jsx React.DOM
*/
function c2f(c) {
return 9 / 5 * parseFloat(c) + 32;
}
function f2c(f) {
return 5 / 9 * (f - 32);
}
var TemperatureConverter = React.createClass({
getInitialState: function() {
return {c: 0}
},
render: function() {
var celciusValueLink = {
value: this.state.c.toString(),
requestChange: this.onCelsiusChange
};
var fahrenheitValueLink = {
value: c2f(this.state.c).toString(),
requestChange: this.onFahrenheitChange
};
return <div>
<input type="number" valueLink={celciusValueLink}/>℃ ⟷
<input type="number" valueLink={fahrenheitValueLink}/>
</div>
},
onCelsiusChange: function(data) {
this.setState({c: parseFloat(data)})
},
onFahrenheitChange: function(data) {
this.setState({c: f2c(data)})
}
});
React.renderComponent(
<TemperatureConverter/>,
document.body
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment