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

var Router = require('react-router')
  , RouteHandler = Router.RouteHandler
  , Route = Router.Route;


var ReactRouterBootstrap = require('react-router-bootstrap')
  , NavItemLink = ReactRouterBootstrap.NavItemLink
  , ButtonLink = ReactRouterBootstrap.ButtonLink
  , ListGroupItemLink = ReactRouterBootstrap.ListGroupItemLink;
*/

var ReactBootstrap = require('react-bootstrap')
  , DropdownButton = ReactBootstrap.DropdownButton
  , MenuItem = ReactBootstrap.MenuItem
  , Button = ReactBootstrap.Button
  , ButtonGroup = ReactBootstrap.ButtonGroup
  , OverlayTrigger = ReactBootstrap.OverlayTrigger
  , Popover = ReactBootstrap.Popover
  , Glyphicon = ReactBootstrap.Glyphicon
  , Grid = ReactBootstrap.Grid
  , Col = ReactBootstrap.Col
  , Row = ReactBootstrap.Row

var React = require('react');
var Router = require('react-router');
var { Route, DefaultRoute, RouteHandler, Link } = Router;

var Home = require("./Home.js");
var Profile = require("./Profile.js");
var SetIntervalMixin = require("./SetIntervalMixin.js");
var SafeStateChangeMixin = require('./SafeStateChangeMixin.js');
var Timeline = require('./Timeline.js');

/**
 * @jsx React.DOM
 */

var React = require('react');
var _ = require('lodash');
var Moment = require('moment');
var extend = require('extend');
var RB = require('react-bootstrap');
var ButtonGroup = RB.ButtonGroup;
var Button = RB.Button;
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;

/** components */
var FullDateRangePicker = require('../components/FullDateRangePicker');
var ActivityBar = require('../components/charts/ActivityBar');
var D3TreeMap = require('../components/charts/D3TreeMap');
var DataAPI = require('../utils/DataAPI');

/** constant */
var DATE_FORMAT = 'YYYY-MM-DD';


module.exports = React.createClass({

    mixins: [PureRenderMixin],

var ReactBootstrap = require('react-bootstrap')
  , Grid = ReactBootstrap.Grid
  , Col = ReactBootstrap.Col
  , Row = ReactBootstrap.Row
  , ListGroupItem = ReactBootstrap.ListGroupItem
  , ListGroup = ReactBootstrap.ListGroup
  , Nav = ReactBootstrap.Nav
  , NavItem = ReactBootstrap.NavItem
  , Button = ReactBootstrap.Button
  , ButtonGroup = ReactBootstrap.ButtonGroup
  , Glyphicon = ReactBootstrap.Glyphicon

var React = require('react');
var Router = require('react-router');
var { Route, DefaultRoute, RouteHandler, Link } = Router;

var SetIntervalMixin = require("../common/SetIntervalMixin.js");
var SafeStateChangeMixin = require('../common/SafeStateChangeMixin.js');
var ProfileMixin = require('../common/ProfileMixin.js');

module.exports = Post = React.createClass({displayName: "Post",
  mixins: [SetIntervalMixin,SafeStateChangeMixin,ProfileMixin],
  contextTypes: {
    router: React.PropTypes.func
  },
  getHandlerKey: function () {

'use strict';

var React = require('react/addons');
var Button = require('react-bootstrap').Button;
var ButtonGroup = require('react-bootstrap').ButtonGroup;

var Paginator = React.createClass({
    getDefaultProps() {
        return {
            size: 10,
            currentPage: 1
        };
    },
    _onClick(pageNo) {
        this.props.onSelected(pageNo);
    },
    _onPrevious() {
        var currentPage = this.props.currentPage;
        if (currentPage > 1) {
            this.props.onSelected(currentPage - 1);
        }

var ReactBootstrap = require('react-bootstrap')
  , Grid = ReactBootstrap.Grid
  , Col = ReactBootstrap.Col
  , Row = ReactBootstrap.Row
  , ListGroupItem = ReactBootstrap.ListGroupItem
  , ListGroup = ReactBootstrap.ListGroup
  , Nav = ReactBootstrap.Nav
  , NavItem = ReactBootstrap.NavItem
  , Button = ReactBootstrap.Button
  , ButtonGroup = ReactBootstrap.ButtonGroup
  , Glyphicon = ReactBootstrap.Glyphicon

var React = require('react');
var Router = require('react-router');
var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; var RouteHandler = Router.RouteHandler; var Link = Router.Link;

var SetIntervalMixin = require("../common/SetIntervalMixin.js");
var SafeStateChangeMixin = require('../common/SafeStateChangeMixin.js');
var ProfileMixin = require('../common/ProfileMixin.js');

var FollowButton = require('../common/FollowButton.js');
var EditProfileModalButton = require('../profile/EditProfileModalButton.js');
var EditAvatarModalButton = require('../profile/EditAvatarModalButton.js');

module.exports = Profile = React.createClass({
  mixins: [

import { Rdf, vocabularies } from 'platform/api/rdf';
import { PageService, TemplateContent, TemplateStorageStatus, RevisionInfo } from 'platform/api/services/page';
import { ResourceLink, ResourceLinkAction } from 'platform/api/navigation/components';

import { StorageSelector, chooseDefaultTargetApp } from 'platform/components/admin/config-manager';
import { getOverlaySystem, OverlayDialog} from 'platform/components/ui/overlay';
import { BrowserPersistence } from 'platform/components/utils';
import { ConfirmationDialog } from 'platform/components/ui/confirmation-dialog';
import * as uri from 'urijs';

import '../../scss/page-editor.scss';
import { ErrorPresenter } from 'platform/components/ui/notification';

const Button = createFactory(ReactBootstrap.Button);
const ButtonToolbar = createFactory(ReactBootstrap.ButtonToolbar);
const ButtonGroup = createFactory(ReactBootstrap.ButtonGroup);

interface PageEditorProps {
  iri: Rdf.Iri;
}

interface PageEditorState {
  pageSource?: TemplateContent;
  storageStatus?: ReadonlyArray;
  targetApp?: string;
  saving?: boolean;
  activeSyntax?: Syntax;
  loading?: boolean;
}

enum Syntax {
  HTMLMIXED, MPHHANDLEBARS, HANDLEBARS, NONE,

var React = require('react')
var DropdownButton = require('react-bootstrap').DropdownButton
var MenuItem = require('react-bootstrap').MenuItem
var Glyphicon = require('react-bootstrap').Glyphicon
var Button = require('react-bootstrap').Button
var ajax = require('jquery').ajax
var ButtonGroup = require('react-bootstrap').ButtonGroup

class MarkupSet extends React.Component {

    constructor(props) {
        super(props);
        this.handleMarkupClick = this.handleMarkupClick.bind(this);
        this.handleMarkupAdd = this.handleMarkupAdd.bind(this);
        this.handleMarkupSetRename = this.handleMarkupSetRename.bind(this);
        this.handleMarkupRename = this.handleMarkupRename.bind(this);
        this.disableNewNameValue = this.disableNewNameValue.bind(this);
        this.handleNewNameValueChange = this.handleNewNameValueChange.bind(this);
        this.handleTagsetDelete = this.handleTagsetDelete.bind(this);
        this.state = {
            newNameVal: '',
        }
    }

var Modal = ReactBootstrap.Modal;
var Pagination = ReactBootstrap.Pagination;
var Label = ReactBootstrap.Label;
var Table = ReactBootstrap.Table;
var Grid = ReactBootstrap.Grid;
var Row = ReactBootstrap.Row;
var Col = ReactBootstrap.Col;
var Panel = ReactBootstrap.Panel;
var Form = ReactBootstrap.Form;
var FormGroup = ReactBootstrap.FormGroup;
var FormControl = ReactBootstrap.FormControl;
var InputGroup = ReactBootstrap.InputGroup;
var ControlLabel = ReactBootstrap.ControlLabel;
var HelpBlock = ReactBootstrap.HelpBlock;
var Button = ReactBootstrap.Button;
var ButtonGroup = ReactBootstrap.ButtonGroup;
var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var ProgressBar = ReactBootstrap.ProgressBar;
var Glyphicon = ReactBootstrap.Glyphicon;

var ReactWidgets = require('react-widgets')
var DateTimePicker = ReactWidgets.DateTimePicker;
var Combobox = ReactWidgets.Combobox;
var DropdownList = ReactWidgets.DropdownList;

var Big = require('big.js');

var models = require('../models');
var Security = models.Security;
var Account = models.Account;
var SplitStatus = models.SplitStatus;
var SplitStatusList = models.SplitStatusList;

import { constructUrlForResource } from 'platform/api/navigation';
import { getLabel } from 'platform/api/services/resource-label';
import { DragAndDropApi } from 'platform/components/dnd';
import { TemplateItem } from 'platform/components/ui/template';
import { Spinner } from 'platform/components/ui/spinner';

import {RdfaLink} from '../../services/LDPAnnotationService';

import {AutoCompletionInput} from 'platform/components/ui/inputs';

import '../../scss/annotation-component.scss';


const Button = createFactory(ReactBootstrap.Button);
const ButtonToolbar = createFactory(ReactBootstrap.ButtonToolbar);
const ButtonGroup = createFactory(ReactBootstrap.ButtonGroup);
const Popover = createFactory(ReactBootstrap.Popover);
const Overlay = createFactory(ReactBootstrap.Overlay);

const Modal = createFactory(ReactBootstrap.Modal);
const ModalHeader = createFactory(ReactBootstrap.ModalHeader);
const ModalTitle = createFactory(ReactBootstrap.ModalTitle);
const ModalBody = createFactory(ReactBootstrap.ModalBody);
const ModalFooter = createFactory(ReactBootstrap.ModalFooter);
const Radio = createFactory(ReactBootstrap.Radio);
const FormGroup = createFactory(ReactBootstrap.FormGroup);
const ControlLabel = createFactory(ReactBootstrap.ControlLabel);

const Editor = createFactory(EditorComponent);

/**
 * @jsx React.DOM
 */

var React = require('react');
var _ = require('lodash');
var Moment = require('moment');
var extend = require('extend');
var RB = require('react-bootstrap');
var ButtonGroup = RB.ButtonGroup;
var Button = RB.Button;
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;

/** Utils */
var DataAPI = require('../../utils/DataAPI');

/** components */
var LoadingMask = require('../LoadingMask');
var Bar = require('./Bar');
var TimeColumn = require('./TimeColumn');
var Notify = require('../Notify');

/** constant */
var DATE_FORMAT = 'YYYY-MM-DD';