React.js FizzBuzz
HTML
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="body">
</div>
CSS
.Fizz {
color: Green;
}
.Buzz {
color: Red;
}
.FizzBuzz {
color: Blue;
}
.odd {
background-color: Snow
}
.even {
background-color: LavenderBlush
}
JavaScript 1.7
var FizzBuzz = React.createClass({
render: function() {
return (
<ul>
{ _.range(this.props.range).map(function (num) {
var n = ++num;
var val = (n % 3 ? '' : 'Fizz') + (n % 5 ? '' : 'Buzz') || n;
var stripe = n % 2 ? 'odd' : 'even';
var className = _.isNumber(val) ? '' : val;
return <li key={n} className={[className, stripe].join(' ')}>{val}</li>;
}) }
</ul>
);
}
});
React.render(<FizzBuzz range="2500" />, #body);