title: How to use react-bootstrap in typescript project
body: <p>I am trying to make a nav bar using react-bootstrap I have installed the node-module which is <code>"@types/react-bootstrap": "^0.32.11",</code> and I want to use in my hello.tsx component but it shows compile error Module not found: Error: Can't resolve 'react-bootstrap' in:\Query Express\Portal\src\components' I don't understand why it is looking for react-bootstrap in component directory</p>
  
  <pre><code>import * as React from "react";
  import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from "react-bootstrap";
  
  export interface IHelloProps { compiler: string; framework: string; }
  
  // 'helloProps' describes the shape of props.
  // state is never set so we use the '{}' type.
  export class Hello extends React.Component&lt;IHelloProps, {}&gt; {
      render() {
          return(
          &lt;div&gt;
              &lt;Navbar inverse&gt;
    &lt;Navbar.Header&gt;
      &lt;Navbar.Brand&gt;  
        &lt;a href="#brand"&gt;React-Bootstrap&lt;/a&gt;
      &lt;/Navbar.Brand&gt;
      &lt;Navbar.Toggle /&gt;
    &lt;/Navbar.Header&gt;
    &lt;Navbar.Collapse&gt;
      &lt;Nav&gt;
        &lt;NavItem eventKey={1} href="#"&gt;
          Link
        &lt;/NavItem&gt;
        &lt;NavItem eventKey={2} href="#"&gt;
          Link
        &lt;/NavItem&gt;
        &lt;NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown"&gt;
          &lt;MenuItem eventKey={3.1}&gt;Action&lt;/MenuItem&gt;
          &lt;MenuItem eventKey={3.2}&gt;Another action&lt;/MenuItem&gt;
          &lt;MenuItem eventKey={3.3}&gt;Something else here&lt;/MenuItem&gt;
          &lt;MenuItem divider /&gt;
          &lt;MenuItem eventKey={3.3}&gt;Separated link&lt;/MenuItem&gt;
        &lt;/NavDropdown&gt;
      &lt;/Nav&gt;
      &lt;Nav pullRight&gt;
        &lt;NavItem eventKey={1} href="#"&gt;
          Link Right
        &lt;/NavItem&gt;
        &lt;NavItem eventKey={2} href="#"&gt;
          Link Right
        &lt;/NavItem&gt;
      &lt;/Nav&gt;
    &lt;/Navbar.Collapse&gt;
  &lt;/Navbar&gt;
          &lt;h1&gt;Hello from {this.props.compiler} and {this.props.framework}!&lt;/h1&gt;;                                                                                                                                                            
          &lt;/div&gt;
          )}
  }
  </code></pre>
  
  <p>Index.html</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="app"&gt;&lt;/div&gt;
  
          &lt;!-- Main --&gt;
          &lt;link href="./src/css/lib/_bootstrap.min.css" rel="stylesheet"&gt;&lt;/link&gt;
          &lt;script src="./dist/main.bundle.js"&gt;&lt;/script&gt;
          &lt;script src="./dist/nodeModules.bundle.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>