Fausia Fua Fa'aola I React Ma Next.js

By Web Design · · 14 min read · 853 views
Share: ✕ Twitter in LinkedIn f Facebook
Read in: aa ace af ak alz am ar as awa ay az ba ban be bew
+191 more
Fausia Fua Fa'aola I React Ma Next.js

O lenei tusiga o loʻo lagolagoina e SurveyJS O loʻo i ai se faʻataʻitaʻiga o le mafaufau e faʻasoa e le au atinaʻe React e aunoa ma le talanoaina leotele. O ia fomu e tatau ona avea ma vaega. O lona uiga o se faaputuga e pei o:

React Hook Form mo le setete fa'apitonu'u (la'ititi toe fa'afoliga, ergonomic fanua resitalaina, fegalegaleaiga taua). Zod mo le faʻamaonia (saʻo saʻo, faʻamaonia tuaoi, faʻavasega-saogalemu faʻasalalauga). React Query mo le pito i tua: tuʻuina atu, toe faʻataʻitaʻi, faʻapipiʻi, sync server, ma isi.

Ma mo le tele o fomu - o lau login screens, lau itulau faʻatulagaina, lau CRUD modals - e aoga tele. O vaega taʻitasi e fai lana galuega, latou te fatuina mama, ma e mafai ona e agai i luga i vaega o lau talosaga e faʻaeseese moni ai lau oloa. Ae o taimi uma lava, e amata ai ona fa'aputuina e se fomu mea e pei o tulafono va'aia e fa'alagolago i tali muamua, po'o fa'atauga e maua mai e fa'asolo atu i vaega e tolu. Atonu e o'o lava i itulau atoa e tatau ona fa'ase'e pe fa'aalia e fa'atatau i le aofa'i atoa. E te taulimaina le tulaga muamua ma se useWatch ma se lala i totonu, e lelei. Ona sosoo ai lea ma le isi. Ona e aapa lea mo le superRefine e faʻapipiʻi tulafono faʻasalalau e le mafai e lau Zod schema ona faʻaalia i le auala masani. Ona, amata lea e le fa'aogaina o le la'asaga le fa'aogaina o manatu pisinisi. I se taimi, e te vaʻavaʻai i mea na e fausia ma iloa ai o le fomu e le o toe UI. E sili atu i se faiga fa'ai'uga, ma o le vaega la'au o lo'o na'o le mea na e teuina ai. O le mea lea ou te manatu o le mafaufau faʻataʻitaʻiga mo fomu i React e malepe, ma e leai se tasi e sese. O le RHF + Zod stack e sili ona lelei i le mea na fuafuaina mo. O le fa'afitauli o lo'o tatou fa'aauau pea ona fa'aoga i tua atu o le tulaga e fetaui lelei ai ona fa'amatalaga ma le fa'afitauli ona o le isi itu e mana'omia ai se isi auala e mafaufau ai i fomu atoa. O lenei tusiga e uiga i lena filifiliga. Ina ia faʻaalia lenei mea, o le a matou fausia le faʻailoga tutusa faʻasolosolo faʻalua faalua:

Faatasi ai ma React Hook Form + Zod uaea e React Query mo le tuuina atu, Faʻatasi ai ma le SurveyJS, lea e faʻaogaina se fomu e fai ma faʻamaumauga - o se JSON schema faigofie - nai lo se vaega o laʻau.

Tutusa manaʻoga, tutusa tulaga faʻapitoa, tutusa API valaau ile pito. Ona matou faʻafanua tonu lea o le mea na faʻagaoioia ma le mea na tumau, ma tuʻuina atu se auala aoga e filifili ai poʻo fea faʻataʻitaʻiga e tatau ona e faʻaogaina, ma afea. Le fomu o loʻo matou fausiaina:

O lenei fomu o le a fa'aogaina se fa'asologa e 4-laasaga: Laasaga 1: Fa'amatalaga

Igoa muamua (manaomia), Imeli (mana'omia, fa'atulagaina fa'amaonia).

Laasaga 2: Poloaiga

Tau o le iunite, Tele, fua faatatau o lafoga, Afua mai: La'ititi atoa, lafoga, Aofa'iga.

Laasaga 3: Fa'amatalaga & Manatu

E iai sau tala? (Ioe/Leai) Afai Ioe → username + password, e mana'omia uma. Afai Leai → imeli ua uma ona aoina i le Laasaga 1.

Fa'amalieina (1–5) Afai ≥ 4 → fesili “O le a le mea na e fiafia i ai?” Afai ≤ 2 → fesili “O le a se mea e mafai ona tatou faaleleia?”

Laasaga 4: Toe iloilo

Fa'atoa aliali mai pe a atoa >= 100 Fa'ai'uga tu'uina atu.

E le soonafai lea. Ae ua lava lea e faʻaalia ai le eseesega o fausaga. Vaega 1: Fa'aaufa'atasiga (React Hook Form + Zod) Fa'apipi'i npm faʻapipiʻi react-hook-form zod @hookform/resolvers @tanstack/react-query

Zod Schema Sei o tatou amata i le Zod schema, aua e masani lava o le mea lea e faʻavae ai foliga o le fomu. Mo laʻasaga muamua e lua - faʻamatalaga patino ma faʻatonu mea faʻapipiʻi - o mea uma e saʻo: manaʻomia manoa, numera ma laʻititi, ma se enum. O le vaega manaia e amata pe a e taumafai e faʻaalia tulafono faʻavae.

faaulufale mai {z} mai le "zod";

export const formSchema = z.object({ firstName: z.string().min(1, "Manaomia"), imeli: z.string().imeli("Invalid email"), tau: z.number().min(0), quantity: z.number().min(1), taxRate: z.number(), hasAccount:z.enum upu faataga: z.string().filifiliga(), faamalieina: z.number().min(1).max(5), positiveFeedback: z.string().optional(), improvementFeedback: z.string().optional(),}).superRefine((data, ctx) => { pe afai (data.hasAccount === "Ioe") { pe a (!data.username) {scode(!data.username) {s. ["igoa fa'aoga"], fe'au: "Mana'omia" }); } pe afai (!data.password || data.password.length <6) { ctx.addIssue({ code: "custom", path: ["password"], message: "Min 6 characters" } }

afai (data.satisfaction >= 4 && !data.positiveFeedback) {ctx.addIssue({ code: "custom", ala: ["positiveFeedback"], feʻau: "Faamolemole faasoa mea e te fiafia i ai"}); }

pe afai (data.satisfaction <= 2 && !data.improvementFeedback) {ctx.addIssue({ code: "custom", ala:["improvementFeedback"], feʻau: "Faʻamolemole taʻu mai mea e faʻaleleia"}); }});

ituaiga auina atu i fafo FormData = z.infer;

Matauina o le igoa ole igoa ma le uputatala e lolomi e fai ma filifiliga () e ui lava e manaʻomia ona e faʻamatalaina e le Zod's type-level schema le foliga o le mea, ae le o tulafono e pulea pe a afaina fanua. O le mana'oga e tatau ona ola i totonu o le superRefine, lea e alu pe a uma ona fa'amaonia le foliga ma maua le mea atoa. O lena valavala e le o se faaletonu; e na'o le mea lava e fa'atulagaina ai le meafaigaluega: superRefine o le mea lea e alu i ai manatu fa'asaga i le fanua pe a le mafai ona fa'aalia i totonu o le fa'atulagaina o fuafuaga. O le mea foi e iloga ai iinei o le mea e le o faʻaalia e lenei faʻataʻitaʻiga. E leai se manatu o itulau, leai se manatu o fea fanua e iloa i le fea itu, ma leai se manatu o le folauga. O na mea uma o le a ola i se isi mea. Vaega Fa'ailoga

faaulufale { useForm, useWatch } mai le "react-hook-form";import {zodResolver} from "@hookform/resolvers/zod";import {useMutation} from "@tanstack/react-query";import {useState, useMemo } from "react";import {formSchema, type .formSchema}"

const STEPS = ["details", "order", "account", "review"];

type OrderPayload = FormData & { la'ititi: numera; lafoga: numera; aofa'i: numera};

galuega auina atu i fafo RHFMultiStepForm() {const [laasaga, setiStep] = useState(0);

const mutation = fa'aogaSuiga({ mutationFn: async (totogi: OrderPayload) => { const res = faatali fetch("/api/orders", { auala: "POST", ulutala: { "Content-Type": "application/json"}, tino: JSON.stringify(totogi), }); pe afai (!res.ok) lafo fou Sese("Ua le mafai ona tuuina atu"); toe faafoi res.json(); }, });

const {resitala, pulea, handleSubmit, formState: {sese}, } = useForm({solver: zodResolver(formSchema), defaultValues: {tau: 0, quantity: 1, taxRate: 0.1, faamalieina: 3, hasAccount: "Leai", }, } const price = useWatch({pule, igoa: "tau"}); const quantity = useWatch({ pule, igoa: "quantity" }); const taxRate = useWatch({pule, igoa: "TaxRate"}); const hasAccount = useWatch({pule, igoa: "hasAccount"}); const satisfaction = useWatch({pule, igoa: "fa'amalieina"}); const subtotal = useMemo(() => (tau ?? 0) * (tele ?? 1), [tau, aofa'i]); const tax = useMemo(() => la'ititi * (lafoga ?? 0), [fa'ato'a, lafoga lafoga]); const total = useMemo(() => la'ititi atoa + lafoga, [fa'ato'atoa, lafoga]); const onSubmit = (fa'amatalaga: FormData) => mutation.mutate({ ...fa'amatalaga, fa'aitiitiga, lafoga, aofa'i }); const showSubmit = (Laasaga === 2 && atoa <100) || (Laasaga === 3 && atoa >= 100)

toe faafoi (

{step === 0 && ( <> )}

{step === 1 && ( <>

Aofa'i: {subtotal}
Lafoga: {tax}
Aofa'i: {total}
)}

{step === 2 && ( <>

{hasAccount === "Ioe" && ( <> )}

{fa'amalieina >= 4 && (