React.js FizzBuzz

by Brad Kurtz

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>

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="100" />, document.body);