'What's the best way of importing bootstrap into react project

I found a couple of ways to import bootstrap into my project. I'm rather unsure if there is a best practice.

I installed bootstrap and react-bootstrap using npm.

Option 1: Import every component seperately

import Button from 'react-bootstrap/Button'

function App() {
  return (
    <div className="App">
      <Button variant="outline-secondary" id="button-addon1">
        Button
      </Button>
    </div>
  );
}

vs. Option 2: Import everything

import * as bs from 'react-bootstrap'

function App() {
  return (
    <div className="App">
      <bs.Button variant="outline-secondary" id="button-addon1">
        Button
      </bs.Button>
    </div>
  );
}

My guess:

Option 1 is leaner as it only imports the component I use. But is it the best way to use it? Especially when Prototyping out a quick idea it can get filled with imports quickly or can be a pain to import everything hand by hand.

Any advice is very welcome! Thank you!

reactjs react-bootstrap

Solution 1:^[1]

Personally I would go with Option 2. Bootstrap's components names are very generic and could be confused with other components.

Solution 2:^[2]

Importing the specific component from the library rather than importing everything improves the performance while fetching and rendering.

However,

You can also import multiple components from a single import statement

import { Form, Col, Button } from "react-bootstrap";

You can also use the default react-bootstrap syntax to import

It imports dynamically without naming the specific components

import * as ReactBootstrap from "react-bootstrap";



return (
    <ReactBootstrap.Button bsStyle="success" bsSize="small">
      Button
     </ReactBootstrap.Button>
    );

So, In terms of performance, multiple components imports or individual component imports are way better than the others.

Solution 3:^[3]

There are default imports (option 1) and named imports (option 2). Generally, the main difference is that with option 1 you import only the component, not the whole library: https://react-bootstrap.netlify.app/getting-started/introduction/#importing-components

You should import individual components like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.
import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

I said generally, because you can set up your bundle tool for tree shaking. With tree shaking you remove everything, that is not used in your code, resulting in the same bundle size, as you would import only certain components directly via default imports.

I use option 2, because I like to clip all the imports from the same library. It's also easier for eyes to parse the imports IMO.

Solution 4:^[4]

You can just include the link to the CSS and JS bundle in the public/index.html

You can find the CSS link here -> https://getbootstrap.com/docs/5.0/getting-started/introduction/

Copy the CSS code and paste it into the head tag

You can find the JS bundle here -> https://getbootstrap.com/docs/5.0/getting-started/introduction/

Copy the JS Bundle code and paste it right on top of the end of the body tag. Like this ?

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> //This is the JS Bundle
  </script>
</body>

You can just use the bootstrap class names on className of the component which will be easier to refer on the bootstrap docs.

<div className="d-flex mx-2 bg-dark"></div> //Usage of bootstrap classes

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Rukka
Solution 2	3ndless_____
Solution 3	Igor Gonak
Solution 4	Lahfir

'What's the best way of importing bootstrap into react project

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]