Refactoring js/html/css app into react

Question

I am trying to refactor an application built with js/html/css into a react app. I have moved the front-end html into react components but am having trouble with the js/jquery that controls the actual functionality of the app. What would be a good approach to integrate the old js and jquery into the new application without having to rewrite everything?

Answer 1

You pretty much have to rewrite, I'm afraid - I've been in this exact position before.

The problem you have is that jQuery is about manipulating the DOM directly - the user clicks a button, and then you make some change to the DOM to reflect the new state of the app.

React works very differently - you tell it how to turn internal application into DOM, and it works out how to manipulate the DOM for you. So when the user clicks a button, you update an internally managed state object, and then React handles the DOM changes because it knows how internal state relates to DOM.

They're two completely different ways of writing an app. A good approach:

• Break down the existing app into components (buttons, forms, widgets, navigations bars)
• Try to figure out which components "talk to" each other and create a hierarchy
• Use a library like Redux to manage the internal state rather than using React component state

Good luck!