C'est quoi le JSX en React ? Guide complet pour débutant

Quand j'ai commencé React, le JSX me paraissait être de la magie noire.

Du HTML dans du JavaScript ? Comment c'est possible ? 🤔

Dans ce guide complet, on va démystifier le JSX ensemble. Tu vas comprendre :

• Ce qu'est réellement le JSX
• Comment il fonctionne sous le capot
• Pourquoi c'est juste du JavaScript
• Les bonnes pratiques à adopter

Qu'est-ce que le JSX ?

Les origines du JSX

JSX signifie "JavaScript XML". Le XML est une syntaxe qui utilise des balises (comme <div>) avec des propriétés. En fait, le HTML que tu connais est basé sur le XML !

Exemple XML :

<user>
  <name>John</name>
  <age>25</age>
</user>

Le XML est un langage de balisage qui permet généralement de définir des objets et des données.

La seule différence est que le HTML définit des balises spécifiques (<div>, <span>, etc.) alors que le XML est plus générique.

Pourquoi Facebook a créé le JSX ?

L'équipe de React chez Facebook voulait rendre la création d'interfaces plus intuitive. Le problème ? Écrire du HTML en JavaScript pur était vraiment pénible.

Avant le JSX, il fallait écrire :

import React from 'react';

const App = () => {
return React.createElement(
  'div',
  { className: 'container' },
  React.createElement('h1', null, 'Sans JSX 😢'),
  React.createElement('p', null, 'C'est pas très lisible...')
);
};

export default App;

Avec JSX, le même code devient :

import React from 'react';

const App = () => {
return (
<div className="container">
<h1>Avec JSX 😎</h1>
<p>C'est beaucoup plus clair !</p>
</div>
);
};

export default App;

Comment fonctionne le JSX ?

Mais tu te demandes du coup, comment fonctionne le JSX et pourquoi on est capable d'écrire du "HTML" dans du JavaScript ?

La transformation du JSX

Quand tu écris du JSX, il est transformé en JavaScript pur par un outil appelé Babel. Cette transformation se fait à la compilation, avant que ton code ne soit exécuté.

En résumé, quand tu écris ceci :

const App = () => (
  <div>
    <h1>Hello</h1>
  </div>
);

Babel va transformer ce code en :

const App = () =>
  React.createElement('div', null, React.createElement('h1', null, 'Hello'));

Le code JSX ne sera jamais envoyé tel quel à l'utilisateur final. C'est pour ça que tu ne le vois jamais dans le code final d'une application.

Les règles du JSX

1. Une seule racine : Chaque expression JSX doit avoir un seul élément parent.

// ❌ Incorrect
const App = () => {
  return (
    <h1>Titre</h1>
    <p>Paragraphe</p>
  );
};

// ✅ Correct
const App = () => {
  return (
    <div>
      <h1>Titre</h1>
      <p>Paragraphe</p>
    </div>
  );
};

2. Toutes les balises doivent être fermées : Même les balises auto-fermantes comme <img> doivent être fermées avec />

// ❌ Incorrect
<img src="photo.jpg">

// ✅ Correct
<img src="photo.jpg" />

3. camelCase pour les propriétés : Les attributs HTML deviennent camelCase en JSX

// ❌ Incorrect
<div class="container" onclick={handleClick}>

// ✅ Correct
<div className="container" onClick={handleClick}>

const element = document.querySelector('.my-element');
element.className = 'new-class';

Le JSX et JavaScript : Un duo puissant

La puissance du JSX vient du fait que toutes ces fonctionnalités sont simplement dérivées du JavaScript avec une règle simple : il est possible de passer du monde JavaScript au JSX en utilisant les accolades : {}

Les expressions JavaScript dans le JSX

Tu peux utiliser n'importe quelle expression JavaScript dans le JSX en utilisant les accolades {}.

const App = () => {
const user = {
  name: 'John',
  age: 25
};

const formatName = (user) => {
  return user.name.toUpperCase();
};

return (
  <div>
    <h1>{formatName(user)}</h1>
    <p>Âge: {user.age}</p>
    <p>Dans 5 ans: {user.age + 5}</p>
    <p>{user.age > 18 ? 'Majeur' : 'Mineur'}</p>
  </div>
);
};

export default App;

Les tableaux et le JSX

Le JSX gère parfaitement les tableaux, c'est ce qui rend React si puissant pour afficher des listes :

const App = () => {
const tasks = [
  { id: 1, text: 'Apprendre React' },
  { id: 2, text: 'Maîtriser le JSX' },
  { id: 3, text: 'Créer une app' }
];

return (
  <div>
    <h1>Mes tâches</h1>
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          {task.text}
        </li>
      ))}
    </ul>
    
    {/* On peut même faire des calculs ! */}
    <p>Nombre de tâches : {tasks.length}</p>
    <p>Première tâche : {tasks[0].text}</p>
  </div>
);
};

export default App;

Si les tableaux fonctionnent c'est car React.createElement accepte les tableaux :

React.createElement('div', null, ['hello', 'world']);

Les bonnes pratiques du JSX

La magie du JSX c'est qu'on peut le déclarer n'importe où et que finalement c'est juste des objets JavaScript.

1. Utiliser des composants pour organiser son code

Le JSX permet de créer des composants réutilisables :

const Button = ({ children, onClick }) => (
<button 
  onClick={onClick}
  className="bg-blue-500 text-white p-2 rounded"
>
  {children}
</button>
);

const Card = ({ title, content }) => (

<div className="rounded border p-4 shadow">
<h2>{title}</h2>
<p>{content}</p>
</div>
);

const App = () => {
return (
<div>
<Card 
      title="Mon titre" 
      content="Mon contenu"
    />
<Button onClick={() => alert('Click!')}>
Cliquez-moi
</Button>
</div>
);
};

export default App;

2. Éviter la logique complexe dans le JSX

Extrais la logique complexe dans des fonctions :

// ❌ Incorrect
return (
  <div>
    {users
      .filter((user) => user.age > 18)
      .map((user) => user.name)
      .join(', ')}
  </div>
);

// ✅ Correct
const getAdultNames = (users) => {
  return users
    .filter((user) => user.age > 18)
    .map((user) => user.name)
    .join(', ');
};

return <div>{getAdultNames(users)}</div>;

3. Utiliser les fragments

Quand tu n'as pas besoin d'une div supplémentaire :

// ❌ Div inutile
return (
  <div>
    <h1>Titre</h1>
    <p>Paragraphe</p>
  </div>
);

// ✅ Utilisation des fragments
return (
  <>
    <h1>Titre</h1>
    <p>Paragraphe</p>
  </>
);

Les fragments sont utiles car comme on l'a vu on est obligé de retourner qu'une seule racine. Les fragments permettent de créer une sorte de racine virtuelle pour le JSX mais qui ne sera pas affichée dans le résultat final.

Les cas avancés du JSX

Il y a quelques méthodes un peu plus avancées du JSX qui sont très utiles.

Les props spread

Tu peux utiliser l'opérateur spread pour passer toutes les props d'un objet :

const Input = (props) => (
<input 
  type="text"
  {...props} // Passe toutes les props
/>
);

const App = () => {
const inputProps = {
placeholder: "Écrivez ici",
onChange: (e) => console.log(e.target.value),
className: "border p-2"
};

return (
<div>
<Input {...inputProps} />
</div>
);
};

export default App;

Les children spéciaux

JSX permet aussi de passer des fonctions comme props :

const App = () => {
const handleClick = () => {
  console.log('Click!');
};

return (
<div>
<button onClick={handleClick}>
Cliquez-moi
</button>
</div>
);
};

export default App;

Les fragments

JSX permet aussi d'utiliser des fragments pour grouper plusieurs éléments sans avoir besoin d'une div supplémentaire :

const App = () => {
return (
  <>
    <h1>Titre</h1>
    <p>Paragraphe</p>
  </>
);
};

export default App;

La props children

C'est une props spéciale qui permet d'utiliser la même syntaxe que pour les éléments HTML :

<p>Je suis le children</p>

Mais nous on souhaite le faire avec nos composants custom React. Pour ça la props children vient récupérer le contenu qui est entre les balises ouvrantes et fermantes de notre élément pour l'ajouter dans cette props.

const Button = ({ children, onClick }) => (
<button onClick={onClick}>
  {children}
</button>
);

export default function App() {
return <Button onClick={() => alert('Click!')}>Cliquez-moi</Button>;
}

Conclusion

J'ai l'impression que tu es maintenant un pro de JavaScript, il est intéressant pour toi d'en savoir plus sur les listes en React ! Tu pourrais aussi apprendre React de 0 pour monter en compétence.

Mais surtout tu peux rejoindre une formation React gratuite juste ici. !