Jquery dans React

React est super cool et très à la mode comparais à Jquery, mais s'il vous arrive de vouloir garder vos vieux codes Jquery et de les faire quoi habitué avec React voici comment je m'y prends.

Retrouvez-le ici et les explications ici-bas.

Étape 1

Charger les librairies

...
<link rel="stylesheet" type="text/css" href="./css/slick.css" />
...
<script src="./js/vendor/jquery-1.12.4.min.js"></script>
<script src="./js/vendor/waypoints.min.js"></script>
<script src="./js/vendor/jquery.counterup.min.js"></script>
<script src="./js/vendor/slick.min.js"></script>
...

Étape 2

Découper votre code jquery en fichier.

public/js/counter.js

$(".counter").counterUp({
  delay: 10,
  time: 3000
});

public/js/slick.js

$(".slick-track").slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

Étape 3

Charger vos fichiers dans le composant qui les utilise. services.js

import { useEffect } from 'react'
export const ImportScript = resourceUrl => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = resourceUrl;
    script.async = true;
    if (window.jQuery) {
      document.body.appendChild(script);
      return () => {
        document.body.removeChild(script);
      }
    }
  }, [resourceUrl]);
}

components/counter.js

...
import { ImportScript } from "../services";

const Counter = () => {
  ImportScript("./js/load/counter.js");

  return (...);
};
...

components/slick.js

...
import { ImportScript } from "../services";

const Slick = () => {
  ImportScript("./js/load/slick.js");

  return (...);
};
...

Voilà, c'est fini, pour le moment.