Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan, React'te form yönetimi ve doğrulama konularını kapsayan kapsamlı bir eğitim içeriğidir. Eğitmen, adım adım kod yazarak form elemanlarının nasıl kullanılacağını göstermektedir.
- Video, Formik ve React Hook Form kütüphanelerinin kullanımını, form elemanlarının (input, textarea, checkbox, select, file) oluşturulmasını, form doğrulama kurallarının nasıl uygulanacağını ve form verilerinin nasıl yönetileceğini anlatmaktadır. Eğitim, login sayfası oluşturma, dosya yükleme işlemleri, form resetleme ve validation hatalarını kullanıcıya gösterme gibi pratik uygulamaları içermektedir.
- Videoda ayrıca Tailwind CSS ile form elemanlarının stilize edilmesi, class names paketi kullanımı, form doğrulama kurallarının Türkçeleştirilmesi ve form elemanlarının görsel durumlarının validation durumuna göre nasıl değiştirileceği gibi konular da ele alınmaktadır. Video yaklaşık bir saat yarım sürmektedir.
- Formik Kullanarak Form Yönetimi
- Daha önce elle kontrol edilen formlar için şimdi Formik adlı paket kullanılarak sistematik bir şekilde ilerlenecek.
- Formik, formları yönetmek için birden fazla güzel paketten biri olup, en iyisi mi tartışılabilir bir konu.
- Formik dışında ReactForm Hook gibi hem React hem React Native'de kullanılabilen başka paketler de mevcut.
- 01:00Formik Kurulumu ve Kullanımı
- Formik kurulumu için "npm install formik" komutu kullanılabilir.
- Formik, useFormik, Field, FastField, Form, FormikProvider gibi çeşitli bileşenleri ve hook'ları sunar.
- useFormik hook'u, formun başlangıç değerlerini (initial values) ve submit işlemini (onSubmit) yönetmek için kullanılır.
- 02:12Login Formu Örneği
- Login formunda username ve password alanları için başlangıç değerleri belirlenir.
- Formik ile oluşturulan formda submit işlemi için handleSubmit metodu kullanılır.
- Input alanları için value ve onChange değerleri Formik'ten alınarak kullanılır.
- 06:04Formik Bileşenleri Kullanımı
- Formik, Form ve FormikProvider adında iki bileşen sunar.
- Form bileşeni, initial values ve onSubmit parametreleriyle kullanılır.
- Field bileşeni, input alanlarını daha kolay oluşturmak için kullanılabilecek ve name özelliğiyle eşleştirilir.
- 08:37Form Oluşturma ve Alanlar
- Kullanıcı, "iletisim" sayfası oluşturarak form oluşturma işlemine başlıyor.
- Form için "name", "accept", "skills", "about" ve "gender" gibi alanlar tanımlanıyor.
- Form alanları için farklı input türleri (text, checkbox, select) kullanılarak form oluşturuluyor.
- 10:19Form Alanlarının Özellikleri
- "About" alanı için textarea kullanılarak boyut ayarlanabiliyor.
- "Accept" alanı için checkbox kullanılıyor ve başlangıçta checked durumu ayarlanabiliyor.
- Butonun disabled durumu, "accept" alanının değeriyle kontrol edilebiliyor.
- 12:08Select ve Multiple Seçim Alanları
- "Gender" alanı için selectbox oluşturuluyor ve erkek-kadın seçenekleri ekleniyor.
- "Skills" alanı için birden fazla seçim yapabilmek üzere "multiple" özelliği kullanılıyor.
- Multiple seçeneğinde, varsayılan değer olarak boş bir array atanması gerekiyor.
- 14:18File Input ve Custom Component Oluşturma
- File input alanı için "type file" ve "name avatar" gibi özellikler kullanılıyor.
- Custom component oluşturmak için "useField" hook'u kullanılıyor.
- "useField" ile "field", "meta" ve "helpers" değerleri alınıp, label ve input elementi oluşturuluyor.
- 17:03Custom Component Özellikleri
- "field" içinde "name", "onChange", "onBlur" ve "value" gibi özellikler bulunuyor.
- "meta" içinde "touched", "initialValue", "initialTouched" gibi durum bilgileri bulunuyor.
- "helpers" içinde "setValue", "setTouched", "setError" gibi metodlar bulunuyor ve custom işlemlerde kullanılabiliyor.
- 19:46Form Verilerini Özelleştirme
- Form verileri başarıyla dosya olarak binary olarak gönderilebiliyor.
- File field'ın içerisindeki val tipi file'a dönüştürülebilir.
- Formda checkbox eklemek için React Icons kütüphanesi kurulacak.
- 21:37Tailwind CSS Kullanımı
- Tailwind CSS paketi projeye dahil ediliyor.
- Tailwind konfigürasyonu için content değiştiriliyor ve index.css oluşturuluyor.
- Tailwind CSS ile form elemanlarının stili ayarlanıyor.
- 23:59Avatar Dosya Seçici Tasarımı
- Avatar dosya seçici için label'ın görünümü değiştiriliyor.
- Dosya seçmek için bir buton oluşturuluyor ve stil veriliyor.
- Butona tıklandığında dosya seçici açması için JavaScript kodu kullanılıyor.
- 28:30Dosya Seçimi ve Veri Aktarımı
- Dosya seçildiğinde file objesi alınıyor.
- Dosya seçilmezse hata mesajı veriliyor.
- Seçilen dosya verileri form verilerine aktarılıyor.
- 31:16Dosya Seçme Butonu Oluşturma
- Asenkron dosya seçme işlemi için hata yönetimi yapılıyor ve try-catch bloğu kullanılıyor.
- Dosya seçildiğinde Helper'ın setValue metodu ile dosya değeri ayarlanıyor.
- Dosya seçildiğinde buton metni "Dosya Seçildi" olarak değişiyor ve FeeCheck ikonu eklenebiliyor.
- 34:41Dosya Kaldırma Butonu Ekleme
- Dosya seçildiğinde "Dosyayı Kaldır" butonu görüntüleniyor.
- "Dosyayı Kaldır" butonuna tıklandığında Helper'ın setValue metodu ile dosya değeri boşaltılıyor.
- Label kullanımı sorun yaratıyor, bu nedenle butonun class'ı değiştirilerek sorun çözülüyor.
- 36:31Checkbox Oluşturma
- Checkbox için FeeCheck ikonu kullanılıyor ve class name'leri flex, gapx-2, items-center olarak ayarlanıyor.
- Checkbox'ın görünümü için border ve text renkleri ayarlanıyor.
- ClassNames paketi kullanılarak checkbox'ın duruma göre farklı görünüm alması sağlanıyor.
- 40:25Textarea ve Selectbox Oluşturma
- Textarea için rows özelliği kullanılarak satır sayısı ayarlanıyor ve resize-none özelliği ekleniyor.
- Selectbox için options array'i oluşturuluyor ve map fonksiyonu ile option'lar render ediliyor.
- Selectbox için default value özelliği kullanılarak varsayılan değer ayarlanabiliyor.
- 43:55Formik Kullanımı ve Select Komponenti
- Formik kütüphanesi kullanılarak select komponenti oluşturulabilir ve değerler dinamik olarak ayarlanabilir.
- Helpers set value metodu kullanılarak select komponentinin değeri değiştirilebilir.
- "Original" parametresi kullanılarak orijinal objeyi almak veya değiştirilmiş değeri almak seçeneği sunulabilir.
- 46:48Radio Komponenti Oluşturma
- Formik ile radio komponenti oluşturulabilir ve options map metodu kullanılarak seçenekler eklenebilir.
- Radio butonları için div elementi kullanılarak görünümü özelleştirilebilir.
- Class names kullanılarak radio butonlarının arka plan rengi ve kenarlık özellikleri dinamik olarak ayarlanabilir.
- 52:34Form Düzenleme ve Formik Context
- Formun görünümü Tailwind CSS ile düzenlenebilir ve gölgelendirme gibi efektler eklenebilir.
- useFormikContext hook'u kullanılarak form verilerine erişim sağlanabilir.
- Auto submit token komponenti oluşturularak belirli bir kurala uygun olduğunda form otomatik olarak gönderilebilir.
- 55:55Validasyon İşlemleri
- Formik ile validasyon işlemleri yönetilebilir.
- Yup kütüphanesi kullanılarak validasyon kuralları tanımlanabilir.
- Validasyon kuralları genellikle "validations" klasöründe "index.js" dosyasına eklenir.
- 56:50Validation Şeması Oluşturma
- Kod kontrolü için bir validation şeması oluşturuluyor, "code" alanı minimum 6 karakter olmalı ve zorunlu olarak işaretleniyor.
- Oluşturulan şema "sampleSchema" olarak export ediliyor ve index dosyasından import edilecek.
- Form gönderildiğinde validation hatası oluştuğunda, hata mesajı "error" alanına yazdırılıyor.
- 59:57Hata Mesajlarını Düzenleme
- Hata mesajları "errorMessage" alanından alınarak görüntüleniyor ve "small" etiketi ile "text-xs block mt-2 text-red-600" class'ları ile formatlanıyor.
- Hata mesajlarının görünümü "classNames" kullanılarak yönetiliyor ve meta.error varsa ve meta.touch olmuşsa hata mesajı gösteriliyor.
- Hata mesajları Türkçe'ye çevrilebiliyor, bunun için "validation" klasöründe "up.js" dosyası oluşturuluyor ve hata mesajları buradan import ediliyor.
- 1:03:30Form Alanları İçin Validation Kuralları
- Contact formu için "contactSchema" adında bir validation şeması oluşturuluyor.
- "name" ve "about" alanları zorunlu olarak işaretleniyor ve hata mesajları ekrana yazdırılıyor.
- Checkbox için "accept" alanı boolean olarak kontrol ediliyor ve "true" olması zorunlu olarak belirleniyor.
- 1:05:28Validation Hatalarını Gösterme
- Meta.error varsa ve meta.touch olmuşsa hata mesajları gösteriliyor.
- Meta.touch kaldırılırsa, formun herhangi bir yerine tıklandığında tüm hatalar gösteriliyor.
- Checkbox için de hata mesajları gösterilmesi için benzer kurallar uygulanıyor.
- 1:10:36Form Validation ve Hata Yönetimi
- Helpers altında set error ve set touch değerlerini doğru ayarlamak için if yapısı kullanılıyor.
- Gender alanını string ve required olarak tanımlamak kolay bir işlem.
- Avatar alanının özel durum olması nedeniyle object olarak tanımlanması gerekiyor ve file name varlığını kontrol etmek için test ediliyor.
- 1:16:42Avatar Validation
- Avatarın başlangıç değeri obje olarak ayarlanmalı ve file objesinde name özelliği kontrol edilmeli.
- File seçildiğinde name özelliği varsa dosya seçilmiştir, yoksa seçilmedi olarak belirleniyor.
- Jup'un uygulayamadığı özel durumlarda test metodunu kullanarak doğrulama yapılabilir.
- 1:19:22Giriş Sayfası Formu
- Giriş sayfasında form inputları kullanılarak kullanıcı adı ve parola alanları oluşturuluyor.
- Forma grid gap, padding, background ve text stili gibi Tailwind CSS sınıfları ekleniyor.
- Formun disabled durumunda opacity değeri 40 olarak ayarlanıyor.
- 1:21:18Form Doğrulama ve İşlem Durumu
- Giriş sayfası için login şeması oluşturuluyor ve username ve password alanları required olarak belirleniyor.
- Form doğrulaması başarısız olduğunda hata mesajları görüntüleniyor.
- Form gönderildiğinde is-submitting değeri true olarak ayarlanıyor ve işlem tamamlandığında false olarak değiştiriliyor.
- 1:23:06Form Resetleme ve Eylemler
- Formun resetlenmesi için "reset form" eylemi kullanılabilir.
- Formun eklendiğinde otomatik olarak resetlenmesi sağlanabilir.
- Actions altında "reset", "field state touch", "submit", "validate field", "validate form" gibi çeşitli eylemler bulunur.
- 1:24:40Form Doğrulama ve Zorunlu Alanlar
- Şemada "required" özelliği kullanılarak alanın doldurulması zorunlu hale getirilebilir.
- "one of" özelliği ile belirli seçenekler arasından en az birinin seçilmesi sağlanabilir.
- Form doğrulama hataları görüntülenebilir ve özel hata mesajları eklenebilir.
- 1:27:09Form Kullanımı ve Kapanış
- Form iki kurcalayıp neler yapılacağına kullanıcıya bırakılmıştır.
- Formları kullanmak ve doğrulama uygulamak oldukça kolaydır.
- Form kurulumu bir kere yapıldıktan sonra validasyon dosyası oluşturulup formlar kolayca kullanılabilir.