Com crear components genèrics Forms i Fields per reduir codi repetitiu amb React i TypeScript? | Part I
Els formularis són un tema important perquè són extremadament comuns a les aplicacions que construïm. En aquest article, aprendrem com crear formularis usant components controlats per React i veurem com construir components genèrics per ajudar-nos a minimitzar i optimitzar el codi.
A més, la validació del costat del client és fonamental per a l’experiència de l’usuari dels formularis que construïm, per això també cobrirem aquest tema. Enviar el formulari també és una consideració crítica. Cobrirem com manejar els errors d’enviament, així com l’èxit d’una manera genèrica.
Per això, en aquesta sèrie d’articles, cobrirem els següents temes:
- Comprensió dels components controlats
- Reducció del codi repetitiu amb components genèrics
- Implementació de la validació
- Enviament de formularis
A React, llibreria de JavaScript que ja hem vist en articles anteriors, nosaltres podem fer servir components controlats per implementar un formulari, un component controlat té el seu valor sincronitzat amb l’estat a React, per mitjà de la funció useState, que és part de l’API de Hooks.
A l’exemple que mostrarem més avall, Article.tsx, hem realitzat les següents accions:
- Agrupat els inputs i el botó “Guardar” en un form, així nosaltres podem invocar el submit en fer clic al botó “Guardar” o en pressionar la tecla Enter
- Assignem a la propietat value dels inputs uns estats de react (inputNomValue/setInputNomValue i inputCognomValue/setInputCognomValue), això és el que es coneix com components controlats, ja que aquests elements (input, checkbox, etc) tenen un control intern del seu estat, proporcionat per la pròpia implementació HTML al navegador, un input és capaç de mantenir el valor escrit per l’usuari, no obstant, useState de React s’apropia d’aquest estat, som nosaltres els qui controlem el valor i la renderització del seu contingut
- Hem creat un mètode (handleInputNomChange i handleInputCognomChange) que s’executa cada cop que l’esdeveniment change d’un input es dispara per tal d’anar disposant del valor dels inputs constantment, emmagatzemant-los als nostres respectius useState
- Hem creat un mètode amb el nom requiredField per controlar si el camp nom és buit, i en aquest cas mostrem missatge d’error
Si no comptéssim amb un component genèric hauríem d’estar repetint tot aquest codi constantment a cadascuna de les pantalles que es necessitin formularis, crear estats, detectar esdeveniments de canvis de valors en els inputs, checkbox, validació de camps i tot tipus de codi que ens podriem estalviar i optimitzar amb la creació d’un component genèric.
És important puntualitzar, que per a aquest article farem servir React i TypeScript junts. React es defineix en si mateix com una llibreria JavaScript de codi obert creada per Facebook per construir interfícies d’usuari, però, quan sumem l’ecosistema d’eines disponibles, és una solució completa per al desenvolupament d’aplicacions web, mòbil, escriptori i fins i tot realitat virtual.
Per què utilitzar React?
Amb React nosaltres podem dividir la nostra aplicació en petits components reusables, components que poden tenir la seva pròpia interface d’usuari i comportament.
React és una llibreria progressiva, és a dir, augmentar la integració de components i frameworks en funció de les nostres necessitats, per això s’adaptarà perfectament al nostre projecte.
Quins coneixements bàsics hem de tenir?
Partint de la base que la corba d’aprenentatge a React és més baixa en comparació amb altres frameworks/llibreries, és important tenir coneixements bàsics d’HTML, CCSS i JavaScript i per a aquest article en concret seria interessant disposar de coneixements bàsics de TypeScript.
Per què TypeScript?
TypeScript no ofereix la possibilitat de tipar les dades, per tant, ens proporciona un control més gran en temps d’execució de tot el nostre codi.
Per exemple:
const mevaVariableText: string;
const mevaVaribleNumero: number;
Reducció del codi repetitiu amb components genèrics
Com comentàvem anteriorment, en aquest article aprendrem com crear formularis genèrics per ajudar-nos a minimitzar, reutilitzar en altres projectes amb el conseqüent increment de productivitat i optimitzar el nostre codi gràcies a la reutilització dels nostres components, tot això utilitzant React i TypeScript.
En aquesta secció, crearem un component formulari genèric (FormGeneric.tsx) i un component camp genèric (FieldGeneric.tsx) que s’encarregarà de manejar l’estat dels valors (inputNomValue/setInputNomValue i inputCognomValue/setInputCognomValue), detecció d’esdeveniments, validació de camps, etc, que hem implementat anteriorment a Article.tsx , això reduirà dràsticament el codi necessari per implementar un formulari.
Passos per a la creació d’un component Formulari genèric:
- Creem un nou component amb el nom FormGeneric
- Definim interfície per als valors dels camps del formulari
export interface Values {
[key: string]: any;
}
En aquest cas, la key serà el nom del camp i el valor serà el valor del camp, exemple:
{
nom: “valor del input nom”,
cognom:”valor del input cognom”
}- Incloure la propietat children en aquest component per tal de poder renderitzar el contingut imbricat dins del formulari (Contingut propi del component que utilitzarà el FormGeneric i el FieldGeneric, en el nostre cas ArticleUsingFormGeneric.tsx)
- Creem useState per al valor dels fields, usant la interfície creada anteriorment (Values)
const [values, setValues] = useState<Values>({});Establim l’estat inicial en un objecte literal buit, values disposarà de tots els valors de tots els inputs, al nostre exemple la clau/valor de l’objecte seria:
{
nom: “valor del input nom”,
cognom:”valor del input cognom”
}Pasos para la creación del componente FieldGeneric
El component FieldGeneric no deixa de ser tot element que pot formar part d’un formulari, Input, Select, TextArea, Checkbox, etc. Així com conjunt d’aquests elements que siguin usats alhora com a components en aquest FieldGeneric, al final, l’essència és la mateixa, com més components tinguem que puguin ser reutilitzats, més productius, millor qualitat de codi i més control sobre la nostra aplicació tindrem .
Els passos a seguir són:
- Creem un nou camp amb el nom FieldGeneric
- Creem les següents propietats del component:
interface Props {
name: string;
label?: string;
type?: 'Text' | 'TextArea';
}- Renderitzem el component FieldGeneric amb la label
- Renderitzem els controls segons el type
{(type === 'Text') && (
<input
type={type.toLowerCase()}
id={name}
....
)}
{type === 'TextArea' && (
<textarea
id={name}...Compartint estat amb React Context
És important destacar que l’estat dels valors d’un camp es troba al component FormGeneric, però es presenta i canvia al component FieldGeneric.
Gràcies a React Context, FormGeneric pot compartir el seu estat amb FieldGeneric, amb context de React es possibilita passar dades a través de l’arbre de components, sense haver de passar propietats manualment a cada nivell, en aquest cas FormGeneric proveeix i FieldGeneric consumeix els valors que presenta FormGeneric.
Creant context a FormGeneric
En aquest punt, ens centrarem en qui proveïx, qui és la font dels valors que seran consumits pel component genèric FieldGeneric.
- Afegim la funció createContext
import { FC, useState, createContext } from 'react';- Creem una interfície per al nostre context
interface FormContextProps {
values: Values;
setValue?: (fieldName: string, value: any) => void;
}El nostre context contindrà els valors del FormGeneric i la funció per actualitzar-los
- Creem el context
export const FormContext = createContext<FormContextProps>({
values: {},
});Creant proveïdor de context
Ara que ja hem creat el context en FormGeneric, farem servir el seu component Provider.
<FormContext.Provider
value={{
values,
setValue: (fieldName: string, value: any) => {
setValues({ ...values, [fieldName]: value });
},
...D’aquesta manera, utilitzem el component Provider, per donar accés a aquest context als seus components fills (FieldGeneric), perquè puguin ser consumits.
I aquí s’acaba la primera part d’aquesta secció d’articles sobre com crear components genèrics amb React i TypeScript per reduir el codi repetitiu als nostres projectes.
T’esperem a la segona part, on detallarem com consumir un Context de FormGeneric, com implementar-lo i en la què comptarem amb un exemple complet.