Apprendre React
Décrire l’UI

JavaScript dans JSX grâce aux accolades

JSX vous permet d’écrire du balisage similaire à HTML au sein de votre fichier JavaScript, ce qui regroupe la logique et le contenu associés dans un même endroit. Vous voudrez régulièrement ajouter un peu de logique JavaScript dans votre balisage, ou y référencer une propriété dynamique. Dans de tels cas, vous utiliserez des accolades dans votre JSX pour y « ouvrir une fenêtre » vers le monde JavaScript.

Vous allez apprendre

  • Comment passer des chaînes de caractères grâce aux guillemets
  • Comment référencer une variable JavaScript dans du JSX grâce aux accolades
  • Comment appeler une fonction JavaScript dans du JSX grâce aux accolades
  • Comment utiliser un objet JavaScript dans du JSX grâce aux accolades

Passer des chaînes de caractères grâce aux guillemets

Lorsque vous voulez passer une valeur textuelle fixe à un attribut en JSX, vous l’entourez d’apostrophes (') ou de guillemets (") :

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

Dans cet exemple, "https://i.imgur.com/7vQD0fPs.jpg" et "Gregorio Y. Zara" sont passées en tant que chaînes de caractères.

Mais comment faire pour spécifier dynamiquement les textes pour src ou alt ? Vous pouvez utiliser une valeur JavaScript en remplaçant les guillemets (") par des accolades ({ et }) :

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

Remarquez la différence entre className="avatar", qui spécifie une classe CSS "avatar" pour arrondir l’image, et src={avatar} qui lit la valeur de la variable JavaScript avatar. En effet, les accolades vous permettent de mettre du JavaScript directement dans votre balisage !

Les accolades : une fenêtre vers le monde JavaScript

JSX n’est qu’une façon particulière d’écrire du JavaScript. Vous pouvez donc y utiliser du JavaScript directement — dans des accolades { }. L’exemple ci-dessous commence par déclarer le nom du scientifique dans name, puis l’incorpore dans le <h1> grâce aux accolades :

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>Liste des tâches de {name}</h1>
  );
}

Essayez de modifier la valeur de name de 'Gregorio Y. Zara' vers 'Hedy Lamarr'. Vous voyez comme le titre de la liste change ?

N’importe quelle expression JavaScript fonctionnera au sein des accolades, y compris des appels de fonction comme formatDate() :

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'fr-FR',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>Liste de tâches pour {formatDate(today)}</h1>
  );
}

Où utiliser les accolades

Vous ne pouvez utiliser des accolades qu’à deux endroits dans JSX :

  1. Comme texte directement au sein d’une balise JSX : <h1>Liste de tâches de {name}</h1> fonctionne, mais pas <{tag}>Liste de tâches de Gregorio Y. Zara</{tag}>.
  2. Comme attributs juste après le symbole = : src={avatar} lira la variable avatar, mais src="{avatar}" passera juste le texte "{avatar}".

« Double accolades » : les CSS et autres objets dans JSX

En plus des chaînes de caractères, nombres et autres expressions JavaScript, vous pouvez même passer des objets dans JSX. Les littéraux objets sont délimités par des accolades, comme par exemple { name: "Hedy Lamarr", inventions: 5 }. Du coup, pour passer un littéral objet en JSX, vous devez l’enrober par une autre paire d’accolades : person={{ name: "Hedy Lamarr", inventions: 5 }}.

Vous rencontrerez peut-être ça pour des styles en ligne en JSX. React n’exige pas que vous utilisez des styles en ligne (les classes CSS marchent très bien la plupart du temps). Mais lorsque vous en avez effectivement besoin, vous passez un objet à l’attribut style :

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Améliorer le visiophone</li>
      <li>Préparer les cours d’aéronautique</li>
      <li>Travailler sur un moteur à alcool</li>
    </ul>
  );
}

Essayez de modifier les valeurs de backgroundColor et color.

On peut mieux voir l’objet JavaScript au sein des accolades lorsqu’on l’écrit comme ceci :

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

La prochaine fois que vous verrez {{ et }} dans du JSX, sachez que ce n’est rien de plus qu’un littéral objet dans des accolades JSX !

Piège

Les propriétés style en ligne sont écrites en casse Camel. Par exemple, le HTML <ul style="background-color: black"> s’écrirait <ul style={{ backgroundColor: 'black' }}> dans votre composant.

Amusons-nous avec les objets JavaScript et les accolades

Vous pouvez placer plusieurs expressions dans un même objet, et les référencer dans votre JSX au sein de vos paires d’accolades :

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>Liste des tâches de {person.name}</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Améliorer le visiophone</li>
        <li>Préparer les cours d’aéronautique</li>
        <li>Travailler sur un moteur à alcool</li>
      </ul>
    </div>
  );
}

Dans cet exemple, l’objet JavaScript person contient une chaîne de caractères name et un objet theme :

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

Le composant peut utiliser ces propriétés de person comme ceci :

<div style={person.theme}>
  <h1>Liste des tâches de {person.name}</h1>

JSX est très minimal en termes de templating parce qu’il vous laisse organiser vos données et votre logique directement en JavaScript.

En résumé

Vous connaissez désormais presque tout ce que vous avez à savoir sur JSX :

  • Les attributs JSX entre apostrophes ou guillemets sont passés en tant que chaînes de caractères.
  • Les accolades vous permettent d’incorporer de la logique et des expressions JavaScript dans votre balisage.
  • Elles fonctionnent au sein du contenu d’une balise JSX ou juste après le = des attributs.
  • {{ et }} ne constituent pas une syntaxe spéciale : il ne s’agit que d’un littéral objet JavaScript au sein des accolades JSX.

Relevez ces défis

Défi 1 sur 3 ·
Réparez l’erreur

Ce code plante avec un erreur qui dit Objects are not valid as a React child (« Les objets ne sont pas des enfants React valides », NdT) :

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>Liste des tâches de {person}</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Améliorer le visiophone</li>
        <li>Préparer les cours d’aéronautique</li>
        <li>Travailler sur un moteur à alcool</li>
      </ul>
    </div>
  );
}

Pouvez-vous trouver l’origine du problème ?

PrécédentÉcrire du balisage avec JSXSuivantPasser des props à un composant

Comment trouvez-vous ces docs ?