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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weekly