How to use the react-bootstrap.Navbar function in react-bootstrap

/** @jsx React.DOM */
var _ = require('underscore'),
  $ = require('jquery'),
  moment = require('moment'),
  React = require('react'),
  RB = require('react-bootstrap'),
  Jumbotron = RB.Jumbotron,
  Button = RB.Button,
  Panel = RB.Panel,
  Well = RB.Well,
  Navbar = RB.Navbar,
  Nav = RB.Nav,
  Grid = RB.Grid,
  Row = RB.Row,
  Col = RB.Col,
  Table = RB.Table;

// for server side rendering only
// enable this for server side rendering
// this somehow affects browserify
// if(typeof window === 'undefined'){
//   var Firebase = require('firebase');
//   var FirebaseSimpleLogin = function(){};
// }

var AppView = React.createClass({
  getInitialState: function() {

value: function render() {
      return _react2.default.createElement(
        _reactBootstrap.Navbar,
        { style: styles.navbar },
        _react2.default.createElement(
          _reactBootstrap.Navbar.Header,
          null,
          _react2.default.createElement(
            _reactBootstrap.Navbar.Brand,
            null,
            _react2.default.createElement(
              _reactRouter.Link,
              { to: '/' },
              'Scaphold'
            )
          )
        ),
        _react2.default.createElement(
          _reactBootstrap.Nav,

/** @jsx React.DOM */
var React = require('react');
var ReactDOM = require('react-dom');

var Grid = require('react-bootstrap').Grid;
var Row = require('react-bootstrap').Row;
var Col = require('react-bootstrap').Col;
var Navbar = require('react-bootstrap').Navbar;
var NavbarHeader = require('react-bootstrap').Navbar.Header;
var NavbarCollapse = require('react-bootstrap').Navbar.Collapse;
var NavbarBrand= require('react-bootstrap').NavbarBrand;
var PageHeader= require('react-bootstrap').PageHeader;
var NavItem = require('react-bootstrap').NavItem;
var Glyphicon = require('react-bootstrap').Glyphicon;
var Nav = require('react-bootstrap').Nav;
var MapEditor = require('./mapeditor');
var RouterMixin = require('react-mini-router').RouterMixin;
var MapStore = require('./store/mapstore');
var ShareDialogStore = require('./store/ShareDialogStore');
var MapTitleDescription = require('./maptitledescription');
var Button = require('react-bootstrap').Button;
var MapStatus = require('./mapstatus');
var EditableShortText = require('./editableshorttext');
var Download = require('./download');
var MapSharingDialog = require('./dialogs/SharingDialog');

var React = require('react/addons');

var Navbar = require('react-bootstrap').Navbar;
var NavBrand = require('react-bootstrap').NavBrand;
var Link = require('react-router').Link;

var Header = React.createClass({

    contextTypes: {
        router: React.PropTypes.func
    },

    render : function() {
        return (
            
                React Blog
            
            
        )

var Reflux = require('reflux');
var ReactRouter = require('react-router');
var ReactDOM = require('react-dom');

var PageStore = require('../store/PageStore'),
  UserStore = require('../store/UserStore'),
  ConfigStore = require('../store/ConfigStore');

var PageAction = require('../action/PageAction'),
  UserAction = require('../action/UserAction');

var LoginButton = require('./LoginButton'),
  AccountDropdown = require('./AccountDropdown'),
  Title = require('./Title');

var Navbar = ReactBootstrap.Navbar,
  Nav = ReactBootstrap.Nav,
  NavbarBrand = ReactBootstrap.NavbarBrand;

var Link = ReactRouter.Link;

var Header = React.createClass({
  mixins: [
    Reflux.connect(PageStore, 'pages'),
    Reflux.connect(UserStore, 'users'),
    Reflux.connect(ConfigStore, 'config'),
    ReactIntl.IntlMixin,
  ],

  componentWillMount: function() {
    PageAction.showNavBar();
  },

Header.prototype.render = function () {
        var isLogin = false;
        var name = "";
        if (localStorage.getItem("HCAccount")) {
            isLogin = true;
            name = localStorage.getItem("HCAccount");
        }
        var userCenter = null;
        if (localStorage.getItem("HCAccount") == "manager") {
            userCenter = React.createElement(react_bootstrap_1.NavItem, { eventKey: 1, href: "/usercenter" }, "\u4E2A\u4EBA\u4E2D\u5FC3");
        }
        return React.createElement("div", null,
            React.createElement(react_bootstrap_1.Navbar, { inverse: true, collapseOnSelect: true },
                React.createElement(react_bootstrap_1.Navbar.Header, null,
                    React.createElement(react_bootstrap_1.Navbar.Brand, null,
                        React.createElement("a", { href: "/" }, "\u7B80\u5386\u9A8C\u8BC1\u5E73\u53F0")),
                    React.createElement(react_bootstrap_1.Navbar.Toggle, null)),
                React.createElement(react_bootstrap_1.Navbar.Collapse, null,
                    React.createElement(react_bootstrap_1.Nav, null,
                        React.createElement(react_bootstrap_1.NavItem, { eventKey: 1, href: "/myresume" }, "\u6211\u7684\u7B80\u5386"),
                        React.createElement(react_bootstrap_1.NavItem, { eventKey: 2, href: "/verify" }, "\u9A8C\u8BC1\u7B80\u5386")),
                    React.createElement(react_bootstrap_1.Nav, { pullRight: true },
                        userCenter,
                        React.createElement(react_bootstrap_1.NavItem, { eventKey: 2, href: isLogin ? "/logout" : "/login" }, isLogin ? name + "/注销" : "登录")))));
    };
    return Header;

value: function render() {
      var user = JSON.parse(localStorage.getItem('user'));
      var loggedInUser = user ? user.username : '';

      return _react2.default.createElement(
        _reactBootstrap.Navbar,
        { style: styles.navbar },
        _react2.default.createElement(
          _reactBootstrap.Navbar.Header,
          null,
          _react2.default.createElement(
            _reactBootstrap.Navbar.Brand,
            null,
            _react2.default.createElement(
              _reactRouter.Link,
              { to: '/home' },
              'Scaphold'
            )
          )
        ),
        _react2.default.createElement(
          _reactBootstrap.Nav,

//JSX modules
var InputType  = require('./inputType.jsx')
	, ScalesList = require('./scalesList.jsx')
	, ScaleElements = require('./scaleElements.jsx')
	, ScalePlayer = require('./scalePlayer.jsx')
;

//JS modules
var React = require('react')
  , sc  = require('scalesapi')
  , _ = require('lodash')

  //bootstrap specific
  , RB = require('react-bootstrap')
  , Well = RB.Well
  , Navbar = RB.Navbar
  , TabbedArea = RB.TabbedArea
  , TabPane = RB.TabPane
  , Row = RB.Row
  , Col = RB.Col
  , Nav = RB.Nav
  , NavItem = RB.NavItem
  , Badge = RB.Badge
  , Panel = RB.Panel
;

var Calculator = React.createClass({
	getInitialState: function() {
		return {
			inputType: 'scale',
			inputValues: [],
			selectedScale: "",

var ButtonGroup    = Bootstrap.ButtonGroup,
    Button         = Bootstrap.Button,
    Alert          = Bootstrap.Alert,
    Badge          = Bootstrap.Badge,
    Label          = Bootstrap.Label,
    PageHeader     = Bootstrap.PageHeader,
    Well           = Bootstrap.Well,
    Table          = Bootstrap.Table,
    Glyphicon      = Bootstrap.Glyphicon,
    Input          = Bootstrap.Input,
    Jumbotron      = Bootstrap.Jumbotron,
    Grid           = Bootstrap.Grid,
    TabbedArea     = Bootstrap.TabbedArea,
    Pager          = Bootstrap.Pager,
    Navbar         = Bootstrap.Navbar,
    Nav            = Bootstrap.Nav,
    OverlayTrigger = Bootstrap.OverlayTrigger,
    Row            = Bootstrap.Row,
    Col            = Bootstrap.Col,
    PageItem       = Bootstrap.PageItem,
    TabPane        = Bootstrap.TabPane,
    NavItem        = Bootstrap.NavItem,
    DropdownButton = Bootstrap.DropdownButton,
    ProgressBar    = Bootstrap.ProgressBar,
    Popover        = Bootstrap.Popover,
    Tooltip        = Bootstrap.Tooltip,
    Modal          = Bootstrap.Modal,
    ModalTrigger   = Bootstrap.ModalTrigger,
    Accordion      = Bootstrap.Accordion,
    Panel          = Bootstrap.Panel,
    PanelGroup     = Bootstrap.PanelGroup,

render: function () {
    var brand = E(Router.Link, {to: '/formatic/', className: 'navbar-brand'}, 'Formatic');

    return (
      E(Bootstrap.Navbar, {componentClass: 'header', brand: brand, staticTop: true, className: 'bs-docs-nav', role: 'banner', toggleNavKey: 0},
        E(Bootstrap.Nav, {className: 'bs-navbar-collapse', role: 'navigation', eventKey: 0, id: 'top'},
          Object.keys(NAV_LINKS).map(this.renderNavItem).concat(
            R.li({key: 'annotated-source'},
              R.a({href: '/formatic/annotated-source/index.html', target: 'formatic-annotated-source'}, 'Annotated Source')
            )
          )
        )
      )
    );
  },