Comprendre les bases de React: les composants

Hello les codeurs,

Comprendre le fonctionnement de React n’est pas forcément évident pour les développeurs débutants, ni même parfois pour les confirmés! Pour autant, avoir une bonne compréhension globale du framework JS vous permettra de penser et construire des applications React efficaces et robustes. C’est pourquoi je vous propose de décortiquer les principes de base de ReactJS ensemble dans cette série d’articles.

Nous entamons le deuxième volet de cette série d’article, qui portera sur les composants React. Vous en avez surement déjà entendu parler, les applications React sont dans la plupart des cas créées par petits blocs, les composants.

Comment utiliser les composants?

Les applications React sont la plupart du temps construites en respectant une logique de composants. On va, par exemple, d’abord créer le header, puis la sidebar ou le footer, ect… Et pour chacun de ces composants on va créer un fichier qui sera importé lors de la compilation de l’application par webpack (pour plus d’information sur la question, voir mon article Pourquoi devoir compiler nos apps React). Cela nous évite de devoir réécrire plusieurs fois le même block de code et nous permet de garder notre dossier de projet propre (pas de fichier de 3000 lignes). Les composants vont pouvoir être créés de deux manières: en créant une fonction et en créant une classe.

Création d’un composant fonctionnel

La création de composants React fonctionnels est relativement simple à prendre en main:

// On crée le composant
function MonComposant() {
  return (
    <div>Ceci est mon composant!</div>
  )
}

Et voilà ! On a un composant utilisable dans notre application React. En effet, un composant React fonctionnel est tout simplement une fonction qui va retourner un bloc de JSX.

// On peut désormais utiliser notre composant dans un autre composant
const Container = () => {
  return (
    <div className="container">
      <MonComposant />
    </div>
  )
}

Cette manière de créer un composant est la plus efficace et la plus simple. Mais dans certains cas, on va avoir besoin d’utiliser les fonctionnalités apportées par les composants créés via la création d’une classe Javascript. Ces composants sont appelés composants “stateful” ou à état en français.

Composants créé avec une classe javascript

Un composant React créé avec une classe javascript va nous permettre d’accéder à de nombreuses fonctionnalités bien pratiques. Voyons tout d’abord comment créer un composant de ce type:

class MonComposant extends React.Component {
  render() {
    return (
      <div>Ceci est mon composant!</div>
    )
  }
}

Oulà ! Pour les débutants, cela fait beaucoup de nouveauté d’un coup. Décortiquons ensemble ce qu’il se passe dans ce bloc de code.

Un composant héritier de React.Component

On voit premièrement que l’on va déclarer notre composant comme étant une classe via l’invocation class. Le mot clé extends va nous permettre de créer un enfant d’une classe déjà existante. Dans notre cas, le parent de notre composant sera la classe Component, provenant de la librairie ReactJS, d’où l’invocation class MonComposant extends React.Component. Concrètement, on va créer une classe / un composant appelé MonComposant qui aura toutes les caractéristiques d’un Component React.

Le contenu de notre composant

À l’intérieur de notre composant, on a donc la méthode render(), qui va être héritée de la classe Component React. Cette méthode sera appelée à chaque fois que notre composant sera affiché dans notre application, ou à chaque fois que notre composant est rafraichi ou “re-rendered” (pour mieux comprendre le système de rafraichissement ou re-rendering de React.
On voit donc que notre méthode render(), comme pour le composant fonctionnel, va simplement retourner un bloc de JSX. Mais du coup quel est l’intérêt du composant “stateful”? Et bien ce dernier va nous permettre d’utiliser le “state” du composant, ainsi que plusieurs méthodes liées au “life-cycle” ou cycle de vie du composant (qui lui seront d’ailleurs passée avec extends React.Component).

On a donc vu que les composants sont l’unité de construction de nos applications React. On peut distinguer les composants fonctionnels, des composants “stateful”, créés à l’aide d’une classe javascript. Nous verrons prochainement dans un article plus détaillé, les différentes méthodes, liées au cycle de vie du composant, qu’il est possible d’utiliser dans un composant “stateful”. À bientôt !

Benjamin