Bu makalede Formik kullanarak React form işlemlerinin nasıl kolaylaştırılabileceği üzerinde durulmaktadır Formik, form değerlerinin kontrol edilmesi, gönderimi ve validasyonunun yapılmasına yardımcı olan bir kütüphanedir Formların önemi ve doğru yönetilmesinin neden önemli olduğu da vurgulanmıştır Formik ile çalışmadan önce React form bileşenleri ile nasıl çalışıldığına dair bir bilgi sağlanmış ve React'teki performans sorunlarına da işaret edilmiştir Formik'in ne olduğu ve ne işe yaradığı hakkında detaylı bilgi verilmiş ve kurulumunun nasıl yapılacağı anlatılmıştır Ayrıca, Formik componentleri hakkında da bilgi verilerek formun farklı bölümleri için kullanım örnekleri sağlanmıştır

Bu makalede Formik kullanarak form alanları değerleri incelenecek. Formik, React form işlemlerinin kolaylaştıran bir kütüphanedir. Formik, form değerlerinin kontrol edilmesinde, gönderiminde ve validasyonunun yapılmasında kullanılır. Formik, Redux ile birlikte de kullanılabilir.

Formlar, web geliştiricileri için önemli bir konudur. Web sayfalarının çoğunda formlar kullanılmaktadır. Formlar, kullanıcıdan veri almak ve bu verileri sunuculara iletmek için kullanılır. Bu nedenle form değerlerinin doğru bir şekilde kontrol edilmesi, gönderimi ve validasyonu önemlidir. Formik, bu işlemleri kolaylaştırarak geliştiricilere zaman kazandırmaktadır.

• Formik'e geçmeden önce, React form bileşenleriyle nasıl çalışıldığını anlamak önemlidir.
• React, form alanlarına girdiğimiz verileri tutmak için state kullanır.
• Formların gönderimi için de state kullanılır.
• Fakat React'te form alanlarının değeri, her yeni bir karakter eklendiğinde yeniden render edilir. Bu, performans sorunlarına neden olabilir. Ayrıca form validasyonunun tamamlanması için de bazı eklentiler ve kodlar gerektirebilir.

İşte bu noktada Formik devreye girer. Formik, state ve props'u birleştirerek form işlemlerinin kolaylaştırılmasını sağlar. İşlem basit ve hızlıdır. Form alanlarının değeri, Formik tarafından tutulur ve herhangi bir değişiklik olduğunda yeniden render edilmez.

Formik kurulumu oldukça kolaydır. Sadece npm kullanarak veya CDN'den indirerek projenize dahil edebilirsiniz. Gereksinimleri arasında React ve Yup validasyon kütüphanesi vardır.

Bu makale, Formik'in hem basit bir kullanımını hem de Redux ile birlikte nasıl kullanılabileceğini ele alacaktır. Formların validasyonu, örnekleme uygulamaları ve Redux işlevleri hakkında bilgi edineceksiniz.

Formik Nedir?

Formik, React uygulamalarında form yönetimi yaparken kullanılan bir JavaScript kütüphanesidir. Form işlemleri genellikle zorlu ve karışık olabilir, özellikle validasyon işlemleri ve formların state yönetimi konuları her zaman uğraştırıcıdır. Formik bu işlemleri kolaylaştıran bir kütüphane olarak karşımıza çıkmaktadır.

Formik ile kullanıcılar, form alanlarının değişimlerini izleyebilir, formu submit etmeden önce form alanlarının durumunu kontrol edebilir, birden fazla forma aynı anda erişebilir, formu submit etmeden önce bir dizi işlem gerçekleştirebilirler. Ayrıca, Formik, form işlemlerine dahil olan alanların adlarını tanıyabilir ve form alanlarını kolayca yönetebilir.

Özetle, Formik, formların içerik ve durum yönetimini kolaylaştırmak için geliştirilen bir JavaScript kütüphanesidir. Formik kullanımı sayesinde, form işlemleri daha hızlı, güvenilir ve kolay hale gelir.

Formik Kurulumu

Formik, form yönetimi işlevlerini kolaylaştıran bir kütüphanedir. Kurulumu oldukça kolaydır ve gereksinimleri minimaldir. Formik kurulumu için aşağıdaki adımları takip etmeniz gerekmektedir:

• İlk önce bir React projesi oluşturmanız gerekmektedir. Eğer zaten bir proje varsa, proje dizinine girmeden önce projeyi çalıştırın: npm start
• Sıradaki adım, Formik paketini yüklemektir. Bunun için aşağıdaki komutu kullanabilirsiniz: npm install formik
• Formik kütüphanesinin tam kapasitesinden faydalanmak istiyorsanız, Formik form alanlarını yönetmek için bir validasyon şemasına da ihtiyaç duyacaksınız. Bu nedenle, validasyon kütüphanesi olarak Yup'u yüklemelisiniz: npm install yup

Yukarıdaki adımları tamamladıktan sonra, Formik kurulumu tamamlanmış olacaktır. Artık Formik bileşenlerini projenizde kullanabilirsiniz.

Bir versiyon uyumsuzluğu oluşmaması için Formik ve Yup'un yüklü sürümlerinin birbirine eşleştirilmesi gerekir. Aşağıdaki tablodan Formik ve Yup uyumlu sürümlerine göz atabilirsiniz:

Formik Componentleri

Formik, form değerlerinin yönetimi ve formun doğrulanması işlemlerini gerçekleştirmek için gerekli olan çeşitli bileşenler içerir. Bu bileşenler, Formik kullanılarak geliştirilen formun farklı bölümlerinde kullanılabilir. Formik bileşenlerinin kullanımı, gelişmiş bir form yönetim sürecini mümkün kılar ve uygulama için daha fazla kontrol sağlar.

Formik bileşenleri, Input, Checkbox, Radio, Select ve daha birçok farklı alanın yönetimi için kullanılabilir. Bunun yanında, Formik Submit componenti sayesinde, formun gönderme işlemi de özelleştirilebilir. Bu component, form gönderimi başarılı veya başarısız olsun, herhangi bir uyarı mesajı gösterir.

Formik componentleri, Formik kutuphanesi tarafından sağlanır ve kolayca kullanılabilir niteliktedir. Formik Input Componenti, formun en temel bileşeni olarak kabul edilir ve formun en önemli alanına odaklanır. Formik Submit Componenti ise formun gönderilmesine ve işlenmesine ilişkin işlemleri yönetir.

Formik componentleri, formun farklı bölümlerinde kullanılarak, formun daha güçlü ve işlevsel hale gelmesini sağlar. Bu bileşenler, React uygulamalarında işlem yapmak için kullanılan en yaygın form yönetimi araçlarındandır.

Formik Input Componenti

Formik ile input alanlarını yapısını kolayca ayarlayabilir ve kontrol edebilirsiniz. Bunun için Formik’in “Field” bileşenlerini kullanmanız yeterlidir. “Field” bileşenleri, formların giriş alanlarını izin verilen türlerde kullanmanızı sağlar ve doğrulama yaparak kullanıcıdan geçerli verileri almanızı sağlar. Formik Input componenti bir tür “Field” bileşenidir ve HTML input elemanlarını saran bir bileşendir.

Formik Input componenti kullanarak input yapısını yönetmek oldukça basittir. İlk olarak “Formik” bileşenlerini kullandığımız başta yazdığımız kod satırlarına ekledikten sonra, “Field” bileşeni içinde yer alan “Input” componentini kullanarak input elemanlarının yapılandırılmasına geçebiliriz.

Örnek olarak, bir kayıt formu oluşturmak istediğimizi varsayalım ve “isim” ve “email” giriş alanlarına ihtiyacımız olsun. Formik Input componenti kullanarak bu elemanların nasıl yapılandırılacağına bakalım:

```import { Formik, Field } from 'formik';

```

Yukarıdaki kod örneği, isim ve e-posta giriş alanları için Formik Input componentini kullanarak HTML input elemanlarını içerir. Her eleman, “type” ve “name” nitelikleri ile yapılandırılmıştır. İsim ve e-posta niteliklerinin aynı olması, her ikisine de aynı isimlerin atandığı anlamına gelir.

Bunun yanında, Formik Input componenti kullanarak giriş alanları için doğrulama yapabilir ve hata mesajlarını gösterebilirsiniz. Bu, kullanıcının hatalı veri girişlerini kolayca belirlemesi ve düzeltmesi için oldukça önemlidir.

Formik Input componenti ile birlikte hata mesajlarını göstermek için “ErrorMessage” bileşenini “Field” bileşeni içine eklemeniz gerekmektedir. Aynı şekilde, herhangi bir doğrulama kuralı eklemek için, giriş alanının nitelikleri içinde gerekli kuralın adını belirten “validate” niteliği kullanılabilir.

Sonuç olarak, Formik Input componenti kullanarak giriş alanları yapılandırma oldukça kolaydır ve doğrulama kuralları gibi ek işlevler de eklenerek form alanları daha da iyileştirilebilir.

Formik Submit Componenti

Formik Submit Componenti, Formik ile bir formu submit etmek için kullanılan bir bileşendir. Bu bileşen sayesinde, formun submit edilmesi için bir buton oluşturulabilir.

Formik Submit Componenti, özellikle Redux ile birlikte kullanıldığında yararlıdır. Bu bileşen, Redux'un async işlemlerini kolaylaştırmaya yardımcı olabilir.

Bu bileşenin kullanımı oldukça basittir. Formik Form bileşeni ile beraber kullanılır ve submit butonu olarak işlev görür. Örneğin:

{({ handleSubmit, isSubmitting }) => (    
        {/* input components */}            )}

Gördüğünüz gibi, Formik Submit Componenti, Formik Form bileşeni içerisinde yer alır ve handleSubmit fonksiyonu ile birlikte çalışır.

Formik Submit Componenti, çeşitli özelliklerle de yapılandırılabilir. Örneğin, buton metni, stili ve etkinlik durumu gibi özelliklerini belirleyebilirsiniz. Bu işlem, props aracılığıyla yapılır. Örnek bir kullanım:

import { Formik, Form } from 'formik';import { Button } from 'semantic-ui-react';const customStyles = {    borderRadius: '5px',    background: 'red',    color: 'white'};const CustomSubmitButton = (props) => (            {props.text || 'Submit'}    );const MyForm = () => (            {({handleSubmit, isSubmitting}) => (            
                {/** input components */}                                    )}    );

Bu örnekte, CustomSubmitButton adında bir bileşen oluşturduk ve Formik Submit Componenti yerine kullandık. Bu bileşen, text propu ile buton metnini, styles propu ile butonun stilini ve isSubmitting propu ile butonun etkinlik durumunu alır. Bu şekilde, formu submit etmek için özelleştirilmiş bir submit butonu oluşturduk.

Form Validasyonu

Form validasyonu, kullanıcıların form alanlarına doğru verileri girmesini sağlayan önemli bir adımdır. Formik ile form validasyonu oldukça kolaydır. Form alanlarına belirli kısıtlamalar getirerek, kullanıcının doğru veri girişi yapmasına yardımcı oluruz.

Form validasyonu için, öncelikle Formik'in bileşenine bir onSubmit fonksiyonu tanımlamalısınız. onSubmit fonksiyonu, formun gönderilmesi çalıştığında tetiklenir ve gerekli validasyonlar yapılır. Eğer hata varsa, kullanıcıya bir hata mesajı görüntülenir.

Hata mesajları, Formik'in ErrorMessage bileşeni ile kolayca oluşturulabilir. ErrorMessage bileşeni, form alanlarına göre ayarlanabilir. Her alanın belirli bir hata mesajı varsa, bunları ErrorMessage ile bileşenlerine ekleyebilirsiniz. Böylece, her kutunun yanında özelleştirilmiş hatalarınızı gösterebilirsiniz.

Form validasyonu yaparken ayrıca, form alanlarına belirli kısıtlamalar ekleyebilirsiniz. Örneğin, input kutusunda sadece numara veya sadece metin girilmesini sağlayabilirsiniz. Bunun için, Formik'in bileşenini kullanabilirsiniz. Field bileşeni, input kutularında belirli sınırlamalar yapmak için kullanışlıdır.

Ayrıca, form validasyonu yapmak için belirli logic işlemleri de gerçekleştirebilirsiniz. Örneğin, bir doğrulama kodu veya captcha için sunucu tarafında bir kontrol yapıp, kullanıcının doğru verileri girmesi sağlanabilir.

Sonuç olarak, Formik form alanlarının validasyonunu yapmak için oldukça kolay ve kullanışlı bir araçtır. Hem doğru veri girişi sağlamak, hem de kullanıcıya özelleştirilmiş hata mesajları göstererek, form işlevselliğini artırabilirsiniz.

Yapılacaklar Listesi Uygulaması Örneği

Yapılacaklar listesi uygulaması, birçok web geliştiricinin öğrenirken kullandığı bir uygulamadır. Bu örnekte, Formik'in nasıl kullanıldığını anlamak için basit bir yapılacaklar listesi uygulaması inceleyeceğiz.

Öncelikle, Formik'i projemize eklemek gerekiyor. Kurulumlar tamamlandıktan sonra, bir yapılacaklar listesi uygulaması oluşturabiliriz. İlk olarak, Formik form bileşeni yerleştiriyoruz.

Bu aşamadan sonra, yapılacaklar listemizde değişiklik yapabilmek için gerekli olan state yönetim sistemi eklenmelidir. Formik kullandığımız için, bu işlem daha da kolaylaşır. Sadece form verileri state eklenebilir ve bu verileri manipüle etmek için fonksiyonellik eklenir.

Yukarıda belirtilen adımları takip ederek, yapılacaklar listesi uygulaması oluşturmak çok kolay. Formik'in gücü ve özellikleri sayesinde, input alanları veri doldurma ve kontrol etme işlemleri sorunsuz bir şekilde gerçekleştirilebilir.

Formik ile Redux Uyumu

Formik, Redux ve React ile birleştirildiğinde, form yönetimi süreci daha da geliştirilebilir. Formik ile Redux kullanımı, geliştiricilere daha da kolaylık sağlayarak, form işlemlerini daha verimli bir şekilde yönetmelerine izin verir. Formik ile Redux'un birleştirilmesi, çok çeşitli işlevsellikler sunar.

Formik ve Redux'un birleştirilmesinde, önceki iki bileşen ile aynı yapıda olan bir mapStateToProps ve mapDispatchToProps oluşturulur. Böylece Formik bileşenleri, Redux store’a erişebilirler. Form işlemlerinde Redux kullanmanın avantajı, büyük uygulamaların form yönetimi süreçlerini yönetmesidir.

Redux formlarını Formik ile entegre etmek, özellikle Redux’un karmaşık işlevselliklerini kullanmanız gereken durumlarda faydalıdır. Formik bileşenlerini, Redux’un connect komutu kullanılarak, kolayca birleşebilirsiniz.

Formik bileşenlerinde useField, useFormikContext, Field, Form, ErrorMessage, SubmitButton gibi birçok özelliği Redux store'a aktarılabilmeniz mümkündür.

Birleştirilen bu bileşenlerle, form işlemlerinde hata kontrolü, form validasyonu, submit durumu gibi birçok işlem daha kolay ve hızlı bir şekilde yönetilebilir. Böylece geliştiriciler hem daha hızlı bir şekilde işlem yapabilirler, hem de uygulama performansını artırabilirler.

Formik ile Redux’un birleştirilmesi, form yönetim sürecinin çok daha gelişmiş, etkili ve esnek bir şekilde gerçekleştirilmesine olanak sağlar. Aynı zamanda, uygulamanın performansını artırarak, kullanıcı deneyimini de önemli ölçüde artırır.

Redux formlarını Formik ile entegre etmek

Redux, düzenli bir durum yönetimi için kullanılan bir JavaScript kitaplığıdır. Redux, uygulamanızda bulunan tüm bileşenlerdeki paylaşılan durumu korumak için kullanılır. Formik ile Redux kullanımını birleştirmek, başka bir deyişle, Redux formu oluşturmak, birden fazla işlem yapmak yerine oldukça kullanışlı bir yöntemdir. Formik kullanarak oluşturulan bir formun bileşenleri, Redux ile değiştirerek, kullanıcıların uygulamada gerçekleştirdiği tüm eylemlerin birbiriyle tutarlı olmasını sağlar.

Bu entegrasyonu yapmak için, öncelikle bir ilişki kurmanız gerekir. Formik'ın varsayılan props'larından bazıları, Redux store ile bağlantı kurmak için kullanılır. Bu props'lar, örneğin useField, useFormikContext, Field, Form, ErrorMessage ve SubmitButton gibi bileşenlerde kullanılabilir. Bu formları Redux store ile entegre etmek, bileşenlerin birden fazla işlemi gerçekleştirmesi gerektiğinde kullanışlıdır.

• Öncelikle, Formik ile Redux'u kullanmak için, öncelikle Redux'a ihtiyacınız vardır. Redux istemcisi kullanıyorsanız, kurulum için herhangi bir şey yapmanıza gerek yoktur.
• İkinci adım, bir Redux formunu Formik bileşenleriyle oluşturmaktır. Bunun için, Redux'da bir form eylemi tanımlamanız gerekir. Örneğin, bir ActionCreator'a ihtiyacınız vardır. Bu ActionCreator, form verilerini Redux store'a gönderecektir.
• Son olarak, Formik'ın varsayılan props'larından bazıları, eylemleri Redux store'a aktarmak için kullanılabilir. Böylece, form verileri Redux store ile tutarlı bir şekilde güncellenir.

Bu adımların uygulanmasıyla, Formik ile Redux'u kullanarak birden fazla işlem gerçekleştirilebilir ve her zaman uygulamanızdaki tüm bileşenlerin tutarlı bir şekilde çalışmasını sağlayabilirsiniz. Form verilerinin yönetimi, uygulamanızın başarısı için çok önemlidir. Bu nedenle, Formik ile Redux'u birleştirmek, form verilerinin uyumlu bir şekilde güncellenmesini sağlar ve uygulamanızın daha iyi çalışmasına yardımcı olabilir.

Formik propları ve Redux'a Aktarımı

Formik ile form değerlerini işlemek oldukça kolay ve kullanışlıdır. Formik bileşenlerinde kullanılabilen birkaç proplar vardır. Bunlar useField, useFormikContext, Field, Form, ErrorMessage ve SubmitButton proplarıdır. Bu propları, Redux store ile entegre etmek isteyen kullanıcılar için birkaç adım gerekmektedir.

İlk olarak, formik ile redux uygulamasını birleştirmek gerekmektedir. Bunun için form ve input değerlerini ayrı ayrı göndermek yerine, formik ile bu değerleri birleştirmek daha kolay ve hızlı bir çözümdür. Formik kullanımı ile birlikte, useFormikContext hook'u ile form bileşenlerinin değerleri direkt olarak alınabilir ve Redux store’da saklanabilir.

Bunun için, useFormikContext hook’u kullanılır ve form alanındaki tüm verileri store'a aktarmak için bir nesne oluşturulduktan sonra store'a iletilir.

      const FormComponent = () => {        const { values, handleSubmit } = useFormikContext();                const dispatch = useDispatch();                const handleFormSubmit = (values) => {          dispatch(addFormValues(values));        };        return(          
                                    Kaydet                  );      };      

Yukarıdaki örnekte, Formik ile form bileşenleri useFormikContext hook'u ile birlikte kullanılmaktadır. Daha sonra handleFormSubmit() fonksiyonu dispatch() fonksiyonu ile beraber kullanılarak, form verileri Redux store’a aktarılır.

Bunun için ilk olarak, useField() fonksiyonunu kullanarak bir bileşen bileşenlerinde veri çekilir. Daha sonra da, Field componentine propslar ile aktarılır. Örnek bir görsel olarak aşağıdaki tabloda kullanımı yer almaktadır.

Özet olarak, formik kullanarak oluşturulan form bileşenlerinin değerleri Redux store’a aktarılabilir. Form alanlarında kullanılan propslar, kullanılan fonksiyonlar sayesinde Redux store ile entegre edilebilir. Bu sayede, form verileri saklama işlemi daha kolay ve hızlı bir şekilde gerçekleştirilebilir.