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 ponent. 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 ponentWillMount

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 remend in a situation like this? What is the best solution for performance and user experience?

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 ponent. 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 ponentWillMount

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 remend in a situation like this? What is the best solution for performance and user experience?

• javascript
• jquery
• reactjs

• do you need to have two way munication 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 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 Commented Nov 28, 2017 at 14:35
• 1 if we are still using the iframe idea, consider using developer.mozilla/en-US/docs/Web/API/Window/postMessage – asosnovsky Commented Nov 28, 2017 at 14:43
• 1 here is a good tutorial on how to use it robertnyman./html5/postMessage/postMessage.html – asosnovsky Commented Nov 28, 2017 at 14:44
• 1 Thanks. I would like to see other solutions as well. I suspect that using an iframe can be resource-heavy – Koiski Commented Nov 28, 2017 at 14:58

1 Answer 1

Take a look at react-async-ponent. Your ponent 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-ponent';

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

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