React example vs jquery in pure javascript

jquery-backbone version

    var BuildTemplate = ' \
            <h2 class="small-caps">build</h2> \
    ';
    var BuildV = BaseV.extend({
        className: 'btn-group-vertical',



        initialize: function(o){
            this.__player     = o.player;
            this.__player.on('changeMoney', this.update.bind(this));
            this.__buildItems = o.buildItems;

            this.__htmlTemplate = BuildTemplate;
            this.__appendTemplate();
            this.$el.css({
                width  : '100%',
                margin : '0 auto',
            })
            key.on('a', null, this.__tryBuildItemByName.bind(this, 'Basic attack'));
            key.on('c', null, this.__tryBuildItemByName.bind(this, 'Crate'));
            this.$buildItems = [];
            _.each(this.__buildItems, function(buildItem){
                var html = '<button type="button" class="btn btn-default" data-build-item="'+buildItem.metadata.name+'">'+buildItem.metadata.name+' [' + buildItem.metadata.buildPrice + ']'+'</button>';
                var $buildItem  = $(html);
                this.$buildItems.push($buildItem)
                // $buildItem.on('click', function(){this.trigger('build', buildItem.metadata.name);}.bind(this));
                $buildItem.on('click', this.__onBuildItemClick.bind(this));
                this.$el.append($buildItem);
            }.bind(this))
        },



        __onBuildItemClick: function(e){
            var $buildItem = $(e.target);
            var buildItem = this.__getBuildItemByName($buildItem.attr('data-build-item'));
            var built = this.__tryBuildItem(buildItem);
        },



        __tryBuildItemByName: function(buildItemName){
            var buildItem = this.__getBuildItemByName(buildItemName);
            return this.__tryBuildItem(buildItem);
        },



        __tryBuildItem: function(buildItem){
            if(this.__canBuyBuildItem(buildItem)){
                this.trigger('build', buildItem.metadata.name);
                return true;
            }else{
                return false;
            }
        },



        update: function(){
            _.each(this.$buildItems, function($buildItem){
                $buildItem.removeClass('disabled enabled');
                var buildItem = this.__getBuildItemByName($buildItem.attr('data-build-item'));
                if(this.__canBuyBuildItem(buildItem)){
                    $buildItem.addClass('enabled');
                }else{
                    $buildItem.addClass('disabled');
                }
            }.bind(this))
        },



        __canBuyBuildItem: function(buildItem){
            return this.__player.getMoney() >= buildItem.metadata.buildPrice;
        },



        __getBuildItemByName: function(buildItemName){
            var buildItem;
            _.each(this.__buildItems, function(_buildItem){
                if(_buildItem.metadata.name === buildItemName){
                    buildItem = _buildItem;
                }
            })
            return buildItem;
        },
    });

react version

    /**
     * React mini tutorial
     *
     * on virtual doms:
     *     - add "ref:myName" to reference later as "this.refs.myName.getDOMNode()"
     *     - add "onClick:fn" to run fn when clicked
     *
     * Props: what you send on the instance is set in the props so:
     *     var a = new ReactClass({a: 1})
     *
     *     // will be found into the ReactClass as:
     *
     *     // ...
     *     this.props.a === 1 // true
     *     // ...
     *
     *     - can't change
     *
     *  State: data that can change and is set with component.setState({b: 3})
     */





    var BuildMenu = React.createClass({
        getInitialState: function(){
            return {
                buildItems : [],
                hotKeys    : [],
            };
        },



        onSelect: function(buildItemId){
            this.__selectedBuildItemId = buildItemId;
            _.each(this.__buildItems, function(buildItem){
                if(buildItem.props.id === buildItemId) return
                buildItem.deselect();
            })
            this.props.onBuild(buildItemId);
        },



        getSelectedBuildItemId: function(){
            return this.__selectedBuildItemId;
        },



        componentWillMount: function(){
        },



        onBuilt: function(){
            this.deselect();
        },



        deselect: function(){
            _.each(this.__buildItems, function(buildItem){
                buildItem.deselect();
            })
        },



        render: function(){
            console.log('>>> update build')
            var buildItems = this.__buildItems = this.state.buildItems.map(function(buildItem, i){
                var b = BuildItem({
                    id         : buildItem.metadata.id,
                    name       : buildItem.metadata.name,
                    buildPrice : buildItem.metadata.buildPrice,
                    hotKey     : this.state.hotKeys[buildItem.metadata.id],
                    onSelect   : this.onSelect,
                    player     : this.props.player,
                })
                // b.setState({player: this.props.player})
                return b;
            }.bind(this))
            var children = [React.DOM.h2({ref: 'title', className: 'small-caps', style: {
                backgroundColor : '#50629E',
                padding         : '5px 0 9px 5px',
                lineHeight      : '20px',
                margin          : 0,
            }}, 'build'), buildItems]

            return (
                React.DOM.div({ref: 'root',style: {width: '100%', margin: '0 auto'}},
                    children
                )
            )
        }
    })





    var BuildItem = React.createClass({
        getInitialState: function(){
            return {
                available : true,
                selected  : false,
                hover     : false,
            }
        },



        componentWillMount: function(){
            key.on(this.props.hotKey, null, this.__select);
        },



        deselect: function(){
            this.setState({selected: false});
        },



        __select: function(){
            if(!this.props.player.hasMoney(this.props.buildPrice)) return;
            this.setState({selected: true});
            this.props.onSelect(this.props.id);
        },



        __onClick: function(){
            if(this.state.selected){
                this.deselect()
            }else{
                this.__select();
            }
        },



        __onMouseEnter: function(){
            this.setState({hover: true});
        },



        __onMouseLeave: function(){
            this.setState({hover: false});
        },



        render: function(){
            return React.DOM.div({
                    onClick: this.__onClick,
                    onMouseEnter: this.__onMouseEnter,
                    onMouseLeave: this.__onMouseLeave,
                    style: {
                        cursor          : 'pointer',
                        width           : '100%',
                        margin          : '0 auto',
                        padding         : '10px',
                        color           : this.state.available ? 'white' : 'grey',
                        backgroundColor : this.state.hover || this.state.selected ? '#1FB1A5' : 'transparent',
                    }}, this.props.name + ' [price: ' + this.props.buildPrice + '] (key: ' + this.props.hotKey + ')');
        }
    })