Comprendre les bases du JSX en React

Qu'est ce que le JSX ?

Le JSX (JavaScript XML) est une extension syntaxique de JavaScript utilisée dans React. Bien que sa syntaxe ressemble à du HTML, il s'agit en réalité de JavaScript sous une forme plus expressive et lisible. Les fichiers JSX sont transformés en JavaScript pur lors de la compilation, car les navigateurs ne comprennent que le JavaScript, et non le JSX.

Lors de cette transformation, le JSX est converti en appels à la méthode React.createElement() , qui construit la structure du composant React. Cette méthode prend généralement trois arguments :

1. Le type de l'élément : Cela peut être une balise HTML comme <div>, <button>, ou bien un composant React personnalisé.
2. Les props : Ce sont les propriétés ou attributs passés à l'élément, tels que style, className, ou des événements comme onClick. Ils permettent de personnaliser le comportement et l'apparence de l'élément.
3. Les enfants : Ce sont les éléments enfants à inclure à l'intérieur du composant. Cela peut être un autre élément JSX ou un texte simple.

Voici comment JSX est traduit en JavaScript :

function MyComponent() {
  return (
    <button onClick={doSomething} style={{ color: "blue" }}>
      Click me
    </button>
  );
}

Cet élément est converti en JavaScript pur :

function MyComponent() {
  return React.createElement(
    'button',
    {
      onClick: doSomething,
      style: {color: 'blue'}
    },
    'Click me'
  );
}

{
  type: 'button',
  props: {
    onClick: doSomething,
    style: { color: 'blue' },
    children: ['Click me']
  },
  key: null,
  ref: null
}

Principes de base et bonnes pratiques en JSX

L'attribut class 

L'attribut class en HTML correspond à className en JSX.

Fermeture des balises

Toutes les balises doivent être fermées. Par exemple : <input type="text" />.

Syntaxe des attributs

La plupart des attributs utilisent une syntaxe camelCase, à l’exception des attributs qui commencent par aria ou data.

Les composants React

Un composant React est une fonction nommée en PascalCase qui reçoit un ensemble de propriétés en paramètre et retourne un élément React valide : null, undefined, boolean, number, string ou un nœud React (élément HTML).

Élément racine unique

Il ne peut y avoir qu’un seul élément racine. Entourez votre code HTML par une div ou, si vous ne souhaitez pas ajouter un élément supplémentaire à la racine, utilisez un fragment : <Fragment>...</Fragment> ou <>...</>.

export default function App() {
  return (
    <>
      <h1>Hello world !</h1>
      <div>Lorem ipsum dolor sit amet.</div>
    </>
  );
}

Échappement des variables

Toutes les variables sont automatiquement échappées. Pour désactiver cet échappement (ce qui est fortement déconseillé), utilisez l’attribut dangerouslySetInnerHTML.

const title = "Hello <strong>world</strong> !";

export default function App() {
  return (
    <h1 dangerouslySetInnerHTML={{ __html: title }}></h1>
  );
}

Application du CSS

Les styles doivent être passés sous forme d’objet et toutes les propriétés doivent être écrites en camelCase.

<h1 style={{ color: "red", backgroundColor: "green" }}>
  Hello world !
</h1>

Gestion des événements

• Pour attacher un événement à un élément, utilisez on suivi de l’événement que vous souhaitez capturer, puis passez la fonction que vous souhaitez appeler.
• Passez la fonction à l’événement sans ajouter de parenthèses (ex : handleClick et non handleClick()) pour éviter que la fonction ne soit exécutée dès que le composant est rendu.
• Lorsque vous inspectez le code HTML généré, il n’y aura aucune trace de l’événement dans le code HTML. React attache automatiquement cet événement via addEventListener.

const handleClick = () => alert("clicked");

export default function App() {
  return (
    <h1 onClick={handleClick}>Hello world !</h1>
  );
}

Clés uniques pour les listes

Chaque élément d'une liste dans React doit être doté d'une clé unique. Les clés permettent à React d'identifier de manière efficace les éléments qui ont été modifiés, ajoutés ou supprimés. Cela garantit la préservation de l'état des composants associés à ces éléments.

const todos = ["Task 1", "Task 2", "Task 3"];

export default function App() {
  return (
    <>
      <ul>
        {todos.map((todo) => (
          <li key={todo}>{todo}</li>
        ))}
      </ul>
    </>
  );
}