2

I am new to React.

I am going to start a project which uses React. So I decided to look for some front end material design library for react. I looked at such libraries, I found material-ui, but does not have components I need(ex: navbar, footer, searchbox). So I decided to go with MaterializeCSS. Then I came accross a post here on the StackOverflow.

Quoting:

You shouldn't be using jQuery with React. React uses a virual DOM to make UIs and jQuery uses the normal browser DOM. This means that if you start using jQuery to handle state, React is no longer handling state, events, and UI rendering. (https://hashnode.com/post/why-is-it-a-bad-idea-to-mix-jquery-and-react-cit77t20z02j5fq536wlyiwtk). MaterializeCSS uses jQuery to interact with many (if not all) of their components.

  1. Is this really true? If so how could we use libraries like Boostrap and MaterializeCSS (since alternatives like react-bootstrap, react-materialize are not matured yet)

    And

  2. what is the advantage of using react-bootstrap over, normal bootstrap?
user158
  • 12,852
  • 7
  • 62
  • 94

1 Answers1

1

I'm been part of a team building a large scale application using React and we use vanilla Bootstrap layout and styling. We build all our components and use Bootstrap for styling and layout only.

  1. Basically you can use JQuery and React together but there's not really a point in doing so since you can implement the JQuery-parts in vanilla JS inside your React-components. If you mix React and JQuery you must be very aware of the React lifecycle and Virtual DOM as well as JQuery. You will be likely to run into some strange bugs that may be hard to fix.

  2. React-Bootstrap is basically components that apply the Bootstrap styling but instead of using JQuery for features that require backend code they use javascript in the React-Bootstrap components.

I evaluated React-Bootstrap early in our project and decided that it was easier to build the components we needed that fit our needs 100% and use Bootstrap-css only.

Matt
  • 141
  • 9