How to migrate jQuery functions and events in gatsby?

Question

I am currently migrating an old but still beautiful website to Gatsby PWA.

The old website was built purely in HTML and jQuery, and it has many beautiful animations with jQuery functions.

Technically, I succeeded in importing some external scripts including jQuery(v3.3.7) and Bootstrap(3.3.1) by customizing html.js.

And also I updated some attribute names like class to className, style - string to object, etc.

What I think a bit difficult is to use jQuery functions with events like onmouseover in the old HTML files.

For example,

...
      <div className="section">
        <div className="block_information" id="block_information">
          <div className="row first_row">
            <div className="col-md-2 col-xs-12 icon_block_information top">
              <div className="svg_text" onmouseover="runSmile()">
                                        ~~~~~~~~~~~~~~~~~~~~~~~~
                <svg viewBox="0 0 80.25 80.25">
                  ...
                  <g id="icon_smile_1">
                    <path
                      id="icon_smile"
                      className="cls-2"
                      ...

And runSmile function looks like,

function runSmile() {
  window.ks = (function () {
    function z(a) {
      return "undefined" !== typeof a;
    }

    function v(a, b) {
      return a && 0 == a.indexOf(b);
    }

    function N(a) {
      if (!isFinite(a)) throw "non-finite value";
    }

    function O(a) {
      if (14 >= a) return 16;
      (a = X[a]) || (a = 0);
      return a;
    }

    function D(a) {
      return 0 <= a ? Math.pow(a, 1 / 3) : -Math.pow(-a, 1 / 3);
    }
    ...
  document.ks = ks;
  (function (ks) {
    ks.animate(
      "#icon_smile",
      [{ p: 6, t: [0, 1000], v: [0, 360], e: [[0], [0]] }],
      {
        autoplay:
          document.location.search
            .substr(1)
            .split("&")
            .indexOf("autoplay=true") < 0,
      },
    );
  })(ks);
}

In this case, can I use the jQuery functions with only small updates and also without updating event attributes like onmouseover to onFocus?

If I have to update the jQuery functions and event attributes, what should I do?

Thanks in advance.

Ferran Buireu · Accepted Answer · 2021-09-02T09:56:53.040

onmouseover should be replaced by onMouseOver or onMouseEnter/onMouseLeave.

However, I would discourage you from importing jQuery and Bootstrap into a React project (really, don't do it).

jQuery and Bootstrap point and manipulates directly the real DOM, while React creates and manipulates a virtual DOM (vDOM). Because of that, React will never be aware of changes that jQuery does to the DOM and vice-versa, which translates into hydration issues. Practically, this means that your components (or part of them) may not be rendered when you want or in your different use-cases, especially when you perform some kind of navigation through pages, losing control of your code-flow.

In addition, because of that different way of working (DOM vs vDOM), jQuery functions applied into React environment will be never unmounted. This may sound meaningless but your resources will keep getting accumulated and eventually your site will become extremely slow, especially for users that remain more than X seconds.

Both (jQuery and React) have different purposes and you shouldn't mix them, it will lead you to huge caveats and headaches.

Moreover, window in Gatsby needs to be treated specially (like any other global objects, like document) because of the SSR (Server-Side-Rendering), where there's no window because it's not even defined yet. Depending on your triggers and use-cases, you may need to wrap it inside:

if(typeof window !== 'undefined'){
  // your window stuff
}

If you still keep working with jQuery in a React environment you can follow: https://reactjs.org/docs/integrating-with-other-libraries.html

Where it provides some useful hints to unmount all the jQuery functions.

Regarding Bootstrap, I would recommend using the React-based version to avoid the same hydration issues that I explained before.

How to migrate jQuery functions and events in gatsby?

1 Answers1