ReactJS - Formik: Creazione di un Modulo di Spese

Ciao a tutti, futuri sviluppatori React! Oggi ci imbarcheremo in un viaggio emozionante nel mondo della gestione dei moduli in React utilizzando una fantastica libreria chiamata Formik. Alla fine di questo tutorial, sarete in grado di creare moduli slick ed efficienti come un professionista. Allora, entriamo nel dettaglio!

Cos'è Formik?

Prima di iniziare a codificare, capiremo cos'è Formik e perché è un vero game-changer nello sviluppo React.

Formik è una libreria popolare che semplifica la gestione dei moduli nelle applicazioni React. Si occupa delle parti noiose dei moduli come la gestione dello stato del modulo, la validazione e l'invio, permettendovi di concentrarvi su ciò che è più importante - la logica della vostra applicazione.

Pensate a Formik come al vostro assistente personale per i moduli. Proprio come un buon assistente si occuperebbe di tutta la carta per voi, Formik gestisce tutte le attività relative ai moduli, lasciandovi liberi di concentrarvi sulla grande immagine.

Configurazione del Nostro Progetto

Prima di tutto, configuriamo il nostro progetto. Presumeremo che abbiate già installato Node.js sul vostro computer. Se non è così, installatelo dal sito ufficiale di Node.js.

Aprite il terminale e eseguite i seguenti comandi:

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

Questi comandi creano una nuova applicazione React, installano Formik e Yup (una libreria per la validazione dei moduli) e avviano il server di sviluppo.

Creazione del Nostro Modulo di Spese

Ora che abbiamo configurato il nostro progetto, creiamo il nostro modulo di spese. Costruiremo un modulo semplice che permette agli utenti di inserire una descrizione della spesa e l'importo.

Passo 1: Struttura di Base del Modulo

Iniziamo creando una struttura di base del modulo. Aprite il file src/App.js e sostituite il suo contenuto con il seguente codice:

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

function App() {
return (
<div className="App">
<h1>Modulo di Spese</h1>
<Formik
initialValues={{ description: '', amount: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Descrizione</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Importo</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Invia
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Ecco cosa sta succedendo qui:

1. Importiamo i componenti necessari da Formik.
2. Creiamo un componente Formik che avvolge il nostro modulo.
3. Impostiamo i initialValues per i campi del nostro modulo.
4. Definiamo una funzione onSubmit che gestisce l'invio del modulo.
5. Utilizziamo i componenti Form, Field, e ErrorMessage di Formik per creare la struttura del nostro modulo.

Passo 2: Aggiunta della Validazione

Ora aggiungiamo della validazione al nostro modulo. Useremo Yup per questo. Aggiornate il file App.js come segue:

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, 'Troppo Corto!')
.max(50, 'Troppo Lungo!')
.required('Obbligatorio'),
amount: Yup.number()
.positive('Deve essere positivo')
.required('Obbligatorio'),
});

function App() {
return (
<div className="App">
<h1>Modulo di Spese</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">Descrizione</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Importo</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Invia
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Ecco cosa abbiamo aggiunto:

1. Importiamo Yup e definiamo uno schema di validazione (ExpenseSchema).
2. Aggiungiamo la proprietà validationSchema al nostro componente Formik.

Ora il nostro modulo eseguirà la validazione prima dell'invio!

Passo 3: Stile del Nostro Modulo

Aggiungiamo un po' di stile per rendere il nostro modulo più gradevole. Create un nuovo file chiamato App.css nella cartella src e aggiungete il seguente CSS:

.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;
}

Ora, aggiornate il file App.js per importare questo file CSS:

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

// ... il resto del codice rimane lo stesso

Conclusione

Complimenti! Avete appena costruito un modulo di spese funzionale utilizzando Formik e React. Questo è solo l'inizio di ciò che potete fare con Formik. Mentre continuate il vostro viaggio in React, scoprirete che Formik è uno strumento invaluable per la gestione dei moduli di tutte le complessità.

Ricordate, la pratica fa perfezione. Provate a modificare questo modulo, aggiungere nuovi campi, o creare moduli completamente nuovi utilizzando ciò che avete imparato. Il mondo dello sviluppo React è vasto ed emozionante, e siete ben sulla strada per diventare parte di esso!

Buon codice, e possa i vostri moduli sempre validare senza problemi! ?

Tabella dei Metodi Formik

Ecco una tabella di alcuni metodi Formik comunemente utilizzati:

Metodo	Descrizione
handleSubmit	Gestisce l'invio del modulo
handleChange	Gestisce i cambiamenti nei campi del modulo
handleBlur	Gestisce quando un campo perde il fuoco
setFieldValue	Imposta manualmente il valore di un campo
setFieldTouched	Imposta manualmente lo stato toccato di un campo
validateForm	Esegue manualmente la validazione del modulo
resetForm	Resetta il modulo ai suoi valori iniziali
setErrors	Imposta manualmente gli errori del modulo
setStatus	Imposta un oggetto di stato di livello superiore
setSubmitting	Imposta lo stato di invio del modulo

Questi metodi vi forniscono un controllo fine sul comportamento e lo stato del vostro modulo. Man mano che vi sentite più a vostro agio con Formik, vi troverete a utilizzare questi metodi per creare moduli più complessi e interattivi.

Credits: Image by storyset