Is Bootsrap5 compatible with React 18?-CodePudding

Is Bootstrap 5 compatible with React?

I've read that prior versions of Bootstrap (before version 5) effect the DOM, and therefore are not compatible with React. However, I heard that Bootstrap 5 is pure CSS. Does this mean that it is compatible with React?

Edit: I stand corrected. It does use vanilla JS, but jQuery is removed.

I'm reading https://superdevresources.com/bootstrap5-vs-bootstrap4-whats-new/

Vanilla JavaScript instead of jQuery Ever since Bootstrap was introduced, it utilized jQuery as a dependency to offer dynamic features such as menu expansion, carousel, dropdowns etc. However, this forced dependency on jQuery was not liked by many developers who wanted to use Bootstrap with modern JavaScript frameworks such as React and Vue.js. With Bootstrap 5, they have removed this dependency.

It KIND of sounds like they remove jQuery, and that it allows compatibility with React and Vue.js. But it doesn't actually says it's compatible.

CodePudding user response：

Just tried it out, and it works with pure boostrap 5, check sandbox:

export default function App() {
  return (
    <div>
      <button type="button" >
        Primary
      </button>
      <button type="button" >
        Secondary
      </button>
      <button type="button" >
        Success
      </button>
      <button type="button" >
        Danger
      </button>
    </div>
  );
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->
    <!-- Boostrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>

    <!-- Boostrap -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

CodePudding user response：

I think you have try to use some component library from bootstrap. some updated library compatible with Bootstrap v5 i.e. reactstrap using Bootstrap v5.1.0