Utiliser jQuery dans React correctement

1. Pouvez-vous utiliser jQuery dans React
2. La bonne façon d’utiliser jQuery dans React
3. Devez-vous utiliser jQuery dans React

jQuery est l’une des bibliothèques les plus connues utilisées par les développeurs JavaScript.

La bibliothèque fournit un moyen simple d’effectuer des manipulations et des animations DOM, pour n’en nommer que quelques-unes. En raison de sa popularité, de nombreux développeurs Web le connaissent et préfèrent utiliser jQuery lorsqu’ils le peuvent.

React est une autre bibliothèque populaire développée par Facebook. Au cours des dernières années, il a remporté le titre de framework JavaScript le plus utilisé.

Il est sans doute plus moderne et a plus de fonctionnalités que jQuery. Bien que vous puissiez utiliser les deux bibliothèques dans une seule application, il existe des règles d’utilisation de jQuery dans les applications React.

Pouvez-vous utiliser jQuery dans React

Il est possible d’utiliser jQuery dans une application React, à condition de l’utiliser correctement et de bien choisir son emplacement. De même, vous pouvez intégrer React dans jQuery.

Quelles sont les limites de jQuery dans React

La principale limitation de l’utilisation de jQuery dans React est que jQuery met à jour manuellement le DOM. D’autre part, React a son système pour apporter des modifications au DOM.

Il détermine en interne quand une application ou un composant React doit être restitué. Il détermine également quelles parties de l’interface utilisateur doivent être mises à jour.

Par conséquent, lorsque vous utilisez jQuery pour manipuler le DOM, React devient confus. C’est pourquoi, dans des circonstances normales, il est considéré comme une mauvaise pratique d’utiliser jQuery dans React, mais il existe des exceptions.

La bonne façon d’utiliser jQuery dans React

Tout d’abord, vous devez installer la bibliothèque jQuery puis l’importer, comme ceci :

import $ from 'jquery';

Comme nous l’avons déjà mentionné, jQuery et React sont deux bibliothèques concernées par la manipulation du DOM. Pour nous assurer que jQuery n’interfère pas avec React, nous devons créer un composant qui ne sera jamais mis à jour par React.

Comment peut-on le faire? Comme vous le savez peut-être, les composants React sont rendus à nouveau lorsque leur state ou props change. Nous devons donc construire un composant qui n’a pas de state ou de props.

Regardons un exemple :

class App extends Component {
  componentDidMount(){
        $("p").hide()
  }
  render() {
    return <div>
              <p>Hi! Try edit me</p>
           </div>;
  }
}

Pour s’assurer que React ne mette jamais à jour le DOM pour le composant App, nous n’initions aucun état ou n’utilisons aucune valeur prop. Notre déclaration return consiste en un wrapper statique et des éléments de paragraphe.

De cette façon, nous pouvons ouvrir la voie au plugin jQuery pour manipuler le DOM et masquer directement tous les éléments de paragraphe.

Une autre bonne façon de sélectionner directement des éléments DOM est d’utiliser un ref.

Devez-vous utiliser jQuery dans React

React a des fonctionnalités intégrées qui vous permettent de manipuler le DOM dans la plupart des cas. Travailler dans le cadre des composants React vous permet de contrôler le comportement et l’apparence de votre application.

Si vous êtes certain de devoir utiliser jQuery et de rester dans les limites indiquées ci-dessus, vous êtes libre de le faire. Cependant, jQuery a un ensemble limité d’applications dans React.