title: display bootstrap navbar using react.js
body: <p>I have a very simple React.js project where I am trying to add a bootstrap navbar to the project, but I can't seem to figure out how to get the navbar to display on the page.  The navbar example I am referencing can be found here, <a href="http://codepen.io/zhaozhiming/pen/LNGyvR" rel="nofollow noreferrer">http://codepen.io/zhaozhiming/pen/LNGyvR</a></p>
  
  <p>The project looks like the following,</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;title&gt;My super cool title.&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="bundle.js" &gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './components/App.js';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, {PropTypes} from 'react';
  import styles from './App.css';
  import NavBarTest from './common/NavBar-test';
  
  const App = () =&gt; {
    return (
      &lt;div id="parent"&gt;
        &lt;div&gt;Hello, App!&lt;/div&gt;
        &lt;NavBarTest {...NavBarTest} /&gt;
      &lt;/div&gt;
    )
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Navbar-test.js</strong></p>
  
  <pre><code>import React from 'react';
  
  // create classes
  var NavBar = React.createClass({
    render: function(){
      return(
        &lt;nav className="navbar navbar-inverse"&gt;
          &lt;div className="container-fluid"&gt;
            &lt;div className="navbar-header"&gt;
              &lt;button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"&gt;
                &lt;span className="sr-only"&gt;Toggle navigation&lt;/span&gt;
                &lt;span className="icon-bar"&gt;&lt;/span&gt;
                &lt;span className="icon-bar"&gt;&lt;/span&gt;
                &lt;span className="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} /&gt;
            &lt;/div&gt;
            &lt;div className="collapse navbar-collapse" id="navbar-collapse"&gt;
              &lt;NavMenu links={this.props.links} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      );
    }
  });
  
  var NavBrand = React.createClass({
    render: function(){
      return (
        &lt;a className="navbar-brand" href={this.props.linkTo}&gt;{this.props.text}&lt;/a&gt;
      );
    }
  });
  
  var NavMenu = React.createClass({
    render: function(){
      var links = this.props.links.map(function(link){
        if(link.dropdown) {
          return (
            &lt;NavLinkDropdown links={link.links} text={link.text} active={link.active} /&gt;
          );
        }
        else {
          return (
            &lt;NavLink linkTo={link.linkTo} text={link.text} active={link.active} /&gt;
          );
        }
      });
      return (
        &lt;ul className="nav navbar-nav"&gt;
          {links}
        &lt;/ul&gt;
      );
    }
  });
  
  var NavLinkDropdown = React.createClass({
    render: function(){
      var active = false;
      var links = this.props.links.map(function(link){
        if(link.active){
          active = true;
        }
        return (
          &lt;NavLink linkTo={link.linkTo} text={link.text} active={link.active} /&gt;
        );
      });
      return (
        &lt;li className={"dropdown " + (active ? "active" : "")}&gt;
          &lt;a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;
            {this.props.text}
            &lt;span className="caret"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul className="dropdown-menu"&gt;
            {links}
          &lt;/ul&gt;
        &lt;/li&gt;
      );
    }
  });
  
  var NavLink = React.createClass({
    render: function(){
      return(
        &lt;li className={(this.props.active ? "active" : "")}&gt;&lt;a href={this.props.linkTo}&gt;{this.props.text}&lt;/a&gt;&lt;/li&gt;
      );
    }
  });
  
  // set data
  var navbar = {};
  navbar.brand =
    {linkTo: "#", text: "React Bootstrap Navbar"};
  navbar.links = [
    {linkTo: "#", text: "Link 1"},
    {linkTo: "#", text: "Link 2"},
    {dropdown: true, text: "Dropdown", links: [
      {linkTo: "#", text: "Dropdown Link 1"},
      {linkTo: "#", text: "Dropdown Link 2", active: true}
    ]}
  ];
  
  export default NavBar;
  </code></pre>
  
  <p>Finally, the page appears to render, but I am seeing the following error / warning message in the browser console.  Any help on how I can get this navbar to display on the page would greatly be appreciated.</p>
  
  <p><a href="https://i.stack.imgur.com/zXeYk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zXeYk.png" alt="error message"></a></p>