React experimental_useFormState: Patobulintas formų valdymas moderniose programose

Formų valdymas yra esminis interaktyvių ir patogių vartotojui žiniatinklio programų kūrimo aspektas. React, su savo komponentais pagrįsta architektūra, suteikia kelis būdus formoms tvarkyti. Serverio veiksmų (Server Actions) įdiegimas ir vėlesni patobulinimai, tokie kaip experimental_useFormState, keičia kūrėjų požiūrį į formų tvarkymą, ypač kai sąveikaujama su serverio pusės logika. Šis eksperimentinis kabliukas, esantis React nuolatinių serverio komponentų ir veiksmų tyrinėjimų dalis, siūlo supaprastintą ir efektyvesnį požiūrį į formos būsenos valdymą ir klaidų tvarkymą.

Kas yra experimental_useFormState?

experimental_useFormState yra React kabliukas, sukurtas supaprastinti formų valdymą, ypač scenarijuose, kai sąveikaujate su serverio veiksmais. Jis suteikia mechanizmą perduoti formos būseną tarp kliento ir serverio, leidžiantį sukurti sklandesnę vartotojo patirtį ir pagerinti klaidų tvarkymą. Jis tiesiogiai integruojasi su React serverio komponentais ir serverio veiksmais, leidžiančiais efektyviai gauti ir keisti duomenis.

Prieš gilinantis į specifiką, svarbu paminėti, kad šis kabliukas šiuo metu yra eksperimentinis. Tai reiškia, kad API gali pasikeisti būsimose versijose. Todėl rekomenduojama jį naudoti atsargiai gamybinėse aplinkose ir sekti naujausią React dokumentaciją.

Kodėl naudoti experimental_useFormState?

Tradicinis formų valdymas React programose dažnai apima formos būsenos valdymą vietoje naudojant kabliukus, tokius kaip useState, arba bibliotekas, tokias kaip Formik ar React Hook Form. Nors šie metodai yra veiksmingi kliento pusės patvirtinimui ir paprastoms formų sąveikoms, jie gali tapti sudėtingi, kai susiduriama su serverio pusės operacijomis, tokiomis kaip duomenų pateikimas ir klaidų tvarkymas. Štai keletas privalumų, kuriuos siūlo experimental_useFormState:

• Supaprastinta serverio veiksmų integracija: Kabliukas žymiai palengvina formų prijungimą prie serverio veiksmų. Jis tvarko duomenų perdavimo į serverį sudėtingumą, valdo įkėlimo būseną ir rodo serverio pusės klaidas.
• Geresnė vartotojo patirtis: Perduodant formos būseną tarp kliento ir serverio, experimental_useFormState leidžia sukurti greitesnę ir interaktyvesnę vartotojo patirtį. Pavyzdžiui, galite suteikti tiesioginį grįžtamąjį ryšį vartotojui, kol forma apdorojama serveryje.
• Centralizuotas klaidų tvarkymas: Kabliukas suteikia centralizuotą mechanizmą formos patvirtinimo klaidoms tvarkyti tiek kliento, tiek serverio pusėje. Tai supaprastina klaidų rodymą ir užtikrina nuoseklią vartotojo patirtį.
• Laipsniškas tobulinimas: Naudojant serverio veiksmus kartu su experimental_useFormState, palaikomas laipsniškas tobulinimas. Forma gali veikti net jei JavaScript yra išjungtas, suteikiant bazinę patirtį visiems vartotojams.
• Sumažintas pasikartojančio kodo kiekis: Lyginant su tradiciniais formų valdymo metodais, experimental_useFormState sumažina reikalingo pasikartojančio kodo kiekį, todėl jūsų komponentai tampa švaresni ir lengviau prižiūrimi.

Kaip naudoti experimental_useFormState

Norėdami naudoti experimental_useFormState, pirmiausia turite įsitikinti, kad naudojate React versiją, palaikančią serverio veiksmus (React 18 ar naujesnę). Taip pat reikės įjungti eksperimentines funkcijas savo React konfigūracijoje. Tai paprastai apima jūsų paketuotojo (pvz., Webpack, Parcel) konfigūravimą, kad būtų įjungtos eksperimentinės funkcijos.

Štai pagrindinis pavyzdys, kaip naudoti experimental_useFormState:

Pavyzdys: Paprasta kontaktų forma

Sukurkime paprastą kontaktų formą su laukeliais vardui, el. paštui ir žinutei. Naudosime experimental_useFormState formos pateikimui tvarkyti ir bet kokioms klaidoms rodyti.

1. Apibrėžkite serverio veiksmą:

Pirma, turime apibrėžti serverio veiksmą, kuris tvarkys formos pateikimą. Šis veiksmas gaus formos duomenis ir atliks bet kokį būtiną serverio pusės patvirtinimą ir apdorojimą (pvz., el. laiško siuntimą).

// server-actions.js 'use server'; import { experimental_useFormState as useFormState } from 'react'; async function submitForm(prevState, formData) { // Imituojamas serverio pusės patvirtinimas const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name) { return { error: 'Vardas yra privalomas' }; } if (!email) { return { error: 'El. paštas yra privalomas' }; } if (!message) { return { error: 'Žinutė yra privaloma' }; } // Imituojamas el. laiško siuntimas try { await new Promise(resolve => setTimeout(resolve, 1000)); // Imituojamas tinklo vėlavimas console.log('Forma sėkmingai pateikta!'); return { success: true, message: 'Dėkojame už jūsų žinutę!' }; } catch (error) { console.error('Klaida siunčiant el. laišką:', error); return { error: 'Nepavyko išsiųsti žinutės. Bandykite dar kartą.' }; } } export default submitForm;

2. Sukurkite React komponentą:

Dabar sukurkime React komponentą, kuris atvaizduos formą ir naudos experimental_useFormState formos būsenai valdyti.

// ContactForm.jsx 'use client'; import { experimental_useFormState as useFormState } from 'react'; import submitForm from './server-actions'; function ContactForm() { const [state, formAction] = useFormState(submitForm, null); return (

Vardas:

El. paštas:

Žinutė:

Pateikti {state?.error &&

{state.error}

} {state?.success &&

{state.message}

}

); } export default ContactForm;

Paaiškinimas:

• 'use client';: Ši direktyva nurodo React, kad tai yra kliento komponentas. Tai būtina, nes experimental_useFormState galima naudoti kliento komponentuose sąveikaujant su serverio veiksmais.
• useFormState(submitForm, null): Šis kabliukas priima du argumentus: serverio veiksmą, kuris bus vykdomas (submitForm), ir pradinę būseną (šiuo atveju null). Jis grąžina masyvą, kuriame yra dabartinė formos būsena ir funkcija, skirta serverio veiksmui paleisti. Grąžintas `formAction` turi būti perduotas formos `action` atributui.
• form action={formAction}: Tai susieja serverio veiksmą su formos pateikimu. Kai forma pateikiama, serveryje bus įvykdytas submitForm veiksmas.
• state?.error: Tai rodo bet kokius klaidų pranešimus, grąžintus iš serverio veiksmo.
• state?.success: Tai rodo bet kokius sėkmės pranešimus, grąžintus iš serverio veiksmo.
• state?.pending: Tai automatiškai nustatoma į `true` serverio veiksmo metu, kas leidžia išjungti pateikimo mygtuką.

Išsamus kodo paaiškinimas

Išnagrinėkime kodą žingsnis po žingsnio, kad suprastume, kaip jis veikia.

Serverio veiksmas (server-actions.js)

• 'use server';: Ši direktyva pažymi failą kaip turintį serverio veiksmų. React'ui tai yra būtina, kad suprastų, jog šiame faile esančios funkcijos turi būti vykdomos serveryje.
• async function submitForm(prevState, formData): Tai apibrėžia serverio veiksmo funkciją. Ji priima du argumentus: prevState (ankstesnė formos būsena) ir formData (FormData egzempliorius, kuriame yra formos duomenys).
• formData.get('name'), formData.get('email'), formData.get('message'): Šios eilutės išgauna formos duomenis iš FormData objekto. Argumentas get() yra atitinkamo įvesties lauko formoje `name` atributas.
• Serverio pusės patvirtinimas: Kodas atlieka pagrindinį serverio pusės patvirtinimą, siekiant užtikrinti, kad visi privalomi laukai yra užpildyti. Jei trūksta kokių nors laukų, jis grąžina klaidos objektą klientui.
• El. laiško siuntimo imitavimas: Kodas imituoja el. laiško siuntimą naudojant await new Promise(resolve => setTimeout(resolve, 1000)). Tai sukuria 1 sekundės delsą, imituojančią tinklo vėlavimą. Realiame projekte tai pakeistumėte tikra el. laiško siuntimo logika (pvz., naudojant Nodemailer ar SendGrid).
• Klaidų tvarkymas: Kodas apima try...catch bloką, skirtą tvarkyti bet kokias klaidas, kurios gali atsirasti siunčiant el. laišką. Jei įvyksta klaida, ji registruojama konsolėje ir grąžinamas klaidos objektas klientui.
• Būsenos grąžinimas: Serverio veiksmas grąžina objektą, kuriame yra arba klaidos pranešimas, arba sėkmės pranešimas. Šis objektas tampa nauja būsena, kuri perduodama kliento komponentui per useFormState kabliuką.

Kliento komponentas (ContactForm.jsx)

• 'use client';: Ši direktyva nurodo, kad šis komponentas yra kliento komponentas ir gali naudoti kliento pusės kabliukus, tokius kaip useState ir useEffect. Tai būtina norint naudoti kabliukus ir sąveikauti su DOM.
• const [state, formAction] = useFormState(submitForm, null);: Ši eilutė iškviečia experimental_useFormState kabliuką. Ji perduoda submitForm serverio veiksmą kaip pirmąjį argumentą ir pradinę būseną (null) kaip antrąjį. Kabliukas grąžina masyvą, kuriame yra dabartinė formos būsena (state) ir funkcija, skirta serverio veiksmui paleisti (formAction).
• <form action={formAction}>: Tai nustato formos action atributą į formAction funkciją. Kai forma pateikiama, ši funkcija bus iškviesta, o tai paleis submitForm serverio veiksmą.
• <input type="text" id="name" name="name" />, <input type="email" id="email" name="email" />, <textarea id="message" name="message"></textarea>: Tai yra formos įvesties laukai. Šių laukų name atributai yra svarbūs, nes jie lemia, kaip duomenys bus pasiekiami serverio veiksme naudojant formData.get('name'), formData.get('email') ir formData.get('message').
• <button type="submit" disabled={state?.pending}>Pateikti</button>: Tai yra formos pateikimo mygtukas. Atributas disabled={state?.pending} išjungia mygtuką, kol forma yra siunčiama į serverį, neleidžiant vartotojui pateikti formos kelis kartus.
• {state?.error && <p style={{ color: 'red' }}>{state.error}</p>}: Tai sąlygiškai atvaizduoja klaidos pranešimą, jei formos būsenoje yra klaida. Klaidos pranešimas rodomas raudonai.
• {state?.success && <p style={{ color: 'green' }}>{state.message}</p>}: Tai sąlygiškai atvaizduoja sėkmės pranešimą, jei forma buvo sėkmingai pateikta. Sėkmės pranešimas rodomas žaliai.

Pažangesnis naudojimas ir svarstymai

Nors aukščiau pateiktas pavyzdys demonstruoja pagrindinį experimental_useFormState naudojimą, yra keletas kitų aspektų, į kuriuos reikia atsižvelgti naudojant jį sudėtingesnėse programose.

Optimistiniai atnaujinimai

Galite įdiegti optimistinius atnaujinimus, kad suteiktumėte greitesnę vartotojo patirtį. Optimistiniai atnaujinimai apima vartotojo sąsajos atnaujinimą iškart po to, kai vartotojas pateikia formą, darant prielaidą, kad serverio veiksmas bus sėkmingas. Jei serverio veiksmas nepavyksta, galite atšaukti atnaujinimą ir parodyti klaidos pranešimą.

// Optimistinių atnaujinimų pavyzdys async function submitForm(prevState, formData) { // Optimistiškai atnaujiname vartotojo sąsają // (Tai paprastai apimtų sąrašo ar lentelės būsenos atnaujinimą) const id = Date.now(); // Laikinas ID return { optimisticUpdate: { id: id, name: formData.get('name'), email: formData.get('email'), } } } // Jūsų kliento komponente: const [state, formAction] = useFormState(submitForm, null); // Būsena, kurioje atvaizduojate optimistinį atnaujinimą const [items, setItems] = useState([]); useEffect(()=>{ if (state && state.optimisticUpdate) { setItems(prev => [...prev, state.optimisticUpdate]); } }, [state])

Šiame supaprastintame pavyzdyje serverio veiksmas grąžina optimisticUpdate savybę. Kliento komponente mes ją išgauname ir naudojame pridėti prie masyvo, kuris atvaizduojamas mūsų programoje. Pavyzdžiui, tai galėtų reikšti naujo komentaro pridėjimą prie komentarų sąrašo tinklaraščio įraše.

Klaidų tvarkymas

Efektyvus klaidų tvarkymas yra labai svarbus gerai vartotojo patirčiai. experimental_useFormState palengvina klaidų, atsirandančių formos pateikimo metu, tvarkymą. Galite rodyti klaidų pranešimus vartotojui ir pateikti nurodymus, kaip klaidas ištaisyti.

Štai keletas geriausių klaidų tvarkymo praktikų:

• Pateikite aiškius ir konkrečius klaidų pranešimus: Klaidų pranešimai turėtų būti aiškūs, glausti ir konkretūs, atsižvelgiant į įvykusią klaidą. Venkite bendrinių klaidų pranešimų, tokių kaip „Įvyko klaida“.
• Rodykite klaidų pranešimus šalia atitinkamų įvesties laukų: Rodykite klaidų pranešimus šalia įvesties laukų, kurie sukėlė klaidas. Tai padeda vartotojui lengviau suprasti, kuriuos laukus reikia pataisyti.
• Naudokite vizualinius ženklus klaidoms paryškinti: Naudokite vizualinius ženklus, tokius kaip raudonas tekstas ar rėmeliai, kad paryškintumėte įvesties laukus su klaidomis.
• Pateikite pasiūlymų, kaip ištaisyti klaidas: Jei įmanoma, pateikite pasiūlymų, kaip ištaisyti klaidas. Pavyzdžiui, jei vartotojas įveda neteisingą el. pašto adresą, pasiūlykite teisingą formatą.

Prieinamumo aspektai

Kuriant formas svarbu atsižvelgti į prieinamumą, kad jūsų formos būtų naudojamos žmonėms su negalia. Štai keletas prieinamumo aspektų, į kuriuos reikia atsižvelgti:

• Naudokite semantinį HTML: Naudokite semantinius HTML elementus, tokius kaip <label>, <input> ir <textarea>, kad struktūrizuotumėte savo formas. Tai padeda pagalbinėms technologijoms lengviau suprasti formos struktūrą.
• Pateikite etiketes visiems įvesties laukams: Naudokite <label> elementą, kad pateiktumėte etiketes visiems įvesties laukams. <label> elemento for atributas turėtų atitikti atitinkamo įvesties lauko id atributą.
• Naudokite ARIA atributus: Naudokite ARIA atributus, kad suteiktumėte papildomos informacijos apie formos elementus pagalbinėms technologijoms. Pavyzdžiui, galite naudoti aria-required atributą nurodyti, kad įvesties laukas yra privalomas.
• Užtikrinkite pakankamą kontrastą: Užtikrinkite, kad tarp teksto ir fono spalvos būtų pakankamas kontrastas. Tai padeda žmonėms su silpnu regėjimu lengviau skaityti formą.
• Testuokite su pagalbinėmis technologijomis: Išbandykite savo formas su pagalbinėmis technologijomis, tokiomis kaip ekrano skaitytuvai, kad užtikrintumėte, jog jos yra naudojamos žmonėms su negalia.

Internacionalizavimas (i18n) ir lokalizavimas (l10n)

Kuriant programas pasaulinei auditorijai, internacionalizavimas (i18n) ir lokalizavimas (l10n) yra labai svarbūs. Tai apima jūsų programos pritaikymą skirtingoms kalboms, kultūroms ir regionams.

Štai keletas svarstymų dėl i18n ir l10n naudojant experimental_useFormState:

• Lokalizuokite klaidų pranešimus: Lokalizuokite klaidų pranešimus, kurie rodomi vartotojui. Tai užtikrina, kad klaidų pranešimai būtų rodomi vartotojo pageidaujama kalba.
• Palaikykite skirtingus datos ir skaičių formatus: Palaikykite skirtingus datos ir skaičių formatus, atsižvelgiant į vartotojo lokalę.
• Tvarkykite kalbas iš dešinės į kairę: Jei jūsų programa palaiko kalbas iš dešinės į kairę (pvz., arabų, hebrajų), užtikrinkite, kad formos išdėstymas būtų teisingai rodomas šiomis kalbomis.
• Naudokite vertimų biblioteką: Naudokite vertimų biblioteką, tokią kaip i18next ar react-intl, kad tvarkytumėte savo vertimus.

Pavyzdžiui, galite naudoti žodyną savo klaidų pranešimams saugoti ir tada juos ieškoti pagal vartotojo lokalę.

// Pavyzdys naudojant i18next import i18next from 'i18next'; i18next.init({ resources: { en: { translation: { "name_required": "Name is required", "email_required": "Email is required", } }, fr: { translation: { "name_required": "Le nom est requis", "email_required": "L'email est requis", } } }, lng: 'en', fallbackLng: 'en', interpolation: { escapeValue: false // react jau apsaugo nuo xss } }); // Jūsų serverio veiksme: if (!name) { return { error: i18next.t("name_required") }; }

Šis pavyzdys naudoja i18next vertimams tvarkyti. i18next.t() funkcija naudojama išverstam klaidos pranešimui ieškoti pagal vartotojo lokalę.

Globalūs aspektai ir gerosios praktikos

Kuriant žiniatinklio programas pasaulinei auditorijai, reikia atsižvelgti į kelis pagrindinius aspektus, siekiant užtikrinti sklandžią ir įtraukią vartotojo patirtį. Šie aspektai apima įvairias sritis, įskaitant prieinamumą, kultūrinį jautrumą ir našumo optimizavimą.

Laiko juostos

Dirbant su datomis ir laikais, labai svarbu teisingai tvarkyti laiko juostas. Vartotojai gali būti skirtingose laiko juostose, todėl reikia užtikrinti, kad datos ir laikai būtų rodomi vartotojo vietos laiko juostoje.

Štai keletas geriausių laiko juostų tvarkymo praktikų:

• Saugokite datas ir laikus UTC formatu: Saugokite datas ir laikus UTC (Koordinuotasis pasaulinis laikas) formatu savo duomenų bazėje. Tai užtikrina, kad datos ir laikai yra nuoseklūs visose laiko juostose.
• Naudokite laiko juostų biblioteką: Naudokite laiko juostų biblioteką, tokią kaip Moment.js ar Luxon, kad konvertuotumėte datas ir laikus į vartotojo vietos laiko juostą.
• Leiskite vartotojams nurodyti savo laiko juostą: Leiskite vartotojams nurodyti savo laiko juostą savo profilio nustatymuose. Tai leidžia rodyti datas ir laikus jų pageidaujama laiko juosta.

Valiutos

Jei jūsų programa susijusi su finansinėmis operacijomis, turite palaikyti skirtingas valiutas. Vartotojai gali būti skirtingose šalyse su skirtingomis valiutomis.

Štai keletas geriausių valiutų tvarkymo praktikų:

• Saugokite kainas nuoseklia valiuta: Saugokite kainas nuoseklia valiuta (pvz., USD) savo duomenų bazėje.
• Naudokite valiutų konvertavimo biblioteką: Naudokite valiutų konvertavimo biblioteką, kad konvertuotumėte kainas į vartotojo vietinę valiutą.
• Rodykite kainas su teisingu valiutos simboliu: Rodykite kainas su teisingu valiutos simboliu, atsižvelgiant į vartotojo lokalę.
• Suteikite vartotojams galimybę pasirinkti savo valiutą: Leiskite vartotojams pasirinkti savo pageidaujamą valiutą.

Kultūrinis jautrumas

Svarbu būti kultūriškai jautriam kuriant žiniatinklio programas pasaulinei auditorijai. Tai reiškia, kad reikia žinoti apie skirtingas kultūrines normas ir vertybes ir vengti bet kokio turinio, kuris galėtų būti įžeidžiantis ar nejautrus.

Štai keletas patarimų dėl kultūrinio jautrumo:

• Venkite idiomų ar slengo: Venkite idiomų ar slengo, kurio gali nesuprasti žmonės iš kitų kultūrų.
• Būkite atsargūs su vaizdais ir simboliais: Būkite atsargūs su vaizdais ir simboliais, kuriuos naudojate savo programoje. Kai kurie vaizdai ir simboliai gali turėti skirtingas reikšmes skirtingose kultūrose.
• Gerbkite skirtingus religinius įsitikinimus: Gerbkite skirtingus religinius įsitikinimus ir venkite bet kokio turinio, kuris galėtų būti laikomas įžeidžiančiu religinėms grupėms.
• Žinokite apie skirtingas kultūrines normas: Žinokite apie skirtingas kultūrines normas ir vertybes. Pavyzdžiui, kai kuriose kultūrose laikoma nemandagiu tiesioginis akių kontaktas.

Našumo optimizavimas pasaulinei auditorijai

Vartotojai visame pasaulyje turi skirtingą interneto ryšio greitį ir įrenginių galimybes. Programos našumo optimizavimas yra labai svarbus siekiant užtikrinti sklandžią ir greitą patirtį visiems vartotojams, nepriklausomai nuo jų vietos ar įrenginio.

• Turinio pristatymo tinklai (CDN): Naudokite CDN, kad paskirstytumėte savo programos išteklius (pvz., vaizdus, JavaScript, CSS) serveriams visame pasaulyje. Tai sumažina vėlavimą vartotojams, esantiems toli nuo jūsų pagrindinio serverio.
• Vaizdų optimizavimas: Optimizuokite vaizdus juos suspaudžiant ir naudojant tinkamus failų formatus (pvz., WebP). Tai sumažina vaizdų failų dydį ir pagerina puslapio įkėlimo laiką.
• Kodo skaidymas: Naudokite kodo skaidymą, kad padalintumėte savo programą į mažesnius gabalus, kuriuos galima įkelti pagal poreikį. Tai sumažina pradinį programos įkėlimo laiką.
• Talpyklos naudojimas (Caching): Naudokite talpyklą, kad saugotumėte dažnai naudojamus duomenis naršyklėje ar serveryje. Tai sumažina užklausų, kurias programa turi siųsti į serverį, skaičių.
• Minifikavimas ir grupavimas: Minifikuokite ir sugrupuokite savo JavaScript ir CSS failus, kad sumažintumėte jų failų dydį.

Alternatyvos experimental_useFormState

Nors experimental_useFormState siūlo patrauklų požiūrį į formų valdymą su serverio veiksmais, svarbu žinoti apie alternatyvius sprendimus, ypač atsižvelgiant į tai, kad jis vis dar yra eksperimentinėje stadijoje. Štai keletas populiarių alternatyvų:

• React Hook Form: React Hook Form yra našumo ir lanksti formų biblioteka, naudojanti nekontroliuojamus komponentus. Ji žinoma dėl minimalių perpiešimų ir puikaus našumo. Ji gerai integruojasi su patvirtinimo bibliotekomis, tokiomis kaip Yup ir Zod.
• Formik: Formik yra populiari formų biblioteka, kuri supaprastina formos būsenos valdymą, patvirtinimą ir pateikimą. Ji suteikia aukštesnio lygio API nei React Hook Form ir yra geras pasirinkimas sudėtingoms formoms.
• Redux Form: Redux Form yra formų biblioteka, kuri integruojasi su Redux. Tai geras pasirinkimas programoms, kurios jau naudoja Redux būsenos valdymui.
• Naudojant useState ir useRef: Paprastoms formoms taip pat galite valdyti formos būseną tiesiogiai naudodami React useState kabliuką ir pasiekti formos vertes naudodami useRef. Šis metodas reikalauja daugiau rankinio tvarkymo, bet gali būti tinkamas pagrindinėms formoms, kuriose norite smulkmeniško valdymo.

Išvados

experimental_useFormState yra reikšmingas žingsnis į priekį React formų valdyme, ypač derinant jį su serverio veiksmais. Jis siūlo supaprastintą ir efektyvesnį būdą tvarkyti formos būseną, sąveikauti su serverio pusės logika ir pagerinti vartotojo patirtį. Nors jis vis dar yra eksperimentinėje stadijoje, verta jį išbandyti naujuose projektuose ir apsvarstyti esamiems projektams, kai jis taps stabilesnis. Nepamirškite sekti naujausią React dokumentaciją ir geriausias praktikas, kad užtikrintumėte, jog kabliuką naudojate efektyviai ir atsakingai.

Suprasdami šiame vadove aprašytus principus ir pritaikydami juos savo specifiniams poreikiams, galite kurti patikimas, prieinamas ir pasauliniu mastu orientuotas žiniatinklio programas, kurios suteikia puikią vartotojo patirtį vartotojams visame pasaulyje. Šių geriausių praktikų taikymas ne tik pagerina jūsų programų naudojamumą, bet ir parodo įsipareigojimą įtraukčiai ir kultūriniam jautrumui, galiausiai prisidedant prie jūsų projektų sėkmės ir pasiekiamumo pasauliniu mastu.

Kadangi React toliau tobulėja, įrankiai, tokie kaip experimental_useFormState, vaidins vis svarbesnį vaidmenį kuriant modernias, serveryje atvaizduojamas React programas. Šių įrankių supratimas ir naudojimas bus būtinas norint neatsilikti nuo tendencijų ir teikti išskirtines vartotojo patirtis.