weapons.js

var WeaponList = React.createClass({
    render: function() {
        return (<ul className="list-unstyled">
            <li>
                <Weapon name="flail" attrs={["1d8 bludgeoning;"]} />
            </li>
            <li>
                <Weapon name="morning star" attrs={["1d8 piercing;"]} />
            </li>
        </ul>
        );
    }
});


var Weapon = React.createClass({
    render: function() {
        return (<div>
            <h2 className="text-center">{this.props.name}</h2>
            <AttributeList attributes={this.props.attrs} />
            </div>
        );
    }
});


var AttributeList = React.createClass({
    processAttributes: function(attrs) {
        return attrs.map(function(attr) {
            return <li><Attribute>{attr}</Attribute></li>;
            );
        }
    },

    render: function() {
        var attrs = this.processAttributes(this.props.attributes);
        return (
            <ul>
            {attrs}
            </ul>
        );
    }
});


var Attribute = React.createClass({
    render: function() {
        return (<span>{this.props.children.toString()}</span>);
    }
}):

React.render(<WeaponBox />, document.getElementById('weapons'));