Docs: Add warning that Bootstrap JS is not fully compatible with JS frameworks like React

Created by: srmagura

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

For the most part, the Bootstrap JavaScript components can work in a React application (or Vue/Svelte/etc). However, the two (Bootstrap JS and React) are not fully compatible because React is not aware of modifications that Bootstrap makes to the DOM.

The JavaScript docs page should have a warning that you may experience bugs if you use the Bootstrap JS within a React application (or Vue/Svelte/etc). The docs should suggest a framework-specific library, like react-bootstrap or Reactstrap, as a more reliable alternative.

I am happy to PR this docs change if the maintainers are willing to accept it.

Here's a simple React example that demonstrates that the Bootstrap dropdown JS is not compatible with React. (I'm using dropdowns as an example only — I believe there are other Bootstrap components that are not compatible with React.)

function MyComponent() {
    return (
        <div className="dropdown">
            <button
                className="btn btn-secondary dropdown-toggle"
                type="button"
                id="dropdownMenuButton1"
                data-bs-toggle="dropdown"
                aria-expanded="false"
            >
                Dropdown button
            </button>
            <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                <li>
                    <a className="dropdown-item" href="#">
                        Action
                    </a>
                </li>
            </ul>
        </div>
    )
}

When you open the dropdown, Bootstrap adds the show class to the <button>. If the show class is removed from the dropdown, it becomes impossible to close. (You can confirm this by opening one of the dropdowns in the docs and manually editing the DOM.)

React can choose to rerender MyComponent at any time. If MyComponent rerenders while the dropdown is open, React may set the <button>'s className to btn btn-secondary dropdown-toggle as specified in the JSX, effectively removing the show class and making the dropdown uncloseable.

Reduced test cases

Filling this in because it is required. I can create a CodeSandbox if you need one.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.1.0