{"id":38850,"date":"2026-02-09T01:30:41","date_gmt":"2026-02-08T22:30:41","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/"},"modified":"2026-02-09T01:30:41","modified_gmt":"2026-02-08T22:30:41","slug":"100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/","title":{"rendered":"#100DaysofCode G\u00fcn 8: React ve TypeScript ile Form Y\u00f6netimini Anlamak"},"content":{"rendered":"<h2>#100DaysofCode G\u00fcn 8: React ve TypeScript ile Form Y\u00f6netimini Anlamak<\/h2>\n<p>Merhaba kod merakl\u0131lar\u0131! #100DaysofCode ser\u00fcvenimizin 8. g\u00fcn\u00fcnde, web uygulamalar\u0131n\u0131n vazge\u00e7ilmezi olan form y\u00f6netimini React ve TypeScript ikilisiyle derinlemesine inceliyoruz. Kullan\u0131c\u0131 etkile\u015fiminin temelini olu\u015fturan formlar, veri toplama ve i\u015fleme s\u00fcre\u00e7lerinde kritik rol oynar. Bu makalede, temel kontroll\u00fc bile\u015fenlerden ba\u015flayarak, TypeScript ile tip g\u00fcvenli form durumlar\u0131 olu\u015fturmaya, do\u011frulama mekanizmalar\u0131na ve hatta geli\u015fmi\u015f k\u00fct\u00fcphanelere kadar geni\u015f bir yelpazeyi kapsayaca\u011f\u0131z. Haz\u0131rsan\u0131z, React ve TypeScript ile formlar\u0131n b\u00fcy\u00fcleyici d\u00fcnyas\u0131na dalal\u0131m!<\/p>\n<h3>Giri\u015f: Web Uygulamalar\u0131nda Formlar\u0131n \u00d6nemi<\/h3>\n<p>Modern web uygulamalar\u0131, kullan\u0131c\u0131larla etkile\u015fim kurman\u0131n say\u0131s\u0131z yolunu sunar. Bu etkile\u015fimlerin ba\u015f\u0131nda ise formlar gelir. Kullan\u0131c\u0131 kayd\u0131, giri\u015f yapma, \u00fcr\u00fcn sipari\u015fi verme, geri bildirim g\u00f6nderme veya arama sorgusu yapma gibi pek \u00e7ok temel i\u015flem, formlar arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015fir. Formlar, kullan\u0131c\u0131dan veri toplaman\u0131n ve bu verileri uygulama mant\u0131\u011f\u0131na aktarman\u0131n anahtar\u0131d\u0131r.<\/p>\n<h4>Neden Formlara \u0130htiya\u00e7 Duyar\u0131z?<\/h4>\n<ul>\n<li><strong>Veri Toplama:<\/strong> Kullan\u0131c\u0131 bilgilerini, tercihlerini veya girdilerini toplamak i\u00e7in temel ara\u00e7lard\u0131r.<\/li>\n<li><strong>Kullan\u0131c\u0131 Etkile\u015fimi:<\/strong> Uygulaman\u0131n dinamik ve interaktif olmas\u0131n\u0131 sa\u011flarlar.<\/li>\n<li><strong>\u0130\u015f Ak\u0131\u015f\u0131 Y\u00f6netimi:<\/strong> Belirli bir s\u0131rayla bilgi toplama ve i\u015fleme s\u00fcre\u00e7lerini kolayla\u015ft\u0131r\u0131rlar.<\/li>\n<li><strong>Ki\u015fiselle\u015ftirme:<\/strong> Kullan\u0131c\u0131 tercihlerine g\u00f6re deneyimi ki\u015fiselle\u015ftirmek i\u00e7in veri sa\u011flarlar.<\/li>\n<\/ul>\n<h4>React ve TypeScript&#8217;in Rol\u00fc<\/h4>\n<p>React, bile\u015fen tabanl\u0131 yap\u0131s\u0131yla formlar\u0131 y\u00f6netmeyi olduk\u00e7a kolayla\u015ft\u0131r\u0131r. Her bir form eleman\u0131n\u0131 (input, select, textarea) bir React bile\u015feni gibi d\u00fc\u015f\u00fcnebilir ve durum y\u00f6netimiyle entegre edebilirsiniz. TypeScript ise bu s\u00fcrece tip g\u00fcvenli\u011fi katman\u0131 ekleyerek, geli\u015ftirme s\u0131ras\u0131nda potansiyel hatalar\u0131 yakalamam\u0131za ve daha okunabilir, bak\u0131m\u0131 kolay kod yazmam\u0131za olanak tan\u0131r. \u00d6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k formlarda, TypeScript&#8217;in sa\u011flad\u0131\u011f\u0131 avantajlar paha bi\u00e7ilmezdir.<\/p>\n<h3>React&#8217;te Temel Form Y\u00f6netimi: Kontroll\u00fc Bile\u015fenler<\/h3>\n<p>React&#8217;te form elemanlar\u0131n\u0131 y\u00f6netmenin en yayg\u0131n yolu &#8220;kontroll\u00fc bile\u015fenler&#8221; kullanmakt\u0131r. Kontroll\u00fc bile\u015fen, form eleman\u0131n\u0131n de\u011ferinin React state&#8217;i taraf\u0131ndan kontrol edildi\u011fi bir elemand\u0131r. Bu, form verilerinin her zaman React state&#8217;inde tutuldu\u011fu ve g\u00fcncellendi\u011fi anlam\u0131na gelir.<\/p>\n<h4>Kontroll\u00fc Bile\u015fen Nedir?<\/h4>\n<p>Kontroll\u00fc bile\u015fenlerde, bir form eleman\u0131n\u0131n de\u011feri (<code>value<\/code> prop&#8217;u) React state&#8217;i taraf\u0131ndan belirlenir ve bu de\u011fer yaln\u0131zca bir <code>onChange<\/code> olay\u0131 arac\u0131l\u0131\u011f\u0131yla g\u00fcncellenebilir. Bu sayede, form eleman\u0131n\u0131n de\u011feri ile React state&#8217;i aras\u0131nda tek y\u00f6nl\u00fc bir veri ak\u0131\u015f\u0131 sa\u011flan\u0131r ve formun davran\u0131\u015f\u0131 tamamen React taraf\u0131ndan y\u00f6netilir.<\/p>\n<h4><code>useState<\/code> ile Durum Y\u00f6netimi<\/h4>\n<p>Form elemanlar\u0131n\u0131n de\u011ferlerini saklamak i\u00e7in React&#8217;in <code>useState<\/code> hook&#8217;unu kullan\u0131r\u0131z. Her bir form eleman\u0131 i\u00e7in ayr\u0131 bir state tan\u0131mlayabilir veya t\u00fcm form verilerini tek bir obje i\u00e7inde tutabiliriz.<\/p>\n<h4><code>onChange<\/code> ve <code>onSubmit<\/code> Olaylar\u0131<\/h4>\n<ul>\n<li><strong><code>onChange<\/code>:<\/strong> Bir form eleman\u0131n\u0131n de\u011feri de\u011fi\u015fti\u011finde tetiklenir. Bu olay dinleyicisi i\u00e7inde, eleman\u0131n yeni de\u011ferini alarak React state&#8217;ini g\u00fcncelleriz.<\/li>\n<li><strong><code>onSubmit<\/code>:<\/strong> Form g\u00f6nderildi\u011finde tetiklenir. Bu olay genellikle sunucuya veri g\u00f6nderme veya ba\u015fka bir i\u015flem yapma gibi eylemleri i\u00e7erir. Varsay\u0131lan sayfa yenileme davran\u0131\u015f\u0131n\u0131 engellemek i\u00e7in <code>event.preventDefault()<\/code> kullanmak \u00f6nemlidir.<\/li>\n<\/ul>\n<h4>Basit Bir Form \u00d6rne\u011fi<\/h4>\n<p>A\u015fa\u011f\u0131daki \u00f6rnek, basit bir kullan\u0131c\u0131 ad\u0131 giri\u015f formunu kontroll\u00fc bir bile\u015fen olarak nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 g\u00f6sterir:<\/p>\n<pre><code>\nimport React, { useState, ChangeEvent, FormEvent } from 'react';\n\nconst LoginForm: React.FC = () => {\n  const [username, setUsername] = useState<string>('');\n\n  const handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setUsername(event.target.value);\n  };\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault(); \/\/ Sayfa yenilemeyi engeller\n    console.log('G\u00f6nderilen kullan\u0131c\u0131 ad\u0131:', username);\n    alert(<code>Ho\u015f geldiniz, ${username}!<\/code>);\n    setUsername(''); \/\/ Formu s\u0131f\u0131rla\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <div>\n        <label htmlFor=\"username\">Kullan\u0131c\u0131 Ad\u0131:<\/label>\n        <input\n          type=\"text\"\n          id=\"username\"\n          name=\"username\"\n          value={username}\n          onChange={handleUsernameChange}\n          placeholder=\"Kullan\u0131c\u0131 ad\u0131n\u0131z\u0131 girin\"\n        \/>\n      <\/div>\n      <button type=\"submit\">Giri\u015f Yap<\/button>\n    <\/form>\n  );\n};\n\nexport default LoginForm;\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, <code>username<\/code> state'i input'un de\u011ferini kontrol eder. <code>handleUsernameChange<\/code> fonksiyonu her tu\u015f vuru\u015funda state'i g\u00fcncellerken, <code>handleSubmit<\/code> formu g\u00f6nderir.<\/p>\n<h3>TypeScript ile Formlarda Tip G\u00fcvenli\u011fi<\/h3>\n<p>TypeScript, React formlar\u0131na tip g\u00fcvenli\u011fi getirerek geli\u015ftirme s\u00fcrecini daha sa\u011flam ve hatas\u0131z hale getirir. \u00d6zellikle form verilerinin yap\u0131s\u0131n\u0131 tan\u0131mlamak ve olay nesnelerini do\u011fru bir \u015fekilde tiplendirmek, b\u00fcy\u00fck projelerde hata ay\u0131klama s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n<h4>Neden TypeScript Kullanmal\u0131y\u0131z?<\/h4>\n<ul>\n<li><strong>Hata Yakalama:<\/strong> Derleme zaman\u0131nda tip uyumsuzluklar\u0131n\u0131 tespit ederek \u00e7al\u0131\u015fma zaman\u0131 hatalar\u0131n\u0131 \u00f6nler.<\/li>\n<li><strong>Kod Okunabilirli\u011fi:<\/strong> Veri yap\u0131lar\u0131n\u0131n ve fonksiyon parametrelerinin ne bekledi\u011fini a\u00e7\u0131k\u00e7a belirtir.<\/li>\n<li><strong>Geli\u015ftirici Deneyimi:<\/strong> Otomatik tamamlama (autocompletion) ve an\u0131nda geri bildirim (instant feedback) ile geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131r.<\/li>\n<li><strong>Bak\u0131m Kolayl\u0131\u011f\u0131:<\/strong> Kod taban\u0131n\u0131n zamanla b\u00fcy\u00fcmesi ve de\u011fi\u015fmesi durumunda tutarl\u0131l\u0131\u011f\u0131 sa\u011flar.<\/li>\n<\/ul>\n<h4>Form Durumlar\u0131 \u0130\u00e7in Aray\u00fczler (Interfaces) Tan\u0131mlama<\/h4>\n<p>Birden fazla giri\u015f alan\u0131 olan formlar i\u00e7in, formun t\u00fcm verilerini tutan bir obje state'i kullanmak yayg\u0131nd\u0131r. Bu objenin yap\u0131s\u0131n\u0131 bir TypeScript aray\u00fcz\u00fc (interface) ile tan\u0131mlamak, form verilerine eri\u015firken ve bunlar\u0131 g\u00fcncellerken tip g\u00fcvenli\u011fi sa\u011flar.<\/p>\n<pre><code>\ninterface FormData {\n  username: string;\n  email: string;\n  password: string;\n  rememberMe: boolean;\n}\n\nconst RegistrationForm: React.FC = () => {\n  const [formData, setFormData] = useState<FormData>({\n    username: '',\n    email: '',\n    password: '',\n    rememberMe: false,\n  });\n\n  \/\/ ... (onChange ve onSubmit fonksiyonlar\u0131 a\u015fa\u011f\u0131da g\u00f6sterilecek)\n};\n<\/pre>\n<p><\/code><\/p>\n<h4>Olay Nesneleri \u0130\u00e7in Tip Tan\u0131mlar\u0131<\/h4>\n<p>React'in sentetik olaylar\u0131 (synthetic events) i\u00e7in TypeScript'in sa\u011flad\u0131\u011f\u0131 \u00f6zel tipleri kullanmak, olay nesnelerine eri\u015firken do\u011fru \u00f6zelliklere eri\u015fti\u011fimizden emin olmam\u0131z\u0131 sa\u011flar.<\/p>\n<ul>\n<li><code>ChangeEvent<HTMLInputElement><\/code>: <code><input><\/code> elemanlar\u0131n\u0131n <code>onChange<\/code> olaylar\u0131 i\u00e7in.<\/li>\n<li><code>ChangeEvent<HTMLTextAreaElement><\/code>: <code><textarea><\/code> elemanlar\u0131n\u0131n <code>onChange<\/code> olaylar\u0131 i\u00e7in.<\/li>\n<li><code>ChangeEvent<HTMLSelectElement><\/code>: <code><select><\/code> elemanlar\u0131n\u0131n <code>onChange<\/code> olaylar\u0131 i\u00e7in.<\/li>\n<li><code>FormEvent<HTMLFormElement><\/code>: <code><br \/>\n<form><\/code> eleman\u0131n\u0131n <code>onSubmit<\/code> olaylar\u0131 i\u00e7in.<\/li>\n<\/ul>\n<h3>\u00c7oklu Giri\u015f Alanlar\u0131n\u0131 Y\u00f6netme ve Dinamik Formlar<\/h3>\n<p>Ger\u00e7ek d\u00fcnya uygulamalar\u0131nda formlar genellikle birden fazla giri\u015f alan\u0131na sahiptir. Her giri\u015f alan\u0131 i\u00e7in ayr\u0131 bir <code>useState<\/code> ve <code>onChange<\/code> fonksiyonu yazmak yerine, daha verimli y\u00f6ntemler kullanabiliriz.<\/p>\n<h4>Tek Bir <code>onChange<\/code> Fonksiyonu Kullanma<\/h4>\n<p>Form verilerini bir obje olarak tuttu\u011fumuzda, t\u00fcm giri\u015f alanlar\u0131 i\u00e7in tek bir genel <code>onChange<\/code> fonksiyonu yazabiliriz. Bu fonksiyon, olay nesnesinin <code>name<\/code> \u00f6zelli\u011fini kullanarak hangi giri\u015f alan\u0131n\u0131n g\u00fcncellendi\u011fini belirler ve ilgili state'i g\u00fcnceller.<\/p>\n<pre><code>\nimport React, { useState, ChangeEvent, FormEvent } from 'react';\n\ninterface FormData {\n  username: string;\n  email: string;\n  password: string;\n}\n\nconst MultiInputForm: React.FC = () => {\n  const [formData, setFormData] = useState<FormData>({\n    username: '',\n    email: '',\n    password: '',\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const { name, value } = event.target;\n    setFormData(prevData => ({\n      ...prevData,\n      [name]: value, \/\/ name \u00f6zelli\u011fini kullanarak ilgili alan\u0131 g\u00fcnceller\n    }));\n  };\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    console.log('G\u00f6nderilen veriler:', formData);\n    alert(JSON.stringify(formData, null, 2));\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <div>\n        <label htmlFor=\"username\">Kullan\u0131c\u0131 Ad\u0131:<\/label>\n        <input type=\"text\" id=\"username\" name=\"username\" value={formData.username} onChange={handleChange} \/>\n      <\/div>\n      <div>\n        <label htmlFor=\"email\">E-posta:<\/label>\n        <input type=\"email\" id=\"email\" name=\"email\" value={formData.email} onChange={handleChange} \/>\n      <\/div>\n      <div>\n        <label htmlFor=\"password\">\u015eifre:<\/label>\n        <input type=\"password\" id=\"password\" name=\"password\" value={formData.password} onChange={handleChange} \/>\n      <\/div>\n      <button type=\"submit\">Kaydol<\/button>\n    <\/form>\n  );\n};\n\nexport default MultiInputForm;\n<\/pre>\n<p><\/code><\/p>\n<p>Bu yakla\u015f\u0131m, kod tekrar\u0131n\u0131 azalt\u0131r ve form b\u00fcy\u00fcd\u00fck\u00e7e y\u00f6netimi kolayla\u015ft\u0131r\u0131r.<\/p>\n<h4>Giri\u015f Alanlar\u0131n\u0131n Dinamik Olarak Olu\u015fturulmas\u0131<\/h4>\n<p>Bazen form alanlar\u0131 dinamik olarak eklenip \u00e7\u0131kar\u0131labilir (\u00f6rne\u011fin, bir anket formu veya \u00fcr\u00fcn ekleme formu). Bu durumda, form alanlar\u0131n\u0131 bir dizi (array) i\u00e7inde tutarak ve bu diziyi <code>map<\/code> metoduyla render ederek dinamik formlar olu\u015fturabiliriz.<\/p>\n<pre><code>\n\/\/ \u00d6rnek bir dinamik form senaryosu\ninterface Skill {\n  id: string;\n  name: string;\n  level: 'beginner' | 'intermediate' | 'advanced';\n}\n\nconst DynamicSkillsForm: React.FC = () => {\n  const [skills, setSkills] = useState<Skill[]>([\n    { id: '1', name: 'JavaScript', level: 'intermediate' },\n  ]);\n\n  const handleSkillChange = (id: string, field: keyof Skill, value: string) => {\n    setSkills(prevSkills =>\n      prevSkills.map(skill =>\n        skill.id === id ? { ...skill, [field]: value } : skill\n      )\n    );\n  };\n\n  const addSkill = () => {\n    setSkills(prevSkills => [\n      ...prevSkills,\n      { id: Date.now().toString(), name: '', level: 'beginner' },\n    ]);\n  };\n\n  const removeSkill = (id: string) => {\n    setSkills(prevSkills => prevSkills.filter(skill => skill.id !== id));\n  };\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    console.log('G\u00f6nderilen yetenekler:', skills);\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <h3>Yetenekleriniz<\/h3>\n      {skills.map(skill => (\n        <div key={skill.id} style={{ marginBottom: '10px' }}>\n          <input\n            type=\"text\"\n            placeholder=\"Yetenek Ad\u0131\"\n            value={skill.name}\n            onChange={e => handleSkillChange(skill.id, 'name', e.target.value)}\n          \/>\n          <select\n            value={skill.level}\n            onChange={e => handleSkillChange(skill.id, 'level', e.target.value as Skill['level'])}\n          >\n            <option value=\"beginner\">Ba\u015flang\u0131\u00e7<\/option>\n            <option value=\"intermediate\">Orta<\/option>\n            <option value=\"advanced\">\u0130leri<\/option>\n          <\/select>\n          <button type=\"button\" onClick={() => removeSkill(skill.id)}>Kald\u0131r<\/button>\n        <\/div>\n      ))}\n      <button type=\"button\" onClick={addSkill}>Yetenek Ekle<\/button>\n      <button type=\"submit\" style={{ marginLeft: '10px' }}>Kaydet<\/button>\n    <\/form>\n  );\n};\nexport default DynamicSkillsForm;\n<\/pre>\n<p><\/code><\/p>\n<h3>Form Do\u011frulama (Validation) ve Hata Y\u00f6netimi<\/h3>\n<p>Kullan\u0131c\u0131lardan do\u011fru ve ge\u00e7erli veri almak, her formun temel amac\u0131d\u0131r. Form do\u011frulama, bu s\u00fcrecin kritik bir par\u00e7as\u0131d\u0131r. React ve TypeScript ile hem istemci taraf\u0131nda (client-side) hem de sunucu taraf\u0131nda (server-side) do\u011frulama stratejileri geli\u015ftirebiliriz.<\/p>\n<h4>Client-Side Do\u011frulaman\u0131n \u00d6nemi<\/h4>\n<p>\u0130stemci taraf\u0131 do\u011frulama, kullan\u0131c\u0131ya an\u0131nda geri bildirim sa\u011flayarak hatalar\u0131 hen\u00fcz veri sunucuya ula\u015fmadan d\u00fczeltme f\u0131rsat\u0131 verir. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirir ve sunucu y\u00fck\u00fcn\u00fc azalt\u0131r. Ancak, g\u00fcvenlik i\u00e7in asla yaln\u0131zca istemci taraf\u0131 do\u011frulamaya g\u00fcvenilmemelidir; sunucu taraf\u0131 do\u011frulama her zaman zorunludur.<\/p>\n<h4>Basit Do\u011frulama Kurallar\u0131 Uygulama<\/h4>\n<p>Do\u011frulama mant\u0131\u011f\u0131n\u0131 form bile\u015fenimizin i\u00e7ine veya ayr\u0131 bir yard\u0131mc\u0131 fonksiyona yerle\u015ftirebiliriz. Genellikle, bir <code>errors<\/code> state'i tutarak her alan i\u00e7in hata mesajlar\u0131n\u0131 saklar\u0131z.<\/p>\n<pre><code>\nimport React, { useState, ChangeEvent, FormEvent } from 'react';\n\ninterface FormData {\n  username: string;\n  email: string;\n}\n\ninterface FormErrors {\n  username?: string;\n  email?: string;\n}\n\nconst ValidationForm: React.FC = () => {\n  const [formData, setFormData] = useState<FormData>({\n    username: '',\n    email: '',\n  });\n  const [errors, setErrors] = useState<FormErrors>({});\n\n  const validate = (): FormErrors => {\n    const newErrors: FormErrors = {};\n    if (!formData.username) {\n      newErrors.username = 'Kullan\u0131c\u0131 ad\u0131 bo\u015f b\u0131rak\u0131lamaz.';\n    } else if (formData.username.length < 3) {\n      newErrors.username = 'Kullan\u0131c\u0131 ad\u0131 en az 3 karakter olmal\u0131.';\n    }\n    if (!formData.email) {\n      newErrors.email = 'E-posta bo\u015f b\u0131rak\u0131lamaz.';\n    } else if (!\/\\S+@\\S+\\.\\S+\/.test(formData.email)) {\n      newErrors.email = 'Ge\u00e7erli bir e-posta adresi girin.';\n    }\n    return newErrors;\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const { name, value } = event.target;\n    setFormData(prevData => ({ ...prevData, [name]: value }));\n    \/\/ Kullan\u0131c\u0131 yazarken hatalar\u0131 temizleyebiliriz\n    if (errors[name as keyof FormErrors]) {\n        setErrors(prevErrors => ({ ...prevErrors, [name]: undefined }));\n    }\n  };\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const validationErrors = validate();\n    setErrors(validationErrors);\n\n    if (Object.keys(validationErrors).length === 0) {\n      console.log('Form ge\u00e7erli, g\u00f6nderiliyor:', formData);\n      alert('Form ba\u015far\u0131yla g\u00f6nderildi!');\n      \/\/ API \u00e7a\u011fr\u0131s\u0131 burada yap\u0131labilir\n    } else {\n      console.log('Formda hatalar var:', validationErrors);\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <div>\n        <label htmlFor=\"username\">Kullan\u0131c\u0131 Ad\u0131:<\/label>\n        <input type=\"text\" id=\"username\" name=\"username\" value={formData.username} onChange={handleChange} \/>\n        {errors.username && <p style={{ color: 'red' }}>{errors.username}<\/p>}\n      <\/div>\n      <div>\n        <label htmlFor=\"email\">E-posta:<\/label>\n        <input type=\"email\" id=\"email\" name=\"email\" value={formData.email} onChange={handleChange} \/>\n        {errors.email && <p style={{ color: 'red' }}>{errors.email}<\/p>}\n      <\/div>\n      <button type=\"submit\">G\u00f6nder<\/button>\n    <\/form>\n  );\n};\n\nexport default ValidationForm;\n<\/pre>\n<p><\/code><\/p>\n<h4>Hata Mesajlar\u0131n\u0131 Kullan\u0131c\u0131ya G\u00f6sterme<\/h4>\n<p>Hata mesajlar\u0131n\u0131 ilgili giri\u015f alan\u0131n\u0131n hemen alt\u0131nda, farkl\u0131 bir renkte (genellikle k\u0131rm\u0131z\u0131) g\u00f6stermek, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan \u00f6nemlidir. Yukar\u0131daki \u00f6rnekte bu g\u00f6sterim \u015fekli bulunmaktad\u0131r.<\/p>\n<h4>Do\u011frulama Durumunu Y\u00f6netme<\/h4>\n<p>Do\u011frulama durumunu (<code>errors<\/code> state'i) y\u00f6netmek, formun genel ge\u00e7erlili\u011fini kontrol etmemizi sa\u011flar. Formun g\u00f6nderilip g\u00f6nderilmeyece\u011fine karar verirken bu state'i kullan\u0131r\u0131z.<\/p>\n<h3>Geli\u015fmi\u015f Form K\u00fct\u00fcphaneleri ve Kullan\u0131m Senaryolar\u0131<\/h3>\n<p>React'te form y\u00f6netimi, \u00f6zellikle karma\u015f\u0131k formlar, dinamik alanlar, derinlemesine do\u011frulama ve performans optimizasyonu gerektiren durumlarda elle yazmak yorucu olabilir. Bu noktada, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131ran ve kolayla\u015ft\u0131ran geli\u015fmi\u015f form k\u00fct\u00fcphaneleri devreye girer.<\/p>\n<h4>Neden K\u00fct\u00fcphane Kullanmal\u0131y\u0131z?<\/h4>\n<ul>\n<li><strong>Karma\u015f\u0131kl\u0131\u011f\u0131 Azaltma:<\/strong> Form state'ini, do\u011frulama mant\u0131\u011f\u0131n\u0131 ve hata y\u00f6netimini soyutlar.<\/li>\n<li><strong>Performans Optimizasyonu:<\/strong> Gereksiz yeniden render'lar\u0131 azaltarak performans\u0131 art\u0131r\u0131r.<\/li>\n<li><strong>Geli\u015fmi\u015f Do\u011frulama:<\/strong> Schema tabanl\u0131 (yup, zod) do\u011frulama entegrasyonlar\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/li>\n<li><strong>Kod Tekrar\u0131n\u0131 \u00d6nleme:<\/strong> Ortak form senaryolar\u0131 i\u00e7in haz\u0131r \u00e7\u00f6z\u00fcmler sunar.<\/li>\n<li><strong>Topluluk Deste\u011fi:<\/strong> Geni\u015f topluluklar taraf\u0131ndan desteklenir ve g\u00fcncel kal\u0131r.<\/li>\n<\/ul>\n<h4>React Hook Form'a K\u0131sa Bir Bak\u0131\u015f<\/h4>\n<p><a href=\"https:\/\/react-hook-form.com\/\">React Hook Form<\/a>, performansa odaklanan, minimal yeniden render'lar sa\u011flayan ve basit bir API'ye sahip pop\u00fcler bir k\u00fct\u00fcphanedir. \u00d6zellikle b\u00fcy\u00fck formlarda performans\u0131 nedeniyle tercih edilir. TypeScript ile sorunsuz entegrasyon sunar.<\/p>\n<pre><code>\nimport React from 'react';\nimport { useForm, SubmitHandler } from 'react-hook-form';\n\ninterface IFormInput {\n  firstName: string;\n  lastName: string;\n  age: number;\n}\n\nconst MyHookForm: React.FC = () => {\n  const { register, handleSubmit, formState: { errors } } = useForm<IFormInput>();\n\n  const onSubmit: SubmitHandler<IFormInput> = data => {\n    console.log(data);\n    alert(JSON.stringify(data, null, 2));\n  };\n\n  return (\n    <form onSubmit={handleSubmit(onSubmit)}>\n      <div>\n        <label>Ad:<\/label>\n        <input {...register('firstName', { required: true, maxLength: 20 })} \/>\n        {errors.firstName && <p style={{ color: 'red\">Ad gerekli ve max 20 karakter.<\/p>}}\n      <\/div>\n      <div>\n        <label>Soyad:<\/label>\n        <input {...register('lastName', { pattern: \/^[A-Za-z]+$\/i })} \/>\n        {errors.lastName && <p style={{ color: 'red\">Soyad sadece harf i\u00e7ermeli.<\/p>}}\n      <\/div>\n      <div>\n        <label>Ya\u015f:<\/label>\n        <input type=\"number\" {...register('age', { min: 18, max: 99 })} \/>\n        {errors.age && <p style={{ color: 'red\">Ya\u015f 18-99 aras\u0131 olmal\u0131.<\/p>}}\n      <\/div>\n      <button type=\"submit\">G\u00f6nder<\/button>\n    <\/form>\n  );\n};\n\nexport default MyHookForm;\n<\/pre>\n<p><\/code><\/p>\n<h4>Formik'e K\u0131sa Bir Bak\u0131\u015f<\/h4>\n<p><a href=\"https:\/\/formik.org\/\">Formik<\/a>, React form y\u00f6netiminde pop\u00fclerli\u011fini koruyan ba\u015fka bir k\u00fct\u00fcphanedir. Kapsaml\u0131 bir API sunar ve \u00f6zellikle karma\u015f\u0131k form state'leri, do\u011frulama (Yup ile entegrasyonu g\u00fc\u00e7l\u00fcd\u00fcr) ve form g\u00f6nderme s\u00fcre\u00e7lerini y\u00f6netmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Render prop veya hook tabanl\u0131 yakla\u015f\u0131<\/p>\n","protected":false},"excerpt":{"rendered":"Modern web uygulamalar\u0131, kullan\u0131c\u0131larla etkile\u015fim kurman\u0131n say\u0131s\u0131z yolunu sunar. Bu etkile\u015fimlerin ba\u015f\u0131nda ise formlar gelir. Kullan\u0131c\u0131 kayd\u0131, g&#8230;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-38850","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>#100DaysofCode G\u00fcn 8: React ve TypeScript ile Form Y\u00f6netimini Anlamak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"#100DaysofCode G\u00fcn 8: React ve TypeScript ile Form Y\u00f6netimini Anlamak\" \/>\n<meta property=\"og:description\" content=\"Modern web uygulamalar\u0131, kullan\u0131c\u0131larla etkile\u015fim kurman\u0131n say\u0131s\u0131z yolunu sunar. Bu etkile\u015fimlerin ba\u015f\u0131nda ise formlar gelir. Kullan\u0131c\u0131 kayd\u0131, g...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-08T22:30:41+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"#100DaysofCode G\u00fcn 8: React ve TypeScript ile Form Y\u00f6netimini Anlamak\",\"datePublished\":\"2026-02-08T22:30:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/\"},\"wordCount\":1519,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/\",\"name\":\"#100DaysofCode G\u00fcn 8: React ve TypeScript ile Form Y\u00f6netimini Anlamak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-08T22:30:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"#100DaysofCode G\u00fcn 8: React ve TypeScript ile Form Y\u00f6netimini Anlamak\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"#100DaysofCode G\u00fcn 8: React ve TypeScript ile Form Y\u00f6netimini Anlamak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/","og_locale":"tr_TR","og_type":"article","og_title":"#100DaysofCode G\u00fcn 8: React ve TypeScript ile Form Y\u00f6netimini Anlamak","og_description":"Modern web uygulamalar\u0131, kullan\u0131c\u0131larla etkile\u015fim kurman\u0131n say\u0131s\u0131z yolunu sunar. Bu etkile\u015fimlerin ba\u015f\u0131nda ise formlar gelir. Kullan\u0131c\u0131 kayd\u0131, g...","og_url":"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-08T22:30:41+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"10 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"#100DaysofCode G\u00fcn 8: React ve TypeScript ile Form Y\u00f6netimini Anlamak","datePublished":"2026-02-08T22:30:41+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/"},"wordCount":1519,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/","url":"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/","name":"#100DaysofCode G\u00fcn 8: React ve TypeScript ile Form Y\u00f6netimini Anlamak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-08T22:30:41+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"#100DaysofCode G\u00fcn 8: React ve TypeScript ile Form Y\u00f6netimini Anlamak"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=38850"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38850\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}