jQuery in react component

Question

I have a web-app built with react. In this app I also have some pages with jQuery code from an old version. Right now this is rendered server side and i have to load the entire ejs file with jQuery and jQuery-UI code in script-tags with its own navigation menu. (Almost 1000 lines of jQuery code)

This means that I have to build another nav-menu for these jQuery pages.

I would like to render this jQuery depended code in my "content div" so I can still use the react menu which uses react router. I would like to render it like a component. But I don't know if this is the best solution.

I have read many examples of how this could be done, but I don't know which of them to go for and I have been strugling to make them work

Like shown in this example: Adding script tag to React/JSX This example adds script tags in componentWillMount

Or with import and require like this example: How to add script tag in React/JSX file?

I couldn't make these solutions work without installing jQuery through npm.

I have not yet installed jQuery through npm because I know this will affect my bundle size for the rest of the application and I am only using jQuery for a couple of my pages. The user don't really need to load jQuery for the rest of the app

What do you recommend in a situation like this? What is the best solution for performance and user experience?

do you need to have two way communication with these jQuery depended pages? If not, why not strip them down a bit, and load them through an iframe. Might not be the most performant solution, but its the simplest. — asosnovsky
– asosnovsky, Commented Nov 28, 2017 at 14:33
I need to use some global variables from the react app, but the output is stored in the database through ajax and the API-endpoints written in node.js — Koiski
– Koiski, Commented Nov 28, 2017 at 14:35
if we are still using the iframe idea, consider using developer.mozilla.org/en-US/docs/Web/API/Window/postMessage — asosnovsky
– asosnovsky, Commented Nov 28, 2017 at 14:43
here is a good tutorial on how to use it robertnyman.com/html5/postMessage/postMessage.html — asosnovsky
– asosnovsky, Commented Nov 28, 2017 at 14:44
Thanks. I would like to see other solutions as well. I suspect that using an iframe can be resource-heavy — Koiski
– Koiski, Commented Nov 28, 2017 at 14:58

Boris Zagoruiko · Accepted Answer · 2017-12-02 20:41:28Z

9

+50

Take a look at react-async-component. Your component might look something like:

// SomethingWithJquery.js
import React, {Component} from 'react'
import $ from 'jquery'

class SomethingWithJquery extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    // ... as much jquery mess as you need
  }

}

export default SomethingWithJquery

And wrapper in separate file:

// SomethingWithJquery.async.js
import { asyncComponent } from 'react-async-component';

export default asyncComponent({
  resolve: () => System.import('./SomethingWithJquery')
});

Than you can use it as regular react component, react-async-component will load entire component in separate .js file on purpose under the hood.

answered Dec 2, 2017 at 20:41

Boris Zagoruiko

13.2k15 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Koiski Over a year ago

Looks promising, but the way you import jQuery means that I have to install jQuery through npm which means jQuery will really affect my bundle file?

Boris Zagoruiko Over a year ago

@Koiski as far as I know nope, it should add jquery to separate chunk with component. So jquery will be loaded only when user opens a page that contains this async component.

Koiski Over a year ago

With this approach, I am worried that direct DOM-manipulation with jQuery will screw up the virtual DOM react works on. Any insight about that?

Collectives™ on Stack Overflow

jQuery in react component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related