Geek Answers Handbook

JQuery in the response component

I have a web application built with reaction. In this application, I also have some pages with jQuery code from the old version. This is now being displayed on the server side, and I have to upload the whole file ejsusing jQuery and jQuery-UI code in script-tags with my own navigation menu. (Almost 1000 lines of jQuery code)

This means that I need to create another navigation menu for these jQuery pages.

I would like to display this jQuery dependent code in my “content div”, so I can still use the reaction menu that uses the response router. I would like to make it as a component. But I do not know if this is the best solution.

I read a lot of examples of how this can be done, but I don’t know which one to go to, and I tried my best to get them to work.

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

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

I could not get these solutions to work without installing jQuery through npm.

I have not installed jQuery through npm yet, because I know that this will affect the size of my package for the rest of the application, and I use only jQuery for several of my pages. The user really does not need to download jQuery for the rest of the application.

What do you recommend in this situation? What is the best solution for productivity and user convenience?

+6
1

react-async-component. :

// 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

:

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

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

, - .js .

+5

More articles:


All Articles