Tout savoir sur les composants React ⚛️

Les applications React sont constituées de composants.

Un composant est un élément qui possède sa propre logique - il est autonome et réutilisable - et sa propre apparence.

Grâce aux composants, il est possible de décomposer une application web en plusieurs parties, ce qui rend le code plus gérable et plus facile à entretenir.

Comment définir un composant ?

On crée un nouveau fichier et on exporte notre composant

Tout d'abord, créez un nouveau fichier dans lequel se trouvera votre composant.

Vous pouvez l'exporter de deux manières :
Soit on écrit une fonction qui contiendra notre composant, puis on l'exporte plus bas.

import React from 'react';

function MonComposant() {
// contenu de mon composant
}

export default MonComposant;

Soit on utilise la syntaxe export devant la fonction.

export function MonComposant() {
  // contenu de mon composant
}

On définit la fonction

Pourquoi les composants React commencent-ils par une majuscule ?

Ceci permet de différencier les composants des éléments HTML natifs de React.

Par exemple, la syntaxe <button></button> affichera un bouton ordinaire, tandis que <Button></Button> peut être utilisé comme un nom de composant.

Voici un exemple de composant React :

import React from 'react';

function MonComposant() {
// écrivez des instructions ici si nécessaire
const name = "Claire"
// on retourne un élément JSX représentant l'interface utilisateur
  return (
    <div>
      <h1>Je m'appelle {name} et j'adore React!</h1>
    </div>
  );
}

export default MonComposant;

Comment organiser mes composants correctement ?

Le nesting (ou imbrication)

L'imbrication consiste à incorporer des composants "enfants" à l'intérieur d'un composant "parent" pour créer des interfaces utilisateur complexes.

C'est une bonne pratique pour créer des composants réutilisables et faciles à maintenir.

Dans l'exemple ci-dessous, j'imbrique ChildComponent à ParentComponent grâce à des balises HTML.

import React from 'react';

function ParentComponent() {
  return (
     <div>
      <h1>Je m'appelle {name} et j'adore React!</h1>
      <ChildComponent/>
    </div>
  );
}

function ChildComponent() {
  return (
    <div>
      <p>Je suis un composant enfant.</p>
    </div>
  );
}

export default ParentComponent;

Cet exemple est court, il est donc inutile de créer deux composants distincts dans ce cas. Mais cette méthode devient très pratique quand notre code est plus long et complexe, et que l'on veut afficher de multiples éléments dans une application.

Pour aller plus loin et utiliser React de manière plus performante, je vous conseille de lire cet article sur les Hooks, qui est un autre concept central de React.