0

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

Improve this question

2 Answers 2

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

i think you explained this better than me @jidexl21
1

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.

Improve this answer

3 Comments

Thanks Richard. For layout purposes I know it is fine. but I am using for modals and dropdowns, also to make the nav bar item to become a burger for small screen devices.
Then I would advise you do them so they are handled by either jQuery or react and don’t try and mix the two. JQuery could handle the show and hide easy enough and react handle the data inside them?
Also to help you have a look at the library called classnames for react this will help you add and remove class names and if a classname does exist fire a function

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.