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.

Création d'un composant de classe

Créons un nouveau composant React (dans notre application de gestion des dépenses), ExpenseEntryItem, pour présenter un élément de saisie des dépenses. L'élément de saisie des dépenses est composé du nom, du montant, de la date et de la catégorie. La représentation objet du poste de dépense est :

{ 
    'name': 'Mango juice', 
    'amount': 30.00, 
    'spend_date': '2020-10-10' 
    'category': 'Food', 
}

Ouvrez l'application de gestion des dépenses dans votre éditeur préféré.

Ensuite, créez un fichier, ExpenseEntryItem.css, dans le dossier src/components pour donner un style à notre composant.

Ensuite, créez un fichier, ExpenseEntryItem.js, dans le dossier src/components en étendant React.Component.

import React from 'react'; 
import './ExpenseEntryItem.css'; 
class ExpenseEntryItem extends React.Component { 
}

Ensuite, créez une méthode render() dans la classe ExpenseEntryItem.

class ExpenseEntryItem extends React.Component { 
    render() { 
    } 
}

Ensuite, créez l'interface utilisateur en utilisant JSX et renvoyez-la à partir de la méthode render.

class ExpenseEntryItem extends React.Component {
    render() {
        return (
            <div>
                <div><b>Item:</b> <em>Mango Juice</em></div>
                <div><b>Amount:</b> <em>30.00</em></div>
                <div><b>Spend Date:</b> <em>2020-10-10</em></div>
                <div><b>Category:</b> <em>Food</em></div>
            </div>
        );
    }
}

Ensuite, spécifiez le composant comme classe d'exportation par défaut.

import React from 'react';
import './ExpenseEntryItem.css';

class ExpenseEntryItem extends React.Component {
    render() {
        return (
            <div>
                <div><b>Item:</b> <em>Mango Juice</em></div>
                <div><b>Amount:</b> <em>30.00</em></div>
                <div><b>Spend Date:</b> <em>2020-10-10</em></div>
                <div><b>Category:</b> <em>Food</em></div>
            </div>
        );
    }
}
export default ExpenseEntryItem;

Maintenant, nous avons créé avec succès notre premier composant React. Utilisons notre composant nouvellement créé dans index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import ExpenseEntryItem from './components/ExpenseEntryItem'

ReactDOM.render(
    <React.StrictMode>
        <ExpenseEntryItem />
    </React.StrictMode>,
    document.getElementById('root')
);