Use Bootstrap with React

by

Certain functionalities such as dropdown, modal requires JS to manipulate the DOM, and bootstrap uses jQuery to handle the DOM manipulations.

However, React uses virtual DOM, so manipulating the browser DOM outside your React app through jQuery means React is potentially no longer handling state, events and UI rendering. And React broadly expects/assumes that nothing else will be modifying the DOM.

This is why react-bootstrap or reactstrap are recommended. The CSS remains exactly the same, but the components that initially require jQuery are rewritten.

Take this bootstrap 4 modal as example, you need to define modal state which determines whether the modal is being shown or hidden.

So essentially these react bootstrap libraries rewrite each bootstrap component into a React component, CSS wise it’s entirely the same.

More Related Contents:

  1. React – How to open PDF file as a href target blank
  2. What does the ‘…rest’ stand for in this object destructuring?
  3. ReactJS Bootstrap Navbar and Routing not working together
  4. How to Protect website code PHP / JS? [closed]
  5. Understanding unique keys for array children in React.js
  6. What do these three dots in React do?
  7. Problem in redirecting programmatically to a route in react router v6
  8. What happens when using this.setState multiple times in React component?
  9. React – changing an uncontrolled input
  10. What does npm install –legacy-peer-deps do exactly? When is it recommended / What’s a potential use case?
  11. ReactJS – .JS vs .JSX
  12. Uncaught ReferenceError: React is not defined
  13. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
  14. reactjs this.refs vs document.getElementById
  15. Using anchor tags in react-router 4
  16. Updating nested data in redux store
  17. React js change child component’s state from parent component
  18. React-router – How to pass data between pages in React?
  19. React: Passing props to function components
  20. How to sort array of objects based on a boolean property?
  21. React.js: the most efficient way to pass a parameter to an event handler without bind() in a component
  22. Simulate click event on react element
  23. What is “Mounting” in React js?
  24. Electron IPC and nodeIntegration
  25. How can I wait for setState to finish before triggering a function in React?
  26. ReactJS server-side rendering vs client-side rendering
  27. React.js: How to append a component on click?
  28. Firebase-Admin, importing it to react application throws Module not found error
  29. How to prevent Next.js from instantiating a singleton class/object multiple times?
  30. How to dynamically import SVG and render it inline

Leave a Comment