Composants en React

Qu'est-ce qu'un composant en React ?

Dans le framework React, les composants représentent des blocs de code réutilisables et indépendants. Ils constituent la structure de l'interface utilisateur (UI) d’une application. Un composant peut inclure une ou plusieurs des caractéristiques suivantes :

• Un objet state qui stocke des données pouvant varier au fil du temps.
• Un objet props qui permet de transmettre des données d'un composant parent à un composant enfant.

Composants de classe

Les composants de classe incluent un état et utilisent une méthode render() pour retourner le code JSX. Pour définir un tel composant, il faut que la classe hérite de React.Component :

import React from 'react';
class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      property1: 'Une chaîne de caractères',
      property2: 1,
      property3: true,
    };
  }

  render() {
    return 
...
;
  }
}
export default ClassComponent;

Composants fonctionnels

Les composants fonctionnels ne contiennent pas d'état et utilisent uniquement l'instruction return. Voici un exemple de leur utilisation, sans nécessité d’importation :

function FunctionComponent(props) {
  return 
...
;
}

Fonction fléchée

La fonction fléchée est une nouveauté introduite avec ES6. Ce type de fonction utilise les symboles = et > pour définir la fonction comme si c'était une variable. Dans React, il est possible de créer des composants fonctionnels en utilisant cette syntaxe :

const FunctionComponent = (props) => {
  return 
...
;
};