using facebook's React with require.js

I recently stumbled upon facebook’s React library, which is a Javascript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I’m a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it.

This is a menu component I use for a twitter bootstrap based project. The eventbus is based on EventEmitter2.

/** @jsx React.DOM */
define(['react'], function(React) {

    var MenuItem = React.createClass({
        handleMenuClick: React.autoBind(function() {
            this.props.eventBus.emit('navigate.page.start', {page: this.props.data.page});
        }),
        render: function(){
            var active = this.props.isActive === true ? 'active' : '';
            return <li class={active}><a href="javascript:void(0)" onClick={this.handleMenuClick}><span class="hidden-tablet">{this.props.data.text}</span></a></li>;
        }
    });

    var MenuList = React.createClass({
        render: function() {
            var _that = this, menuItemList = this.props.data.map(function(menuItem){
                var active = (_that.props.activeMenuItem === menuItem.page);
                return <MenuItem isActive={active} data={menuItem} eventBus={_that.props.eventBus} />;
            });

            return <ul class="nav nav-tabs nav-stacked main-menu">{menuItemList}</ul>;
        }
    });

    var Menu = React.createClass({
        getInitialState: function(){
            return {page: 'overview'};
        },
        componentDidMount: function() {
            var _that = this;
            this.props.eventBus.on('navigate.page.finished', function(data) {
                _that.setState(data);
            });
        },
        render: function() {
            return (
                <div class="span2 main-menu-span">
                    <div class="nav-collapse sidebar-nav">
                        <MenuList activeMenuItem={this.state.page} data={this.props.data} eventBus={this.props.eventBus}/>
                    </div>
                </div>
                );
        }
    });

    return Menu;
});

The fact I like most about using require.js together with React is, that you can write a component in one require.js module definition and just export the visible component part. The second advantage is the naming. If you use JSX you can influence the tag names and do some kind of vendor prefixing for your required tags.

In the end, the construction of the menu looks like this:

/** @jsx React.DOM */
define(['react', 'socket', 'eventemitter2', './Menu'], function (React, socket, EventEmitter2, Menu) {

        var eventBus = new EventEmitter2({
            wildcard: true,
            newListener: false,
            maxListeners: 20
        });

        var menuItems = [
            {text: "Overview", page: "overview"},
            {text: "Detail", page: "detail"}
        ];

        React.renderComponent(<Menu data={menuItems} eventBus={eventBus}/>, document.getElementById("menu"));
    });

update:
The way to get things working was quite easy. React is available via Bower, so just add it to your bower.json file:

{
    "name": "some-project",
    "version": "0.0.1",
    "dependencies": {
        "requirejs": "latest",
        "moment": "latest",
        "react": "latest",
        "eventemitter2": "latest"
    }
}

Afterwards, add it to your require.js config. I decided to change my bower install path to /public/js/components, my application scripts reside within /public/js/app.

After settings things up like this, the previously mentioned examples work like a charm.