An example functional component in React

functional-component.js

/**
 * External dependencies
 */
import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import classNames from 'classnames';

/**
 * Internal dependencies
 */
import { Menu, Toggle, MatchMedia } from '../../../components';
import Footer from '../Footer/Footer';
import * as LayoutActions from '../../../actions/layout';

import './Nav.scss';

/*
 * @class Displays a hamburger navigation, sidebar menu
 * @type Presentational Component
 * @returns Site Navigation
 */

const Nav = (props) => {
  /**
   * Render component
   * @returns {ReactElement} markup
   */
  const { layout, actions, config } = props;

  return (
    <div className="nav-container">
      <MatchMedia maxWidth={1024} values={{ deviceWidth: 1024 }}>
        <Toggle
          toggleState={layout.sidebarOpen}
          toggleAction={actions.toggleSidebar}
          btnLabel="toggle sidebar"
          btnIcon="burger"
          btnIconActive="x"
        />
        <Menu
          navitems={layout.navitems}
          open={layout.sidebarOpen}
          transitionClass="sidebar-transition"
          wrapperClass="sidebar-wrapper"
          effectClass="sidebar-effect"
          config={config}
        />
      </MatchMedia>
    </div>
  );
};

/**
 * propTypes
 * @property {Object} actions - layout actions
 * @property {Object} layout - layout state
 */
Nav.propTypes = {
  config: PropTypes.object.isRequired,
  actions: PropTypes.object.isRequired,
  layout: PropTypes.object.isRequired
};

export default Nav;