React Formları
React Formları, modern web uygulamalarında kullanıcı etkileşimini yönetmek için kritik bir bileşendir. Formlar, veri toplamak, doğrulamak ve kullanıcı ile etkileşim sağlamak için kullanılır. React ile formlar, geleneksel HTML formlarından farklı olarak, her alanın değerini React state’i üzerinden yönetmenize olanak tanır. Bu sayede veriler üzerinde tam kontrol sağlanır, gerçek zamanlı doğrulamalar yapılabilir ve kullanıcı deneyimi iyileştirilir.
React Formları, özellikle SPA’larda (Single Page Application) kullanıcıdan bilgi almak, form verilerini doğrulamak ve sunucuya göndermek için idealdir. Controlled component yaklaşımı, input değerlerini state ile senkronize ederek güvenli ve öngörülebilir veri akışı sağlar. Uncontrolled component yaklaşımı ise ref kullanarak DOM’dan direkt veri almanıza imkan tanır ve basit formlar için uygundur.
Bu eğitimde, React Formları oluşturmayı, state yönetimini etkin bir şekilde kullanmayı, performans optimizasyonunu ve yaygın hatalardan kaçınmayı öğreneceksiniz. Ayrıca formları gerçek dünya projelerine entegre etmeyi, ileri seviye doğrulama ve hata yönetimi tekniklerini, ve React best practice’lerini keşfedeceksiniz. Bu bilgiler, uygulamanızın hem kullanıcı deneyimini hem de bakımını geliştirmek için kritik öneme sahiptir.
Temel Örnek
jsximport React, { useState } from 'react';
function BasicForm() {
const [formData, setFormData] = useState({ isim: '', email: '' });
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
console.log('Form Verisi:', formData);
alert(`Merhaba ${formData.isim}, email adresiniz: ${formData.email}`);
};
return ( <form onSubmit={handleSubmit}> <div> <label>İsim:</label> <input type="text" name="isim" value={formData.isim} onChange={handleChange} /> </div> <div> <label>Email:</label> <input type="email" name="email" value={formData.email} onChange={handleChange} /> </div> <button type="submit">Gönder</button> </form>
);
}
export default BasicForm;Bu temel örnek, bir formu nasıl oluşturacağınızı ve state ile nasıl bağlayacağınızı göstermektedir. useState hook’u ile form verilerini yönetiyoruz ve input’lar controlled component olarak çalışıyor. handleChange fonksiyonu ile state’i immutably güncelliyoruz ve doğrudan mutasyonlardan kaçınıyoruz. handleSubmit fonksiyonu ise formun varsayılan gönderimini engelleyerek kendi mantığımızı çalıştırmamızı sağlıyor.
Bu yöntem, gerçek dünya projelerinde veri akışını merkezi ve öngörülebilir tutar. Ayrıca hata yönetimi ve form doğrulama işlemleri için uygun bir temel sağlar. React’in best practice’lerini takip ederek prop drilling ve gereksiz re-render’lardan kaçınır, component bazlı ve yeniden kullanılabilir formlar oluşturabilirsiniz.
Pratik Örnek
jsximport React, { useState, useEffect } from 'react';
function RegistrationForm() {
const [formData, setFormData] = useState({ kullanici: '', sifre: '', sifreOnay: '' });
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
if (isSubmitting) {
const noErrors = Object.keys(errors).length === 0;
if (noErrors) {
console.log('Form başarıyla gönderildi:', formData);
alert('Kayıt tamamlandı!');
}
setIsSubmitting(false);
}
}, [errors]);
const validate = () => {
let tempErrors = {};
if (!formData.kullanici) tempErrors.kullanici = "Kullanıcı adı gerekli";
if (!formData.sifre) tempErrors.sifre = "Şifre gerekli";
if (formData.sifre !== formData.sifreOnay) tempErrors.sifreOnay = "Şifreler eşleşmiyor";
return tempErrors;
};
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
setErrors(validate());
setIsSubmitting(true);
};
return ( <form onSubmit={handleSubmit}> <div> <label>Kullanıcı:</label> <input name="kullanici" value={formData.kullanici} onChange={handleChange} />
{errors.kullanici && <span>{errors.kullanici}</span>} </div> <div> <label>Şifre:</label> <input type="password" name="sifre" value={formData.sifre} onChange={handleChange} />
{errors.sifre && <span>{errors.sifre}</span>} </div> <div> <label>Şifre Onay:</label> <input type="password" name="sifreOnay" value={formData.sifreOnay} onChange={handleChange} />
{errors.sifreOnay && <span>{errors.sifreOnay}</span>} </div> <button type="submit">Kayıt Ol</button> </form>
);
}
export default RegistrationForm;Bu örnek, ileri seviye bir kayıt formu ve doğrulama mekanizması içerir. errors state’i ile hata yönetimi modüler bir şekilde yapılmaktadır. useEffect hook’u form gönderiminden sonra tetiklenir ve başarılı doğrulama durumunda işlem yapar. validate fonksiyonu, form doğrulama mantığını component’ten ayırarak okunabilirliği artırır.
Bu yaklaşım, state yönetimi ve veri akışını etkin şekilde gösterir. Prop drilling’i engeller, mutasyonlardan kaçınır ve kullanıcıya anlık hata feedback’i sağlar. Ayrıca güvenlik ve performans açısından kontrollü input kullanımı ve state yönetimi önemlidir.
📊 Referans Tablosu
| React Element/Concept | Description | Usage Example |
|---|---|---|
| useState | Component içi lokal state yönetimi | const [value, setValue] = useState('') |
| useEffect | Effect ve lifecycle yönetimi | useEffect(() => { console.log(value); }, [value]) |
| Controlled Components | Input değerlerinin state ile senkronize edilmesi | <input value={stateValue} onChange={handleChange} /> |
| Event Handling | onChange ve onSubmit kullanımı | <form onSubmit={handleSubmit}> |
| Reusable Components | Tekrar kullanılabilir form bileşenleri | <FormInput name="email" value={email} onChange={handleChange} /> |
React Formları için en iyi uygulamalar, controlled component kullanımı, merkezi state yönetimi ve öngörülebilir veri akışıdır. Prop drilling, gereksiz re-render ve state mutasyonlarından kaçınılmalıdır.
Performans optimizasyonu için handleChange fonksiyonlarını memolaştırmak ve sık güncellenen alanlarda debounce kullanmak önerilir. Form doğrulama, kullanıcı deneyimi ve güvenlik açısından önemlidir. React Developer Tools kullanımı, form veri akışını takip etmek ve hata ayıklamak için faydalıdır.
Modüler ve yeniden kullanılabilir tasarım, projenin ölçeklenebilirliğini ve bakımını artırır. Bileşen hiyerarşisi ve state kapsülasyonu, uygulamanın kalitesini ve sürdürülebilirliğini yükseltir.
Özet ve sonraki adımlar:
Bu rehberde, controlled component formları, state yönetimi, doğrulama ve lifecycle hook kullanımı ile yeniden kullanılabilir bileşen oluşturmayı öğrendiniz. Artık güvenli ve performanslı form bileşenleri geliştirebilirsiniz.
Daha ileri seviyede, React Hook Form veya Formik gibi kütüphaneleri keşfederek kompleks ve dinamik formlar oluşturabilirsiniz. Basit formlarla başlayıp, nested ve dynamic formlara geçiş yapmanız tavsiye edilir. Ek kaynaklar olarak React dokümantasyonu ve ileri seviye form yönetimi kursları önerilir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek