"Créer un Composant React avec JSX"

Introduction

Dans cette première leçon, nous allons aborder le concept le plus fondamental de React : le composant fonctionnel. L'objectif est de vous rendre capable de créer votre premier composant React en utilisant la syntaxe JSX.

Même si notre but final est de créer des scènes 3D interactives, l'écosystème que nous allons utiliser (React Three Fiber) s'appuie entièrement sur React. Maîtriser la création de composants est donc le prérequis indispensable pour pouvoir, plus tard, déclarer des objets 3D, des lumières ou des caméras de manière structurée et réutilisable.

À la fin de cette leçon, vous saurez :

• Ce qu'est un composant React et son rôle.
• Ce qu'est la syntaxe JSX et ses règles de base.
• Comment écrire une fonction JavaScript simple qui devient un élément d'interface utilisateur.

Commençons par le commencement : qu'est-ce qu'un "composant" ?

1. Les composants : les briques de l'interface utilisateur

Imaginez une page web complexe, comme celle de Netflix. Vous pouvez y voir une grille de films, une barre de navigation, un profil utilisateur, etc. En React, au lieu de penser à tout cela comme une seule grande page HTML, on la décompose en petits éléments indépendants et réutilisables : les composants. Un bouton est un composant, une carte de film est un composant, et la grille entière est elle-même un composant qui assemble plusieurs cartes de film.

Pour une analogie simple et efficace, regardez ce court extrait vidéo.

Comme vous l'avez vu, un composant est un morceau de code autonome qui gère sa propre logique et son propre affichage.

La documentation officielle de React offre également une excellente introduction à ce concept. Je vous invite à la lire pour bien ancrer cette idée.

Il existe historiquement deux manières d'écrire des composants en React. Aujourd'hui, la méthode moderne et quasi-universelle est celle des composants fonctionnels. Il s'agit simplement d'une fonction JavaScript qui retourne la description de ce qui doit s'afficher à l'écran.

La règle d'or à retenir : un composant React est une fonction JavaScript dont le nom commence par une majuscule.

2. La syntaxe JSX : du "HTML" en JavaScript

Vous avez peut-être remarqué dans les exemples précédents une syntaxe qui ressemble à du HTML, mais qui se trouve directement à l'intérieur d'un fichier JavaScript. C'est le JSX (JavaScript XML).

Le JSX nous permet de décrire nos interfaces de manière déclarative et familière. Ce n'est pas du HTML standard ; c'est une extension de la syntaxe JavaScript qui est transformée en coulisses en appels de fonctions JavaScript pures par des outils comme Vite ou Webpack.

Pour bien l'utiliser, il y a quelques règles essentielles à connaître. La vidéo suivante, très complète, les détaille parfaitement.

Pour résumer les règles fondamentales du JSX :

1. Un seul élément racine : Un composant doit retourner un seul élément. Si vous avez plusieurs éléments au même niveau, vous devez les envelopper dans une balise parente (comme une <div>) ou dans un Fragment React (<>...</>).
2. Fermeture des balises : Toute balise doit être fermée. Pour les balises qui n'ont pas de contenu, comme <img> ou <br>, vous devez utiliser la syntaxe auto-fermante : <img />, <br />.
3. Attributs en camelCase : Les attributs HTML composés de plusieurs mots, comme class ou onclick, s'écrivent en camelCase en JSX : className, onClick. C'est parce que class est un mot-clé réservé en JavaScript.
4. Les accolades {} pour le JavaScript : Pour insérer une variable, le résultat d'une fonction, ou toute autre expression JavaScript dans votre JSX, vous devez l'entourer d'accolades.

3. Créons notre premier composant

Maintenant que nous avons vu la théorie, mettons-la en pratique. Nous allons suivre les étapes pour créer un composant simple.

La documentation de React explique cela de manière très claire. Suivons leur guide.

Exercice pratique

Créons un fichier nommé Avatar.jsx et écrivons notre premier composant. Ce composant affichera simplement une image et un nom.

// Dans un fichier nommé Avatar.jsx

// Étape 1 : On définit la fonction avec une majuscule
function Avatar() {
  const user = {
    name: "Ada Lovelace",
    imageUrl: "https://i.imgur.com/YfeOqp2s.jpg",
    imageSize: 90
  };

  // Étape 2 : On retourne du JSX
  // Notez l'usage de <>...</> pour retourner plusieurs éléments
  // et des {} pour injecter les variables JS
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo de ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
          borderRadius: '50%'
        }}
      />
    </>
  );
}

// Étape 3 : On exporte le composant pour pouvoir l'utiliser ailleurs
export default Avatar;

Pour utiliser ce composant, dans un autre fichier (par exemple, App.jsx), il vous suffirait de l'importer et de l'utiliser comme une balise HTML :

// Dans un fichier nommé App.jsx
import Avatar from './Avatar.jsx';

export default function App() {
  return (
    <div>
      <Avatar />
    </div>
  );
}

Conclusion

Félicitations ! Vous avez couvert les concepts les plus fondamentaux de React.

Voici les points clés à retenir :

• Composants : Les applications React sont construites en assemblant des composants, qui sont des morceaux d'UI réutilisables et indépendants.
• Composants fonctionnels : Ce sont des fonctions JavaScript qui :
  1. Commencent par une lettre majuscule.
  2. Retournent du balisage JSX.
• JSX : Une syntaxe qui mêle HTML et JavaScript. Elle a des règles strictes : un seul élément racine, toutes les balises doivent être fermées, et les attributs sont en camelCase. Les accolades {} sont la porte d'entrée pour intégrer de la logique JavaScript dans votre affichage.

Vous avez maintenant la base nécessaire pour la suite. Un composant qui affiche des informations statiques, c'est bien, mais la véritable puissance de React réside dans l'interactivité.

Dans la prochaine leçon, nous verrons comment donner une "mémoire" à nos composants avec le hook useState. Cela nous permettra de réagir aux actions de l'utilisateur et de mettre à jour l'interface, un pas de plus vers les scènes 3D dynamiques.