I'm building a React APP and I use a couple of jQuery plugins. On my app I'm using ES6 and import all the things.
So, in a normal envivorment I would add the <script /> on the page and init the plugin.
Whats the best way to import a jQuery plugin into a React component? Can someone explain me please?
Thanks!
It depends on what you're trying to do with jQuery. I agree with @Vilvan in that it is normally not a good idea to mix jQuery with React because React uses a virtual DOM and all DOM manipulations should be done there. React will use the virtual DOM to manipulate the actual DOM. jQuery changes the actual DOM, so it can cause problems.
For most UI effects, I use react-bootstrap instead of jQuery. It's had all of the UI effects I've needed, including fades, modals, etc. I do use jQuery for non-DOM functionality, such as AJAX calls, and it has not caused problems.
To more specifically answer your question, when I use jQuery for AJAX calls, I just use <script> to import the jQuery library. I don't use import, as the jQuery $ object would be globally defined.
You can place the jquery file somewhere accessible and use 'import $ from '<path to jQuery>'; . This works but the reactjs with jQuery is not a good idea. For every jQuery implementation there is a simple alternate basic javascript implementation. You can refer this. YouMightNotNeedJQuery
