Begin typing your search above and press return to search.
Son Eklenenler
23 Aralık 2024,
  1. Ana Sayfa
  2. React ve Formik ile Örnek Uygulamalar:

React ve Formik ile Örnek Uygulamalar:

React ve Formik ile Örnek Uygulamalar:

React ve Formik kütüphanesi birlikte kullanılarak, kişisel bilgilerin toplanması ve formların yönetilmesi oldukça kolay hale gelir Özellikle Formik'in otomatik doğrulama ve hata yönetimi özellikleri, uygulamaların daha güvenli ve kullanıcı dostu olmasına olanak sağlar
Yukarıdaki örnekte, Formik kullanarak kullanıcılardan isim, soyisim ve e-posta adresi gibi kişisel bilgilerin toplanması örneklenmiştir Formik bileşeninin initialValues propu ile varsayılan değerler ayarlanabilir ve onSubmit propu ile formun gönderilmesi durumunda ne olacağı belirlenebilir
Ayrıca, kullanıcıların isim, soyisim ve e-posta adresi gibi bilgilerini doğru şekilde toplamak için değer sınırlandırmaları yapılması önemlidir Örneğin, isim ve soyisim için en az 2 karakter istenmeli ve e-posta adresi için gerekli biçimlendirme sağlanmalıdır
React ve Formik kütüphanesi birlikte kullanarak,

React ve Formik ile Örnek Uygulamalar:

Bu makalede React ve Formik ile örnek uygulamalar geliştireceğiz. Bu uygulamalar, kullanıcılardan kişisel bilgilerinin toplanması ve siparişlerinin verilmesi için tasarlanmıştır. React, uygulamaların hızlı ve etkili bir şekilde geliştirilmesine yardımcı olan özelleştirilebilir bileşenler sunmaktadır. Formik ise formlar için daha kolay ve güvenli bir yönetim sunarak uygulamaların daha iyi işleyişine olanak tanımaktadır.

Bu makaledeki örneklerde, Formik kullanarak form oluşturarak kullanıcıların isim, soyisim, e-posta adresi gibi kişisel bilgilerinin nasıl toplanabileceği örneklenmiştir. Ayrıca, sipariş formu tasarımı ve bu formun kullanıcılara nasıl sunulacağı gibi konular ele alınmıştır. Uygulamaların doğru bir şekilde çalışabilmesi için gerekli kodlar ve ayarlamalar adım adım açıklanmıştır.


React ve Formik Nedir?

React, tek sayfalık web uygulamaları için açık kaynaklı bir JavaScript kütüphanesidir ve Facebook, Instagram, Airbnb gibi birçok büyük şirket tarafından kullanılmaktadır. React, bileşen temelli bir yapıda çalışır ve veri akışını yönetmek için Flux ve Redux gibi diğer kütüphanelerle de entegre edilebilir.

Formik, React form yönetimi için açık kaynaklı bir kütüphanedir ve diğer formlara göre çok daha verimli çalışır. Kullanıcı girişlerini otomatik olarak doğrular, değerleri tutar ve hataları ele alır. Formik, Redux ile de entegre edilebilir ve kolaylıkla özelleştirilebilir bir yapıdadır. Bu nedenle React form yönetimi için en popüler kütüphanelerden biridir.


Formik Kullanarak Kişisel Bilgilerin Toplanması

Formik kullanarak kişisel bilgilerin toplandığı bir form oluşturmak oldukça kolaydır. İlk önce, Formik kütüphanesi yüklendikten sonra <Formik> bileşenini kullanarak bir form componenti oluşturulabilir. Bu bileşenin initialValues propu, formdaki varsayılan değerleri ayarlamak için kullanılır.

Formda kişisel bilgiler toplama işlemi aşağıdaki şekilde yapılabilir:

Kod Parçası Açıklama 
        <Formik          initialValues={            name: '',            surname: '',            email: ''          }          onSubmit={...}        >          {({ values, handleChange }) => (            <form onSubmit={...}>              <div>                <label htmlFor="name">Name:</label>                <input                  id="name"                  name="name"                  type="text"                  onChange={handleChange}                  value={values.name}                />              </div>              <div>                <label htmlFor="surname">Surname:</label>                <input                  id="surname"                  name="surname"                  type="text"                  onChange={handleChange}                  value={values.surname}                />              </div>              <div>                <label htmlFor="email">Email:</label>                <input                  id="email"                  name="email"                  type="email"                  onChange={handleChange}                  value={values.email}                />              </div>              <button type="submit">Submit</button>            </form>          ) }        </Formik>
Bu kod, React Formik ve HTML form elementlerini kullanarak, kullanıcılardan isim, soyisim ve e-posta adresi toplar.

Yukarıdaki örnekte, form componenti <Formik> bileşenini kullanarak oluşturulur ve formda toplanacak verilerin varsayılan değerleri initialValues değişkenine atanır. Ardından, bileşenin onSubmit propu, formun gönderilmesi durumunda ne olacağını belirleyen bir fonksiyonu çağırır.

Son olarak, {({ values, handleChange }) => (...)} kısmı, formun görüntüsünü oluşturan fonksiyondur. Bu fonksiyon, React Formik'in values propunu kullanarak formdaki her alanın değerini alır. handleChange fonksiyonu, her alanın değeri değiştiğinde çalıştırılır ve values değişkenindeki değeri günceller.


İsim, Soyisim ve E-posta Adresi Toplama

Kişisel bilgilerin toplanması için Formik kullanırken, kullanıcıların isim, soyisim ve e-posta adresleri gibi temel bilgilerini toplamak önemlidir. Bu bilgileri toplarken doğru kod yazmak, doğrulama ve hata kontrolleri yapmak, hatta kullanıcılara geribildirim sağlamak oldukça önemlidir.

İlk olarak, Formik kullanarak kullanıcılardan isim, soyisim ve e-posta adresleri gibi kişisel bilgilerin toplanabileceği bir form oluşturulmalıdır. Bu formun <form> elemanı içinde yer alması gerekir. Ardından, her bir girdinin alabileceği değer sınırlandırılmalıdır. Örneğin, isim için en az 2 karakter istenmeli ve e-posta adresi için gerekli biçimlendirme sağlanmalıdır.

Bilgi Türü Değer Sınırı
İsim En az 2 karakter
Soyisim En az 2 karakter
E-posta Adresi sifre@adres.com şeklinde olmalıdır

Form elemanlarına ek olarak, her bir değerin doğru şekilde girilip girilmediğini kontrol eden fonksiyonlar eklenmelidir. Bunlar, validate adı verilen bir fonksiyonla çalışır ve bilgilerin doğruluğunu kontrol ederek hataları ekrana yazdırır.

Bunun yanı sıra, kullanıcıların formu gönderdikten sonra geri bildirim almasını sağlamak da önemlidir. Örneğin, başarıyla gönderildiğine dair bir mesaj gösterilebilir veya formun bir kısmının eksik olduğuna dair bir uyarı verilebilir.

Bütün bunlar kullanıcıların girdiği verilerin doğru şekilde saklanmasını, gereksiz hataların önüne geçilmesini ve son düzenlemelerin kolayca yapılabilmesini sağlar.


Doğrulama ve Hata Kontrolü

Formların kullanıcı verilerini doğru şekilde toplaması için doğrulama ve hata kontrolü oldukça önemlidir. Formik, bu işlemi yapmak için birçok özelleştirilebilir özellik sunmaktadır. Doğrulama için, "yup" adlı bir kütüphane kullanılabilir. Bu kütüphane, formun sahip olduğu alanların ihtiyaç duyulan türdeki verileri kendileriyle eşleştirmesi için bir schema şeması oluşturur. Sipariş formu oluştururken, siparişin fiyatının sayısal bir değer olduğunu ve siparişin en az bir ürün içermesi gerektiğini belirleyen bir schema şeması oluşturulabilir.

Formdaki hataların kullanıcı tarafından doğru bir şekilde anlaşılmasını sağlamak için, hata mesajları formdaki her alanın yanında belirtilmelidir. Formik, her bir alan için ayrı hata mesajları oluşturabilir. Bu mesajlar, kullanıcının hatayı düzeltmesine yardımcı olmak için açıklayıcı olmalıdır. Örneğin, kullanıcının doğum tarihini yanlış formatta girdiği durumda, Formik, "Doğum tarihi alanı yy/aa/gg şeklinde olmalıdır" gibi bir hata mesajı gösterir.

Formik, hata kontrolü için de birçok özellik sunmaktadır. Örneğin, formda bulunan herhangi bir alanın değişikliğinden sonra formun otomatik olarak yinelenebilmesini sağlayarak hataları saptaması ve bunları kullanıcıya göstermesi gibi özellikleri mevcuttur. Ayrıca, formun başarılı bir şekilde gönderildiğini doğrulamak için bir onay mesajı eklenebilir. Bu mesaj, kullanıcının formun gönderildiğine dair güvence almasını sağlayacaktır.


Formun Gönderilmesi

Form oluşturma işlemi tamamlandıktan sonra, kullanıcıların formu göndermeleri için gerekli olan kod ve ayarlamalar yapılmalıdır. Bunun için, onSubmit() adlı bir fonksiyon oluşturulmalı ve form component'ine eklenecektir.

Örneğin: 

const OnSubmit = (values) => {  alert(JSON.stringify(values, null, 2));}function App() {  return (    
              {({ values, handleChange, handleBlur, handleSubmit }) => (