Premier composant React

Rentrons maintenant dans le vif du sujet en créant notre premier composant React !
Dans cet article, on va faire un composant très simple : un dumb component qui sera tout simplement un bouton.

⚙️ Syntaxes pour créer un composant

Il existe plusieurs façons de créer un composant React.

La plus simple est de créer une fonction qui retourne du JSX, mais il est aussi possible de créer une classe qui hérite React.Component.

Cependant, on ne va pas s'attarder sur la déclaration de composants dans des classes.

Pourquoi ? Déjà parce que la documentation officielle recommande désormais de définir des composants en tant que fonctions, mais surtout parce que c'est plus simple et plus lisible ! 🚀

👷 Création du composant

Allez c'est parti, occupons-nous de notre premier composant React !

import React from "react";

export function Button() {
  return <button>Click me</button>;
}

... et c'est tout ! 🎉
On a créé notre premier composant React, c'est pas beau ça ?

Bon évidemment, il reste extrêmement sommaire et n'a pas d'intérêt à l'heure actuelle, mais c'est un bon début !

Avant d'aller plus loin, décortiquons un peu ce code :

• On importe React depuis la bibliothèque React (ligne 1)
• On crée une fonction Button (lignes 3 à 5)
  • Cette fonction retourne un élément JSX <button>Click me</button>

🧩 Utilisation du composant

C'est bien beau d'avoir un composant, mais maintenant il faut l'utiliser !

import { Button } from "./Button";
import React from "react";

export function App() {
  return (
    <div>
      <h1>Mon premier composant React</h1>
      <Button />
    </div>
  );
}

On importe notre composant Button (ligne 3) et on l'utilise dans notre composant App (ligne 9).

Rien de bien sorcier, n'est-ce pas ? 😊

Mais maintenant, on va vouloir donner un peu plus de vie à notre bouton...
Parce que là pour le coup, il est inutile. 😅

📦 Props

Les props (pour properties) sont des arguments que l'on peut passer à un composant React.
Il s'agit en quelque sorte des paramètres d'une fonction.

Imaginons ici que l'on veut rajouter :

• Un texte au bouton
• Une action à effectuer lorsqu'on clique dessus

Avant de t'expliquer comment faire, je vais te montrer ce que ça donne pour son utilisation :

import { Button } from "./Button";
import React from "react";

export function App() {
  function handleClick() {
    console.log("Je suis cliqué !");
  }

  return (
    <div>
      <h1>Mon premier composant React</h1>
      <Button onClick={handleClick} />
    </div>
  );
}

Voyons un peu ce qui change !

• Fonction handleClick qui affiche un message dans la console (ligne 6)
• On passe la fonction handleClick en tant que prop onClick à notre composant Button (ligne 11)
• On passe le texte Clique-moi ! entre la balise ouvrante et fermante de notre composant Button (ligne 12)

Mais alors, comment on fait pour récupérer ces props dans notre composant Button ?

import React from "react";

export function Button(props) {
  return <button onClick={props.onClick}>{props.children}</button>;
}

import React from "react";

type ButtonProps = {
  onClick: () => void;
  children: React.ReactNode;
};

export function Button(props: ButtonProps) {
  return <button onClick={props.onClick}>{props.children}</button>;
}

Comme tu peux voir, on récupère les props passées à notre composant Button en tant que paramètre de la fonction.

Mais tu peux également remarquer qu'il y a une propriété children qui n'est pas passée de la même manière que onClick.

C'est totalement normal ! children est une prop spéciale qui contient tout ce qui se trouve entre les balises ouvrante et fermante du composant.

🖇️ Les différentes props

Il existe plusieurs props que l'on peut passer à un composant React :

• children : Contient tout ce qui se trouve entre les balises ouvrante et fermante du composant
• Les autres props : Tout ce qui est passé en dehors des balises ouvrante et fermante du composant

Alors évidemment, cette explication est très réductrice, mais on va s'en contenter pour le moment.

Mais tu te doutes bien qu'il existe des props spécifiques à certains éléments HTML qui peuvent être passées à un composant React.

🔒 Mots clés protégés

En HTML, il existe des attributs qui sont utilisés dans certains éléments HTML. Cependant, comme ici on ne fait pas du HTML mais du JSX, on ne va pas pouvoir les utiliser tels quels.

Pour te donner un exemple concret, si tu veux ajouter une classe CSS à un élément, tu ne pourras pas utiliser l'attribut class mais className.

Mais alors, pourquoi ?

Comme le JSX reste avant tout du JavaScript, on ne peut pas utiliser des mots-clés réservés comme class, for, default, etc.

On va donc utiliser des noms d'attributs qui sont similaires à ceux du HTML, mais qui sont adaptés pour le JSX.

• class devient className (pour les classes CSS)
• for devient htmlFor (pour les labels)
• default devient defaultValue (pour les champs de formulaire)

Et il en existe bien d'autres, mais on va s'arrêter là pour le moment ! 😊

👂 Écouteurs d'événements

Il existe également des attributs spécifiques pour les écouteurs d'événements.
Tu as notamment pu déjà faire la rencontre de onClick, mais il en existe bien d'autres !

Il s'agit de la syntaxe à adopter avec React pour ajouter des écouteurs d'événements à des composants JSX, et non pas d'utiliser addEventListener directement dans le JavaScript 😉

J'aimerai beaucoup pouvoir te donner une liste d'exemples d'écouteurs d'événements, mais il y en a tellement que je ne pourrais pas tous les citer ici.
La forme étant toujours la même, tu peux facilement savoir comment les écrire !

La forme est simple :

• Préfixe : on
• Événement : nom de l'événement en camelCase

Par exemple :

• click => onClick
• change => onChange
• submit => onSubmit
• mouseenter => onMouseEnter
• mouseleave => onMouseLeave

Et si tu cherches une liste complète des écouteurs d'événements, je t'invite à tout simplement consulter le MDN Web Docs qui est une mine d'or pour tout ce qui est lié au développement web !

Au début, on peut trouver ça un peu déroutant puisqu'on va naturellement les associer à du HTML, mais il faut se rappeler qu'on est dans du JSX (oui, j'insiste beaucoup là-dessus !).

Conclusion

Et voilà, on a créé notre premier composant React !
On a même rapidement vu comment passer des props à un composant et comment les récupérer.

Et si pour le prochain article, on parle un peu des states pour rajouter un peu d'intéractivité à nos composants ?
Parce que c'est déjà cool ce qu'on a pu faire, mais on peut faire tellement plus avec React ! 🚀