Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimi ve veri b\u00fct\u00fcnl\u00fc\u011f\u00fc, ba\u015far\u0131l\u0131 bir uygulaman\u0131n temel ta\u015flar\u0131ndand\u0131r. Bu ba\u011flamda, formlar kullan\u0131c\u0131 etkile\u015fiminin merkezinde yer al\u0131r ve form do\u011frulama (validation) s\u00fcreci kritik bir rol oynar. Bir giri\u015f formu \u00f6rne\u011finde, kullan\u0131c\u0131lar\u0131n ge\u00e7erli e-posta adresleri ve g\u00fcvenli \u015fifreler girmesini sa\u011flamak hem g\u00fcvenlik hem de kullan\u0131c\u0131 memnuniyeti a\u00e7\u0131s\u0131ndan vazge\u00e7ilmezdir. Yanl\u0131\u015f veya eksik veri giri\u015fi, uygulaman\u0131n arka ucunda hatalara yol a\u00e7abilir, g\u00fcvenlik a\u00e7\u0131klar\u0131na zemin haz\u0131rlayabilir ve kullan\u0131c\u0131lar\u0131n sinirini bozarak uygulamay\u0131 terk etmelerine neden olabilir.<\/p>\n
Form do\u011frulama iki ana d\u00fczeyde ger\u00e7ekle\u015ftirilir: istemci taraf\u0131 (client-side) ve sunucu taraf\u0131 (server-side). \u0130stemci taraf\u0131 do\u011frulama, kullan\u0131c\u0131n\u0131n girdilerini sunucuya g\u00f6ndermeden \u00f6nce taray\u0131c\u0131da kontrol eder. Bu, an\u0131nda geri bildirim sa\u011flayarak kullan\u0131c\u0131 deneyimini iyile\u015ftirir ve gereksiz sunucu isteklerini azalt\u0131r. Ancak, istemci taraf\u0131 do\u011frulama tek ba\u015f\u0131na yeterli de\u011fildir, \u00e7\u00fcnk\u00fc k\u00f6t\u00fc niyetli kullan\u0131c\u0131lar taray\u0131c\u0131daki kontrolleri atlayabilir. Bu nedenle, sunucu taraf\u0131 do\u011frulama her zaman uygulanmal\u0131d\u0131r. Bu makale, istemci taraf\u0131 do\u011frulamaya odaklanacak ve React uygulamalar\u0131nda Formik ve Yup k\u00fct\u00fcphanelerini kullanarak sa\u011flam ve kullan\u0131c\u0131 dostu giri\u015f formu do\u011frulamas\u0131n\u0131 nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterecektir.<\/p>\n
React, bile\u015fen tabanl\u0131 yap\u0131s\u0131 sayesinde formlar\u0131 y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc bir temel sunar. Ancak, form durumu y\u00f6netimi, do\u011frulama mant\u0131\u011f\u0131 ve hata mesajlar\u0131n\u0131n g\u00f6sterilmesi gibi g\u00f6revler, \u00f6zellikle karma\u015f\u0131k formlarda, \u00e7ok say\u0131da tekrar eden (boilerplate) kod yazmay\u0131 gerektirebilir. \u0130\u015fte tam bu noktada Formik devreye girer. Formik, React’te form olu\u015fturmay\u0131 ve y\u00f6netmeyi basitle\u015ftiren pop\u00fcler bir k\u00fct\u00fcphanedir. Formik, formun state’ini y\u00f6netmek, do\u011frulama hatalar\u0131n\u0131 izlemek, g\u00f6nderim s\u00fcrecini ele almak ve input alanlar\u0131n\u0131 kontrol etmek gibi s\u0131k\u0131c\u0131 g\u00f6revleri sizin i\u00e7in \u00fcstlenir. Bu sayede geli\u015ftiriciler, formun i\u015f mant\u0131\u011f\u0131na ve kullan\u0131c\u0131 aray\u00fcz\u00fcne odaklanabilirler. Formik ile birlikte genellikle Yup ad\u0131 verilen bir \u015fema do\u011frulama k\u00fct\u00fcphanesi kullan\u0131l\u0131r. Yup, deklaratif ve g\u00fc\u00e7l\u00fc do\u011frulama kurallar\u0131 tan\u0131mlamay\u0131 m\u00fcmk\u00fcn k\u0131larak do\u011frulama mant\u0131\u011f\u0131n\u0131 \u00e7ok daha okunabilir ve y\u00f6netilebilir hale getirir.<\/p>\n
Bu makalede, \u00f6ncelikle temel bir React giri\u015f formunun Formik olmadan nas\u0131l olu\u015fturuldu\u011funu ve kar\u015f\u0131la\u015f\u0131lan zorluklar\u0131 ele alaca\u011f\u0131z. Ard\u0131ndan, Formik’in Formik, React uygulamalar\u0131nda form y\u00f6netimiyle ilgili t\u00fcm zorluklar\u0131 \u00e7\u00f6zmek i\u00e7in tasarlanm\u0131\u015f kapsaml\u0131 bir \u00e7\u00f6z\u00fcmd\u00fcr. Temel olarak, Formik \u00fc\u00e7 ana sorunu ele al\u0131r:<\/p>\n 1. Form De\u011ferlerini Alma ve G\u00fcncelleme:<\/strong> Form input’lar\u0131n\u0131n de\u011ferlerini state’te tutmak ve her de\u011fi\u015fiklikte bu state’i g\u00fcncellemek. Formik, bu g\u00f6revleri otomatikle\u015ftirerek geli\u015ftiricilerin formlarla ilgili boilerplate kodu yazma y\u00fck\u00fcn\u00fc \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n Formik, formlar\u0131 y\u00f6netmek i\u00e7in iki ana yakla\u015f\u0131m sunar:<\/p>\n * Bu makalede, genellikle daha modern ve esnek kabul edilen Formik’i projenize eklemek i\u00e7in npm veya yarn kullanabilirsiniz:<\/p>\n Formik’in sa\u011flad\u0131\u011f\u0131 avantajlar\u0131 daha iyi anlamak i\u00e7in, \u00f6ncelikle Formik kullanmadan basit bir giri\u015f formunu nas\u0131l olu\u015fturaca\u011f\u0131m\u0131za bakal\u0131m. Bu yakla\u015f\u0131m, form y\u00f6netimiyle ilgili manuel olarak ele almam\u0131z gereken ad\u0131mlar\u0131 ve kar\u015f\u0131la\u015f\u0131lan zorluklar\u0131 g\u00f6zler \u00f6n\u00fcne serecektir.<\/p>\nuseFormik<\/code> hook’u ile bu formu nas\u0131l basitle\u015ftirece\u011fimizi g\u00f6sterece\u011fiz. Son olarak, Yup k\u00fct\u00fcphanesini entegre ederek daha geli\u015fmi\u015f ve yap\u0131land\u0131r\u0131lm\u0131\u015f do\u011frulama kurallar\u0131n\u0131 nas\u0131l uygulayaca\u011f\u0131m\u0131z\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz. Ayr\u0131ca, kullan\u0131c\u0131 deneyimini iyile\u015ftirecek ipu\u00e7lar\u0131 ve en iyi uygulamalar hakk\u0131nda da bilgi verece\u011fiz.<\/p>\nFormik’e Giri\u015f: Form Y\u00f6netimini Kolayla\u015ft\u0131rmak<\/h3>\n
\n2. Do\u011frulama ve Hata Mesajlar\u0131:<\/strong> Kullan\u0131c\u0131n\u0131n girdilerini belirli kurallara g\u00f6re do\u011frulamak ve hatalar\u0131 kullan\u0131c\u0131ya anla\u015f\u0131l\u0131r bir \u015fekilde g\u00f6stermek.
\n3. Form G\u00f6nderimi:<\/strong> Do\u011frulama ba\u015far\u0131l\u0131 oldu\u011funda form verilerini i\u015flemek ve sunucuya g\u00f6ndermek.<\/p>\nFormik’in Temel Bile\u015fenleri ve Hook’lar\u0131<\/h4>\n
useFormik<\/code> Hook:<\/strong> Fonksiyonel bile\u015fenlerde Formik’in t\u00fcm \u00f6zelliklerini kullanmak i\u00e7in tercih edilen modern yakla\u015f\u0131md\u0131r. Daha esnek ve do\u011frudan kontrol sa\u011flar.
\n* useFormik<\/code> hook’una odaklanaca\u011f\u0131z.<\/p>\nKurulum<\/h4>\n
npm install formik yup\nveya<\/h2>\nyarn add formik yup<\/code><\/pre>\n
formik<\/code> paketi Formik k\u00fct\u00fcphanesini i\u00e7erirken, yup<\/code> paketi \u015fema tabanl\u0131 do\u011frulama i\u00e7in kullanaca\u011f\u0131m\u0131z yard\u0131mc\u0131 k\u00fct\u00fcphanedir.<\/p>\nTemel Bir Giri\u015f Formu Olu\u015fturma (Formik Olmadan)<\/h3>\n
import React, { useState } from 'react';\n\nconst BasicLoginForm = () => {\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n const [errors, setErrors] = useState({});\n const [message, setMessage] = useState('');\n\n const validateForm = () => {\n const newErrors = {};\n if (!email) {\n newErrors.email = 'E-posta alan\u0131 bo\u015f b\u0131rak\u0131lamaz.';\n } else if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\n newErrors.email = 'Ge\u00e7erli bir e-posta adresi girin.';\n }\n\n if (!password) {\n newErrors.password = '\u015eifre alan\u0131 bo\u015f b\u0131rak\u0131lamaz.';\n } else if (password.length < 6) {\n newErrors.password = '\u015eifre en az 6 karakter olmal\u0131d\u0131r.';\n }\n\n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n\n const handleSubmit = (e) => {\n e.preventDefault(); \/\/ Sayfan\u0131n yeniden y\u00fcklenmesini engelle\n setMessage('');\n\n if (validateForm()) {\n \/\/ Do\u011frulama ba\u015far\u0131l\u0131, formu g\u00f6nderebiliriz\n console.log('Form g\u00f6nderiliyor:', { email, password });\n setMessage('Giri\u015f ba\u015far\u0131l\u0131!');\n \/\/ Burada API \u00e7a\u011fr\u0131s\u0131 yap\u0131labilir\n } else {\n setMessage('L\u00fctfen formdaki hatalar\u0131 d\u00fczeltin.');\n }\n };\n\n return (\n Giri\u015f Yap (Formik Olmadan)<\/h3>\n