Qu'est-ce que React ? Concepts clés et différences avec jQuery

React est une bibliothèque JavaScript pour créer des interfaces utilisateur (UI). Alors que jQuery se concentre sur la sélection et la modification directe des éléments de la page, React se concentre sur la description de l'interface pour un état donné de vos données. Comprendre les composants et l'état facilite la comparaison des deux outils et la décision de savoir quand les utiliser.

Qu'est-ce que React ?

Dans React, vous construisez des parties d'une interface, comme des boutons, des champs de recherche et des cartes d'article, sous forme de composants. Chaque composant rassemble son apparence et son comportement associé. Vous pouvez combiner des composants en une page et réutiliser une carte en fournissant un titre et un auteur différents pour chaque article.

React utilise JavaScript, et HTML et CSS restent utiles pour comprendre la structure et l'apparence d'une interface web. L'installation de React ne fournit pas automatiquement un serveur de connexion, une base de données ou la navigation entre les URL. Vous devez toujours choisir et mettre en œuvre les autres parties de votre application. Cet article se concentre sur une interface de base fonctionnant dans un navigateur ; le Quick Start officiel de React présente ses éléments constitutifs.

Les concepts de base de React

Composants : unités d'apparence et de comportement

Un composant fonctionnel est une fonction JavaScript qui retourne le contenu à afficher. Les noms des composants que vous définissez commencent par une lettre majuscule, comme ProductCard, tandis que les éléments HTML tels que button utilisent des noms en minuscules. Le composant suivant définit une carte une fois afin que vous puissiez réutiliser sa structure avec différentes données de produit.

function ProductCard({ name, price }) {
  return (
    <article className="product-card">
      <h3>{name}</h3>
      <p>KRW {price}</p>
    </article>
  );
}

JSX : exprimer du balisage dans JavaScript

JSX est une extension de syntaxe qui permet d'écrire un balisage ressemblant à HTML dans un fichier JavaScript. La section <article> ci-dessus est du JSX. Les accolades permettent d'insérer des expressions JavaScript telles que name et price. Coller ce composant dans un fichier HTML ordinaire ne suffit pas pour l'exécuter.

JSX utilise className au lieu de class et nécessite des balises fermées explicitement, telles que <img />. Plusieurs éléments de niveau supérieur doivent être englobés dans un élément parent ou un Fragment. JSX est courant dans les exemples et projets d'introduction, bien que React puisse être utilisé sans lui. Voir les règles de React pour écrire du JSX pour la syntaxe.

Props : données transmises par un parent

Les props, abréviation de properties (propriétés), sont des valeurs qu'un composant parent transmet à un enfant. Elles permettent à la même carte d'afficher des noms et des prix différents, ou au même bouton d'afficher des libellés différents. Une prop peut contenir une chaîne de caractères, un nombre, un objet ou une fonction. Voici un produit illustratif au prix en won coréen (KRW) :

<ProductCard name="Beginner keyboard" price={35000} />

Un enfant lit ses props pour construire sa sortie. Traitez les props comme en lecture seule : si leurs valeurs doivent changer, mettez à jour les données dans le parent afin qu'il transmette de nouvelles valeurs. Un parent peut également passer une fonction de rappel que l'enfant peut appeler après une action de l'utilisateur. Transmettre des props à un composant explique ce flux de données.

État : mémoriser les valeurs qui changent

L'état est une information qu'un composant doit se rappeler, comme la valeur d'une entrée, une sélection ou un compteur de clics. Appeler useState renvoie la valeur actuelle et une fonction pour la mettre à jour. useState est un Hook, une fonction qui donne à un composant accès aux fonctionnalités de React ; appelez-la au niveau supérieur de la fonction du composant.

const [count, setCount] = useState(0);

La valeur initiale est 0, count est l'état actuel, et setCount demande une mise à jour. Changer uniquement une variable ordinaire ne dit pas à React de mettre à jour l'interface. Les valeurs qui déterminent l'affichage ont besoin d'une structure d'état appropriée. État : la mémoire d'un composant explique comment l'état diffère d'une variable locale.

Comment React met-il à jour l'interface ?

Dans un compteur, cliquer sur un bouton demande une mise à jour de l'état. React calcule alors la sortie pour cet état et applique les changements nécessaires au DOM. Le Document Object Model (DOM) est la représentation objet d'un document par le navigateur, incluant ses éléments et son texte.

1. Action de l'utilisateur : un clic sur un bouton exécute un gestionnaire d'événement.
2. Demande de mise à jour : setCount spécifie la valeur suivante.
3. Rendu : React appelle les composants pour calculer leur sortie.
4. Application (commit) : React applique les modifications nécessaires au DOM.
5. Affichage (paint) : le navigateur dessine le résultat.

Le rendu signifie calculer la sortie en appelant les composants. Cela ne signifie pas recharger toute la page ou supprimer et recréer chaque élément HTML. Si la sortie reste inchangée, un rendu peut ne nécessiter aucune modification du DOM. La documentation de React sur le rendu et l’application des modifications distingue ces étapes.

Appeler setCount ne remplace pas immédiatement la valeur de count dans le gestionnaire d'événements en cours d'exécution. Cela demande l'état pour un rendu ultérieur, et React peut regrouper plusieurs mises à jour. Lorsque la nouvelle valeur dépend de la valeur précédente, exprimez cette relation avec une fonction de mise à jour :

setCount(previousCount => previousCount + 1);

Cette fonction reçoit l'état en attente et retourne l'état suivant. Elle est utile lorsque plusieurs incréments sont en file d'attente, car chaque mise à jour est calculée à partir du résultat précédent. La référence useState explique les fonctions de mise à jour et leurs exigences.

Quelle est la différence entre React et jQuery ?

jQuery est également une bibliothèque JavaScript. Elle fournit des sélecteurs, la gestion des événements, des modifications du contenu et des styles, ainsi que des requêtes Ajax. Ajax, abréviation de Asynchronous JavaScript and XML, désigne une technique permettant d’échanger des données avec un serveur sans recharger toute la page ; les données échangées ne sont pas nécessairement au format XML. La présentation officielle de jQuery cite la manipulation du DOM et la gestion des événements parmi ses principales fonctionnalités.

Envisagez d'ajouter un produit à un panier. Avec jQuery, votre code pourrait insérer un élément de liste, mettre à jour la quantité et le total, et masquer le message de panier vide. Avec React, vous pouvez décrire ces affichages en fonction de l'état du panier. Aucune des approches ne gère automatiquement les erreurs serveur ou ne valide toutes les données entrantes.

React n'est pas toujours plus rapide, et le code jQuery n'est pas toujours plus difficile à maintenir. Les résultats dépendent de l'interface, de l'implémentation, du code chargé et des actions de l'utilisateur. Une seule petite interaction et une interface qui synchronise de nombreux états créent des besoins de maintenance différents, il est donc nécessaire de les évaluer dans leur propre contexte.

Construisez le même compteur avec jQuery et React

Les deux exemples commencent à 0 et augmentent le compte de 1 chaque fois que le bouton est activé. Leurs titres identifient la bibliothèque ; leur fonctionnalité et leur disposition sont par ailleurs équivalentes. Comparez où chaque implémentation met à jour le nombre affiché. Les exemples ci-dessous ont été vérifiés avec React 19.3.0, jQuery 4.0.0, Vite 8.3.4, Node.js 24.19.0 et Microsoft Edge 154, y compris les clics de souris, l'activation au clavier et les rechargements de page.

Exemple jQuery : changer le texte d'un élément sélectionné

Enregistrez le code complet ci-dessous sous le nom jquery-counter.html en utilisant l'encodage UTF-8, puis ouvrez-le dans un navigateur. Il charge jQuery 4.0.0 depuis le réseau de diffusion de contenu officiel (CDN), donc une connexion Internet est nécessaire. Consultez les versions et fichiers officiels de jQuery pour les versions et fichiers disponibles.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery counter</title>
  <style>
body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }
  </style>
</head>
<body>
  <main class="counter">
    <h1>jQuery counter</h1>
    <p>Click count: <span id="count" aria-live="polite">0</span></p>
    <button type="button" id="increase">Add 1</button>
  </main>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
    let count = 0;

    $('#increase').on('click', function () {
      count += 1;
      $('#count').text(count);
    });
  </script>
</body>
</html>

$("#increase") sélectionne le bouton, et .on("click", ...) attache le gestionnaire. Après avoir modifié la variable, le code appelle $("#count").text(count) pour mettre à jour le texte affiché. Voir la référence jQuery .on() et la référence jQuery .text() pour ces opérations.

Les scripts sont placés après le bouton dans le code HTML, donc les éléments cibles existent déjà lorsque cet exemple s'exécute. Si rien ne change, vérifiez la demande CDN et les erreurs de la console dans les outils de développement du navigateur, et comparez les ID des éléments avec les sélecteurs. Lors de l'adaptation de cela à un thème WordPress, évitez de charger la bibliothèque deux fois et vérifiez si $ fait référence à jQuery sous sa configuration noConflict.

Exemple React : mettez à jour l'état pour changer l'interface

Cet exemple d'apprentissage utilise le modèle JavaScript React de Vite. Vite fournit un serveur de développement et transforme et construit les fichiers sources. Node.js exécute ces outils sur votre ordinateur, et npm installe des packages et lance des commandes de projet. Installez une version prise en charge à long terme (LTS) de Node.js qui répond aux exigences de démarrage avec Vite. En octobre 2026, le guide indique Node.js 20.19+ ou 22.12+ ; vérifiez également les exigences supplémentaires du modèle généré.

1. Ouvrez un terminal dans le dossier où vous souhaitez créer le projet. Assurez-vous qu'un dossier portant le même nom n'existe pas déjà.
2. Exécutez les commandes ci-dessous pour créer le modèle JavaScript react et installer ses packages.

npm create vite@latest react-counter -- --template react --no-interactive
cd react-counter
npm install

Lors du premier lancement, npm peut vous demander de confirmer l'installation de l'outil de scaffolding. Après l'installation, remplacez le contenu de src/App.jsx par le code suivant. label est une prop fournie par le parent, et count est un état retenu par le composant.

import { useState } from 'react';

function Counter({ label }) {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(previousCount => previousCount + 1);
  }

  return (
    <main className="counter">
      <h1>{label}</h1>
      <p>Click count: <span aria-live="polite">{count}</span></p>
      <button type="button" onClick={handleClick}>Add 1</button>
    </main>
  );
}

export default function App() {
  return <Counter label="React counter" />;
}

Utilisez le code d'entrée suivant dans src/main.jsx. createRoot connecte l'interface React à l'élément HTML avec l'ID root, et index.css fournit les styles.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Remplacez src/index.css par le CSS ci-dessous pour correspondre à l'exemple jQuery. Le App.jsx de remplacement n'importe pas App.css, donc les styles par défaut du composant du modèle n'interfèrent pas avec cette mise en page.

body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }

Le index.html du projet doit contenir <div id="root"></div> et le script du module qui charge src/main.jsx. Conservez cette structure issue du modèle Vite et utilisez lang="en" pour le document en anglais. Démarrez le serveur de développement :

npm run dev

Ouvrez l'adresse locale affichée dans le terminal. Il s'agit généralement de http://localhost:5173, mais un port différent peut être utilisé si ce port est occupé. Arrêtez le serveur avec Ctrl+C dans le terminal. Si les modifications n'apparaissent pas, vérifiez que vous avez enregistré le fichier et que vous travaillez dans le projet correct. Les erreurs JSX apparaissent dans le terminal ou dans l'affichage des erreurs du navigateur.

Le gestionnaire React ne sélectionne pas l'élément numérique et ne remplace pas son texte. L'expression JSX {count} connecte la sortie à l'état, et setCount demande un nouvel état. Dans les deux exemples, le rechargement de la page réinitialise le compteur à 0 car aucun stockage n'est implémenté. Ces exemples illustrent les schémas de mise à jour ; ils ne constituent pas un test comparatif de performances.

Quand devriez-vous choisir React ou jQuery ?

Ajouter une petite fonctionnalité à une page existante

Un bouton qui bascule un élément ou un petit menu peut être simple avec jQuery. Si la page existante dépend déjà de jQuery, conserver cette structure peut réduire l'ampleur du changement. Il faut également considérer si les API DOM standard sont suffisantes. Une nouvelle dépendance n'est pas nécessaire pour chaque petite interaction.

Construire une interface avec des états connectés

Le modèle de composants et d'états de React mérite d'être considéré lorsque les mêmes données affectent une liste de produits, des filtres et des totaux de panier, ou lorsque des interfaces similaires apparaissent de manière répétée. Vous devez néanmoins décider quel composant possède chaque état et quand les données du serveur doivent être actualisées. Adopter React seul ne garantit pas un bon design.

Ajouter React à une partie d'un site existant

Vous n'avez pas besoin de reconstruire tout le site pour utiliser React. Vous pouvez monter un composant à l'intérieur d'un élément spécifique et conserver le reste de la page sous sa forme existante. Le guide officiel pour ajouter React à un projet existant décrit la configuration et le champ d'application.

Si React et jQuery partagent une page, donnez-leur des limites claires pour la gestion du DOM. Ajouter ou supprimer arbitrairement des enfants gérés par React peut désynchroniser le DOM réel par rapport à la vue qu'en a React. Un plugin qui manipule le DOM a besoin d'une intégration qui gère son initialisation et son nettoyage dans le cycle de vie approprié. Consultez les recommandations de React sur la modification du DOM qu'il gère pour ces limitations.

Avant d'adopter un outil, considérez la complexité de l'état de l'interface, les composants que vous pouvez réutiliser, l'expérience de votre équipe en JavaScript, ainsi que la configuration du développement et du déploiement. Une petite page avec une dépendance jQuery existante a des besoins différents d'une nouvelle application interactive. Après avoir appris les bases de HTML, CSS et JavaScript, exécuter ces compteurs fournit une comparaison concrète entre la modification directe des éléments et la description d'une interface à travers l'état.