Why aren't Bootstrap Native components rendering in my React app?

Question

tried

npm install --save bootstrap.native

loaded import 'bootstrap.native/dist/bootstrap-native-v4.js'; in index.js file in create-react app.

Expected Result: converting bootstrap component (navbar, modal, alert, popup...) to jsx and creating react component should work as expected in bootstrap v4.

Problem: Works when pasted directly in index.html but does not work when tried to render through component.

This shows bootstrap native is loaded properly, but it seems to be working only if bootstrap code is in DOM, but not on " create react app" rendered code.

Also any suggestion on, using bootstrap component as react component without use of jquery or any react-bootstrap library(something native implementation) will be welcome.

Answer 1

I am using BSN but not together with react:
Reason bootstrap.native uses the browser DOM, which is going to wreck havoc with React's virtual DOM. In short: Don't do it!

to say it more direct:
React is a whole different way of doing things. React support is out of scope for bootstrap.native. It would require a completely separate codebase.
Use react-bootstrap it is a complete rewrite of bootstrap.js (and also no jQuery)
From the developers:

React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery