React'in Form ve Olaylarını Kavramak

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:

<html>

<head>
    <title>TutsPlus - React Forms & Events</title>
</head>

<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>

</html>

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

npm init

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

{
  "name": "reactformapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

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

npm install react react-dom --save

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

npm install --save-dev webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015

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:

module.exports = {
  entry: './app.js',

  output: {
    filename: 'bundle.js',
  },

  module: {
    loaders: [
      { exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
    ]
  }
}

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:

import React from 'react'
import { render } from 'react-dom'

var App = React.createClass({
  render:function(){
    return(
      <div>
        TutsPlus - Welcome to React Form App
      </div>
    );
  }
});

render((
    <App />
  ),document.getElementById('app'))

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

webpack-dev-server

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

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.

var FormComp = React.createClass({
    render:function(){
		return(
		);
	}
})

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:

var FormComp = React.createClass({
    render:function(){
		return(
			<div>

				<h2>TutsPlus - React Form Tutorial</h2>
				<hr />
				
				<label>First Name: </label>
				<input type="text"  />
				<br />

				<label>Last Name: </label>
				<input type="text"  />
				<br />

				<input type="button" value="Submit" />

				<hr />
			</div>
		);
	}
})

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

render((
    <FormComp />
	),document.getElementById('app'))

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

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.

<input type="text" value = {this.state.fName} />
<input type="text" value = {this.state.lName} />

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.

getInitialState: function () {
      return {lName: '',fName:''};
},

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.

<input type="text" value = {this.state.fName} onChange={this.handleFNameChange} />
<input type="text" value = {this.state.lName} onChange={this.handleLNameChange} />

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

handleFNameChange:function(event){
        this.setState({fName: event.target.value});
},

handleLNameChange:function(event){
   	 this.setState({lName: event.target.value});
}

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

<h3>Your full name is </h3> {this.state.fName} {this.state.lName}

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.

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

<input type="button" onClick={this.handleClick} value="Submit" />

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:

handleClick:function(){
       var fullName = this.state.fName + ' ' + this.state.lName;
   	this.setState({Name:fullName});
},

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

getInitialState: function () {
     return {lName: '',fName:'',Name:''};
}

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

<h3>Your full name is </h3> {this.state.Name}

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

var FormComp = React.createClass({


    getInitialState: function () {
      return {lName: '',fName:'',Name:''};
   	},

   	handleFNameChange:function(event){
   	  this.setState({fName: event.target.value});
   	},

   	handleLNameChange:function(event){
   	  this.setState({lName: event.target.value});
   	},

   	handleClick:function(){
   		var fullName = this.state.fName + ' ' + this.state.lName;
   		this.setState({Name:fullName});
   	},

	render:function(){
		return(
			<div>
				<h2>TutsPlus - React Form Tutorial</h2>
				<hr />

				<label>First Name: </label>
				<input type="text" value = {this.state.fName} onChange={this.handleFNameChange}  />
				<br />

				<label>Last Name: </label>
				<input type="text" value = {this.state.lName} onChange={this.handleLNameChange}  />
				<br />

				<input type="button" onClick={this.handleClick} value="Submit" />

				<hr />

				<h3>Your full name is </h3> {this.state.Name}
			</div>
		);
	}
})

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.