JSX

JSX est une syntaxe qui permet d’écrire du code HTML dans des fichiers JavaScript.

Elle est utilisée couramment dans les applications React pour créer des composants, car elle permet de mélanger facilement le code JavaScript et HTML.

JSX permet d’utiliser des expressions JavaScript et des données interpolées en utilisant des accolades « {} » pour insérer du code JavaScript dans du code JSX.

import React from 'react';

function MyComponent(props) {
  const title = "Mon titre";
  const description = "Ceci est une description.";
  const currentDate = new Date();
  const currentYear = currentDate.getFullYear();

  return (
    <div className="my-component">
      <h1>{title}</h1>
      <p>{description}</p>
      <p>Année en cours : {currentYear}</p>
    </div>
  );
}

export default MyComponent;

JSX est basé sur la syntaxe XML qui exige que toute balise soit fermée.

• Correct en JSX : <input />, <img src="logo.png" />, <br />
• Erreur en JSX : <input>, <img src="logo.png">, <br>

Si vous ne fermez pas la balise, le compilateur JSX générera une erreur de syntaxe.

Documentation

HTML to JSX