Formik & Yup Basitle\u015ftirilmi\u015f: Form Geli\u015ftirme \u0130\u00e7in G\u00fc\u00e7l\u00fc Bir \u00c7ift<\/p>\n
Formlar web uygulamalar\u0131n\u0131n ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r ve kullan\u0131c\u0131lar\u0131n veri girmesini sa\u011flar. JavaScript’te form geli\u015ftirme s\u00fcrecinde hata ay\u0131klama, do\u011frulama ve kullan\u0131c\u0131 deneyimini iyile\u015ftirme zorluklara yol a\u00e7abilir. Neyse ki, bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in Formik ve Yup gibi g\u00fc\u00e7l\u00fc ara\u00e7lar mevcuttur.<\/p>\n
Formik, React uygulamalar\u0131nda form y\u00f6netimini basitle\u015ftirmek i\u00e7in tasarlanm\u0131\u015f bir JavaScript k\u00fct\u00fcphanesidir. Karma\u015f\u0131k form durumunu, do\u011frulamay\u0131 ve g\u00f6nderimi kolayla\u015ft\u0131r\u0131r. Formik, form verilerini y\u00f6netmek i\u00e7in bir “state” y\u00f6netimi sa\u011flayarak, formunuzdaki her bir alan i\u00e7in de\u011ferleri, dokunulma durumlar\u0131n\u0131 ve hata mesajlar\u0131n\u0131 saklaman\u0131za olanak tan\u0131r.<\/p>\n
Yup, JavaScript’te veri do\u011frulama i\u00e7in kullan\u0131lan bir k\u00fct\u00fcphanedir. Formik ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, form alanlar\u0131n\u0131n do\u011fru formatta ve ge\u00e7erli aral\u0131klarda oldu\u011fundan emin olmak i\u00e7in do\u011frulama kurallar\u0131 tan\u0131mlayabilirsiniz. Yup, JavaScript’in yerle\u015fik do\u011frulama y\u00f6ntemlerine g\u00f6re daha a\u00e7\u0131k ve esnek bir yakla\u015f\u0131m sunarak karma\u015f\u0131k do\u011frulama senaryolar\u0131n\u0131 kolayca y\u00f6netebilmenizi sa\u011flar.<\/p>\n
Formik ve Yup’\u0131 birlikte kullanarak, form geli\u015ftirme s\u00fcrecinde \u00f6nemli \u00f6l\u00e7\u00fcde zaman ve \u00e7aba tasarrufu sa\u011flayabilirsiniz. Formik, formlar\u0131n durumunu y\u00f6netmekle ilgilenirken, Yup do\u011frulama kurallar\u0131n\u0131 sa\u011flar. Bu sayede, hem form y\u00f6netimi hem de do\u011frulama i\u015flemleri ayn\u0131 anda ger\u00e7ekle\u015ftirilebilir.<\/p>\n
\u0130\u015fte basit bir form \u00f6rne\u011fi: <\/p>\n
“`html
\nimport React from ‘react’;
\nimport { Formik, Form, Field, ErrorMessage } from ‘formik’;
\nimport * as Yup from ‘yup’;<\/p>\n
const SignUpForm = () => {
\n const validationSchema = Yup.object().shape({
\n email: Yup.string().email(‘Ge\u00e7erli bir e-posta adresi girin’).required(‘E-posta adresi zorunludur’),
\n password: Yup.string().required(‘\u015eifre zorunludur’),
\n });<\/p>\n
return (
\n
\n setTimeout(() => {
\n alert(JSON.stringify(values, null, 2));
\n setSubmitting(false);
\n }, 500);
\n }}
\n >
\n {({ isSubmitting }) => (
\n