react.js

import React from 'react';

export const Nav = React.createClass({
  componentDidMount: function () {
    analytics.track('Nav Mounted');
  },
  handleLogoClick: function (evt) {
    evt.preventDefault();
    analytics.track('Logo Clicked');
  },
  render: function () {
    var navItems = [
      <a href="#">About</a>,
      <a href="#">Shop</a>,
      <a href="#">Help</a>
    ];
    if (this.props.hasCart) {
      navItems.push(
        <a href="#">Cart</a>
      );
    }
    return (
      <div className="nav">
        <a
          href="#"
          onClick={this.handleLogoClick}>
          Logo
        </a>
        {navItems}
      </div>
    );
  }
});

recompose.js

import React from 'react';
import compose from 'recompose/compose';
import lifecycle from 'recompose/lifecycle';
import withHandlers from 'recompose/withHandlers';
import withProps from 'recompose/withProps';

export var enhance = compose(
  withProps(props => {
    var navItems = [
      <a href="#">About</a>,
      <a href="#">Shop</a>,
      <a href="#">Help</a>
    ];
    if (props.hasCart) {
      navItems.push(
        <a href="#">Cart</a>
      );
    }
    return {
      navItems
    };
  }),
  withHandlers({
    onLogoClick: props => evt => {
      evt.preventDefault();
      analytics.track('Logo Clicked');
    }
  }),
  lifecycle({
    componentDidMount() {
      analytics.track('Nav Mounted');
    }
  })
);

export var Nav = props => (
  <div className="nav">
    <a
      href="#"
      onClick={props.onLogoClick}>
      Logo
    </a>
    {props.navItems}
  </div>
);

export default enhance(Nav);