Le pont entre JSX et la logique JavaScript

Nous avons vu que JSX permet d'écrire une structure de type HTML dans JavaScript. Cependant, l'intérêt principal de React est de créer des interfaces utilisateur dynamiques, dont le contenu change en fonction des données ou des interactions. Comment alors injecter cette dynamique, cette logique JavaScript, au sein de la structure déclarative de JSX ? La réponse réside dans une syntaxe simple et puissante : les accolades `{}`.

Les accolades agissent comme une "fenêtre" permettant d'échapper temporairement du contexte JSX pour évaluer une expression JavaScript. Tout ce qui se trouve à l'intérieur des accolades est traité comme du JavaScript standard, et le résultat de cette évaluation est ensuite inséré à cet endroit dans le rendu final. Cette fonctionnalité est absolument fondamentale pour rendre vos composants React dynamiques et interactifs.

Utiliser les accolades `{}` : Exemples courants

Les accolades permettent d'insérer pratiquement n'importe quelle expression JavaScript valide. Voici quelques cas d'utilisation courants :

• Afficher des variables : C'est l'usage le plus simple. Vous pouvez afficher le contenu de variables ou de constantes.

const nomUtilisateur = "Alice";
const nombreMessages = 5;

const Salutation = () => {
  return (
    

      
Bonjour, {nomUtilisateur} !
      
Vous avez {nombreMessages} nouveaux messages.
    
  );
};

• Accéder aux propriétés d'un objet : Vous pouvez utiliser la notation pointée ou par crochets pour accéder aux propriétés.

const produit = {
  nom: "Ordinateur Portable",
  prix: 1200,
  devise: "€"
};

const AffichageProduit = () => {
  return (
    

      
{produit.nom}
      
Prix : {produit.prix} {produit['devise']}
    
  );
};

• Appeler des fonctions : Vous pouvez appeler une fonction et afficher sa valeur de retour.

function formaterDate(date) {
  return date.toLocaleDateString('fr-FR');
}

const aujourdhui = new Date();

const DateDuJour = () => {
  return 
Date : {formaterDate(aujourdhui)}
;
};

• Effectuer des opérations : Des calculs mathématiques, des concaténations de chaînes, etc.

const quantité = 3;
const prixUnitaire = 10;

const Total = () => {
  return 
Total : {quantité * prixUnitaire} €
;
};

• Utiliser des opérateurs ternaires pour du rendu conditionnel simple : L'opérateur ternaire (`condition ? valeurSiVrai : valeurSiFaux`) est une expression et peut donc être utilisé directement dans JSX.

const estConnecte = true;

const StatutConnexion = () => {
  return (
    

      Statut : {estConnecte ? "Connecté" : "Déconnecté"}
    
  );
};

• Utiliser `map()` pour afficher des listes (aperçu) : La méthode `map()` des tableaux retourne un nouveau tableau, ce qui est une expression valide. React peut rendre des tableaux d'éléments JSX.

const couleurs = ["Rouge", "Vert", "Bleu"];

const ListeCouleurs = () => {
  return (
    

      {couleurs.map(couleur => 
{couleur}
)}
    
  );
}; // Note: l'attribut 'key' est important pour les listes, nous y reviendrons.

Ce qui n'est pas une expression (et ne va pas dans `{}`)

Il est important de noter que vous ne pouvez insérer que des expressions JavaScript à l'intérieur des accolades, c'est-à-dire du code qui produit une valeur. Les instructions JavaScript (statements), comme les déclarations `if/else`, les boucles `for` ou `while`, ou les déclarations de variables (`let`, `const`, `var`), ne peuvent pas être utilisées directement à l'intérieur des accolades `{}` dans JSX.

// INCORRECT : Une instruction if dans JSX
const MauvaisExemple = () => {
  return (
    

      {/* Ceci ne fonctionne pas */}
      {/* { 
        if (quelqueChose) {
          return 
Vrai
;
        } else {
          return 
Faux
;
        }
      } */}
    
  );
};

Pour intégrer une logique plus complexe comme des conditions `if/else` ou des boucles, vous devez effectuer cette logique en dehors de l'expression JSX retournée, en stockant le résultat dans une variable, ou utiliser des techniques spécifiques comme le rendu conditionnel (que nous verrons plus tard) ou l'appel à des fonctions d'aide.

Types de valeurs et rendu

React gère le rendu des valeurs issues des expressions `{}` de manière spécifique :

• Les chaînes de caractères et les nombres sont affichés tels quels.
• Les tableaux d'éléments JSX sont rendus séquentiellement.
• `true`, `false`, `null`, et `undefined` sont des expressions valides, mais elles ne rendent rien à l'écran. C'est utile pour le rendu conditionnel (par exemple, `{condition &&

  Affiché si vrai

  }`).
• Les objets ne sont pas valides en tant qu'enfants React directement (vous obtiendrez une erreur si vous essayez de faire `{monObjet}`). Vous devez accéder à leurs propriétés ou les transformer en chaînes/nombres/éléments JSX.

Conclusion : Dynamiser JSX avec JavaScript

Les accolades `{}` sont le mécanisme essentiel qui permet de dynamiser vos composants React en intégrant la puissance des expressions JavaScript directement dans votre structure JSX. Que ce soit pour afficher des données variables, appeler des fonctions, effectuer des calculs ou implémenter une logique conditionnelle simple via l'opérateur ternaire, les accolades sont l'outil indispensable pour créer des interfaces utilisateur interactives et basées sur les données. Maîtriser leur utilisation est une étape clé dans l'apprentissage de React.