Catégories
Astuces et Design

React Hooks: Comment démarrer et créer le vôtre

Les Hooks ont pris d'assaut le monde React. Dans ce didacticiel, nous allons examiner ce que sont les hooks et comment vous les utilisez. Je vais vous présenter quelques crochets courants fournis avec React et vous montrer comment écrire le vôtre. Lorsque vous aurez terminé, vous pourrez utiliser des crochets dans vos propres projets React.

Que sont les hooks React?

Les Hooks React sont des fonctions spéciales qui vous permettent de vous connecter aux fonctionnalités React des composants de fonction. Par exemple, le useState Hook vous permet d'ajouter un état, alors que useEffect vous permet d'effectuer des effets secondaires. Auparavant, les effets secondaires étaient mis en œuvre à l'aide de méthodes de cycle de vie. Avec Hooks, ce n'est plus nécessaire.

Cela signifie que vous n'avez plus besoin de définir une classe lors de la construction d'un composant React. Il s'avère que l'architecture de classe utilisée dans React est la cause de nombreux défis auxquels les développeurs React sont confrontés chaque jour. Nous nous retrouvons souvent à écrire des composants volumineux et complexes difficiles à décomposer. Le code associé est réparti sur plusieurs méthodes de cycle de vie, ce qui devient difficile à lire, à maintenir et à tester. De plus, nous devons faire face à la this mot-clé lors de l'accès state, props et méthodes. Nous devons également lier des méthodes à this pour s'assurer qu'ils sont accessibles dans le composant. Ensuite, nous avons le problème de forage excessif des hélices – également connu sous le nom de l'enfer des emballages – lorsqu'il s'agit de composants d'ordre supérieur.

En un mot, les Hooks sont une fonctionnalité révolutionnaire qui simplifiera votre code, le rendant facile à lire, à maintenir, à tester de manière isolée et à réutiliser dans vos projets. Cela ne vous prendra qu'une heure pour vous familiariser avec eux, mais cela vous fera penser différemment à la façon dont vous écrivez le code React.

Les React Hooks ont été annoncés pour la première fois lors d'une conférence React qui s'est tenue en octobre 2018, et ils ont été officiellement rendus disponibles dans React 16.8. La fonctionnalité est toujours en cours de développement; il existe encore un certain nombre de fonctionnalités de la classe React en cours de migration vers Hooks. La bonne nouvelle est que vous pouvez commencer à les utiliser dès maintenant. Vous pouvez toujours utiliser les composants de la classe React si vous le souhaitez, mais je doute que vous le souhaitiez après avoir lu ce guide d'introduction.

Si j’ai piqué votre curiosité, plongeons-nous et voyons quelques exemples pratiques.

Conditions préalables

Ce tutoriel est destiné aux personnes qui ont une compréhension de base de ce qu'est React et de son fonctionnement. Si vous êtes un débutant avec React, veuillez consulter notre didacticiel de mise en route avec React avant de continuer ici.

Si vous souhaitez suivre les exemples, vous devez avoir une application React déjà configurée. Le moyen le plus simple de le faire est d'utiliser l'outil Create React App. Pour l'utiliser, vous aurez installé Node et npm. Si ce n'est pas le cas, accédez à la page de téléchargement de Node.js et récupérez la dernière version de votre système (npm est fourni avec Node). Vous pouvez également consulter notre tutoriel sur l'installation de Node à l'aide d'un gestionnaire de version.

Avec Node installé, vous pouvez créer une nouvelle application React comme ceci:

npx create-react-app myapp

Cela créera un myapp dossier. Allez dans ce dossier et démarrez le serveur de développement comme ceci:

cd myapp
npm start

Votre navigateur par défaut s'ouvrira et vous verrez votre nouvelle application React. Pour les besoins de ce didacticiel, vous pouvez travailler dans le App composant, qui est situé à src/App.js.

Vous pouvez également trouver le code de ce tutoriel sur GitHub, ainsi qu'une démo du code fini à la fin de ce tutoriel.

le useState Crochet

Voyons maintenant du code. Le hook useState est probablement le hook le plus courant fourni avec React. Comme son nom l'indique, il vous permet d'utiliser state dans un composant de fonction.

Considérez le composant de classe React suivant:

import React from "react";

export default class ClassDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Agata"
    };
    this.handleNameChange = this.handleNameChange.bind(this);
  }

  handleNameChange(e) {
    this.setState({
      name: e.target.value
    });
  }

  render() {
    return (
      <section>
        <form autoComplete="off">
          <section>
            <label htmlFor="name">Name</label>
            <input
              type="text"
              name="name"
              id="name"
              value={this.state.name}
              onChange={this.handleNameChange}
            />
          </section>
        </form>
        <p>Hello {this.state.name}</p>
      </section>
    );
  }
}

Si vous suivez avec Create React App, remplacez simplement le contenu de App.js avec ce qui précède.

Voici à quoi ça ressemble:

Nom de la classe React Hooks

Donnez-vous une minute pour comprendre le code. Dans le constructeur, nous déclarons un name propriété sur notre state objet, ainsi que la liaison d'un handleNameChange fonction à l'instance de composant. On a alors un formulaire avec une entrée, dont la valeur est fixée à this.state.name. La valeur détenue dans this.state.name est également affiché sur la page sous la forme d'un message d'accueil.

Lorsqu'un utilisateur tape quelque chose dans le champ de saisie, le handleNameChange fonction est appelée, qui met à jour state et par conséquent la salutation.

Maintenant, nous allons écrire une nouvelle version de ce code en utilisant le useState Crochet. Sa syntaxe ressemble à ceci:

const (state, setState) = useState(initialState);

Lorsque vous appelez le useState fonction, il renvoie deux éléments:

  • Etat: le nom de votre état – comme this.state.name ou this.state.location.
  • setState: une fonction pour définir une nouvelle valeur pour votre état. Semblable à this.setState({name: newValue}).

le initialState est la valeur par défaut que vous donnez à votre nouvel état déclaré lors de la phase de déclaration d'état. Maintenant que vous avez une idée de ce useState est, mettons-le en action:

import React, { useState } from "react";

export default function HookDemo(props) {
  const (name, setName) = useState("Agata");

  function handleNameChange(e) {
    setName(e.target.value);
  }

  return (
    <section>
      <form autoComplete="off">
        <section>
          <label htmlFor="name">Name</label>
          <input
            type="text"
            name="name"
            id="name"
            value={name}
            onChange={handleNameChange}
          />
        </section>
      </form>
      <p>Hello {name}</p>
    </section>
  );
}

Prenez note des différences entre cette version de fonction et la version de classe. C'est déjà beaucoup plus compact et plus facile à comprendre que la version de classe, mais ils font tous les deux exactement la même chose. Passons en revue les différences:

  • Le constructeur de classe entier a été remplacé par le useState Hook, qui ne se compose que d'une seule ligne.
  • Parce que le useState Hook génère des variables locales, vous n'avez plus besoin d'utiliser le this mot-clé pour référencer votre fonction ou vos variables d'état. Honnêtement, c'est un problème majeur pour la plupart des développeurs JavaScript, car il n'est pas toujours clair quand utiliser this.
  • Le code JSX est maintenant plus propre car vous pouvez référencer les valeurs d'état local sans utiliser this.state.

J'espère que vous êtes impressionné maintenant! Vous vous demandez peut-être quoi faire lorsque vous devez déclarer plusieurs valeurs d'état. La réponse est assez simple: il suffit d'appeler un autre useState Crochet. Vous pouvez déclarer autant de fois que vous le souhaitez, à condition de ne pas surcharger votre composant.

Remarque: lorsque vous utilisez React Hooks, assurez-vous de les déclarer en haut de votre composant et jamais dans un conditionnel.

Plusieurs useState Crochets

Mais que faire si nous voulons déclarer plus d'une propriété dans l'état? Aucun problème. Utilisez simplement plusieurs appels pour useState.

Voici un exemple de composant avec plusieurs useState Crochets:

import React, { useState } from "react";

export default function HookDemo(props) {
  const (name, setName) = useState("Agata");
  const (location, setLocation) = useState("Nairobi");

  function handleNameChange(e) {
    setName(e.target.value);
  }

  function handleLocationChange(e) {
    setLocation(e.target.value);
  }

  return (
    <section>
      <form autoComplete="off">
        <section>
          <label htmlFor="name">Name</label>
          <input
            type="text"
            name="name"
            id="name"
            value={name}
            onChange={handleNameChange}
          />
        </section>
        <section>
          <label htmlFor="location">Location</label>
          <input
            type="text"
            name="location"
            id="location"
            value={location}
            onChange={handleLocationChange}
          />
        </section>
      </form>
      <p>
        Hello {name} from {location}
      </p>
    </section>
  );
}

C'est simple, n'est-ce pas? Faire la même chose dans la version de classe vous obligerait à utiliser le this mot-clé encore plus.

Maintenant, passons au prochain crochet React de base.

useEffect Crochet

La plupart des composants React sont nécessaires pour effectuer une opération spécifique telle que la récupération de données, l'abonnement à un flux de données ou la modification manuelle du DOM. Ces types d'opérations sont connus comme Effets secondaires.

Dans les composants basés sur les classes, nous placerions normalement notre code d'effets secondaires dans componentDidMount et componentDidUpdate. Ce sont des méthodes de cycle de vie qui nous permettent de déclencher la méthode de rendu au bon moment.

Voici un exemple simple:

componentDidMount() {
  document.title = this.state.name + " from " + this.state.location;
}

Ce morceau de code définira le titre du document, en fonction de ce qui est conservé dans l'état. Cependant, lorsque vous essayez d'apporter des modifications aux valeurs d'état via le formulaire, rien ne se passe. Pour résoudre ce problème, vous devez ajouter une autre méthode de cycle de vie:

componentDidUpdate() {
  document.title = this.state.name + " from " + this.state.location;
}

La mise à jour du formulaire devrait également mettre à jour le titre du document.

Voyons comment nous pouvons mettre en œuvre la même logique en utilisant le useEffect Crochet. Mettez à jour le composant de fonction ci-dessus comme suit:

import React, { useState, useEffect } from "react";


useEffect(() => {
  document.title = name + " from " + location;
});

Avec juste ces quelques lignes de code, nous avons implémenté le travail de deux méthodes de cycle de vie dans une fonction simple.

Titre de la classe React Hooks

Ajout de code de nettoyage

C'était un exemple simple. Cependant, dans certains cas, vous devez écrire du code de nettoyage, comme la désinscription d'un flux de données ou la désinscription d'un écouteur d'événements. Voyons un exemple de la façon dont cela est normalement implémenté dans un composant de classe React:

import React from "react";

export default class ClassDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      resolution: {
        width: window.innerWidth,
        height: window.innerHeight
      }
    };

    this.handleResize = this.handleResize.bind(this);
  }

  componentDidMount() {
    window.addEventListener("resize", this.handleResize);
  }

  componentDidUpdate() {
    window.addEventListener("resize", this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  handleResize() {
    this.setState({
      resolution: {
        width: window.innerWidth,
        height: window.innerHeight
      }
    });
  }

  render() {
    return (
      <section>
        <h3>
          {this.state.resolution.width} x {this.state.resolution.height}
        </h3>
      </section>
    )
  }
}

Le code ci-dessus affichera la résolution actuelle de la fenêtre de votre navigateur. Redimensionnez la fenêtre et vous devriez voir les numéros se mettre à jour automatiquement. Si vous appuyez sur F11 dans Chrome, il devrait afficher la pleine résolution de votre moniteur. Nous avons également utilisé la méthode du cycle de vie componentWillUnmount pour désinscrire le resize un événement.

Reproduisons le code basé sur les classes ci-dessus dans notre version Hook. Nous devrons définir un troisième useState Crochet et une seconde useEffect Crochet pour gérer cette nouvelle fonctionnalité:

import React, { useState, useEffect } from "react";

export default function HookDemo(props) {
  ...
  const (resolution, setResolution) = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setResolution({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };
    window.addEventListener("resize", handleResize);

    
    return () => {
      document.title = 'React Hooks Demo';
      window.removeEventListener("resize", handleResize);
    };
  });

  ...

  return (
    <section>
      ...
      <h3>
        {resolution.width} x {resolution.height}
      h3>
    section>
  );
}

Résolution de classe React Hooks

Étonnamment, cette version Hook du code fait exactement la même chose. Il est plus propre et plus compact. L'avantage de mettre du code à part useEffect déclaration est que nous pouvons facilement le tester, car le code est isolé.

Avez-vous remarqué que nous renvoyons une fonction dans ce useEffect Crochet? C'est parce que toute fonction que vous retournez dans un useEffect La fonction sera considérée comme le code de nettoyage. Si vous ne renvoyez pas une fonction, aucun nettoyage ne sera effectué. Dans ce cas, un nettoyage est nécessaire, car vous rencontrerez dans le cas contraire un message d'erreur consigné dans la console de votre navigateur indiquant "impossible d'effectuer une mise à jour de l'état React sur un composant non monté".

Crochets de réaction personnalisés

Maintenant que vous avez découvert la useState et useEffect Hooks, laissez-moi vous montrer un moyen vraiment cool de rendre votre code encore plus compact, plus propre et réutilisable que ce que nous avons réalisé jusqu'à présent. Nous allons créer un Crochet personnalisé pour simplifier encore plus notre code.

Nous allons le faire en extrayant le resize fonctionnalité et le placer en dehors de notre composant.

Créez une nouvelle fonction comme suit:

function useWindowResolution() {
  const (width, setWidth) = useState(window.innerWidth);
  const (height, setHeight) = useState(window.innerHeight);
  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
      setHeight(window.innerHeight);
    };
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize ", handleResize);
    };
  }, (width, height));
  return {
    width,
    height
  };
}

Ensuite, dans le composant, vous devrez remplacer ce code:

const (resolution, setResolution) = useState({
  width: window.innerWidth,
  height: window.innerHeight
});

… avec ça:

const resolution = useWindowResolution();

Supprimer le second useEffect code. Enregistrez votre fichier et testez-le. Tout devrait fonctionner de la même manière qu'avant.

Maintenant que nous avons créé notre premier Hook personnalisé, faisons de même pour le titre du document. Tout d'abord, supprimez l'appel restant à useEffect à l'intérieur du composant. Ensuite, en dehors du composant, ajoutez le code suivant:

function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title;
  });
}

Enfin, appelez-le depuis le composant:

useDocumentTitle(name + " from " + location);

Revenez à votre navigateur et entrez quelque chose dans les champs de saisie. Le titre du document devrait changer comme avant.

Enfin, refactorisons les champs du formulaire. Nous voulons créer un Hook pour garder leur valeur synchronisée avec une valeur correspondante dans l'état.

Commençons par le Hook personnalisé. Ajoutez ce qui suit en dehors du composant:

function useFormInput(initialValue) {
  const (value, setValue) = useState(initialValue);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return {
    value,
    onChange: handleChange
  };
}

Mettez ensuite à jour le composant pour l'utiliser:

export default function HookDemo(props) {
  const name = useFormInput("Agata");
  const location = useFormInput("Nairobi");
  const resolution = useWindowResolution();
  useDocumentTitle(name.value + " from " + location.value);

  return (
    <section>
      <form autoComplete="off">
        <section>
          <label htmlFor="name">Name</label>
          <input {...name} />
        </section>
        <section>
          <label htmlFor="location">Location</label>
          <input {...location} />
        </section>
      </form>
      <p>
        Hello {name.value} from {location.value}
      </p>
      <h3>
        {resolution.width} x {resolution.height}
      </h3>
    </section>
  );
}

Parcourez le code lentement et identifiez toutes les modifications que nous avons apportées. Assez bien, non? Notre composant est beaucoup plus compact.

Pour les besoins de ce didacticiel, nous avons déclaré nos Hooks comme des fonctions dans le même fichier que le composant qui les utilise. Cependant, dans un projet React normal, vous auriez un hooks dossier avec chacun de ces Hooks dans un fichier séparé, qui pourrait ensuite être importé partout où il était nécessaire.

On pourrait même aller jusqu'à emballer le useFormInput, useDocumentTitle et useWindowResolution Se connecte à un module npm externe, car ils sont complètement indépendants de la logique principale de notre code. Nous pouvons facilement réutiliser ces Hooks personnalisés dans d'autres parties du projet, ou même dans d'autres projets à l'avenir.

Pour référence, voici la version complète du composant Hooks:

import React, { useState, useEffect } from "react";

function useWindowResolution() {
  const (width, setWidth) = useState(window.innerWidth);
  const (height, setHeight) = useState(window.innerHeight);
  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
      setHeight(window.innerHeight);
    };
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize ", handleResize);
    };
  }, (width, height));
  return {
    width,
    height
  };
}

function useDocumentTitle(title){
  useEffect(() => {
    document.title = title;
  });
}

function useFormInput(initialValue) {
  const (value, setValue) = useState(initialValue);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return {
    value,
    onChange: handleChange
  };
}

export default function HookDemo(props) {
  const name = useFormInput("Agata");
  const location = useFormInput("Nairobi");
  const resolution = useWindowResolution();
  useDocumentTitle(name.value + " from " + location.value);

  return (
    <section>
      <form autoComplete="off">
        <section>
          <label htmlFor="name">Name</label>
          <input {...name} />
        </section>
        <section>
          <label htmlFor="location">Location</label>
          <input {...location} />
        </section>
      </form>
      <p>
        Hello {name.value} from {location.value}
      </p>
      <h3>
        {resolution.width} x {resolution.height}
      </h3>
    </section>
  );
}

Le composant du Hook doit être rendu et se comporter exactement comme la version du composant de classe:

React Hooks Finale

Si vous comparez la version Hook avec la version du composant de classe, vous vous rendrez compte que la fonction Hook réduit votre code de composant d'au moins 30%. Vous pouvez même réduire davantage votre code en exportant les fonctions réutilisables vers une bibliothèque npm.

Voyons ensuite comment nous pouvons utiliser les Hooks d'autres personnes dans notre code.

Récupération de données à l'aide de hooks tiers

Examinons un exemple de la façon dont vous pouvez récupérer des données à partir d'une API REST JSON à l'aide d'Axios et de React Hooks. Si vous suivez chez vous, vous devrez installer la bibliothèque Axios:

npm i axios

Changez votre composant pour qu'il ressemble à ceci:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function UserList() {
  const (users, setUsers) = useState(());

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios('https://jsonplaceholder.typicode.com/users');
      setUsers(result.data);
    };
    fetchData();
  }, ());

  const userRows = users.map((user, index) => <li key={index}>{user.name}</li>);

  return (
    <div className="component">
      <h1>List of Users</h1>
      <ul>{userRows}</ul>
    </div>
  );
}

Nous devrions nous attendre à la sortie suivante:

liste d'utilisateur

Il est possible de refactoriser le code ci-dessus en créant votre propre Hook personnalisé de manière à ce que nous n’ayons plus besoin d’utiliser useState et useEffect Crochets. Heureusement pour nous, de nombreux développeurs ont déjà rempli cette quête et publié leur travail sous forme de package que nous pouvons installer dans notre projet. Nous utiliserons les hameçons axios de Simone Busoli, qui se trouve être le plus populaire.

Vous pouvez installer le package à l'aide de la commande:

npm i axios-hooks

Ci-dessous, j'ai refactoré le code ci-dessus en utilisant axios-hooks:

import React from 'react';
import useAxios from 'axios-hooks';

export default function UserListAxiosHooks() {
  const ({ data, loading, error }, refetch) = useAxios(
    'https://jsonplaceholder.typicode.com/users'
  );

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  const userRows = data.map((user, index) => <li key={index}>{user.name}</li>);

  return (
    <div className="component">
      <h1>List of Users</h1>
      <ul>{userRows}</ul>
      <button onClick={refetch}>Reload</button>
    </div>
  );
}

Non seulement nous nous sommes débarrassés du useState et useEffect Crochets de notre code, mais nous avons également acquis trois nouvelles capacités sans aucune puissance cérébrale supplémentaire de notre part:

  • pour afficher l'état de chargement
  • pour afficher les messages d'erreur
  • pour récupérer les données d'un clic sur un bouton

La leçon ici est d'éviter de réinventer la roue. Google est ton ami. Dans le monde JavaScript, il y a de fortes chances que quelqu'un ait déjà résolu le problème que vous essayez de résoudre.

Démo

Voici une démonstration en direct de ce que nous avons accompli jusqu'à présent:

Crochets officiels React

Voici les crochets React de base que vous rencontrerez dans vos projets React quotidiens:

  • useState: pour gérer l'état local
  • useEffect: remplace les fonctions de cycle de vie
  • useContext: vous permet de travailler facilement avec l'API React Context (résolution du problème de forage de prop)

Nous avons également des React Hooks officiels supplémentaires que vous devrez peut-être utiliser, en fonction des exigences de votre projet:

  • useReducer: une version avancée de useState pour gérer une logique d'état complexe. C'est assez similaire à Redux.
  • useCallback: renvoie une fonction qui renvoie une valeur pouvant être mise en cache. Utile pour l'optimisation des performances si vous souhaitez éviter des rendus inutiles lorsque l'entrée n'a pas changé.
  • useMemo: renvoie une valeur à partir d'une fonction mémorisée. Semblable à computed si vous connaissez Vue.
  • useRef: renvoie un objet ref mutable qui persiste pendant la durée de vie du composant.
  • useImperativeHandle: personnalise la valeur d'instance exposée aux composants parents lors de l'utilisation ref.
  • useLayoutEffect: semblable à useEffect, mais se déclenche de manière synchrone après toutes les mutations DOM.
  • useDebugValue: affiche une étiquette pour les Hooks personnalisés dans React Developer Tools.

Vous pouvez tout lire sur ces Hooks dans la documentation officielle de React.

Résumé

La communauté React a répondu positivement à la nouvelle fonctionnalité React Hooks. Il existe déjà un référentiel open source appelé awesome-react-hooks, et des centaines de React Hooks personnalisés ont été soumis à ce référentiel. Voici un exemple rapide de l'un de ces Hooks pour stocker des valeurs dans le stockage local:

import useLocalStorage from "@rehooks/local-storage";

function MyComponent() {
  let name = useLocalStorage("name"); 
  return (
    <div>
      <h1>{name}</h1>
    </div>
  );
}

Vous devrez installer le local-storage Accrochez avec du npm ou du fil comme celui-ci pour l'utiliser:

npm i @rehooks/local-storage

Assez bien, non?

L'introduction de React Hooks a fait sensation. Ses vagues se sont déplacées au-delà de la communauté React dans le monde JavaScript. En effet, les Hooks sont un nouveau concept qui peut bénéficier à l'ensemble de l'écosystème JavaScript. En fait, l'équipe Vue.js a récemment publié quelque chose de similaire appelé l'API de composition.

On parle également de React Hooks et de l'API Context renversant Redux de son trône de gestion d'état. De toute évidence, les Hooks ont rendu le codage beaucoup plus simple et ont changé la façon dont nous écrivons le nouveau code. Si vous êtes comme moi, vous avez probablement une forte envie de réécrire toutes vos classes de composants React et de les remplacer par des Hooks de composants fonctionnels.

Notez que ce n'est pas vraiment nécessaire: l'équipe React n'a pas l'intention de désapprouver les composants de la classe React. Vous devez également savoir que toutes les méthodes de cycle de vie de classe React ne sont pas encore possibles avec Hooks. Vous devrez peut-être vous en tenir un peu plus longtemps aux classes de composants React.

Si vous vous sentez suffisamment en confiance avec vos nouvelles connaissances des crochets React de base, j'aimerais vous laisser un défi. Refactorisez cette classe de compte à rebours à l'aide de React Hooks pour la rendre aussi propre et compacte que possible.

Bon codage, et dites-moi comment vous allez!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *