Hello les codeurs, L'utilisation du JSX dans la construction de nos applications React est presque incontournable. En effet, ce langage dérivé du Javascript donne accès à de nombreuses features bien pratiques ce qui a fait qu'il a été plébiscité par une majorité de la communauté de développeurs ReactJS. Voyons ensemble en détails quelles sont ses fonctionnalités et comment on les utilise dans le développement d'applications.

Utilisation de blocs de JSX

L'utilisation du JSX permet de créer directement des blocs ressemblant fortement à du code HTML. Ces blocs de JSX reprennent à quelques différences près la même syntaxe: 
const MonComposant = () => (
  <article className="article">
    <div className="article__title">Mon titre</div>
    <div className="article__body">Mon texte</div>
  </article>
)
On retrouve les principaux éléments du code HTML, à ceci près de la modification de certains attributs de balises. Par exemple, on utilise ici l'attribut className au lieu de class. Ceci est dû au fait que quand le JSX est compilé, certains mot clés vont être réservés et donc pas utilisables dans notre bloc de code. L'intérêt d'utiliser ces blocs de JSX est que l'on va pouvoir les manipuler très facilement, pour par exemple afficher ou cacher des éléments, et ce notamment avec la notation "{ }".

La notation "{ }"

La notation accolade ouvrante / accolade fermante, ou "{ }" est une notation permettant de faire tourner une expression javascript dans un bloc de code JSX: 
// On crée une variable dans laquelle on stocke une
// chaine de caractères
const name = "Toto";

// On utilise cette variable dans notre bloc de JSX
const monBlocDeJSX = <div>Bonjour, {name} !</div>;
// => "Bonjour, Toto !" est affiché!
Comme on peut le voir sur l'exemple ci-dessus, on crée d'abord une variable dans laquelle on va stocker notre chaine de caractère "Toto". On va directement pouvoir l'utiliser et l'afficher dans notre bloc de JSX grâce à la notation "{ }". C'est une fonctionnalité extrêmement puissante car on va pouvoir l'utiliser avec des chaines de caractères, des nombres et même des fonctions ! Un rapide exemple: 
// On crée une fonction toute simple qui va additionner
// les nombres qu'on lui passe
const addition = (nombre1, nombre2) => {
  return nombre1 + nombre2
};
// On appelle la fonction en utilisant la notation "{ }"
const monBlocDeJSX = <div>1 ajouté à 2 est égal à {addition(1, 2)} !</div>;
// => "1 ajouté à 2 est égal à 3!" est affiché!
On voit donc que la fonction que l'on a créée est bien appelée en utilisant la notation "{ }" dans notre bloc de JSX.

En résumé

On a vu ensemble que les principales features du JSX sont l'utilisation de blocs JSX et de la notation "{ }". Je vous conseille de vous y mettre au plus tôt si vous n'avez pas encore eu l'occasion; vous vous rendrez compte très rapidement de sa puissance. Benjamin