Premier composant React

Introduction

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.

Un... dumb component ?

Un dumb component est un composant React qui ne contient pas de logique.
Enfin si, il peut en contenir (mais rien de foufou), son rôle est de simplement afficher des données.

En gros :

Il ne fait que de l'affichage
Il ne fait pas de calculs
Il ne fait pas de requêtes HTTP

⚙️ 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 étend 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 !

Button.jsx
import React from 'react';

export const 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 librairie React (ligne 1)
On crée une fonction fléchée 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 !

App.jsx
import React from 'react';

import { Button } from './Button';

export const 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 :

App.jsx
import React from 'react';

import { Button } from './Button';

export const App = () => {
  const handleClick = () => console.log('Je suis cliqué !');

  return (
    <div>
      <h1>Mon premier composant React</h1>
      <Button onClick={handleClick}>
        Clique-moi !
      </Button>
    </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 ?

JavaScript
TypeScript

Button.jsx
import React from 'react';

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

Button.tsx
import React from 'react';

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

export const 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.

Le JavaScript inline, c'est pas bien !

Tu as totalement raison ! On recommande effectivement de ne pas faire du JS inline dans notre HTML et de privilégier un fichier distinct pour notre JavaScript.
Et donc tu sais déjà qu'on va préférer l'utilisation des addEventListener 😏

... cependant ici, on ne fait pas du HTML mais du JSX, et c'est une autre histoire !

🖇️ 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.

Plus d'informations sur les mots-clés protégés

React comprendra ces mots clés au sein des composants, cependant il va générer un avertissement dans la console du navigateur pour te prévenir que tu utilises un mot-clé protégé qui est "ambigu".

Cependant, certaines bibliothèques qui utilisent le JSX, comme SolidJS par exemple, utilisent ces mots-clés protégés au sein des composants. Ca ne veut pas dire que c'est "bien" ou "pas bien", mais qu'il faut être conscient de ce que l'on fait et de comment est interprété notre code par la bibliothèque 😉

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 ! 🚀

Introduction​

⚙️ Syntaxes pour créer un composant​

👷 Création du composant​

🧩 Utilisation du composant​

📦 Props​

🖇️ Les différentes props​

🔒 Mots clés protégés​

👂 Écouteurs d'événements​

Conclusion​