@ -111,9 +111,9 @@ JSX, JavaScript XML anlamına gelir. JSX, JavaScript kodu içinde HTML elementle
// JSX sözdizimi
// JSX ile tırnak işareti kullanmamıza gerek yoktur
const jsxElement = <h1>I am a JSX element</h1>
const welcome = <h1>Welcome to 30 Days of React Challenge</h1>
const data = <small>Oct 2, 2020</small>
const jsxElement = <h1>I am a JSX element</h1>;
const welcome = <h1>Welcome to 30 Days of React Challenge</h1>;
const data = <small>Oct 2, 2020</small>;
```
Yukarıdaki garip görünen kod, JavaScript gibi görünse de JavaScript değildir; HTML gibi görünse de tamamen bir HTML elementi değildir. JavaScript ile HTML elementlerinin bir karışımıdır. JSX, JavaScript içinde HTML kullanmamıza olanak tanır. Yukarıdaki JSX'teki HTML elementleri _h1_ ve _small_'dur.
@ -125,13 +125,13 @@ Yukarıdaki örnekte gördüğünüz gibi, JSX'in JavaScript ve HTML'e benzer bi
Bu JSX elementi yalnızca bir HTML elementine sahiptir: _h1_.
```js
const jsxElement = <h1>I am a JSX element</h1> // JS ile HTML
const jsxElement = <h1>I am a JSX element</h1>; // JS ile HTML
```
Şimdi title adlı yeni bir değişken ve _h2_ içinde content tanımlayarak daha fazla JSX elementi oluşturalım.
```js
const title = <h2>Getting Started React</h2>
const title = <h2>Getting Started React</h2>;
```
Bu JSX elementine ek HTML elementleri ekleyerek alt başlıklar ve diğer içerikler ekleyelim. Geçerli bir JSX elementi oluşturmak için her HTML elementinin bir dış HTML elementi tarafından sarılması gerekir. JSX elementimiz uygulamanın başlık kısmının neredeyse tamamını içerdiği için title değişkeninin adı da header olarak değiştirilmelidir.
@ -143,7 +143,7 @@ const header = (
<h2>Getting Started React</h2>
<h3>JavaScript Library</h3>
</header>
)
);
```
Yazar adı ve yılı görüntülemek için daha fazla element ekleyelim.
@ -157,7 +157,7 @@ const header = (
<p>Asabeneh Yetayeh</p>
<small>Oct 2, 2020</small>
</header>
)
);
```
Gördüğünüz gibi _header_ elementi, tüm iç HTML elementlerinin üst elementidir ve JSX'in bir dış üst element tarafından sarılması gerekir. _header_ HTML elementi veya başka bir üst HTML elementi olmadan yukarıdaki JSX geçersizdir.
@ -247,7 +247,7 @@ Babel kütüphanesi belgemize bağlandı ve artık kullanabiliriz. Sonraki adım
@ -332,11 +332,11 @@ Daha fazla içerik render edelim. Daha fazla içerik render etmek için JSX elem
<p>Asabeneh Yetayeh</p>
<small>Oct 2, 2020</small>
</header>
)
);
// JSX elementini ReactDOM paketi kullanarak render ediyoruz
// ReactDOM'un render metodu var ve render metodu iki argüman alır
ReactDOM.render(header, rootElement)
ReactDOM.render(header, rootElement);
</script>
</body>
</html>
@ -359,7 +359,7 @@ const main = (
<li>JavaScript</li>
</ul>
</main>
)
);
```
Web sitesinin alt bilgi kısmı için JSX elementi.
@ -370,7 +370,7 @@ const footer = (
<footer>
<p>Copyright 2020</p>
</footer>
)
);
```
Artık üç JSX elementimiz var: header, main ve footer. Üç JSX elementinin tamamını render etmenin en iyi yolu, hepsini bir üst JSX elementi içine sarmak veya bir diziye koymaktır. Bir JSX elementini başka bir JSX elementi içine dahil etmek için süslü parantez {} kullanır ve içine JSX'in adını yazarız.
@ -385,7 +385,7 @@ const header = (
<p>Asabeneh Yetayeh</p>
<small>Oct 2, 2020</small>
</header>
)
);
// Web sitesinin ana içerik kısmı için JSX elementi
const main = (
@ -397,14 +397,14 @@ const main = (
<li>JavaScript</li>
</ul>
</main>
)
);
// Web sitesinin alt bilgi kısmı için JSX elementi
const footer = (
<footer>
<p>Copyright 2020</p>
</footer>
)
);
// Tümünü içeren JSX elementi, bir kapsayıcı veya üst element
const app = (
@ -413,7 +413,7 @@ const app = (
{main}
{footer}
</div>
)
);
```
Şimdi her şeyi bir araya getirelim ve tarayıcıya render edelim. [Code pen'de canlı](https://codepen.io/Asabeneh/full/MWwbYWg).
Uygulamanızı geliştirirken her şeyin yolunda gidip gitmediğini kontrol etmek için tarayıcı konsolunu açık tutmak iyi bir pratiktir.
@ -541,13 +541,13 @@ Oluşturduğumuz tüm JSX elementlerini stilleyelim: header, main ve footer. Uyg
JSX elementinde class yerine className kullanırız, çünkü class JavaScript'te ayrılmış bir sözcüktür. Benzer şekilde, label etiketinde for yerine htmlFor kullanılır. Aşağıdaki örneğe bakın.
```js
const title = <h1className='title'>Getting Started React</h1>
const title = <h1className="title">Getting Started React</h1>;
@ -769,14 +769,14 @@ Stil nesnesi kullanmak yerine normal stil yöntemini kullanmak, yukarıdakinden
<small>Date: Oct 1, 2020</small>
</div>
</header>
)
);
// JSX elementi, main
const main = (
<main>
<divclassName='main-wrapper'>
<divclassName="main-wrapper">
<p>
Prerequisite to get started{' '}
Prerequisite to get started{" "}
<strong>
<em>react.js</em>
</strong>
@ -789,28 +789,28 @@ Stil nesnesi kullanmak yerine normal stil yöntemini kullanmak, yukarıdakinden
</ul>
</div>
</main>
)
);
// JSX elementi, footer
const footer = (
<footer>
<divclassName='footer-wrapper'>
<divclassName="footer-wrapper">
<p>Copyright 2020</p>
</div>
</footer>
)
);
// JSX elementi, app
const app = (
<divclassName='app'>
<divclassName="app">
{header}
{main}
{footer}
</div>
)
);
// JSX elementini ReactDOM paketi kullanarak render ediyoruz
ReactDOM.render(app, rootElement)
ReactDOM.render(app, rootElement);
</script>
</body>
</html>
@ -823,17 +823,17 @@ Stil nesnesi kullanmak yerine normal stil yöntemini kullanmak, yukarıdakinden
Şimdiye kadar JSX elementlerinde statik veriler kullandık; ancak farklı veri türlerini dinamik veri olarak da geçirebiliriz. Dinamik veriler; string, sayı, boolean, dizi veya nesne olabilir. Her veri türünü adım adım inceleyelim. JSX'e veri enjekte etmek için {} parantezini kullanırız.
```js
const welcome = 'Welcome to 30 Days Of React'
const title = 'Getting Started React'
const subtitle = 'JavaScript Library'
const authorFirstName = 'Asabeneh'
const authorLastName = 'Yetayeh'
const date = 'Oct 1, 2020'
const welcome = "Welcome to 30 Days Of React";
const title = "Getting Started React";
const subtitle = "JavaScript Library";
const authorFirstName = "Asabeneh";
const authorLastName = "Yetayeh";
const date = "Oct 1, 2020";
// JSX elementi, header
const header = (
<header>
<divclassName='header-wrapper'>
<divclassName="header-wrapper">
<h1>{welcome}</h1>
<h2>{title}</h2>
<h3>{subtitle}</h3>
@ -843,7 +843,7 @@ const header = (
<small>Date: {date}</small>
</div>
</header>
)
);
```
Header JSX elementine benzer şekilde, main ve footer JSX elementlerine de veri enjeksiyonu uygulayabiliriz.
@ -853,19 +853,19 @@ Header JSX elementine benzer şekilde, main ve footer JSX elementlerine de veri
Bu bölümde yalnızca string'ler enjekte edeceğiz
```js
const welcome = 'Welcome to 30 Days Of React'
const title = 'Getting Started React'
const subtitle = 'JavaScript Library'
const firstName = 'Asabeneh'
const lastName = 'Yetayeh'
const date = 'Oct 2, 2020'
const welcome = "Welcome to 30 Days Of React";
const title = "Getting Started React";
const subtitle = "JavaScript Library";
const firstName = "Asabeneh";
const lastName = "Yetayeh";
const date = "Oct 2, 2020";
// JSX elementi, header
// JSX elementi, header
const header = (
<header>
<divclassName='header-wrapper'>
<divclassName="header-wrapper">
<h1>{welcome}</h1>
<h2>{title}</h2>
<h3>{subtitle}</h3>
@ -875,25 +875,25 @@ const header = (
<small>Date: {date}</small>
</div>
</header>
)
);
```
##### JSX Elementine Sayı Enjekte Etme
```js
const numOne = 3
const numTwo = 2
const numOne = 3;
const numTwo = 2;
const result = (
<p>
{numOne} + {numTwo} = {numOne + numTwo}
</p>
)
);
const yearBorn = 1820
const currentYear = new Date().getFullYear()
const age = currentYear - yearBorn
const personAge = <p> {age}</p>
const yearBorn = 1820;
const currentYear = new Date().getFullYear();
const age = currentYear - yearBorn;
const personAge = <p> {age}</p>;
```
Yukarıdaki örnekte gördüğünüz gibi, aritmetik hesaplamalar ve üçlü işlemler yapmak mümkündür.
@ -903,14 +903,14 @@ Yukarıdaki örnekte gördüğünüz gibi, aritmetik hesaplamalar ve üçlü iş
Dizi örneği vermek için HTML, CSS, JavaScript'i bir diziye çevirelim ve aşağıdaki main JSX elementine enjekte edelim. Daha sonra liste render etme bölümünde daha ayrıntılı ele alacağız.
```js
const techs = ['HTML', 'CSS', 'JavaScript']
const techs = ["HTML", "CSS", "JavaScript"];
// JSX elementi, main
const main = (
<main>
<divclassName='main-wrapper'>
<divclassName="main-wrapper">
<p>
Prerequisite to get started{' '}
Prerequisite to get started{" "}
<strong>
<em>react.js</em>
</strong>
@ -919,7 +919,7 @@ const main = (
<ul>{techs}</ul>
</div>
</main>
)
);
```
##### JSX Elementine Nesne Enjekte Etme
@ -952,7 +952,7 @@ JSX'e string, sayı, boolean ve dizi verisi enjekte edebiliriz; ancak doğrudan
body {
height: 100%;
line-height: 1.5;
font-family: 'Montserrat';
font-family: "Montserrat";
font-weight: 300;
color: black;
}
@ -1034,21 +1034,21 @@ JSX'e string, sayı, boolean ve dizi verisi enjekte edebiliriz; ancak doğrudan
@ -1058,36 +1058,36 @@ JSX'e string, sayı, boolean ve dizi verisi enjekte edebiliriz; ancak doğrudan
<small>Date: {date}</small>
</div>
</header>
)
);
const numOne = 3
const numTwo = 2
const numOne = 3;
const numTwo = 2;
const result = (
<p>
{numOne} + {numTwo} = {numOne + numTwo}
</p>
)
);
const yearBorn = 1820
const currentYear = new Date().getFullYear()
const age = currentYear - yearBorn
const yearBorn = 1820;
const currentYear = new Date().getFullYear();
const age = currentYear - yearBorn;
const personAge = (
<p>
{' '}
{" "}
{author.firstName} {author.lastName} is {age} years old
</p>
)
);
// JSX elementi, main
const techs = ['HTML', 'CSS', 'JavaScript']
const techs = ["HTML", "CSS", "JavaScript"];
// JSX elementi, main
const main = (
<main>
<divclassName='main-wrapper'>
<divclassName="main-wrapper">
<p>
Prerequisite to get started{' '}
Prerequisite to get started{" "}
<strong>
<em>react.js</em>
</strong>
@ -1098,30 +1098,30 @@ JSX'e string, sayı, boolean ve dizi verisi enjekte edebiliriz; ancak doğrudan
{personAge}
</div>
</main>
)
);
const copyRight = 'Copyright 2020'
const copyRight = "Copyright 2020";
// JSX elementi, footer
const footer = (
<footer>
<divclassName='footer-wrapper'>
<divclassName="footer-wrapper">
<p>{copyRight}</p>
</div>
</footer>
)
);
// JSX elementi, app
const app = (
<divclassName='app'>
<divclassName="app">
{header}
{main}
{footer}
</div>
)
);
// JSX elementini ReactDOM paketi kullanarak render ediyoruz
ReactDOM.render(app, rootElement)
ReactDOM.render(app, rootElement);
</script>
</body>
</html>
@ -1132,8 +1132,8 @@ JSX'e string, sayı, boolean ve dizi verisi enjekte edebiliriz; ancak doğrudan
Gördüğünüz gibi listeler tek satırda görünmektedir. Bu nedenle, JSX'e enjekte etmeden önce listeyi istediğimiz şekilde biçimlendirmeliyiz. Listeyi biçimlendirmek için JSX'e enjekte etmeden önce diziyi değiştirmeliyiz. _map_ kullanarak diziyi değiştirebiliriz. Bir React geliştirici olarak, fonksiyonel programlamayı (map, filter, reduce, find, some, every) çok iyi anlamalısınız. Fonksiyonel programlamayı iyi anlamıyorsanız, 1. güne bakın.
[<< Gün 9](../09_Gun_Kosullu_Render/09_kosullu_render.md) | [Gün 11 >>](../../11_Day_Events/11_events.md)
[<< Gün 9](../09_Gun_Kosullu_Render/09_kosullu_render.md) | [Gün 11 >>](../11_Gun_Olaylar/11_olaylar.md)
@ -65,8 +65,8 @@ Yukarıdaki kod parçasında App component'i bulunmaktadır. App component'ini k
```js
// src/App.js
import React from 'react'
const App = () => <h1>Welcome to 30 Days Of React</h1>
import React from "react";
const App = () => <h1>Welcome to 30 Days Of React</h1>;
```
Component'i başka bir dosyaya import etmek için dışa aktarmamız (export etmemiz) gerekiyor. Default veya named (isimli) export olarak dışa aktarabiliriz. Bir dosyada bir default export ve çok sayıda named export yapılabilir. Önce named export ile uygulayalım, ardından default export'a geçelim.
@ -75,20 +75,20 @@ Named export yapmak için _let_ veya _const_'tan önce sadece _export_ anahtar k
```js
// src/App.js
import React from 'react'
import React from "react";
// ok fonksiyonunda named export
export const App = () => <h1>Welcome to 30 Days Of React</h1>
export const App = () => <h1>Welcome to 30 Days Of React</h1>;
```
Normal fonksiyon tanımlamasında dışa aktarma:
```js
// src/App.js
import React from 'react'
import React from "react";
// normal fonksiyonda named export, function declaration
export function App() {
return <h1>Welcome to 30 Days Of React</h1>
return <h1>Welcome to 30 Days Of React</h1>;
}
```
@ -108,27 +108,27 @@ Named export'u gördük; şimdi default export ile uygulayalım. Bunu iki şekil
```js
// src/App.js
import React from 'react'
import React from "react";
// ok fonksiyonunda default export
const App = () => <h1>Welcome to 30 Days Of React</h1>
export default App
const App = () => <h1>Welcome to 30 Days Of React</h1>;
export default App;
```
```js
// src/App.js
import React from 'react'
import React from "react";
// default export, normal fonksiyon
export default function App() {
return <h1>Welcome to 30 Days Of React</h1>
return <h1>Welcome to 30 Days Of React</h1>;
}
```
```js
// src/App.js
// Çoğu durumda önerilen yöntem
import React from 'react'
const App = () => <h1>Welcome to 30 Days Of React</h1>
export default App
import React from "react";
const App = () => <h1>Welcome to 30 Days Of React</h1>;
export default App;
```
Bir component default olarak dışa aktarılmışsa import ederken süslü paranteze gerek yoktur:
@ -473,7 +473,15 @@ src içinde components dizini oluşturalım; components içinde header dizini ol
[<< Gün 10](../10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md) | [Gün 12 >>](../12_Gun_Formlar/12_formlar.md)
- [Olaylar (Events)](#olaylar-events)
- [Olay (Event) Nedir?](#olay-event-nedir)
- [Egzersizler](#egzersizler)
- [Egzersizler: Seviye 1](#egzersizler-seviye-1)
- [Egzersizler: Seviye 2](#egzersizler-seviye-2)
- [Egzersizler: Seviye 3](#egzersizler-seviye-3)
# Olaylar (Events)
## Olay (Event) Nedir?
Bir olay (event), bir yazılım tarafından tanınan bir eylem veya oluşumdur. Olayı daha iyi anlamak için bilgisayar kullanırken yaptığımız günlük aktiviteleri düşünebiliriz: bir düğmeye tıklamak, bir görsel üzerinde fareyi gezdirmek, klavyeye basmak, fare tekerleğini kaydırmak vb. Bu bölümde yalnızca bazı fare ve klavye olaylarına odaklanacağız. React belgeleri [events (olaylar)](https://reactjs.org/docs/handling-events.html) hakkında zaten ayrıntılı bir not içermektedir.
React'te olay yönetimi (event handling), saf JavaScript kullanarak DOM öğeleri üzerindeki olay yönetimine çok benzer. React'te olay yönetimi ile saf JavaScript arasındaki bazı sözdizimi farklılıkları şunlardır:
- React olayları, küçük harf yerine camelCase kullanılarak isimlendirilir.
- JSX ile olay işleyiciye (event handler) bir string yerine bir fonksiyon geçirilir.
Olay yönetimini anlamak için bazı örneklere bakalım.
HTML ve React olayları arasındaki bir diğer fark, React'te varsayılan davranışı engellemek için `false` döndürememenizdir. `preventDefault`'u açıkça çağırmanız gerekir. Örneğin, saf HTML'de yeni bir sayfanın açılmasını engellemek için şunlar yazılabilir:
- [Doğrulamanın Amacı Nedir?](#doğrulamanın-amacı-nedir)
- [Doğrulama Türleri](#doğrulama-türleri)
- [Egzersizler](#egzersizler)
- [Egzersizler: Seviye 1](#egzersizler-seviye-1)
- [Egzersizler: Seviye 2](#egzersizler-seviye-2)
- [Egzersizler: Seviye 3](#egzersizler-seviye-3)
# Formlar (Forms)
Form, kullanıcıdan veri toplamak için kullanılır. Zaman zaman bir kâğıt üzerinde ya da bir web sitesinde bilgilerimizi doldurmak için form kullanırız. Kayıt olmak, giriş yapmak veya bir işe başvurmak için farklı form alanlarını doldurarak verilerimizi uzak bir veritabanına göndeririz. Bir formu doldururken basit metin, e-posta, parola, telefon, tarih, onay kutusu (checkbox), radyo düğmesi, seçim kutusu ve metin alanı gibi farklı form alanlarıyla karşılaşırız. HTML5, oldukça fazla alan türü sunmaktadır. Aşağıdaki mevcut HTML5 input türlerine göz atabilirsiniz.
```html
<inputtype="text"/>
<inputtype="number"/>
<inputtype="range"/>
<inputtype="email"/>
<inputtype="password"/>
<inputtype="tel"/>
<inputtype="checkbox"/>
<inputtype="radio"/>
<inputtype="color"/>
<inputtype="url"/>
<inputtype="image"/>
<inputtype="file"/>
<inputtype="hidden"/>
<inputtype="date"/>
<inputtype="datetime-local"/>
<inputtype="month"/>
<inputtype="week"/>
<inputtype="time"/>
<inputtype="reset"/>
<inputtype="search"/>
<inputtype="submit"/>
<inputtype="button"/>
```
Formdan veri almak için kullanılan diğer HTML alanları arasında textarea ve seçenekli select öğesi yer alır.
```html
<textarea>Lütfen yorumunuzu yazın ...</textarea>
<selectname="country">
<optionvalue="">Ülkenizi seçin</option>
<optionvalue="finland">Finlandiya</option>
<optionvalue="sweden">İsveç</option>
<optionvalue="denmark">Danimarka</option>
<optionvalue="norway">Norveç</option>
<optionvalue="iceland">İzlanda</option>
</select>
```
Artık bir formdan veri almak için ihtiyaç duyduğumuz alanların çoğunu biliyorsunuz. Metin tipinde bir input ile başlayalım. Bir önceki günde farklı olay türlerini gördük; bugün ise bir input alanının verisi değiştiğinde tetiklenen _onChange_ olay türüne odaklanacağız. Input alanı varsayılan olarak girilen veriyi hafızada tutar; ancak bu bölümde bunu state kullanarak kontrol edecek ve kontrollü (controlled) bir input uygulayacağız. Kontrolsüz (uncontrolled) input'u ayrı bir bölümde ele alacağız.
## Input Alanından Veri Almak
Şimdiye kadar input alanından herhangi bir veri almadık. Şimdi bir input alanından nasıl veri alacağımızı öğrenme zamanı. Kontrollü bir input'tan veri alabilmek için bir input alanına, olay dinleyicisine (onChange) ve state'e ihtiyacımız var. Aşağıdaki örneğe bakın. Input etiketinin altındaki h1 öğesi, input'a yazdığımız şeyi gösterir. Canlı [demo](https://codepen.io/Asabeneh/full/OJVpyqm)'ya bakabilirsiniz.
Input öğesinin value, name, id, placeholder, type ve olay işleyicisi gibi birçok niteliği (attribute) vardır. Buna ek olarak, bir label ile input alanını input alanının id'si ve etiketin htmlFor'u aracılığıyla ilişkilendirebiliriz. Label ve input ilişkilendirildiğinde, etikete tıklandığında input'a odaklanır. Aşağıdaki örneğe bakın.
```js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
// state tanımlama
// başlangıç state'i
state = {
firstName: '',
}
handleChange = (e) => {
const value = e.target.value
this.setState({ firstName: value })
}
render() {
/*
state değerine erişim ve
bu değer input'un value niteliğine enjekte edilecek
Kullanıcı bilgilerini yönetmek için genellikle form kullanırız. Form bölümüne geçerek form öğesini kullanalım.
## Formdan Birden Fazla Input Verisi Almak
Bu bölümde kullanıcı bilgilerini toplayan küçük bir form geliştireceğiz. Kullanıcımız bir öğrencidir. Kullanıcı bilgilerini toplamak için üst (parent) bir form öğesi ve belirli sayıda input öğesi kullanacağız. Bunlara ek olarak form için (onSubmit) ve input'lar için (onChange) olay dinleyicilerimiz olacak. Aşağıdaki örneğe bakın, yorumları da incelemeye çalışın. Canlı [demo](https://codepen.io/Asabeneh/full/eYNvJda)'ya da bakabilirsiniz.
```js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
// başlangıç state'ini tanımlama
state = {
firstName: '',
lastName: '',
country: '',
title: '',
}
handleChange = (e) => {
/*
name ve value'yu şu şekilde alabiliriz: e.target.name, e.target.value
ya da e.target'tan name ve value'yu destructure edebiliriz
const name = e.target.name
const value = e.target.value
*/
const { name, value } = e.target
// bir nesnede anahtar olarak değişken adı kullanmak için [değişkenadı]
// name, input öğelerinin name niteliğine atıfta bulunur
this.setState({ [name]: value })
}
handleSubmit = (e) => {
/*
e.preventDefault()
form öğesinin varsayılan davranışını durdurur
özellikle sayfanın yenilenmesini engeller
*/
e.preventDefault()
/*
burası backend api'ye bağlandığımız ve
verinin veritabanına gönderildiği yerdir
*/
console.log(this.state)
}
render() {
// state'i destructure ederek state değerine erişim
const { firstName, lastName, title, country } = this.state
Yukarıdaki form yalnızca metin türlerini işlemektedir, ancak farklı input alanı türleri de mevcuttur. Tüm farklı input alanı türlerini işleyen başka bir form yapalım.
## Farklı Input Alan Türlerinden Veri Almak
```js
// index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
const options = [
{
value: '',
label: '-- Ülke Seçin --',
},
{
value: 'Finland',
label: 'Finlandiya',
},
{
value: 'Sweden',
label: 'İsveç',
},
{
value: 'Norway',
label: 'Norveç',
},
{
value: 'Denmark',
label: 'Danimarka',
},
]
// seçenekleri JSX option listesine (dizisine) eşleme
Doğrulama, bu durumda verinin geçerliliğini veya doğruluğunu kontrol etme ya da kanıtlama eylemi veya sürecidir.
## Doğrulamanın Amacı Nedir?
Doğrulamanın temel amacı, kullanıcılardan istenen veriyi elde etmektir. Bunun yanı sıra kötü niyetli kullanıcıları ve verileri engellemek amacıyla da kullanılır.
## Doğrulama Türleri
Doğrulama, istemci tarafında (client side) veya sunucu tarafında (server side) yapılabilir. Şu anda bir ön yüz teknolojisi olan React kullanıyoruz ve istemci tarafı doğrulaması uyguluyoruz. Doğrulama, HTML5'in yerleşik doğrulaması kullanılarak veya JavaScript (düzenli ifadeler / regular expression) kullanılarak uygulanabilir.
Aşağıdaki kod parçasında ilk alana bir doğrulama uygulanmıştır. Nasıl çalıştığını anlamaya çalışın. Input odaklanılmadığında geçerliliği kontrol etmek için onBlur olayı kullanılmıştır.
```js
// index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
const options = [
{
value: '',
label: '-- Ülke Seçin --',
},
{
value: 'Finland',
label: 'Finlandiya',
},
{
value: 'Sweden',
label: 'İsveç',
},
{
value: 'Norway',
label: 'Norveç',
},
{
value: 'Denmark',
label: 'Danimarka',
},
]
// seçenekleri JSX option listesine (dizisine) eşleme
3. Bir input öğesinin en az dört niteliğini (attribute) belirtin.
4. htmlFor'un önemi nedir?
5. Örnekte verilmemiş bir input türü varsa onu yazın.
6. Kontrollü (controlled) input nedir?
7. Kontrollü bir input yazmak için neye ihtiyaç duyarsınız?
8. Bir input alanındaki değişiklikleri dinlemek için hangi olay türünü kullanırsınız?
9. İşaretlenmiş (checked) bir checkbox'ın değeri nedir?
10. onChange, onBlur, onSubmit'i ne zaman kullanırsınız?
11. Submit işleyici metodunun içine e.preventDefault() yazmanın amacı nedir?
12. React'te veriler nasıl bağlanır (data binding)? İlk input alanı örneği React'te veri bağlamadır.
13. Doğrulama (validation) nedir?
14. Bir input değiştiğinde dinlemek için hangi olay türünü kullanırsınız?
15. Bir input'u doğrulamak için hangi olay türlerini kullanırsınız?
## Egzersizler: Seviye 2
1. Yukarıda verilen formu doğrulayın (daha sonra bir gif görseli veya video sağlanacaktır). Önce herhangi bir kütüphane kullanmadan doğrulamayı deneyin, ardından [validator.js](https://www.npmjs.com/package/validator) ile deneyin.
## Egzersizler: Seviye 3
Yakında ..
🎉 TEBRİKLER! 🎉
[<< Gün 11](../11_Gun_Olaylar/11_olaylar.md) | [Gün 13 >>](../13_Gun_Kontrollü_ve_Kontrolsüz_Input/13_kontrolsuz_input.md)
- [Kontrolsüz Input'tan Veri Almak](#kontrolsüz-inputtan-veri-almak)
- [Formdan Birden Fazla Input Verisi Almak](#formdan-birden-fazla-input-verisi-almak)
- [Egzersizler](#egzersizler)
- [Egzersizler: Seviye 1](#egzersizler-seviye-1)
# Kontrolsüz Bileşenler (Uncontrolled Components)
Bir önceki gün meydan okumada kontrollü (controlled) input'ları ele aldık. React'te çoğu zaman, [React'in resmi belgelerinde](https://reactjs.org/docs/uncontrolled-components.html) önerildiği şekilde kontrollü input'lar kullanılır.
Kontrolsüz bir bileşen yazmak için, her state güncellemesi için bir olay işleyicisi yazmak yerine, DOM'dan form değerlerini almak amacıyla bir ref kullanabilirsiniz. Kontrolsüz input'ta, geleneksel HTML form veri yönetimine benzer şekilde input alanlarından veri alırız.
Çoğu zaman kontrolsüz input yerine kontrollü input kullanılır. DOM üzerindeki bir öğeyi hedeflemek istediğinizde, o öğenin içeriğini almak için ref kullanırsınız. Saf JavaScript kullanarak DOM'a doğrudan dokunmayın. Bir React uygulaması geliştirirken DOM'u doğrudan değiştirmeyin; çünkü React'in DOM manipülasyonunu yönetmek için kendi yolu vardır.
# Egzersizler
## Egzersizler: Seviye 1
1. Kontrollü (controlled) input nedir?
2. Kontrolsüz (uncontrolled) input nedir?
3. React'te belirli bir HTML öğesinin içeriğini nasıl alırsınız?
4. React'te DOM'a doğrudan dokunmak neden iyi bir fikir değildir?
5. React'te en sık ne kullanılır? Kontrollü mu yoksa kontrolsüz input mu?
6. Kontrolsüz input yazmak için neye ihtiyaç duyarsınız?
7. Kontrolsüz input yazmak için state gerekli midir?
8. Kontrolsüz input'u ne zaman kullanırsınız?
9. Kontrollü input'u ne zaman kullanırsınız?
10. Form input alanlarını doğrulamak için kontrollü mu yoksa kontrolsüz input mu kullanırsınız?
🎉 TEBRİKLER! 🎉
[<< Gün 12](../12_Gun_Formlar/12_formlar.md) | [Gün 14 >>](../../14_Day_Component_Life_Cycles/14_component_life_cycles.md)
Samet SARIKAYA
3 months ago