React - 8.2 Créer un formulaire d'ajout d'utilisateur en React

Dans cette leçon, vous construisez le premier composant de votre application : un formulaire qui permet de saisir un nom et un âge. Vous verrez comment organiser les fichiers, écrire le composant et le relier à la page principale.

Lancer le projet de départ

Le projet fourni contient déjà les éléments de base. Installez les dépendances, puis lancez le projet. Une page blanche est normale à ce stade, puisque le formulaire n'est pas encore affiché.

npm install
npm start

Créer le composant AddUser

Créez un dossier pour les composants, puis un dossier ui et un dossier user. Dans le dossier user, créez le fichier AddUser.js. Ce fichier importe React, déclare le composant AddUser, puis l'exporte.

Le composant renvoie un formulaire. Son événement onSubmit est relié à une fonction qui reçoit l'événement du formulaire.

import React from 'react';

const AddUser = () => {
  const addUserHandler = (event) => {
  };

  return <form onSubmit={addUserHandler}></form>;
};

export default AddUser;

Ajouter les champs du formulaire

Le formulaire contient deux blocs label et input. Le premier demande le nom d'utilisateur, avec un champ de type texte. Le second demande l'âge, avec un champ de type number, en reprenant la même structure avec un libellé adapté.

Un bouton de type submit est placé à la fin du formulaire. Il permet d'envoyer les données saisies.

• Label et input de type text pour le nom d'utilisateur.
• Label et input de type number pour l'âge.
• Bouton de type submit à l'intérieur du formulaire.

Relier le composant à l'application

Dans le fichier App.js, importez le composant AddUser, puis affichez-le dans le rendu. L'application affiche alors le formulaire à la place de la page blanche.

La vidéo ajoute ensuite une couleur de fond. Le texte reste difficile à lire à ce stade, et la lisibilité s'améliore par la suite.

En résumé

Vous avez créé un composant AddUser avec un formulaire pour le nom et l'âge. Le composant utilise un gestionnaire d'envoi relié à l'événement onSubmit, puis il est importé dans App.js. Ce formulaire est la première brique d'une application d'ajout d'utilisateurs.

Points clés

• Un composant React est une fonction qui renvoie du contenu à afficher.
• Un formulaire peut être relié à une fonction grâce à l'événement onSubmit.
• Les champs label et input se répètent pour chaque information à saisir.
• Le composant doit être importé dans App.js pour apparaître dans l'application.

Questions fréquentes

Pourquoi la page est-elle blanche après npm start ?

C'est normal à ce stade : le projet de départ n'affiche pas encore de contenu. Le formulaire est ajouté dans cette leçon.

Quelle est la différence entre les champs text et number ?

Le champ text accepte du texte libre, comme un nom d'utilisateur. Le champ number accepte une valeur numérique, comme un âge.

À quoi sert le bouton de type submit ?

Il envoie le formulaire, ce qui déclenche la fonction reliée à onSubmit.