Importing components from react-bootstrap

Question

I'm trying to understand how to work with react-bootstrap . I have imported the whole js file like this in my index.html :

<!-- react-bootstrap -->
<script src="lib/react-bootstrap/dist/react-bootstrap.min.js"></script>

In another js file I am creating a Navbar , and I found out that I have to create a variable from the ReactBootstrap like this:

var Navbar = ReactBootstrap.Navbar;
...
const MyNavBar = (
  <Navbar className="navbar-dark" fluid>
    ...
  </Navbar>
);

Do I need to do it for every component I want too use? If so, it seems like the normal Bootstrap css was much easier..

Answer 1

React-Bootstrap has been optimized for use with tools like Webpack or Browserify . When you grab the minified distribution we provide you are forced to download the entire library, even if you don't necessarily use all of it in your application. For a great run down on the benefits of those tools checkout Pete Hunt - How Instagram Works .

If that is an option you are not ready to explore you can re-assign the ReactBootstrap variable to something shorter like var rb = ReactBootstrap; requiring less typing.

I understand your concern about perceived simplicity of raw Bootstrap vs React-Bootstrap. Though when using React, React-Bootstrap's JavaScript implementation of the various Bootstrap components is done in an idiomatic React way, which is a lot easier than using the JavaScript Bootstrap provides.