JSX

Une introduction à JSX

Si vous avez déjà implémenté une application Web avec le framework "React.js", vous avez peut-être remarqué que la syntaxe pour écrire les composants React.js est un peu différente de celle de votre autre code Javascript. Bien que pour la plupart identiques, les composants React sont décrits via des crochets spéciaux, les crochets angulaires gauche et droit. Ils ressemblent à de la syntaxe pour XML, le "langage de balisage extensible". Dans React.js, cette syntaxe est également appelée "JSX", ce qui signifie "Javascript XML".

L'objectif principal de cette syntaxe est de simplifier l'écriture de code React. Le code JSX ne peut pas être interprété par les JVM, il doit donc être compilé en code Javascript réel avant utilisation - une tâche généralement effectuée par des bundlers tels que Babel ou Webpack.

Le code React que vous n'avez probablement jamais écrit

Cela signifie effectivement qu'il est très probable que vous n'ayez jamais écrit de tels « vrais » composants React.js générés à partir de votre code JSX. Mais ne vous inquiétez pas, cela peut être fait facilement sans trop de tracas. En fait, vous pouvez même écrire une application Web React complète sans jamais utiliser JSX. L'extrait de code suivant montre à quoi ressemble un véritable composant React.js avec uniquement Javascript.

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

Vous pouvez même l'essayer dans votre navigateur, sans installer de logiciel ! Faites défiler jusqu'à la fin de cette page pour utiliser le lien dans l'addenda.

Utiliser JSX pour simplifier votre code

Comme vous pouvez le voir, le principal avantage de la syntaxe JSX est de rendre votre code lié à l'interface utilisateur plus simple à écrire et plus facile à distinguer des autres parties de votre application, car la syntaxe de type XML fournit une indication claire du domaine du code.

Une autre grande caractéristique de JSX est qu'il ne devient qu'une expression après l'étape de compilation. Vous pouvez donc l'utiliser dans des instructions if-else ou même stocker son résultat dans une variable. Et comme les composants React.js peuvent contenir des expressions en tant qu'enfants eux-mêmes, vous pouvez écrire du code d'interface utilisateur hautement composable !

Une importation par défaut pour chaque fichier JSX

Vous avez peut-être remarqué que chaque fichier JSX dans divers didacticiels, guides et très probablement même votre propre code contient l'importation par défaut de la bibliothèque React, même si vous ne pouvez jamais appeler cette variable importée directement. La raison en est qu'après l'étape de compilation, chaque expression JSX devient un appel "React.createElement", comme vous l'avez vu dans l'exemple de code précédent. Par conséquent, il est nécessaire que la variable « React » de l'importation par défaut soit incluse dans la portée de chaque fichier.

Ressemble à du HTML, mais ne l'est pas

Une contrainte clé lors du codage en syntaxe JSX est la notation du nom de votre composant. Pour que le bundler identifie correctement vos composants, ils doivent être uniques par rapport aux balises HTML standard, car la syntaxe est la même.

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

Il est donc obligatoire de coder les éléments JSX toujours en casse de phrase, ce qui signifie que la première lettre doit être en majuscule.

La variante dactylographiée

Vous avez peut-être remarqué que de nombreux projets utilisent également TSX comme suffixe de fichier pour leurs fichiers de composants React.js. Ceci est juste une extension du JSX d'origine pour être compatible avec Typescript. Les fichiers TSX vous permettent d'écrire du code Typescript avec des composants de notation JSX.

Juste le début

Cet article a fourni une introduction simple à JSX pour le codage des composants React. Le principal avantage est une syntaxe très concise qui semble naturelle dans un environnement Web. Vous pouvez écrire des éléments hautement composables avec très peu de code, ce qui est sans aucun doute l'un des facteurs clés de l'état actuel et populaire de React. Si vous êtes curieux, il y a beaucoup plus et d'excellents guides détaillés de l'équipe React sur leur site, les liens sont dans l'addendum à la fin de cette page.