Adı : Formik ve React İle Form Yönetimi ve Verinin İşlenmesi

Form yönetimi ve verinin işlenmesi, modern web uygulamalarının temel gereksinimlerinden biridir. Bu süreçte, doğru bir şekilde tasarlanmış bir form, kullanıcı deneyimini iyileştirebilir ve toplanan verilerin doğruluğunu, güvenilirliğini ve sağlamlığını artırabilir.
Formik ve React, birlikte kullanıldığında, form yönetimini kolaylaştırmak ve verileri işlemek için geniş özellikler sunar. Bu yazıda, Formik ve React'in form yönetimi sürecini nasıl çalıştırdığına ve verilerin nasıl işleneceği konusunda detaylı bir inceleme yapacağız. Ayrıca, birkaç farklı örnek kullanacağız ve sık sorulan soruları ele alacağız.
Formik Nedir?
Formik, React için bir form yönetim çözümüdür. Bu kütüphane, herhangi bir formun yazılmasını kolaylaştırmak ve formun yönetilmesini daha kolay hale getirmek için özellikle tasarlanmıştır. Formik, formun mevcut durumunu (state) işlemek, validasyonları gerçekleştirmek ve özel görünümler (component) oluşturmak gibi işlevler sunar. Ayrıca, Formik, form verilerinin sunucuya gönderilmesi veya doğrudan işlenmesi için gereken işi de yapar.
Formik, kullanıcı deneyimini iyileştiren diğer çözümlerle (örneğin, yup) uyumlu şekilde çalışabilir. Formik, birkaç farklı form elemanını (component) entegre ederek oluşturulan bir yapıya sahiptir ve her biri, formun farklı yönlerini ele almak için önceden ayarlanmış özelliklere sahiptir.
React Nedir?
React, kullanıcı arayüzleri oluşturmak için kullanılan bir JavaScript kütüphanesidir. React, bileşenleri kullanarak, bir sayfanın farklı bölümlerinin ayrılmış bir şekilde hazırlanmasını ve yönetilmesini mümkün hale getirir. React, konsept olarak \"tek yönlü veri akışı\"nı destekler, bu da uygulama verilerinin alınmasını ve işlenmesini kolaylaştırır. React, hem web hem de mobil uygulamalarında kullanılabilecek şekilde tasarlanmıştır.
Formik ve React'in Ortak Özellikleri Nelerdir?
React ve Formik'in ortak bazı özellikleri şunlardır:
- Özellikler (props) kullanarak, her ikisi de farklı bileşenlere (component) veri aktarımı yapabilir.
- Her ikisi de, işleri kolaylaştırmak için kendi özel fonksiyonlar (method) sağlar.
- Her ikisi de, kodlamayı basitleştirmek ve daha kolay anlaşılmasını sağlamak için JSX sözdizimini kullanır.
- İki kütüphane de, React'in zaten sahip olduğu birçok özelliği işlevsel hale getirir ve geliştirme sürecini kolaylaştırır.
Formik ve React İle Form Yönetimi ve Verinin İşlenmesi Nasıl Yapılır?
Formik ve React kullanarak, form yönetimi sürecinin işleyişini aşağıdaki adımlarla inceleyebiliriz:
1. Formik küütphanesini projenize ekleyin.
2. Form elemanlarını (component) tanımlayın. Formik, mevcut form elemanlarına sahip olan bir dizi bileşen sağlar (input, select, checkbox vb.).
3. Sınıf bileşenini (component) oluşturun ve bazı özel fonksiyonlar (method) ekleyin. Bu fonksiyonlar formu işlemek ve sonuçları işlemek için gereklidir.
4. Formik elementlerini sınıf bileşeni içinde kullanın. Bileşenin state'ini (durumunu) Formik'in yönetmesine izin verdiğinizden emin olun.
5. Veri validasyonunu (yapılabilmesi için) sağlama adına formun her bir bölümünün doğru bir şekilde programlandığından emin olun. Formik, yup adlı başka bir kütüphane ile kullanılabildiğinden, veri validasyonu sürecini daha da basitleştirir.
6. Formun sunucuya gönderilmesi için gereken özel fonksiyonu yazın. Formik bileşenlerinden birisi, handleSubmit fonksiyonu ile birlikte gelir. Bu fonksiyonu kullanarak form verilerini sunucuya geri göndermek mümkündür.
7. Son olarak, veritabanına kaydetmek veya başka bir şekilde işlemek için verileri alın. Formik, handleSubmit tarafından yönetilen verileri Formik'in durumunun bir parçası olarak döndürür. Bu verileri, sonunda işlemek için kullanabilirsiniz.
Uygulamaya yönelik örnekler
Form validation ve Input Kontrolü
Bu örnek, kullanıcının bir form gönderiminden önce doğru bir şekilde doldurduğunu onaylamak için validasyona odaklanır. Bu örnekte, bir ad, soy adı ve e-posta adresi girmesi gereken bir form oluşturuyoruz. Formik, bu form elemanlarını içeren başka bir bileşeni kullanmak için önceden tanımlanmış form elemanlarına sahiptir.
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
firstName: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('Required'),
lastName: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('Required'),
email: Yup.string()
.email('Invalid email')
.required('Required'),
});

const MyForm = () => (

);

export default MyForm;
Bu örnekte, kullanıcının ad ve soyadını ve bir e-posta adresi girmesi gerekmektedir. Formun submit tuşuna basıldığında, Formik, verilerin doğruluğunu kontrol eder. Veriler kuralau uygunsa, handleSubmit fonksiyonunu çağırır. Bu örnekte, handleSubmit fonksiyonu, giriş alanlarının içeriğini konsola yazdırmaktadır. Ayrıca, Formik'in setSubmitting fonksiyonunu da kullanarak, submit tuşuna basıldıktan sonra butonun etkinliğini kapatmaktadır.
Input Kontrolü
Form elemanlarının (input) kontrol daha detaylı olacak şekilde yazılabiliyor. Formik üzerinde özelleştirme işlemleri performanslı bir şekilde sağlanabiliyor. Aşağıdaki örnek bir kayıt formu kullanılırken kullanıcının istediği kullanıcı adını alarak, daha sonra sağlaması için kayıt datalarında bulundurması hedefleniyor. Formik Field component ve render methodları kullanımına odaklanıyor.
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
username: Yup.string()
.min(3, 'Too Short!')
.max(50, 'Too Long!')
.matches(/^[a-z]+$/, 'Lowercase only')
.required('Required'),
});

const MyForm = () => (

);

export default MyForm;
Bu örnekte, kullanıcı bir kullanıcı adı girmesi istenecektir. Formik bu alandaki doğrulama kurallarını işleyecek ve kullanıcının istediği gibi bir kullanıcı adı girdiği doğrulandıktan sonra handleSubmit fonksiyonu üzerinden işlenecektir. Bu örnekte Field component içerisinde render methodu kullanınıyoruz. Bu render methodu, input elemanını Howler.js'deki gibi Field component'ten ayrıştırır ve Field component'ten aldığı props'ları bundan sonra verir. Bu örnek, Formik Form, Field, isSubmitting değişkenlerinin özellikleri hakkında daha fazla bilgi edinmenizde yardımcı olacaktır.
Sıkça Sorulan Sorular
1. Formik, neden React ile birlikte kullanılmalıdır?
Formik kullanmanın en önemli avantajı, form yönetim işlemlerini basitleştirmek ve validasyonları daha kolay hale getirmesidir. React sadece HTML elemanlarını, klasik bir web sayfasında olduğu gibi oluşturmanızı sağlar. Formları, React işlevleri ile oluşturmayı seçerseniz, form yönetimi işlemleri çok daha zor hale gelir. Formik, form yönetim işlemlerini basitleştirir ve form elamanları işlerini kolaylaştırır.
2. Formik'in validasyon ile ilişkisi nedir?
Form verilerinin doğruluğunu kontrol etmek, kullanıcı deneyimi açısından son derece önemlidir. Formik, form verilerinin doğruluğunu kontrol etmek ve validasyon işlemlerini işlemek için çeşitli seçenekler sunar. Yup gibi başka bir kütüphane ile birlikte kullanarak, veri doğruluğunu kontrol etmek daha da kolaylaştırılabilir.
3. Formik, birden fazla form elemanını nasıl ele alır?
Formik, birden fazla form elemanını aynı anda ele alabilir. Örneğin, bir kayıt formu oluştururken, birden fazla form elemanı (kullanıcı adı, e-posta adresi, şifre vb.) gereklidir. Formik, her bir form elemanı için özel özellikler sunar ve her birinin durumu bağımsız olarak yönetebilir.
4. Formik, nasıl kurulur?
Formik, kurulumu çok basit olan bir kütüphanedir. Projeye eklemek için npm install formik komutunu kullanabilirsiniz. Daha sonra bileşeninizde (component) import etmeniz yeterlidir.
Sonuç
Form yönetimi ve verinin işlenmesi, modern web uygulamalarının önemli gereksinimlerinden biridir. Formik ve React, birlikte kullanıldığında, form yönetimini kolaylaştırır ve verilerin işlenmesini basitleştirir. Bu yazıda, Formik ve React'in nasıl çalıştığını, farklı örneklerle anlattık ve sıkça sorulan soruları ele aldık. Web geliştirme süreçleri için etkili bir araç ve JavaScript deneyiminizi geliştirecek kullanışlı bir teknik olan Formik hakkında daha fazla bilgi edinmenizde fayda var.