Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. React
Code

React'in Form ve Olaylarını Kavramak

by
Difficulty:IntermediateLength:ShortLanguages:

Turkish (Türkçe) translation by Oğuz Çelikdemir (you can also view the original English article)

Bu eğitimde, React' in form ve olaylarını öğreneceğiz. İşe basit bir React tabanlı uygulama oluşturup buna bir form ve bazı öğeler ekleyerek başlayacağız. Ardından form öğelerine nasıl eylemler ekliyoruz bunu göreceğiz.

React ile yeni haşır neşir oluyorsanız, React'e giriş eğitimi ni okumanızı tavsiye ederim.

Başlarken

React web uygulamamızın ayarlarını yaparak işe başlayalım. ReactFormApp isminde bir proje dizini oluşturun. ReactFormApp dizininde, index.html isminde bir dosya oluştup aşağıdaki HTML kodunu ekleyin:

Projeyi Node Paket Yöneticisi (npm) ile başlatın.

Gerekli ayrıntıları doldurun ardından ReactFormApp dizininde package.json isimli dosya oluşmalıdır.

react ve react-dom bağımlılıklarını npm kullanarak yükleyin.

Gerekli babel paketlerini npm kullanarak yükleyip package.json dosyasına kaydedin.

babel paketleri, JSX kodunu JavaScript koduna dönüştürmek için gereklidir.

Webpack ayarlarını yönetmek için bir webpack ayar dosyası oluşturun. webpack.config.js isimli bir dosya oluşturup aşağıdaki ayarları ekleyin:

app.js React kodumuzun yer alacağı dosyadır. ReactFormApp dizininde app.js isimli bir dosya oluşturun. Gerekli react kütüphanelerini app.js içine ekleyin. Bir div ve birkaç metne sahip App isimli bir bileşen (component) oluşturun. Render metodunu kullanarak bileşeni render edin. Temel app.js dosyası nasıl görünüyor aşağıda:

Değişiklikleri kaydedin ve webpack uygulama sunucusunu yeniden başlatın.

Sunucu yeniden başlatıldığında, http://localhost:8080/ adresinde çalışan React uygulamasını görüntüleyebilmelisiniz.

React Form App Display Screen

React Formu Yaratma

Temel React uygulamamız çalışır ve hazır durumda, bir sonraki adıma geçelim ve app.js de JSX kodu kullanarak bir form bileşeni oluşturalım.

app.js de FormComp isimli bir bileşen oluşturun.

FormComp bileşeninin render fonksiyonunda, formu oluşturmak için HTML kodunu tanımlayacağız. Birkaç etiket, giriş kutusu ve tıklamak için bir düğme koyacağız. Nasıl görünüyor buyrun:

index.html içinde formu görüntülemek için FormComp bileşenini render edin.

Değişiklikleri kaydedin ve webpack sunucusunu yeniden başlatın artık formu görüntüleyebilmelisiniz.

React App Form Tutorial

Olayları Forma Ekleme

React formumuz iyi durumda. Etkileşim sağlamak için, forma olaylar eklemeliyiz.

Metin kutularının değerlerini okuyabilmek için, işe metin kutularının her birine durum (state) değişkeni ekleyerek başlıyoruz. İsim ve soyisim metin kutularının durum değişkenini ayarlayın.

Yukardaki değişkenlerin başlangıç durumunu ayarladığınızdan emin olun. FormComp bileşeni içinde getInitialState fonksiyonunu tanımlayın ve her iki değişkeni de başlatın.

Metin kutularının on-change olayını ele almalı ve metin kutularının değeri değiştiğinde durum değişkenlerini atamalısınız. Dolayısıyla, metin kutularına bir onChange olayı tanımlayın.

FormComp içinde onChange fonksiyonunu tanımlayın ve durum değişkenlerini ayarlayın.

Durum değişkenlerini kullanarak onları render etmeyi deneylim. FormComp HTML koduna, durum değişkenlerini render eden aşağıdaki öğeyi ekleyin.

Değişiklikleri kaydedin ve webpack sunusunu yeniden başlatın. Ad ve Soyad metin kutularına bazı metinler girmeyi deneyin, metinleri girdikçe sonuçlarını hemen görebilmeniz gerekir.

React Form App Form Fill

Sonra, formunuzdaki submit (Gönder) düğmesine bir on-click (tıklama) olayı ekleyin.

FormComp bileşeni içinde handleClick fonksiyonunu tanımlayın. Submit düğmesine tıklandığında, ad ve soyad alanları birleştirilip formun içindeki tam ad alanında görüntülenecek. Buyrun handleClick fonksiyonu:

Ayrıca, getInitialState fonksiyonunda Name değişkenini ayarlayın.

Birleştirilmiş tam adı HTML formunda görüntüleyin.

FormComp bileşenimizin son hali aşağıdaki gibidir:

Yukarda yaptığınız değişiklikleri kaydedin ve sunucuyu yeniden başlatın. Ad ve soyad alanlarını doldurun ve submit düğmesine basın, tam ad alanı görüntülenmeli.

Konunun Özeti

Bu React eğitiminde, React uygulamaları oluşturmaya nasıl başlanacağını ve React tabanlı bir web uygulamasında, form ve olaylarla nasıl başa çıkılacağı ile ilgili temel kavramları öğrendiniz Umarım bu eğitim React tabanlı uygulamalar geliştirmeye başlamanıza yardımcı olur.

Bu eğitimin kaynak koduna Github adresinden erişebilirsiniz.

Aşağıda yorumlarınızla düşüncelerinizi, tavsiyelerinizi veya düzeltmelerinizi bize bildirin. Daha fazla React eğitimi için burayı takip etmeye devam edin.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.