Are ReactJS and jQuery mutual exclusive?

Question

I am new to ReactJS. ReactJS seems to completely take over the responsibility of rendering DOM nodes and does not expect any other interference even jQuery. It brings the fact that many convenient jQuery plugs cannot be used in React. Some of those plugins have equivalent React components implemented but still far from enough. Is there an elegant way to combine these two things together?

Answer 1

Quick answer is NO there is no elegant way to combine them and make your app working without using ugly hacks.

ReactJS uses a fundamentally different logic compared to jQuery. You really don't want to mess with DOM when using ReactJS and that is exactly what jQuery does.

But there are ways if you use both libraries on the same page separately. You can use ReactJS only as independent self containing components and don't mix them with jQuery (don't try to manipulate that component with jQuery in any way, even listening to events can be tricky), than they can live in separate worlds quite happy, but this kinda limits what you can do with React.

I have actually worked on a large legacy project where we slowly migrated components from jQuery to ReactJS, component by component, but it was a slow process and there were some things that could be done more easily if everything would be in ReactJS.

If you need to bundle them together than my answer is still no, you cannot do it elegantly.

But that also doesn't mean it cannot be done, there are ways of making it work, but it will introduce unexpected behavior to you app and you will have to create workarounds which you really don't want to do in production.

I would suggest you weigh what you need more, ReactJS or jQuery components, what will take you more time to develop if you stick with one or another.

Answer 2

While I agree with @Ales's answer, I would like to add one more nuance:

It is indeed a very very bad idea to mix jQuery and React for DOM manipulation.
jQuery has some very seductive shorthand codes for manipulating DOM. These are a recipe for disaster when mixed with react.

However, jQuery has other stuff too, that has nothing to do with DOM manipulation. And those jQuery parts actually do mix well with react.

A case in point would be jQuery's handling of ajax calls and JSON. These jQuery do actually mix well with react.