Will partially ReactJS app work along jQuery and its animations?

(Branko Stancevic) #1

Hello good people,

I’m doing some research about ReactJS and jQuery as title says.

Setup of ongoing project is this: symphony + jQuery + SCSS.

My problem is this: There are lot of ajax requests done with jQuery and I need to rewrite those parts of code in ReactJS. Idea is to use ReactJS partially (I don’t want to rewrite whole application from scratch) on site and over time completely remove jQuery from project.

My question is: Can ReactJS and jQuery work independent in this setup? Also I would like to recreate animations and done with jQuery so i need to be certain that things will work since my colleague had problems with those stuff. What’s the best practice to do this? Is there any?

Thank you very much in advance :slight_smile:

(Simon Williams) #2

Yes, they can coexist. We’ve got a fair amount of legacy code which either uses jQuery animations or plain CSS animations, without any reference to the React animation API. This is left over from before React had a stable animation API.

The CSS animations are ok, but it’s a bit annoying having to always render all the invisible elements (so that the fade-in animation works). The jQuery animations are a total pain to work with though and I would strongly recommend avoiding them if at all possible.

If you are going to do this you will need to make sure you understand how React works and think carefully about how you write your components. You need to make sure that jQuery doesn’t change part of the DOM that React is in charge of, and that you clean up any jQuery events/animations before React removes those elements from the DOM.

React has absolutely nothing to do with AJAX requests so I’m not sure what you mean by rewrite those parts in React. You can use whatever API you like to make HTTP requests and then call setState to get React to update the DOM accordingly.