Les composants

Comme indiqué dans la présentation, les composants permettent de rendre la page dynamique en rafraîchissant uniquement les élements nécessaires. Ils permettent également d'organiser le code de manière modulaire.

Nous allons voir à quoi ressemble un composant basique et comment il est appelé.

const Composant = () => {
    return (
        <div>Je suis un composant</div>
    )
}

"Composant" est remplacé par le nom de votre composant. Celui-ci renvoie une simple balise div avec son contenu.

Notez qu'il prend la forme d'une fonction (ici attribuée à une variable). Dans des versions plus anciennes de React, on utilisait des classes. Le faire maintenant peut mener à des problèmes et donc à éviter, mais ne soyez pas surpris si vous le voyez dans des bases de code existantes.

Le composant est ensuite utilisé par les autres (par exemple dans le composant racine "App") de la manière suivante :

const App = () => {
    return (
        <>
            <Composant />
            <Composant />
        </>
    )
}

Il est ici appelé deux fois, ce qui montre l'intérêt de l'approche modulaire des composants React. Ils sont tous deux intégrés dans une balise parente (ici sans nom, cela pourrait être une div), car il est nécessaire que le composant soit renvoyé en tant qu'élement unique.

Les états

Les composants utilisent des états pour savoir quand il leur est nécessaire de se rafraîchir, via la méthode useState(). Il est nécessaire de l'importer.

import { useState } from 'react'

On peut ensuite l'utiliser dans notre composant. state et setState sont nommés ainsi pour l'exemple. Cela pourrait être user et setUser dans un véritable projet.

const Composant = () => {
    const [state, setState] = useState(0)

    return (
        <div>Je suis un composant est mon état est {state} </div>
    )
}

useState est ici appelé avec une valeur de 0, qui est ensuite récupérée dans une variable state, avec son setter setState, tous deux récupérés via une décomposition du retour de useState. La variable state est ensuite affichée dans le div en étant mise entre des des accolades.

setState, étant un setter, sert à mettre à jour la variable liée avec une nouvelle valeur. Il est nécessaire de l'utiliser si vous voulez changer cette variable. C'est lui qui signalera à React le besoin de rafraîchir le composant.

const Composant = () => {
    const [state, setState] = useState(0)

    const handleClick = () => {
        setState(state + 1)
    }

    return (
        <div>Je suis un composant est mon état est {state} </div>
        <button onClick="handleClick">Clique moi</button>
    )
}

Une fonction handleClick a été créée pour utiliser setState. Un bouton va servir à l'appeler via l'écouteur d'évènements "onClick". Ce faisant, à chaque fois que l'on clique le boutton, state sera incrémenté via handleClick, et le composant rafraîchit.

Attention ! Il est important d'incrémenter en faisant "state + 1". Ne cherchez jamais à modifier la variable d'état directement !