La syntaxe JSX

La syntaxe de JSX est une syntaxe particulière de JavaScript utilisée pour développer en React (quand vous consultez la doc de React les exemples sont en JSX), c'est celle que nous allons utiliser pendant le module React.

Ce qui en JavaScript s'écrirait :

const el = React.createElement(
  'h1',
  {className: 'main'},
  'Hello, world!'
);

donne ceci en JSX :

const el = (
  <h1 className="main">
    Hello, world!
  </h1>
);

Les components

Un composant c'est un élément d'une page qui contient toutes les données, fonctions et variables dont il a besoin. Il va retourner le code JSX nécéssaire à son propre fonctionnement.

Ce code va être injecté dans une balise de la page, il doit donc renvoyer tout son code encapsulé dans une seule balise HTML.

Imaginons un composant Hello, que nous écrivons dans un fichier Hello.jsx :

const Hello = (props) => {
  return (
    <article className="heading" >
        <h1>Hello</h1>
        <p>Comment ça va ?</p>
    </article>
  )
}

export default Hello;

class étant un mot réservé du JavaScript, en JSX on écrira className pour désigner les classes HTML / CSS.

Nous appelons ensuite le composant Hello dans notre composant App :

import Hello from './Hello.jsx';

function App() {

  return (
    <Hello />
  )
}

Attributs

Pour transmettre des attributs à un composant, vous pouvez soit les transmettre directement entre guillemets simples ou doubles s'il s'agit d'une chaine de caractères, soit les transmettre entre accolade s'il s'agit d'un objet plus complexe :

<Hello className="heading" />

const myClass = { backgroundColor : 'red', color : 'blue', marginTop: 5 };

<Hello style={myClass} />

Parcourir un tableau

Pour parcourir et afficher un tableau JS dans le rendu de votre composant, vous allez evoir utiliser la méthode map sur ce tableau.

En prime React, va avoir besoin de générer une clé unique pour pouvoir se retrouver parmi les différents éléments :

const ShoppingList = (props) => {
    const items = ['Pain', 'Beurre', 'Boursin'];

    return (
        <ul>
            {items.map((item, i) => <li key={i}>{item}</li>)}
        </ul>
    )
}

Les fragments

Imaginons que nous voulions ajouter un titre à la ShoppingList de l'exemple précédent, il serait tentant d'écrire :

const ShoppingList = (props) => {
    const items = ['Pain', 'Beurre', 'Boursin'];

    return (
        <h1>Ma liste de courses</h1>
        <ul>
            {items.map((item, i) => <li key={i}>{item}</li>)}
        </ul>
    )
}

Sauf qu'en React, nous ne pouvons renvoyer qu'une seule balise qui contiendra les autres. Nous avons donc deu possibilités pour corriger. Si notre structure s'y prête nous pouvons encapsuler nos balises dans un article ou une section:

const ShoppingList = (props) => {
    const items = ['Pain', 'Beurre', 'Boursin'];

    return (
      <article>
        <h1>Ma liste de courses</h1>
        <ul>
            {items.map((item, i) => <li key={i}>{item}</li>)}
        </ul>
      </article>
    )
}

Si elle ne s'y prête pas nous pouvons utiliser les fragments React qui sont des sortes de balises virtuelles nous permettant d'en encapsuler d'autres :

const ShoppingList = (props) => {
    const items = ['Pain', 'Beurre', 'Boursin'];

    return (
      <React.Fragment>
        <h1>Ma liste de courses</h1>
        <ul>
            {items.map((item, i) => <li key={i}>{item}</li>)}
        </ul>
      </React.Fragment>
    )
}

Imbriquer des composants

Il est tout à fait possible d'imbriquer des composants (appeler un composant dans un autre) :

const ShoppingList = (props) => {
    const items = ['Pain', 'Beurre', 'Boursin'];

    return (
      <React.Fragment>
        <h1>Ma liste de courses</h1>
        <ul>
            {items.map((item, i) => <li key={i}>{item}</li>)}
        </ul>
      </React.Fragment>
    )
}

const Hello = (props) => {
  return (
    <article className="heading" >
        <h1>Hello</h1>
        <p>Comment ça va ?</p>
        <ShoppingList />
    </article>
  )
}

export default Hello;

26 January 2026