title: React-Scripts import Bootstrap not working
body: <p>I'm using React-Script and I have a button (Popover) in my React component 
  But It's not working. I know that React-Bootstrap is available but I'm not allowed to use it :(</p>
  
  <p>In React-Script docs they said:
  <a href="https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap" rel="nofollow noreferrer">https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap</a></p>
  
  <p>But they don't point out about import bootstrap.js</p>
  
  <p>I have installed jquery + bootstrap from npm</p>
  
  <p>Here is my Package.json:</p>
  
  <pre><code>{
    "name": "app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "block-ui": "^2.70.1",
      "bootstrap": "^3.3.7",
      "express": "^4.15.3",
      "history": "^4.6.1",
      "jquery": "^3.2.1",
      "react": "^15.5.4",
      "react-dom": "^15.5.4",
      "react-router": "^4.1.1"
    },
    "devDependencies": {
      "react-scripts": "1.0.7"
    },
    "scripts": {
      "start": "react-scripts start"
    }
  }
  </code></pre>
  
  <p>Here is my index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import registerServiceWorker from './registerServiceWorker';
  
  import createBrowserHistory from 'history/createBrowserHistory'
  import UserProfile from './components/common/UserProfile';
  
  import Routes from './routes';
  import Navigator from './components/common/Navigator';
  
  import 'bootstrap/dist/js/bootstrap.js';
  
  // Global
  global.config = require('./config');
  
  // Navigator
  ReactDOM.render(&lt;Navigator /&gt;, document.getElementById('navigator'));
  
  // Main
  let browserHistory = createBrowserHistory()
  ReactDOM.render(
      &lt;Routes history={browserHistory} /&gt;,
      document.getElementById('main')
  );
  // Header
  ReactDOM.render(&lt;UserProfile /&gt;, document.getElementById('user_profile'));
  
  registerServiceWorker();
  </code></pre>
  
  <p>Here is my React Component:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import jQuery from 'jquery';
  import 'bootstrap/dist/js/bootstrap.js';
  
  class CommonComment extends Component {
    constructor(props) {
      super(props)
  
      this.state = {}
      this.handle =                   this.handle.bind(this);
    }
  
    handle(event) {
      jQuery("#QQQ").popover('show');
    }
  
    }
    render() {
      var this2 = this;
      return (
        &lt;div&gt;
            &lt;button id="QQQ" onClick={this2.handle} type="button" className="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?"&gt;Click to toggle popover&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export {CommonComment};
  </code></pre>
  
  <p>When I clicked on that button it show:</p>
  
  <blockquote>
    <p>TypeError:
    __WEBPACK_IMPORTED_MODULE_1_jquery___default(...)(...).popover is not a function</p>
  </blockquote>
  
  <p>So I think Bootstrap is not included properly. Can someone point out where I did wrong.</p>
  
  <p><hr/>
  New!
  Docs Project-Structure
  <a href="https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure" rel="nofollow noreferrer">https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure</a></p>
  
  <p>Here is my project structure</p>
  
  <p><a href="https://i.stack.imgur.com/CbEjO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CbEjO.png" alt="enter image description here"></a></p>
  
  <p>Many thanks!!!</p>