React Academy · Ders

React Hook Form'a Başlangıç

RHF'yi kurun, useForm'u çağırın, girdileri kaydedin ve form gönderimini yönetin.

React Hook Form'a Başlangıç, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste React Hook Form'u kuracak, useForm'u çağıracak, girdileri kaydedecek ve tek tek durum değişkenlerini yönetmeden form gönderimlerini ele alacaksınız.

React Hook Form Neden Kullanılır?

Geleneksel, denetlenen React formları her alan için bir useState ve her girdi için bir onChange gerektirir. React Hook Form (RHF), tüm bunları denetlenmeyen girdileri kullanarak kendi içinde yönetir ve daha az yeniden işleme ile daha basit bir API sunar.

Kurulum

Paketi kurun. Temel kullanım için ek eş bağımlılık gerekmez.

npm install react-hook-form

useForm Kancası

register işlevini, handleSubmit sarmalayıcısını ve formState'i almak için useForm() çağrısını yapın. Bunlar, her form için ihtiyaç duyacağınız üç temel parçadır.

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

Girdileri Kaydetme

register('fieldName') sonucunu her girdinin üzerine yayın. RHF, perde arkasında girdiye bir ref ve olay işleyicileri ekler — value veya onChange gerekmez.

<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

onSubmit Geri Çağrısı

handleSubmit tüm alanları doğrular ve yalnızca form geçerliyse, türü belirlenmiş bir veri nesnesiyle onSubmit geri çağrınızı çalıştırır. Doğrulama başarısız olursa bunun yerine formState.errors değerini doldurur.

const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

Varsayılan Değerler

Form alanlarını önceden doldurmak için `defaultValues` değerini useForm'a iletin. Bu, mevcut verileri yüklediğiniz düzenleme formları için kullanışlıdır.

const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

formState Özellikleri

formState kullanışlı doğru/yanlış değerleri sunar: `isSubmitting` (handleSubmit çalışırken true), `isDirty` (herhangi bir alan değiştiyse true), `isValid` (hiç hata yoksa true) ve `errors` nesnesi.

const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

Formu Sıfırlama

Tüm alanları temizlemek ve formState'i sıfırlamak için `reset()` çağrısını yapın. İsteğe bağlı olarak yeni varsayılan değerler iletebilirsiniz.

const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

Performans Avantajı

RHF, denetlenmeyen girdiler kullandığı için denetlenen React formlarının aksine form her tuş vuruşunda yeniden işlenmez. Yalnızca doğrulama hataları ve gönderim durumu yeniden işlemeye neden olur; bu da büyük formların hızlı tepki vermesini sağlar.

Hızlı Kontrol

Kullanıcı formu gönderdiğinde handleSubmit(onSubmit) çağrısı ne yapar?

Özet

RHF'yi kurun, register ve handleSubmit işlevlerini almak için useForm çağrısını yapın, girdilerde register() sonucunu yayın ve gönderim işleyicinizi handleSubmit ile sarın. Düzenleme formları için defaultValues ayarlayın ve başarılı gönderimden sonra reset() çağrısını yapın.

Sırada

Sonraki ders: **Doğrulama Kuralları ve Hata Mesajları** — yerleşik doğrulama kurallarını uygulayacak ve kullanıcılara hata mesajları göstereceksiniz.

Sıkça Sorulan Sorular

“React Hook Form'a Başlangıç” dersi ücretsiz mi?

Evet — “React Hook Form'a Başlangıç” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“React Hook Form'a Başlangıç” dersinde ne öğreneceğim?

RHF'yi kurun, useForm'u çağırın, girdileri kaydedin ve form gönderimini yönetin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“React Hook Form'a Başlangıç” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← React Academy Sayfasına Dön