CODEWITHSUNDEEP
javascriptreactjsbootstrap-4
user2343647
user2343647

Reputation: 661

React and Bootstrap Javascript

I am using ReactJS and it is not recommended to use JQuery (or vanilla JS) to maniplate the actual DOM, because it may have unpredictable results because of ReactJS using a virtual DOM.

So, if I include pure Bootstrap in my project, could it have the same adverse effect? If so, the use of reactstrap or react-bootstrap would solve this problem or do those libaries also use the bootstrap javascript under the hood?

Thank you, Michel

Upvotes: 0

Views: 159

Answers (2)

jidexl21
jidexl21

Reputation: 619

The key thing to Avoid is manipulating the DOM for objects (or html DOM elements) that have been created with react, and have states tracked by react. Outside that you are free to use as much jquery or vanilla javascript as you like for DOM manipulation. This is because, objects rendered with react js tend to work with the state of the object, and attempting to get things to work like toggling classes can cause clashes, if the element state that reactjs remembers has been altered by javascript or jQuery.

For example: What this means is that you can use react to render bootstrap tabs that use bootstrap javascript and jquery, Then you can activate the tabs after react has rendered them with jquery. You'll have to limit your react to only the render function and avoid setState or update.

using setState or render after the initial render will have to be avoided, if jquery is used to toggle the classes, and react attempts to do the same later, clashes will occur.

In summary you can use both reactjs and JQuery in the same project , but stick to one (either pure react or pure jquery) per element for post render manipulations

Upvotes: 2

Richard
Richard

Reputation: 778

Yes it could cause a conflict with React, but it very much depends on what you want to use in Bootstrap? if you just want to use the styling then that will not cause you issues.

Bootstrap JS functions such as showing and hiding divs ( Accordion for example ) might give you issues if React is going to be expecting that div to be in a certain state on the render.

But i have hobby projects that use React and jQuery just fine as long as i am not asking each of the libraries to overlap. Once i have built an application i then try and remove the jQuery from it and move the function into React with the aim to remove jQuery completely.

If you want to expand your answer to provide an example of what you are working on then i'm happy to add to my answer.

Upvotes: 1

Related Questions