Éléments: JSX | smnarnold

JSX est une syntaxe inspirée du code HTML permettant de créer des éléments React de façon plus intuitive et lisible que lorsque l'API de React est utilisé directement.

Par exemple, le code suivant écrit avec l'API React directement:

const element = React.createElement('div', 
  { 
   className: 'blue', 
   children: 'Marshall Mathers' 
  }
);

Peut être simplifié ainsi, grâce à JSX:

const element = <div class="blue">Marshall Mathers</div>

Attention, JSX n'est pas du JavaScript. Il doit donc être compilé grâce à un compilateur. Par exemple: Babel, permettant ainsi de transformer un code similaire à du HTML en du pur code JavaScript, comme dans la première version de ce code.

Expressions

Il est possible d'utiliser des expressions JavaScript à l'aide d'accolades {...}, comme suit:

const lastname = 'Mathers';
const element = <div class="blue">Marshall {lastname}</div>

Ces expressions peuvent-être plus complexe. Par exemple, une concaténation de chaines de caractères:

CodePen | smnarnold 👀

Remarquez comment le code JSX de l'élément tombe sur plusieurs lignes. Afin d'améliorer la lisibilité de cet élément, il est possible de l'écrire sur plusieurs lignes à l'aide de parenthèses (...).

Par exemple, revoici le même code, mais sur plusieurs lignes:

const firstname = 'Marshall';
const lastname = 'Mathers';

const element = (
  <div class="blue">
    {firstname + ' ' + lastname}
  </div>
);

Expressions

Fonctions

Il est possible d'utiliser le retour d'une fonction dans le cadre d'une expression.

Par exemple:

function getName(alterEgo) {
  let name = "Marshall Mathers";
  if (alterego) {
    name = "Eminem";
  }
  return name;
}

const element = (
  <div class="blue">
    {getName(true)}
  </div>
);

Attributs

Il est possible d'utiliser une expression dans le cadre d'un attribut HTML. Cependant, dans ce cas, il ne faut pas mettre les guillemets autour dudit attribut en question.

const element = <img src={url} />;

Attributs