Composant

Introduction

Le composant React est la brique de base d'une application React. Apprenons comment créer un nouveau composant React et les caractéristiques des composants React dans ce chapitre.

Un composant React représente un petit morceau d'interface utilisateur dans une page Web. La tâche principale d'un composant React est de rendre son interface utilisateur et de la mettre à jour lorsque son état interne est modifié. En plus du rendu de l'interface utilisateur, il gère les événements appartenant à son interface utilisateur. Pour résumer, le composant React fournit les fonctionnalités suivantes.

• Rendu initial de l'interface utilisateur.
• Gestion et traitement des événements.
• Mise à jour de l'interface utilisateur chaque fois que l'état interne est modifié.

Le composant React permet d'accomplir ces fonctionnalités en utilisant trois concepts -

• Properties − Permet au composant de recevoir des entrées.
• Events − Permettre au composant de gérer les événements DOM et l'interaction avec l'utilisateur final.
• State − Permet au composant de rester "stateful". Un composant à état stable met à jour son interface utilisateur en fonction de son état.

Apprenons tous les concepts un par un dans les chapitres suivants.

Création d'un composant React

La bibliothèque React possède deux types de composants. Les types sont classés en fonction de la façon dont ils sont créés.

• Composant fonctionnel - Utilise une simple fonction JavaScript.
• Composant de classe ES6 - Utilise une classe ES6.

Les principales différences entre les composants de fonction et de classe sont les suivantes :

• Le composant de fonction et le composant de classe.
• Les composants fonctionnels sont très minimes par nature. Leur seule exigence est de retourner un élément React.

function Hello() { 
    return '<div>Hello</div>'
}

La même fonctionnalité peut être réalisée en utilisant le composant de classe ES6 avec peu de codage supplémentaire.

class ExpenseEntryItem extends React.Component {         
    render() { 
        return ( 
            <div>Hello</div> 
        ); 
    }
}

• Les composants de classe prennent en charge la gestion de l'état dès le départ, tandis que les composants de fonction ne prennent pas en charge la gestion de l'état. Cependant, React fournit un hook, useState() pour les composants de fonction afin de maintenir leur état.
• Les composants de classe ont un cycle de vie et l'accès aux événements de chaque cycle de vie par le biais d'apis de rappel dédiées. Les composants fonctionnels n'ont pas de cycle de vie. Encore une fois, React fournit un hook, useEffect() pour le composant fonction afin d'accéder aux différentes étapes du composant.