React - 7.2 Lire et corriger les messages d'erreur React

Quand un projet React ne compile plus, le message d'erreur indique généralement le fichier et la ligne concernés. Cette leçon reprend un exemple concret : deux sections placées l'une sous l'autre sans élément parent. Vous verrez comment lire le message, corriger le code, puis recompiler l'application.

Lire le message d'erreur

Le message désigne le fichier où l'erreur a été détectée. Dans l'exemple, il s'agit du fichier App.js. Il indique aussi un numéro de ligne, qui vous permet d'aller directement à l'endroit concerné.

Ouvrez ce fichier et observez le code à cet endroit. Dans l'exemple, deux sections se suivent sans être contenues dans un même élément.

Entourer les sections d'une div

Pour résoudre ce problème, on crée une div qui contient les deux sections. Une fois la balise ajoutée et le fichier enregistré, l'erreur disparaît et l'application se compile de nouveau.

Ce réflexe est utile dans tous les projets : un bloc affiché par React doit être contenu dans un seul élément parent.

<div>
  <section>...</section>
  <section>...</section>
</div>

Corriger une faute de frappe

Une erreur peut aussi venir d'un nom de fonction mal orthographié. La vidéo montre une fonction appelée avec un nom légèrement différent de celui déclaré. Le message indique la ligne concernée, et la correction du nom suffit à rétablir le fonctionnement.

Ne vous précipitez pas. Relisez la ligne indiquée, car la cause peut être simple : une faute de frappe, un point oublié ou un point-virgule manquant.

• Relire la ligne indiquée par le message.
• Vérifier l'orthographe des noms de fonctions.
• Chercher un point ou un point-virgule oublié.
• Enregistrer, puis vérifier que l'application se compile.

En résumé

Un message d'erreur React indique le fichier et la ligne concernés. Il faut ouvrir cet endroit, repérer le problème, puis corriger le code. Dans cette leçon, une div a suffi à regrouper deux sections, et une faute de frappe dans un nom de fonction a été corrigée.

Points clés

• Le message d'erreur indique le fichier et la ligne à examiner.
• Plusieurs éléments JSX côte à côte doivent être entourés par un seul élément parent.
• Une faute de frappe dans un nom de fonction provoque une erreur.
• Il faut relire le code avant de chercher une cause plus complexe.

Questions fréquentes

Où regarder en premier quand une erreur apparaît ?

Lisez le message et repérez le fichier et la ligne indiqués. Ouvrez ensuite cet endroit dans votre code.

Pourquoi entourer les sections avec une div ?

Les sections doivent être contenues dans un même élément parent. Sans cela, React ne peut pas les afficher ensemble.

Que faire si l'erreur semble introuvable ?

Regardez de près la ligne indiquée. La cause est souvent une faute de frappe, un point oublié ou un point-virgule manquant.