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?
2
-
2Hello, this is likely too broad of a question for stack overflow. You may get farther if you post a specific example with some demonstrative codeRob M.– Rob M.2017-09-06 20:35:25 +00:00Commented Sep 6, 2017 at 20:35
-
1I agree @RobM. Also in addition even though you can combine jQuery with react it is not a good approach. You can find several post about this topic.bennygenel– bennygenel2017-09-06 20:37:44 +00:00Commented Sep 6, 2017 at 20:37
Add a comment
|
2 Answers
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!
1 Comment
Wilson
Thank you. My problem is that the entire front end of my application is basically one svg with many path elements.The js/jquery handles everything that happens when a user clicks on the svg, including opening a modal and adding elements on top of the svg. I'm not sure what other components I would have besides the ones involved in rendering the svg. I know that is pretty vague, but do you have any advice on how to approach this within react/redux?
You CAN use jQuery in React (so long as the component is mounted), but I highly recommend just rewriting it from scratch. I have worked for teams that have loads of jquery mixed in with their React components mainly because they were comfortable with jQuery but apprehensive about React and it just turned into a nightmare.
Follow Duncan's advice about breaking down your app into components, then just write them in React.
