React Bootstrap with JSX

HTML

<script src="//fb.me/react-with-addons-0.14.0.js"></script>
<script src="//fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.min.js"></script>
<div class="container-fluid" id='main'>
   <div class="row">
       <div class="col-xs-12 col-md-6" id='app'>
         
       </div>
   </div>
</div>

CSS

#main{
  margin-top: 20px;
}
.content{min-height: 340px;}

Babel + JSX

var {Button, PanelGroup, Panel, ButtonGroup, DropdownButton, MenuItem} = ReactBootstrap

const titleStyle = {'fontSize': '50px'}

const title = <h1 style={titleStyle}>Tarun</h1>;

const nav = ( <PanelGroup defaultActiveKey="1" accordion key="accordion1">
    <Panel defaultExpanded header={title} className="changeFontSize" eventKey="1" bsSize="large" bsStyle="primary">
     </Panel>
</PanelGroup>);


var mountNode = document.getElementById("app")
ReactDOM.render(nav, mountNode);