ReactJS - Formik : Création d'un Formulaire de Dépenses

Salut à toi, futurs développeurs React ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde de la gestion des formulaires en React en utilisant une bibliothèque incroyable appelée Formik. D'ici la fin de ce tutoriel, vous serez en mesure de créer des formulaires élégants et efficaces comme un pro. Alors, plongeons dedans !

Qu'est-ce que Formik ?

Avant de commencer à coder, comprendre ce qu'est Formik et pourquoi c'est un véritable game-changer dans le développement React.

Formik est une bibliothèque populaire qui simplifie la gestion des formulaires dans les applications React. Il s'occupe des parties fastidieuses des formulaires comme la gestion de l'état du formulaire, la validation et l'envoi, vous laissant libre de vous concentrer sur ce qui importe le plus - la logique de votre application.

Pensez à Formik comme à votre assistant personnel pour les formulaires.Tout comme un bon assistant s'occuperait de tout le papier pour vous, Formik gère toutes les tâches liées aux formulaires, vous laissant libre de vous concentrer sur l'image globale.

Configuration de Notre Projet

Premièrement, configurons notre projet. Nous allons supposer que vous avez déjà Node.js installé sur votre ordinateur. Si ce n'est pas le cas, allez-y et installez-le à partir du site officiel de Node.js.

Ouvrez votre terminal et exécutez les commandes suivantes :

npx create-react-app expense-form-app
cd expense-form-app
npm install formik yup
npm start

Ces commandes créent une nouvelle application React, installent Formik et Yup (une bibliothèque pour la validation des formulaires) et démarrent le serveur de développement.

Création de Notre Formulaire de Dépenses

Maintenant que nous avons notre projet configuré, créons notre formulaire de dépenses. Nous allons construire un formulaire simple qui permet aux utilisateurs de saisir une description et un montant de dépense.

Étape 1 : Structure de Base du Formulaire

Commençons par créer une structure de base pour le formulaire. Ouvrez votre fichier src/App.js et remplacez son contenu par le code suivant :

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

function App() {
return (
<div className="App">
<h1>Formulaire de Dépenses</h1>
<Formik
initialValues={{ description: '', amount: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Description</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Montant</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Soumettre
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Voici ce qui se passe ici :

1. Nous importons les composants nécessaires de Formik.
2. Nous créons un composant Formik qui enveloppe notre formulaire.
3. Nous définissons les initialValues pour nos champs de formulaire.
4. Nous définissons une fonction onSubmit qui gérera l'envoi du formulaire.
5. Nous utilisons les composants Form, Field, et ErrorMessage de Formik pour créer notre structure de formulaire.

Étape 2 : Ajout de la Validation

Ajoutons maintenant une validation à notre formulaire. Nous allons utiliser Yup pour cela. Mettez à jour votre fichier App.js comme suit :

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const ExpenseSchema = Yup.object().shape({
description: Yup.string()
.min(2, 'Trop court !')
.max(50, 'Trop long !')
.required('Requis'),
amount: Yup.number()
.positive('Doit être positif')
.required('Requis'),
});

function App() {
return (
<div className="App">
<h1>Formulaire de Dépenses</h1>
<Formik
initialValues={{ description: '', amount: '' }}
validationSchema={ExpenseSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Description</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Montant</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Soumettre
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Voici ce que nous avons ajouté :

1. Nous importons Yup et définissons un schéma de validation (ExpenseSchema).
2. Nous ajoutons la propriété validationSchema à notre composant Formik.

Maintenant, notre formulaire validera les entrées avant l'envoi !

Étape 3 : Styling de Notre Formulaire

Ajoutons un peu de style pour rendre notre formulaire plus joli. Créez un nouveau fichier appelé App.css dans votre dossier src et ajoutez le CSS suivant :

.App {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 0 auto;
padding: 20px;
}

h1 {
color: #333;
}

form {
display: flex;
flex-direction: column;
}

div {
margin-bottom: 15px;
}

label {
margin-bottom: 5px;
display: block;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:disabled {
background-color: #ddd;
}

.error {
color: red;
font-size: 0.8em;
}

Maintenant, mettez à jour votre App.js pour inclure ce fichier CSS :

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import './App.css';

// ... le reste du code reste le même

Conclusion

Félicitations ! Vous venez de construire un formulaire de dépenses fonctionnel avec Formik et React. Ce n'est que le début de ce que vous pouvez faire avec Formik. Comme vous continuez votre parcours React, vous trouverez Formik être un outil inestimable pour gérer des formulaires de toutes complexités.

Souvenez-vous, la pratique rend parfait. Essayez de modifier ce formulaire, ajoutez de nouveaux champs, ou créez des formulaires complètement nouveaux en utilisant ce que vous avez appris. Le monde du développement React est vaste et passionnant, et vous êtes bien sur le chemin pour en faire partie !

Bonne programmation, et peut-être que vos formulaires toujours valident en douceur ! ?

Table des Méthodes Formik

Voici un tableau de quelques méthodes couramment utilisées de Formik :

Méthode	Description
handleSubmit	Gère l'envoi du formulaire
handleChange	Gère les changements des champs du formulaire
handleBlur	Gère lorsque un champ perd le focus
setFieldValue	Définit manuellement la valeur d'un champ
setFieldTouched	Définit manuellement l'état tactile d'un champ
validateForm	Déclenche manuellement la validation du formulaire
resetForm	Réinitialise le formulaire à ses valeurs initiales
setErrors	Définit manuellement les erreurs du formulaire
setStatus	Définit un objet de statut de niveau supérieur
setSubmitting	Définit l'état d'envoi du formulaire

Ces méthodes vous offrent un contrôle finement granulaire sur le comportement et l'état de votre formulaire. À mesure que vous devenez plus à l'aise avec Formik, vous trouverez ces méthodes utiles pour créer des formulaires plus complexes et interactifs.

Credits: Image by storyset