diff --git a/Turkish/02_Gun_Reacta_Giris/02_reacta_giris.md b/Turkish/02_Gun_Reacta_Giris/02_reacta_giris.md index 6a28365..9f27834 100644 --- a/Turkish/02_Gun_Reacta_Giris/02_reacta_giris.md +++ b/Turkish/02_Gun_Reacta_Giris/02_reacta_giris.md @@ -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 =

I am a JSX element

-const welcome =

Welcome to 30 Days of React Challenge

-const data = Oct 2, 2020 +const jsxElement =

I am a JSX element

; +const welcome =

Welcome to 30 Days of React Challenge

; +const data = Oct 2, 2020; ``` 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 =

I am a JSX element

// JS ile HTML +const jsxElement =

I am a JSX element

; // 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 =

Getting Started React

+const title =

Getting Started React

; ``` 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 = (

Getting Started React

JavaScript Library

-) +); ``` Yazar adı ve yılı görüntülemek için daha fazla element ekleyelim. @@ -157,7 +157,7 @@ const header = (

Asabeneh Yetayeh

Oct 2, 2020 -) +); ``` 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 > @@ -280,14 +280,14 @@ Artık JSX ve JSX elementini biliyorsunuz. JSX elementini tarayıcıda render et @@ -321,7 +321,7 @@ Daha fazla içerik render edelim. Daha fazla içerik render etmek için JSX elem @@ -359,7 +359,7 @@ const main = (
  • JavaScript
    • -) +); ``` Web sitesinin alt bilgi kısmı için JSX elementi. @@ -370,7 +370,7 @@ const 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 = (

    Asabeneh Yetayeh

    Oct 2, 2020 -) +); // Web sitesinin ana içerik kısmı için JSX elementi const main = ( @@ -397,14 +397,14 @@ const main = (
  • JavaScript
    • -) +); // Web sitesinin alt bilgi kısmı için JSX elementi const footer = ( -) +); // Tümünü içeren JSX elementi, bir kapsayıcı veya üst element const app = ( @@ -413,7 +413,7 @@ const app = ( {main} {footer} -) +); ``` Şimdi her şeyi bir araya getirelim ve tarayıcıya render edelim. [Code pen'de canlı](https://codepen.io/Asabeneh/full/MWwbYWg). @@ -441,7 +441,7 @@ const app = ( @@ -509,7 +509,7 @@ Bir JSX elementine stil eklemek için satır içi stil veya className kullanır ```js const header = (

    Welcome to 30 Days Of React

    Getting Started React

    @@ -517,11 +517,11 @@ const header = (

    Asabeneh Yetayeh

    Oct 2, 2020
    -) +); // veya şu şekilde de yazabiliriz -const style = { border: '2px solid orange', color: 'black', fontSize: '18px' } +const style = { border: "2px solid orange", color: "black", fontSize: "18px" }; const header = (
    @@ -531,7 +531,7 @@ const header = (

    Asabeneh Yetayeh

    Oct 2, 2020
    -) +); ``` 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 =

    Getting Started React

    +const title =

    Getting Started React

    ; const inputField = (
    - - + +
    -) +); ``` Input elementinde kullanılan id, stil amaçlı değil; label'ı input alanına bağlamak için kullanılmaktadır. @@ -581,20 +581,20 @@ Artık satır içi stil ve className kullanımını öğrendiniz. Tüm JSX eleme @@ -673,7 +673,7 @@ Stil nesnesi kullanmak yerine normal stil yöntemini kullanmak, yukarıdakinden body { height: 100%; line-height: 1.5; - font-family: 'Montserrat'; + font-family: "Montserrat"; font-weight: 300; color: black; } @@ -756,12 +756,12 @@ Stil nesnesi kullanmak yerine normal stil yöntemini kullanmak, yukarıdakinden @@ -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 = (
    -
    +

    {welcome}

    {title}

    {subtitle}

    @@ -843,7 +843,7 @@ const header = ( Date: {date}
    -) +); ``` 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 = (
    -
    +

    {welcome}

    {title}

    {subtitle}

    @@ -875,25 +875,25 @@ const header = ( Date: {date}
    -) +); ``` ##### JSX Elementine Sayı Enjekte Etme ```js -const numOne = 3 -const numTwo = 2 +const numOne = 3; +const numTwo = 2; const result = (

    {numOne} + {numTwo} = {numOne + numTwo}

    -) +); -const yearBorn = 1820 -const currentYear = new Date().getFullYear() -const age = currentYear - yearBorn -const personAge =

    {age}

    +const yearBorn = 1820; +const currentYear = new Date().getFullYear(); +const age = currentYear - yearBorn; +const personAge =

    {age}

    ; ``` 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 = (
    -
    +

    - Prerequisite to get started{' '} + Prerequisite to get started{" "} react.js @@ -919,7 +919,7 @@ const main = (

      {techs}
    -) +); ``` ##### 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 @@ -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. ```js -const techs = ['HTML', 'CSS', 'JavaScript'] -const techsFormatted = techs.map((tech) =>
  • {tech}
    • ) +const techs = ["HTML", "CSS", "JavaScript"]; +const techsFormatted = techs.map((tech) =>
  • {tech}
    • ); ``` Aşağıdaki kod örneğinde, liste artık liste elementleri içermekte ve düzgün biçimlendirilmiş durumdadır. @@ -1162,7 +1162,7 @@ Aşağıdaki kod örneğinde, liste artık liste elementleri içermekte ve düzg body { height: 100%; line-height: 1.5; - font-family: 'Montserrat'; + font-family: "Montserrat"; font-weight: 300; color: black; } @@ -1244,21 +1244,21 @@ Aşağıdaki kod örneğinde, liste artık liste elementleri içermekte ve düzg @@ -1367,7 +1367,7 @@ Yukarıda gördüğünüz gibi, listeler artık düzgün biçimlendirilmiş duru body { height: 100%; line-height: 1.5; - font-family: 'Montserrat'; + font-family: "Montserrat"; font-weight: 300; color: black; } @@ -1450,21 +1450,21 @@ Yukarıda gördüğünüz gibi, listeler artık düzgün biçimlendirilmiş duru diff --git a/Turkish/10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md b/Turkish/10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md index 47ef642..b8d8646 100644 --- a/Turkish/10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md +++ b/Turkish/10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md @@ -14,7 +14,7 @@ -[<< 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) ![30 Days of React banner](../../images/30_days_of_react_banner_day_10.jpg) @@ -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 = () =>

    Welcome to 30 Days Of React

    +import React from "react"; +const App = () =>

    Welcome to 30 Days Of React

    ; ``` 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 = () =>

    Welcome to 30 Days Of React

    +export const App = () =>

    Welcome to 30 Days Of React

    ; ``` 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

    Welcome to 30 Days Of React

    + return

    Welcome to 30 Days Of React

    ; } ``` @@ -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 = () =>

    Welcome to 30 Days Of React

    -export default App +const App = () =>

    Welcome to 30 Days Of React

    ; +export default App; ``` ```js // src/App.js -import React from 'react' +import React from "react"; // default export, normal fonksiyon export default function App() { - return

    Welcome to 30 Days Of React

    + return

    Welcome to 30 Days Of React

    ; } ``` ```js // src/App.js // Çoğu durumda önerilen yöntem -import React from 'react' -const App = () =>

    Welcome to 30 Days Of React

    -export default App +import React from "react"; +const App = () =>

    Welcome to 30 Days Of React

    ; +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 // src/components/header/Header.js import React from "react"; -const Header = ({ data: { welcome, title, subtitle, author: { firstName, lastName }, date } }) => { +const Header = ({ + data: { + welcome, + title, + subtitle, + author: { firstName, lastName }, + date, + }, +}) => { return (
    @@ -616,4 +624,4 @@ Yakında 🎉 TEBRİKLER! 🎉 -[<< 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) diff --git a/Turkish/11_Gun_Olaylar/11_olaylar.md b/Turkish/11_Gun_Olaylar/11_olaylar.md new file mode 100644 index 0000000..9faea8b --- /dev/null +++ b/Turkish/11_Gun_Olaylar/11_olaylar.md @@ -0,0 +1,239 @@ +
    +

    30 Days Of React: Olaylar (Events)

    + + + + + Twitter Follow + + +Yazar: +Asabeneh Yetayeh
    + Ekim, 2020 +     + +
    + +[<< Gün 10](../10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md) | [Gün 12 >>](../12_Gun_Formlar/12_formlar.md) + +![30 Days of React banner](../../images/30_days_of_react_banner_day_8.jpg) + +- [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'de olay yönetimi: + +```html + + + + + 30 Days Of React App + + + + + + +``` + +React'te ise biraz farklıdır: + +```js +import React from 'react' +// fonksiyonel component ise +const App = () => { + const insanlariSelamla = () => { + alert('30 Günde React Meydan Okumasına Hoş Geldiniz') + } + return +} +``` + +```js +import React, { Component } from 'react' +// fonksiyonel component ise +class App extends Component { + insanlariSelamla = () => { + alert('30 Günde React Meydan Okumasına Hoş Geldiniz') + } + render() { + return + } +} +``` + +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: + +Saf HTML: + +```html + + Bana tıkla + +``` + +Ancak React'te şu şekilde olabilir: + +```js +import React, { Component } from 'react' +// fonksiyonel component ise +class App extends Component { + handleClick = () => { + alert('30 Günde React Meydan Okumasına Hoş Geldiniz') + } + render() { + return ( + + Bana tıkla + + ) + } +} +``` + +Olay yönetimi çok geniş bir konudur ve bu meydan okumada en yaygın olay türlerine odaklanacağız. Aşağıdaki fare ve klavye olaylarını kullanabiliriz: +_onMouseMove, onMouseEnter, onMouseLeave, onMouseOut, onClick, onKeyDown, onKeyPress, onKeyUp, onCopy, onCut, onDrag, onChange, onBlur, onInput, onSubmit_ + +Birkaç fare ve klavye olayını daha uygulayalım: + +```js +// index.js +import React, { Component } from 'react' +import ReactDOM from 'react-dom' + +class App extends Component { + state = { + firstName: '', + message: '', + key: '', + } + handleClick = (e) => { + // e bir olay nesnesi verir + // e'nin değerini console.log(e) ile kontrol edin + this.setState({ + message: 'Olaylar dünyasına hoş geldiniz', + }) + } + // fare her hareket ettiğinde tetiklenir + handleMouseMove = (e) => { + this.setState({ message: 'fare hareket ediyor' }) + } + // input alanı değer değiştirdiğinde değeri almak için + handleChange = (e) => { + this.setState({ + firstName: e.target.value, + message: e.target.value, + }) + } + + // input alanına basıldığında klavye tuş kodunu almak için + // input ve textarea ile çalışır + handleKeyPress = (e) => { + this.setState({ + message: + `${e.target.value} tuşuna basıldı ve tuş kodu: ` + e.charCode, + }) + } + // Blur, fare bir input alanından ayrıldığında gerçekleşir + handleBlur = (e) => { + this.setState({ message: 'Input alanı odak kaybetti (blur)' }) + } + // Bu olay bir metin kopyalama sırasında tetiklenir + handleCopy = (e) => { + this.setState({ + message: '30 Günde React\'i ticari amaçlarla kullanmak yasaktır', + }) + } + render() { + return ( +
    +

    Olaylar Dünyasına Hoş Geldiniz

    + + + +

    + Bu metni kopyalayarak telif hakkı iznini kontrol edin +

    + +

    {this.state.message}

    + + +
    + + + + +
    +
    + + +
    + +
    + +
    +
    +
    + ) + } +} + +const rootElement = document.getElementById('root') +// JSX öğesini ReactDOM paketi ile render ediyoruz +ReactDOM.render(, rootElement) +``` + +# Egzersizler + +## Egzersizler: Seviye 1 + +1. Olay (event) nedir? +2. HTML öğe olayı ile React olayı arasındaki fark nedir? +3. En az 4 klavye olayı yazın. +4. En az 8 fare olayı yazın. +5. En yaygın fare ve klavye olayları nelerdir? +6. Input öğesine özgü bir olay yazın. +7. Form öğesine özgü bir olay yazın. +8. Body üzerinde fare hareket ederken görüntü alanının (viewport) koordinatlarını gösterin. +9. onInput, onChange ve onBlur arasındaki fark nedir? +10. onSubmit olayı nereye yerleştirilir? + +## Egzersizler: Seviye 2 + +Aşağıdakini onMouseEnter olayını kullanarak uygulayın: + +![onMouseEnter olayı](../../images/react_event_on_mouse_enter.gif) + +## Egzersizler: Seviye 3 + +Yakında + +🎉 TEBRİKLER! 🎉 + +[<< Gün 10](../10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md) | [Gün 12 >>](../12_Gun_Formlar/12_formlar.md) diff --git a/Turkish/12_Gun_Formlar/12_formlar.md b/Turkish/12_Gun_Formlar/12_formlar.md new file mode 100644 index 0000000..83a2e5f --- /dev/null +++ b/Turkish/12_Gun_Formlar/12_formlar.md @@ -0,0 +1,949 @@ +
    +

    30 Days Of React: Formlar (Forms)

    + + + + + Twitter Follow + + +Yazar: +Asabeneh Yetayeh
    + Ekim, 2020 +     + +
    + +[<< Gün 11](../11_Gun_Olaylar/11_olaylar.md) | [Gün 13 >>](../13_Gun_Kontrollü_ve_Kontrolsüz_Input/13_kontrolsuz_input.md) + +![30 Days of React banner](../../images/30_days_of_react_banner_day_12.jpg) + +- [Formlar (Forms)](#formlar-forms) + - [Input Alanından Veri Almak](#input-alanından-veri-almak) + - [Formdan Birden Fazla Input Verisi Almak](#formdan-birden-fazla-input-verisi-almak) + - [Farklı Input Alan Türlerinden Veri Almak](#farklı-input-alan-türlerinden-veri-almak) + - [Form Doğrulama (Validation)](#form-doğrulama-validation) + - [Doğrulama Nedir?](#doğrulama-nedir) + - [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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +Formdan veri almak için kullanılan diğer HTML alanları arasında textarea ve seçenekli select öğesi yer alır. + +```html + + + +``` + +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 + */ + + const firstName = this.state.firstName + return ( +
    + + +

    {this.state.firstName}

    +
    + ) + } +} + +const rootElement = document.getElementById('root') +ReactDOM.render(, rootElement) +``` + +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 + return ( +
    +

    Öğrenci Ekle

    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    + + +
    +
    + ) + } +} + +const rootElement = document.getElementById('root') +ReactDOM.render(, rootElement) +``` + +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 + +const selectOptions = options.map(({ value, label }) => ( + +)) + +class App extends React.Component { + // state tanımlama + state = { + firstName: '', + lastName: '', + email: '', + country: '', + tel: '', + dateOfBirth: '', + favoriteColor: '', + weight: '', + gender: '', + file: '', + bio: '', + skills: { + html: false, + css: false, + javascript: false, + }, + } + 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, type, checked } = e.target + /* + [değişkenadı] — belirli bir değişkende saklanan değeri nesne için anahtar olarak kullanabiliriz; bu durumda state için bir anahtar + */ + + if (type === 'checkbox') { + this.setState({ + skills: { ...this.state.skills, [name]: checked }, + }) + } else if (type === 'file') { + console.log(type, 'buraya bakın') + this.setState({ [name]: e.target.files[0] }) + } else { + this.setState({ [name]: value }) + } + } + handleSubmit = (e) => { + /* + e.preventDefault() + form öğesinin varsayılan davranışını durdurur + özellikle sayfanın yenilenmesini engeller + */ + e.preventDefault() + const { + firstName, + lastName, + email, + tel, + dateOfBirth, + favoriteColor, + weight, + country, + gender, + bio, + file, + skills, + } = this.state + + const formattedSkills = [] + for (const key in skills) { + console.log(key) + if (skills[key]) { + formattedSkills.push(key.toUpperCase()) + } + } + const data = { + firstName, + lastName, + email, + tel, + dateOfBirth, + favoriteColor, + weight, + country, + gender, + bio, + file, + skills: formattedSkills, + } + /* + burası backend api'ye bağlandığımız ve + verinin veritabanına gönderildiği yerdir + */ + console.log(data) + } + + render() { + // state'i destructure ederek state değerine erişim + const { + firstName, + lastName, + email, + tel, + dateOfBirth, + favoriteColor, + weight, + country, + gender, + bio, + } = this.state + return ( +
    +

    Öğrenci Ekle

    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +
    + + +
    + +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + +
    + +
    +

    Cinsiyet

    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +
    +

    Becerilerinizi seçin

    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    +