jQuery et React sont deux bibliothèques JavaScript populaires pour le développement frontal. Alors que jQuery est une bibliothèque de manipulation DOM, React est une bibliothèque JavaScript permettant de créer des interfaces utilisateur.

Découvrez comment migrer une application existante de jQuery vers React.

jQuery contre. Réagir?

Quand il s'agit de choisir entre jQuery et React, cela dépend de vos besoins et de vos préférences. Si vous recherchez une bibliothèque facile à utiliser et dotée d'une grande communauté, jQuery est un bon choix. Mais si vous recherchez une bibliothèque plus adaptée au développement à grande échelle, React est la meilleure option.

Pourquoi migrer de jQuery vers React ?

Il existe plusieurs raisons pour lesquelles vous pourriez vouloir migrer votre application de jQuery vers React.

  • React est plus rapide que jQuery: Si nous parlons de performances brutes, React est plus rapide que jQuery. En effet, React utilise un DOM virtuel, qui est une représentation JavaScript du DOM réel. Cela signifie que lorsqu'un utilisateur interagit avec une application React, seules les parties du DOM qui changent seront mises à jour. Ceci est plus efficace que la manipulation DOM complète de jQuery.
    instagram viewer
  • React est plus maintenable: Une autre raison de migrer vers React est qu'il est plus maintenable que jQuery. En effet, les composants React sont autonomes, vous pouvez donc facilement les réutiliser. Cela signifie que si vous devez apporter une modification à un composant React, vous pouvez le faire sans affecter le reste de la base de code.
  • React est plus évolutif: Enfin, React est plus évolutif que jQuery. Il utilise une architecture à base de composants, qui est plus évolutive que l'approche monolithique de jQuery. Cela signifie que vous pouvez facilement étendre et modifier une application React si nécessaire.
  • React a un meilleur support pour les tests unitaires: En ce qui concerne les tests unitaires, React a un meilleur support que jQuery. Parce que vous pouvez facilement isoler les composants React, il est plus facile d'écrire des tests unitaires pour eux.

Comment migrer votre application de jQuery vers React

Si vous envisagez de migrer votre application de jQuery vers React, vous devez garder à l'esprit certaines choses. Il est important de savoir ce dont vous avez besoin pour commencer et d'avoir une bonne idée de la façon dont vous pouvez migrer des parties individuelles de votre application.

Conditions préalables

Avant de commencer le processus de migration, il y a quelques choses que vous devez faire pour configurer les choses. Tout d'abord, vous devez créer une application React en utilisant create-react-app.

Après avoir installé ces dépendances, vous devez créer un fichier appelé index.js dans ton src annuaire. Ce fichier sera le point d'entrée de votre application React.

Enfin, vous pouvez passer à des parties individuelles de votre base de code et les mettre à jour en conséquence.

1. Gestion des événements

Dans jQuery, vous pouvez attacher des événements à des éléments. Par exemple, si vous avez un bouton, vous pouvez lui associer un événement de clic. Lorsque quelqu'un clique sur le bouton, le gestionnaire d'événements s'exécute.

$("bouton").click(fonction() {
// faire quelque chose
});

React gère les événements différemment. Au lieu d'attacher des événements à des éléments, vous les définissez dans des composants. Par exemple, si vous avez un bouton, vous définiriez l'événement click dans le composant :

classeBoutons'étendRéagir.Composant{
 gérerClic() {
// faire quelque chose
 }
 rendre() {
retour (
<bouton onClick={this.handleClick}>
 Cliquez-moi !
</button>
 );
 }
}

Ici, le composant Button contient la définition de la méthode handleClick(). Lorsque quelqu'un clique sur le bouton, cette méthode s'exécute.

Chaque méthode a ses avantages et ses inconvénients. Dans jQuery, les événements sont faciles à joindre et à supprimer. Cependant, il peut être difficile de les suivre si vous avez beaucoup d'événements. Dans React, vous définissez des événements dans des composants, ce qui peut faciliter leur suivi. Mais ils ne sont pas aussi faciles à attacher et à enlever.

Si vous utilisez React, vous devrez mettre à jour votre code pour utiliser la nouvelle méthode de gestion des événements. Pour chaque événement que vous souhaitez gérer, vous devrez définir une méthode dans le composant. Cette méthode s'exécutera lorsque l'événement se déclenchera.

2. Effets

Dans jQuery, vous pouvez utiliser les méthodes .show() ou .hide() pour afficher ou masquer un élément. Par exemple:

$("#élément").montrer();

Dans React, vous pouvez utiliser le hook useState() pour gérer l'état. Par exemple, si vous souhaitez afficher ou masquer un élément, vous devez définir l'état dans le composant :

importer { useState } depuis "réagir";
fonctionComposant() {
constante [isShown, setIsShown] = useState(FAUX);
retour (
<div>
 {est montré &&<div>Bonjour!</div>}
<bouton onClick={() => setIsShown(!isShown)}>
 Basculer
</button>
</div>
 );
}

Ce code définit la variable d'état isShown et la fonction setIsShown(). Réagir a différents types de crochets que vous pouvez utiliser dans votre application, dont useState en fait partie. Lorsqu'un utilisateur clique sur le bouton, la variable d'état isShown est mise à jour et l'élément s'affiche uniquement lorsque cela est approprié.

Dans jQuery, les effets sont faciles à utiliser et ils fonctionnent bien. Cependant, ils peuvent être difficiles à gérer si vous en avez beaucoup. Dans React, les effets vivent à l'intérieur des composants, ce qui peut les rendre plus faciles à gérer, sinon aussi faciles à utiliser.

3. Récupération de données

Dans jQuery, vous pouvez utiliser la méthode $.ajax() pour récupérer des données. Par exemple, si vous souhaitez récupérer des données JSON, vous pouvez le faire comme ceci :

$.ajax({
 URL: "https://example.com/data.json",
 Type de données: "json",
 succès: fonction(données) {
 // faire quelque chose avec le données
 }
});

Dans React, vous pouvez utiliser la méthode fetch() pour récupérer des données. Voici comment récupérer des données JSON à l'aide de cette méthode :

aller chercher("https://example.com/data.json")
 .puis (réponse => réponse.json())
 .alors (données => {
 // faire quelque chose avec le données
 });

Dans jQuery, la méthode $.ajax() est facile à utiliser. Cependant, il peut être difficile de gérer les erreurs. Dans React, la méthode fetch() est plus détaillée, mais il est plus facile de gérer les erreurs.

4. CSS

Dans jQuery, vous pouvez spécifier CSS par page. Par exemple, si vous souhaitez styliser tous les boutons d'une page, vous pouvez le faire en ciblant l'élément bouton :

bouton {
 couleur de fond: rouge ;
 Couleur blanche;
}

Dans React, vous pouvez utiliser CSS de différentes manières. Une façon consiste à utiliser des styles en ligne. Par exemple, si vous souhaitez styliser un bouton, vous pouvez le faire en ajoutant l'attribut style à l'élément :

<style de bouton={{couleur de fond: 'rouge', couleur: 'blanc'}}>
 Cliquez-moi !
</button>

Une autre façon de styliser les composants React consiste à utiliser des styles globaux. Les styles globaux sont des règles CSS que vous définissez en dehors d'un composant et que vous appliquez à tous les composants de l'application. Pour ce faire, vous pouvez utiliser une bibliothèque CSS-in-JS comme styled-components :

importer stylé depuis 'composants stylés' ;
constante Bouton = style.bouton`
 couleur de fond: rouge ;
 Couleur blanche;
`;

Il n'y a pas de bon ou de mauvais choix entre les styles en ligne et les styles globaux. Cela dépend vraiment de vos besoins. En général, les styles en ligne sont plus faciles à utiliser pour les petits projets. Pour les grands projets, les styles globaux sont une meilleure option.

Déployez facilement votre application React

L'un des avantages les plus importants de React est qu'il est très facile de déployer votre application React. Vous pouvez déployer React sur n'importe quel serveur Web statique. Il vous suffit de compiler votre code à l'aide d'un outil tel que Webpack, puis de placer le fichier bundle.js résultant sur votre serveur Web.

Vous pouvez également héberger gratuitement votre application React sur les pages GitHub.