Right approach to apply a HTML/CSS/JS theme to an React app

Question

I've been trying to apply a template I bought on themeforest.net to my React web app. Converting template's HTML/CSS part to React components is relatively easy, however, I found it challenging to get the jQuery part to work.

The template uses several jQuery plugins, such as mmenu, magnific-popup, chosen. The sample index.html includes a custom.js near the end of body tag. By glancing through this custom.js (over 1000 lines of code), I found what it does is basically using jQuery selector to select a certain DOM node, then either applying a jQuery plugin function or extra CSS classes to the selected node. To me, this custom.js is a kitchen sink.

This works well in the static demo HTML pages, as the custom.js is loaded towards the end of the HTML page, all nodes are presented at the moment and ready for selectors to select.

However, being a single page application, React apps update DOM elements dynamically without the need to refresh the page. I found, in several places, the jQuery plugins lose controls over the DOM nodes after route being changed, or props updated.

A graceful but slower approach I can think of is to replace jQuery plugins with their functionally equivalent React components.

Another solution is to, hypothetically, brutal force executing the kitchen sink custom.js again an again, whenever there's a route change or component content update. But my gut feeling tells me I don't want to go there.

I would appreciate if anyone who has done this before could shed some light. At the moment, I use semantic-ui-react to style my app.

The theme I've been trying to apply is Listeo on themeforest.

PS: I read https://reactjs.org/docs/integrating-with-other-libraries.html but didn't find it a quick solution to me.

Answer 1

This is a tricky part when converting HTML themes to react. If you are using jquery to manipulate DOM then you are neglecting the core principle of react. I have been through same situation few times. I have tried custom.js method you mentioned. From my experience it's not worth it you would run into lots of trouble and end up writing half of the libraries. And don't get me started on production you will want to rewrite everything from scratch.

I would suggest you to use equivalent React Components. It will be much easier for you to maintain the project later.