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

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!

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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

You can find the CSS link here ->

Copy the CSS code and paste it into the head tag

You can find the JS bundle here ->

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