Bu makale, Material-UI kullanarak React'ta form oluşturma işlemini anlatmaktadır Başlangıçta, Material-UI hakkında kısa bir giriş yapılmış ve yeni bir React projesi oluşturma işlemi anlatılmıştır Ardından, Material-UI kurulumu için iki seçenek olan npm kullanarak kurulum ve yıllık kurulum işlemleri açıklanmıştır
Form oluşturma işlemi için Textfield bileşeninin kullanımı tanıtılmıştır Bu bileşen, metin girişi için input tags template'i oluşturur Material-UI ile birlikte gelen zengin bileşen kütüphanesi sayesinde, form için gerekli diğer bileşenler de kolayca kullanılabilir Ayrıca, Material-UI bileşenleri özelleştirilebilir, bu da projeye özgü tasarımlar oluşturmanıza olanak sağlar
Bu makale ayrıca, React Hook'larının kullanımı ile formları yönetmeyi de ele almaktadır Hook'lar, React bileşenleri için kullanılan bir API'dir ve formlar

React, günümüzün en popüler JavaScript kütüphanelerinden biridir. Aynı zamanda, web uygulamalarında kullanıcının veri girişinin yapıldığı form alanlarına da ihtiyaç duyulur. Bu nedenle, Material-UI kullanarak React'ta form oluşturma, başarılı bir uygulama geliştirmenin anahtarlarından biridir.

Bu makale, React bileşenleri ile Google Material tasarım kurallarının birleşmesini sağlayan Material-UI'ın form oluşturma yetenekleri hakkında bilgi vermektedir. Ayrıca, React Hook'larının kullanımı ile formları yönetmek de ele alınmaktadır.

Material-UI Hakkında Kısa Bir Giriş

Material-UI, React projeleri için önde gelen arayüz kütüphanelerinden biridir ve Google'ın Material Design konseptine dayalıdır. Material-UI bileşenleri, güzel ve modern bir tasarım sağlar. Bu nedenle, React uygulama projelerinizin harika görünmesi için Material-UI kullanabilirsiniz. Material-UI bileşenleri, modüler bir yapıya sahip olduğundan, projelerde kullanımı kullanışlıdır.

Material-UI bileşenleri, özelleştirilebilir olması sayesinde, geliştiricilerin ihtiyaçlarına göre özelleştirilebilir. Bu bileşenler, form, tablo, menü, buton, ikonlar gibi kullanışlı araçlar içerir. Google'ın Material Design kurallarına uygunluğu nedeniyle Material-UI, kullanıcı deneyimini iyileştirmek için özellikle uygundur.

Yeni React Projesi Oluşturma

Başlangıçta, React ile çalışmak istiyorsanız, yeni bir React projesi oluşturmanız gerekir. Bu işleme başlamadan önce, bilgisayarınızda Node.js'in ve npm'in yüklü olduğundan emin olmanız gerekir.

Proje oluşturma işlemi için, terminal penceresini açın ve proje için bir klasör oluşturun. Ardından, klasöre gidin ve npm ile create-react-app paketinin yüklenmesi gerekir.

Komut satırına npx create-react-app projenizin-adi yazarak React projesi hazırlanmış olur.

React projesinin oluşturulması, birkaç aşamadan oluşmaktadır. Bunlar:

• Proje klasörünün oluşturulması
• create-react-app paketinin yüklenmesi
• React projesinin oluşturulması

Ayrıca, React projesi oluşturmak yerine, birkaç farklı yöntem de kullanılabilir. Bunlar arasında, önceden hazırlanmış React şablonlarının yüklenmesi veya Webpack ve Babel gibi araçların kullanılması gibi seçenekler vardır. Ancak, basit bir React uygulaması oluşturmak için, create-react-app paketinin kullanılması en kolay ve hızlı yoldur.

Material-UI Kurulumu

Material-UI'ı kullanmak için öncelikle yüklemek gerekir. Kurulum işlemi iki şekilde yapılabilir; npm kullanarak veya yıllık olarak indirilerek hızlıca kullanılabilir.

npm kullanarak kurulum yapmak için, terminal penceresini açın ve şu komutu çalıştırın:

Bu şekilde yapılan kurulum sayesinde, projede kullanılacak olan tüm componentleri tek seferde indirerek kullanabilirsiniz.

Material-UI'yı yıllık olarak indirmek için, resmi web sitesinden (https://material-ui.com/getting-started/installation/) yıllık dosyasını indirin ve klasörünüze çıkarın. İndirilen yıllık dosyasında Material-UI'ın componentleri, CSS dosyaları ve diğer dosyalar mevcuttur. Bu dosyalar, projenizde kullanılmak üzere içe aktarılabilir.

Material-UI yüklendikten sonra, projenizin dosyaları içinde paketi içeri aktarır ve projenizde istediğiniz şekilde kullanırsınız.

npm ile Kurulum

Material-UI kurulumu için en hızlı yol, npm kullanarak yapılabilir. Bunun için öncelikle öncelikle bir konsolu açarak proje dosyasının yolu içinde terminal komutları yazılmalıdır. Bu işlemi gerçekleştirdikten sonra npm install @material-ui/core komutunu yazarak Material-UI paketini yükleyebilirsiniz. Bu sayede, özel bir şey yapmanıza gerek kalmadan, Material-UI bileşenleri projenizde kullanıma hazır hale gelir.

Yukarıdaki adımların ardından, hızlı bir şekilde Material-UI bileşenlerini kullanarak formlar oluşturabilirsiniz. Material-UI'ın zengin bileşen kütüphanesi sayesinde, form unsurları için özel olarak geliştirilmiş çeşitli bileşenler kullanabilirsiniz. Ayrıca, Material-UI bileşenleri özelleştirilebilir, bu da projenize özgü tasarımlar oluşturmanıza olanak sağlar.

Yıllık Kurulum

Material-UI yıllık kurulumu ile React form oluşturma işlemleri hızlı bir şekilde gerçekleştirilebilir. Yıllık kurulum için, Material-UI'nin yıllık depolardaki versiyonu indirilir ve direkt olarak kullanılabilir. Aşağıdaki adımlar izlenerek yıllık kurulum işlemi gerçekleştirilebilir:

• Material-UI yıllık depolarından son sürüm indirilir.
• İndirilen dosyalar React projesi içinde yer alan 'node_modules' klasörüne kopyalanır.
• Kopyalama işlemi tamamlandıktan sonra, Material-UI parçaları React bileşenlerinde kullanılmaya hazırdır.

Yıllık kurulum işlemi, özellikle internet erişimi kısıtlı geliştiriciler için oldukça pratiktir. Yıllık olarak indirilen Material-UI parçaları, projelerin internete bağlı olmaksızın hızlı bir şekilde geliştirilmesine imkan tanır. Ayrıca, internet hızı yavaş olan yerlerde çalışan geliştiriciler için de yıllık kurulum tercih edilen bir yöntemdir.

Basit Bir Form Oluşturma

Material-UI kullanarak React'ta form oluşturmanın en kolay yolu, Textfield bileşenini kullanmaktır. Textfield komponenti, metin girişi için input tags template'i oluşturur. Formda kullanılacak olan diğer bileşenlerde olduğu gibi, Material-UI'ın Textfield bileşeni de özelleştirilebilir. Bu bileşen, içerisinde birçok özellik barındırır. Örneğin, metin girişine varsayılan değer, yanıtın nereye gönderileceği gibi özellikler kullanılabilir.

Formun oluşturulması için Input bileşeninin yanı sıra, Button bileşeni de kullanılmalıdır. Bu bileşen sayesinde, formda yer alan inputlara girilen veriler butona basılarak sistemde kaydedilir. Bu sayede, form işlevselliği Material-UI'nın Button bileşeni yardımıyla tamamlanmış olur. Basitçe söylemek gerekirse, formda yer alan input bileşenleri, Button bileşeni üzerinden sistemde kaydedilir.

Textfield Bileşenini Kullanma

Material-UI, form elemanları için hazır komponentler sağlar. Textfield bileşeni, metin girişi için bir input tags template'i oluşturur. Bu bileşen, genellikle kullanıcının ad, soyad, e-posta ve benzer kişisel bilgilerini girdiği giriş formlarında kullanılır.

Textfield bileşeni, diğer bileşenlerle birlikte kullanıldığında daha etkili olur. Örneğin, InputAdornment bileşeni, Textfield bileşeninin yanına bir etiket eklemek için idealdir. Bununla birlikte, Textfield bileşeni, kullandığınız bileşen sayısına göre değişiklik gösterebilir.

Material-UI Textfield bileşeninin bazı temel özellikleri şunlardır:

• Standart veya dolgulu şekilde kullanılabilmesi
• Hata mesajlarının eklenebilmesi
• Label özelliği sayesinde alan adını belirleyebilmesi
• Maksimum veya minimum giriş sınırı belirleme özelliği

Yalnızca Textfield bileşenini kullanarak basit bir form oluşturmak mümkündür, ancak hangi parametrenin nereye eklenmesi gerektiği konusunda biraz deneme yanılma yapılması gerekebilir.

Butona Tıklama İşlemine Bağlanma

Material-UI, form işlemlerinde kullanacağımız Button bileşenini sunar. Bu bileşenin onClick özelliği ile bir butona tıklandığında gerçekleşecek işlem belirlenir. Örneğin;

        import React, { useState } from 'react';import TextField from '@material-ui/core/TextField';import Button from '@material-ui/core/Button';function SimpleForm() {  const [name, setName] = useState("");  const handleNameChange = (event) => {    setName(event.target.value);  }  const handleSubmit = () => {    alert(`Hello, ${name}!`);  }  return(    
                    Submit          
  );}export default SimpleForm;              

Gördüğünüz gibi, Button bileşeni sayesinde bir formun submit olayı gerçekleştirilebilir.

React Hook'larını Kullanarak Formu Yönetme

React Hook'ları, React uygulamalarının geliştirilmesinde oldukça kullanışlı özellikler arasında yer almaktadır. Form oluşturma sürecinde de React Hook'ları kullanarak formdaki verilerin yönetilmesi mümkün hale gelir. StateHook, formdaki inputların değerlerini state bilgisinde tutarak güncellemeyi sağlar.

Bu sayede, her bir değişiklikte formun yenilenmesi gerekmez. StateHook kullanımı, inputların değerlerinde oluşan değişiklikleri anlık olarak takip eder ve bu değişikliklere uygun olarak state bilgisini günceller. Bu sayede formun kullanılabilirliği artar ve birçok kullanıcının aynı anda formu doldurabilmesine olanak sağlar.

Ek olarak, useEffect Hook kullanarak form oluşturma süreci daha da geliştirilebilir. useEffect Hook, formları doğrudan API ile haberleşmeye kavuşturabilir ve formlardaki verilerin anlık işlenmesine olanak sağlayabilir. Böylece, form işlemleri daha hızlı ve kullanıcı dostu hale gelir.

React Hook'ları, belirli bir formun veya uygulamanın yönetimi konusunda oldukça faydalıdır. Bu sayede, form oluşturma süreci daha kolay bir hale gelir ve kullanımı daha verimli hale getirilir. StateHook ve useEffect Hook kullanımı, form geliştirme sürecinde oldukça işlevsel özellikler oluşturarak, verilerin yönetimi konusunda yardımcı olmaktadır.

useState Kullanımı

useState kullanarak, form içindeki inputların değerlerini state bilgisinde tutmak mümkün olur. useState, function component'larda state içermeyen öğelerin kullanımına olanak sağlamaktadır. useState kullanımı basittir ve tek bir argüman alır: state'in başlangıç değeri. İşletim sistemleri için bir checkbox ekranını düşünelim. Bu checkbox'ın aktif/pasif durumuna göre input'a erişim değerlerini kaydetmek isteyelim. Bunun için useState kullanmanın en uygunu olduğunu söyleyebiliriz.

const [checkboxState, setCheckboxState] = useState(false);

<input type="checkbox" checked={checkboxState} onChange={(e) => setCheckboxState(e.target.checked)} />

Bu şekilde useState kullanarak, güncelleme fonksiyonlarını ellerinde tutarak React form elemanlarının değerlerini güncelleyebilirsiniz. Bu, kullanıcıların değişiklikleri gerçekleştirmesine olanak tanıyan gerçek zamanlı bir deneyim sağlar.

useEffect Kullanımı

useEffect Hook, React'in en önemli özelliklerinden biridir ve Material-UI form işlemlerinde de oldukça kullanışlıdır. Bu Hook sayesinde, API çağrıları ve çalıştırılacak fonksiyonlar belirli şartlar altında çalıştırılabilir. Bu işlem, form verilerini doğrudan API ile haberleşmeye kavuşturarak formdaki verilerin anlık işlenmesine olanak sağlayabilir.

useEffect, useEffect(fn, []) şeklinde kullanılabilir. Burada, fn, herhangi bir fonksiyon adı olabilir ve bu fonksiyon, bileşen herhangi bir render işlemi yapmadan önce ve sonrasında çalıştırılabilir. Bu durum, useEffect'in bileşen içerisindeki herhangi bir değişiklikten sonra otomatik olarak yeniden render edilmesine neden olur ve sonrasında useEffect'in fonksiyonu tekrar çalışır.

Bu özellik ile form verilerinin işlenmesi daha da rahat bir hale gelir ve kullanıcının form bilgilerini hızlıca işlemesine yardımcı olur. useEffect ile form verilerinin işlemleri herhangi bir eylem olmadan da anlık olarak yapılabilir. Ayrıca, useEffect kullanımı sayesinde formların işleme hızı da önemli derecede artar.

Sonuç

Bu makale, React'ta form oluşturma süreci hakkında detaylı bir kılavuz sunmaktadır. Material-UI kullanarak form oluşturma süreci hakkında ayrıntılı bilgi verilmiştir. Material-UI, Google'ın Material Design kurallarını React bileşenleriyle uygulama konusunda mükemmel bir araçtır.

Yeni bir React projesi oluşturma ve Material-UI kurulumu hakkında ayrıntılı bilgiler verilmiştir. Basit bir form oluşturma sürecinde Textfield bileşeni ve Button bileşeni kullanılmıştır. Form verilerinin yönetimi StateHook ve useEffect Hook kullanılarak gerçekleştirilmiştir.

Material-UI kullanarak React form oluşturma süreci oldukça basit hale gelmiştir. Bu makale, işlemleri adım adım anlatarak form oluşturma sürecindeki tüm zorlukları ortadan kaldırmaktadır. Eğer siz de React'ta form oluşturma sürecinde Material-UI kullanmak istiyorsanız, bu kılavuz tam size göre!