+
+[<< Gün 1](../01_Gun_JavaScript_Tazeleyici/01_javascript_tazeleyici.md) | [Gün 3 >>](../03_Gun_Kurulum/03_kurulum.md)
+
+
+
+- [React'a Başlarken](#reacta-başlarken)
+ - [1. React Nedir?](#1-react-nedir)
+ - [2. Neden React?](#2-neden-react)
+ - [Ekim 2020'de React ve Vue Popülerliği](#ekim-2020de-react-ve-vue-popülerliği)
+ - [Şubat 2020'de React ve Vue Popülerliği](#şubat-2020de-react-ve-vue-popülerliği)
+ - [3. JSX](#3-jsx)
+ - [JSX Elementi](#jsx-elementi)
+ - [JSX Elementine Yorum Satırı Ekleme](#jsx-elementine-yorum-satırı-ekleme)
+ - [JSX Elementini Render Etme](#jsx-elementini-render-etme)
+ - [JSX'te Style ve className](#jsxte-style-ve-classname)
+ - [JSX Elementine Veri Enjekte Etme](#jsx-elementine-veri-enjekte-etme)
+ - [JSX Elementine String Enjekte Etme](#jsx-elementine-string-enjekte-etme)
+ - [JSX Elementine Sayı Enjekte Etme](#jsx-elementine-sayı-enjekte-etme)
+ - [JSX Elementine Dizi Enjekte Etme](#jsx-elementine-dizi-enjekte-etme)
+ - [JSX Elementine Nesne Enjekte Etme](#jsx-elementine-nesne-enjekte-etme)
+ - [Egzersizler](#egzersizler)
+ - [Egzersizler: React Nedir?](#egzersizler-react-nedir)
+ - [Egzersizler: Neden React?](#egzersizler-neden-react)
+ - [Egzersizler: JSX](#egzersizler-jsx)
+ - [Egzersizler: JSX Elementleri](#egzersizler-jsx-elementleri)
+ - [Egzersizler: Satır İçi Stil](#egzersizler-satır-içi-stil)
+ - [Egzersizler: Dahili Stiller](#egzersizler-dahili-stiller)
+ - [Egzersiz: JSX'e Veri Enjekte Etme](#egzersiz-jsxe-veri-enjekte-etme)
+
+## React'a Başlarken
+
+Bu bölüm, React'a başlamak için gerekli ön koşulları kapsamaktadır. Aşağıdaki teknolojiler hakkında iyi bir anlayışa sahip olmalısınız:
+
+- HTML
+- CSS
+- JavaScript
+
+Yukarıda belirtilen becerilere sahipseniz, React öğrenmekten keyif alacaksınız. 30 Days Of React meydan okuması, React hakkında bilmeniz gereken her şeyi içermektedir. Her bölümde bazı egzersizler ve mini projeler bulunmakta olup bunlar üzerinde çalışmanız tavsiye edilir. Bu 30 Days Of React meydan okuması, React'ın en son sürümünü ve eski sürümünü adım adım öğrenmenize yardımcı olacaktır. Konular 30 güne bölünmüş olup her gün, anlaşılması kolay açıklamalar, gerçek dünya örnekleri ve pek çok uygulamalı egzersiz içeren çeşitli konuları kapsamaktadır.
+Bu meydan okuma, React ve JavaScript kullanarak web uygulaması geliştirmek isteyen hem başlangıç hem de profesyonel seviyedeki kişiler için tasarlanmıştır.
+Zaman zaman React ile çalışmak için farklı sahte veriler kullanmanız gerekebilir. Farklı veriler üretmek için şu [sahte veri üreteci](https://www.30daysofreact.com/dummy-data)'ni kullanabilirsiniz.
+
+### 1. React Nedir?
+
+React, yeniden kullanılabilir kullanıcı arayüzü (UI) oluşturmak için bir JavaScript kütüphanesidir. İlk olarak 29 Mayıs 2013'te yayınlanmıştır. Mevcut sürüm 16.13.1 olup kararlı bir sürümdür. React, Facebook tarafından oluşturulmuştur. React, UI bileşenleri oluşturmayı çok kolaylaştırır. Resmi React dokümantasyonuna [buradan](https://reactjs.org/docs/getting-started.html) ulaşabilirsiniz. React ile çalışırken DOM ile doğrudan etkileşime girmeyiz. React, DOM (Document Object Model) manipülasyonunu kendine özgü bir şekilde ele alır. React, yeni değişiklikler yapmak için sanal DOM'unu (Virtual DOM) kullanır ve yalnızca değişmesi gereken elementi günceller. Bir React Uygulaması geliştirirken DOM ile doğrudan etkileşime girmeyin; DOM manipülasyonu görevini React'ın Virtual DOM'una bırakın. Bu meydan okumada React kullanarak 10-15 web uygulaması geliştireceğiz. Bir web uygulaması veya web sitesi; düğmeler, bağlantılar, farklı giriş alanlarına sahip formlar, başlık, alt bilgi, bölümler, makaleler, metinler, resimler, ses ve video dosyaları ile farklı şekillerdeki kutulardan oluşur. Bir web sitesinin yeniden kullanılabilir UI bileşenlerini oluşturmak için React kullanırız.
+
+Özetlemek gerekirse:
+
+- React Mayıs 2013'te yayınlandı
+- React, Facebook tarafından oluşturuldu
+- React, kullanıcı arayüzleri oluşturmak için bir JavaScript kütüphanesidir
+- React, tek sayfalı uygulamalar geliştirmek için kullanılır - Yalnızca tek bir HTML sayfasına sahip uygulamalar
+- React, yeniden kullanılabilir UI bileşenleri oluşturmamıza olanak tanır
+- React'ın en son sürümü 16.13.1'dir
+- [React sürümleri](https://reactjs.org/versions/)
+- React resmi dokümantasyonuna [buradan](https://reactjs.org/docs/getting-started.html) ulaşılabilir
+
+### 2. Neden React?
+
+React, en popüler JavaScript kütüphanelerinden biridir. Son birkaç yıldır pek çok geliştirici ve şirket tarafından kullanılmaktadır. Popülerliği hızla artmış ve büyük bir topluluğa sahip olmuştur. Popülerliği nasıl ölçeriz? Bir popülerlik ölçütü olarak GitHub repository yıldızları, izleyiciler ve fork sayıları kullanılabilir. [React](https://github.com/facebook/react) ile [Vue](https://github.com/vuejs/vue)'nun popülerliğini karşılaştıralım. Bugün itibarıyla, iki popüler JavaScript kütüphanesi arasındaki popülerlik, diyagramda gösterildiği gibi görünmektedir. Diyagramdan en popüler JavaScript kütüphanesini tahmin edebilirsiniz. Hem React hem de Vue için izleyici, yıldız ve fork sayılarına bakabilirsiniz. Bunlar tek başına popülerliğin çok iyi bir ölçütü olmayabilir; ancak iki teknolojinin popülerliği hakkında fikir vermektedir. React'ın yanında bir başka JavaScript kütüphanesi önermem gerekse, Vue.js'i öneririm.
+
+#### Ekim 2020'de React ve Vue Popülerliği
+
+React Resmi GitHub Repository'si
+
+
+
+Vue Resmi GitHub Repository'si
+
+
+
+#### Şubat 2020'de React ve Vue Popülerliği
+
+React Resmi GitHub Repository'si
+
+
+
+Vue Resmi GitHub Repository'si
+
+
+
+Neden React kullanmayı seçiyoruz? Aşağıdaki nedenlerle kullanıyoruz:
+
+- hızlı
+- modüler
+- ölçeklenebilir
+- esnek
+- büyük topluluk ve popüler
+- açık kaynak
+- yüksek iş olanakları
+
+### 3. JSX
+
+JSX, JavaScript XML anlamına gelir. JSX, JavaScript kodu içinde HTML elementleri yazmamıza olanak tanır. Bir HTML elementinin açılış ve kapanış etiketleri, içeriği ve açılış etiketinde öznitelikleri bulunur. Ancak bazı HTML elementlerinin içeriği ve kapanış etiketi olmayabilir; bunlara kendi kendini kapatan elementler denir. React'ta HTML elementleri oluşturmak için _createElement()_ kullanmak yerine yalnızca JSX elementleri kullanırız. Bu nedenle JSX, React'ta HTML elementleri yazmayı ve eklemeyi kolaylaştırır. JSX, tarayıcıda bir transpiler olan [babel.js](https://babeljs.io/) kullanılarak JavaScript'e dönüştürülür. Babel, JSX'i saf JavaScript'e ve en son JavaScript'i daha eski sürümlere dönüştüren bir kütüphanedir. Aşağıdaki JSX koduna bakın.
+
+```js
+// 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
+```
+
+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.
+
+#### JSX Elementi
+
+Yukarıdaki örnekte gördüğünüz gibi, JSX'in JavaScript ve HTML'e benzer bir sözdizimi vardır. Bir JSX elementi, tek bir HTML elementi veya bir üst HTML elementi içine sarılmış birden fazla HTML elementi olabilir.
+
+Bu JSX elementi yalnızca bir HTML elementine sahiptir: _h1_.
+
+```js
+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
+```
+
+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.
+
+```js
+const header = (
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
+)
+```
+
+Yazar adı ve yılı görüntülemek için daha fazla element ekleyelim.
+
+```js
+const header = (
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
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.
+
+#### JSX Elementine Yorum Satırı Ekleme
+
+Kodu farklı nedenlerle yorum satırına alırız ve React'ta JSX elementlerini nasıl yorum satırına alacağımızı bilmek de faydalıdır.
+
+```js
+{
+ /*
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
Asabeneh Yetayeh
+ Oct 2, 2020
+
+
+*/
+}
+```
+
+#### JSX Elementini Render Etme
+
+Bir JSX elementini HTML belgesine render etmek için önce bir index HTML dosyası oluşturmamız gerekir. index.html, herhangi bir React Uygulamasında sahip olacağınız tek HTML dosyasıdır. Bu nedenle her React Uygulamasının tek sayfalı uygulama olduğunu söyleriz. Bir index.html dosyası oluşturalım. React ile başlamanın iki yolu vardır: CDN kullanmak veya create-react-app kullanmak. create-react-app bir React projesi iskelet yapısı oluşturur ve bu nedenle pek çok kişi React'ın nasıl çalıştığını anlamakta güçlük çeker. Mutlak başlangıç seviyesindekiler için konuyu netleştirmek adına CDN ile başlamak istiyorum. CDN'i yalnızca bu bölümde kullanacağız; meydan okumanın geri kalanında create-react-app kullanacağız ve sizin de her zaman yalnızca create-react-app kullanmanızı tavsiye ediyorum.
+
+```html
+
+
+
+
+
+ 30 Days Of React Challenge
+
+
+
+
+
+
+
+
+```
+
+Yukarıdaki index.html'de gördüğünüz gibi, root sınıfına sahip bir div ve bir script etiketimiz var. _root_ div'i, tüm React bileşenlerini index.html'e bağlamak için kullanılan bir geçiş noktasıdır. Script etiketine JavaScript'imizi yazacağız, ancak script'in _type_'ı _babel_ olacak. Babel, React JSX'i tarayıcıda saf JavaScript'e _transpile_ edecektir. Script'e babel ekleyelim. Babel içinde saf JavaScript, JSX ve genel olarak herhangi bir React kodu yazabiliriz.
+
+```html
+
+
+
+
+
+ 30 Days Of React Challenge
+
+
+
+
+
+
+
+
+```
+
+Babel kütüphanesi belgemize bağlandı ve artık kullanabiliriz. Sonraki adım, CDN aracılığıyla _React_ ve _ReactDOM_'u içe aktarmaktır. React ve ReactDOM'u bağlamak için her iki paketi de CDN'den index.html'nin body kısmına ekliyoruz. React'ın index.html'e bağlı olup olmadığını test etmek için console.log(React) yazarak kontrol edin. Tarayıcı konsolunu açın; bir nesne görmelisiniz. React metodlarını içeren bir nesne görürseniz projenizi React CDN ile başarıyla bağlamışsınız demektir ve React'ı kullanmaya hazırsınız.
+
+```html
+
+
+
+
+
+ 30 Days Of React Challenge
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Artık index.html, React kodu yazmak için ihtiyacımız olan her şeye sahip. document.querySelect('.root') kullanarak root elementini alıp rootElement adlı bir değişkene atayalım. DOM ile doğrudan etkileşime girdiğimiz tek yer burasıdır.
+
+Artık JSX ve JSX elementini biliyorsunuz. JSX elementini tarayıcıda render etmek için React ve ReactDOM kütüphanesine ihtiyacımız var. React ve ReactDOM'a ek olarak, JSX'i JavaScript koduna transpile etmek için babel'e ihtiyacımız var. ReactDOM paketinin bir render metodu vardır. render metodu iki argüman alır: bir JSX elementi veya bileşen ve root belge. Aşağıdaki koda bakın. [Code pen'de canlı](https://codepen.io/Asabeneh/full/JjdbjqK).
+
+```html
+
+
+
+
+
+ 30 Days Of React Challenge
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+Daha fazla içerik render edelim. Daha fazla içerik render etmek için JSX elementinin daha fazla HTML elementine sahip olması gerekir. Örneğin, bir web sitesinin başlığını oluşturabiliriz; bu başlık bir başlık, alt başlık, yazar veya tarih gibi bilgiler içerebilir. Unutmayın, aynı anda yalnızca bir JSX elementi render edebiliriz.
+[Code pen'de canlı](https://codepen.io/Asabeneh/full/QWbGWeY).
+
+```html
+
+
+
+
+
+ 30 Days Of React Challenge
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+Web sitesinin başlığı için bir JSX elementi oluşturduk. Peki ya web sitesinin ana içeriği ve alt bilgisi? Başlığa benzer şekilde, ana içerik ve alt bilgi için de birer JSX elementi oluşturalım.
+
+Web sitesinin ana içerik kısmı için JSX elementi.
+
+```js
+// JSX elementi
+const main = (
+
+
Prerequisite to get started react.js:
+
+
HTML
+
CSS
+
JavaScript
+
+
+)
+```
+
+Web sitesinin alt bilgi kısmı için JSX elementi.
+
+```js
+// JSX elementi
+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.
+
+```js
+// Web sitesinin başlık kısmı için JSX elementi
+const header = (
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
Asabeneh Yetayeh
+ Oct 2, 2020
+
+)
+
+// Web sitesinin ana içerik kısmı için JSX elementi
+const main = (
+
+
Prerequisite to get started react.js:
+
+
HTML
+
CSS
+
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 = (
+
+ {header}
+ {main}
+ {footer}
+
+)
+```
+
+Şimdi her şeyi bir araya getirelim ve tarayıcıya render edelim. [Code pen'de canlı](https://codepen.io/Asabeneh/full/MWwbYWg).
+
+```html
+
+
+
+
+
+ 30 Days Of React Challenge
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+JSX elementlerimize biraz stil uygulayalım ve sonucu görelim.
+
+.
+
+Şimdi yalnızca header kısmına stil uygulayalım [Code pen'de canlı](https://codepen.io/Asabeneh/full/ZEGBYBG).
+
+#### JSX'te Style ve className
+
+Şimdiye kadar JSX elementlerine herhangi bir stil uygulamadık. Şimdi JSX elementlerimize stil ekleyelim. Satır içi stil, React'ın ortaya çıkmasından sonra çok popüler hale geldi. Header JSX elementine kenarlık ekleyelim.
+
+Bir JSX elementine stil eklemek için satır içi stil veya className kullanırız. Stil nesnesini {} kullanarak enjekte ederiz. Her CSS özelliği bir anahtar, her CSS özellik değeri ise nesne için bir değer olur. Örneğin, aşağıdaki örnekte border bir anahtar ve '2px solid orange' bir değer, color bir anahtar ve 'black' bir değer, fontSize bir anahtar ve '18px' bir değerdir. React veya JavaScript'te CSS nesnesinde anahtar olarak kullanıldığında, iki kelimeli tüm CSS özellikleri camelCase biçimine dönüşür.[Code pen'de canlı](https://codepen.io/Asabeneh/full/ZEGBYbY).
+
+```js
+const header = (
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
Asabeneh Yetayeh
+ Oct 2, 2020
+
+)
+
+// veya şu şekilde de yazabiliriz
+
+const style = { border: '2px solid orange', color: 'black', fontSize: '18px' }
+
+const header = (
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
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.
+
+Oluşturduğumuz tüm JSX elementlerini stilleyelim: header, main ve footer. Uygulamamızı şekillendirmek için normal dahili stil de kullanabiliriz. Normal stil kullanılarak bir HTML elementi, etiket adı, id, sınıf, öznitelik ve diğer yöntemlerle hedeflenebilir. React geliştirici topluluğunda id yerine sınıf kullanımı oldukça yaygındır. Bu materyalde yalnızca sınıf kullanacağım, id kullanmayacağım.
+
+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 inputField = (
+
+
+
+
+)
+```
+
+Input elementinde kullanılan id, stil amaçlı değil; label'ı input alanına bağlamak için kullanılmaktadır.
+
+className yerine class veya htmlFor yerine for kullanılırsa şuna benzer bir uyarı alırsınız.
+
+
+
+Artık satır içi stil ve className kullanımını öğrendiniz. Tüm JSX elementlerini stilleyelim.
+
+```html
+
+
+
+
+
+ 30 Days Of React Challenge
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+Stil nesnesi kullanmak yerine normal stil yöntemini kullanmak, yukarıdakinden daha kolaydır. Şimdi tüm JSX'i stillemek için dahili stil kullanalım. Harici stil yöntemi de kullanılabilir. [Code pen'de canlı](https://codepen.io/Asabeneh/full/QWbGwge)
+
+```html
+
+
+
+
+
+
+
+ 30 Days Of React Challenge
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+#### JSX Elementine Veri Enjekte Etme
+
+Ş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'
+
+// JSX elementi, header
+const header = (
+
+
+
+)
+```
+
+Header JSX elementine benzer şekilde, main ve footer JSX elementlerine de veri enjeksiyonu uygulayabiliriz.
+
+##### JSX Elementine String Enjekte Etme
+
+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'
+
+// JSX elementi, header
+
+// JSX elementi, header
+const header = (
+
+
+
{welcome}
+
{title}
+
{subtitle}
+
+ Instructor: {firstName} {lastName}
+
+ Date: {date}
+
+
+)
+```
+
+##### JSX Elementine Sayı Enjekte Etme
+
+```js
+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}
+```
+
+Yukarıdaki örnekte gördüğünüz gibi, aritmetik hesaplamalar ve üçlü işlemler yapmak mümkündür.
+
+##### JSX Elementine Dizi Enjekte Etme
+
+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']
+
+// JSX elementi, main
+const main = (
+
+
+
+ Prerequisite to get started{' '}
+
+ react.js
+
+ :
+
+
{techs}
+
+
+)
+```
+
+##### JSX Elementine Nesne Enjekte Etme
+
+JSX'e string, sayı, boolean ve dizi verisi enjekte edebiliriz; ancak doğrudan nesne enjekte edemeyiz. Nesne değerlerini önce çıkarmamız veya nesnenin içeriğini destructure etmemiz, ardından veriyi JSX elementine enjekte etmemiz gerekir. Örneğin, firstName ve lastName'i bir nesne içinde yazalım ve JSX içinde kullanmak için çıkaralım.
+
+Şimdi her şeyi bir araya getirelim. Aşağıdaki örnekte, veriler JSX'e dinamik olarak enjekte edilmektedir. [Code pen'de canlı](https://codepen.io/Asabeneh/full/YzXWgpZ)
+
+```html
+
+
+
+
+
+
+
+ 30 Days Of React Challenge
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+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}
)
+```
+
+Aşağıdaki kod örneğinde, liste artık liste elementleri içermekte ve düzgün biçimlendirilmiş durumdadır.
+
+```html
+
+
+
+
+
+
+
+ 30 Days Of React Challenge
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Liste render etme
+
+
+Yukarıda gördüğünüz gibi, listeler artık düzgün biçimlendirilmiş durumda; ancak konsolda her liste çocuğunun benzersiz bir key'e sahip olması gerektiğini söyleyen bir uyarı var. Dizide id bulunmamaktadır; ancak verilerinizde id mevcutsa benzersiz bir değer olarak id geçirmek yaygın bir pratiktir. Şimdi, uyarıyı kaldırmak için her öğeyi benzersiz bir key ile geçirelim.
+
+```html
+
+
+
+
+
+
+
+ 30 Days Of React Challenge
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+Artık JSX elementlerinin nasıl oluşturulacağını ve JSX'e verinin nasıl enjekte edileceğini çok iyi anlıyorsunuz. Bir sonraki bölümde create-react-app ve bileşenlerin nasıl kullanılacağını konuşacağız. Bileşenler, JSX'ten daha güçlü ve kullanışlıdır.
+
+Harika bir iş çıkardınız. 2. gün meydan okumalarını tamamladınız ve büyüklüğe giden yolda iki adım öndesiniz. Şimdi beyniniz ve kaslarınız için bazı egzersizler yapın.
+
+### Egzersizler
+
+#### Egzersizler: React Nedir?
+
+1. React nedir?
+2. Kütüphane nedir?
+3. Tek sayfalı uygulama nedir?
+4. Bileşen (Component) nedir?
+5. React'ın en son sürümü hangisidir?
+6. DOM nedir?
+7. React Virtual DOM nedir?
+8. Bir web uygulaması veya web sitesi nelerden oluşur?
+
+#### Egzersizler: Neden React?
+
+1. React kullanmayı neden seçtiniz?
+2. Popülerliği ölçmek için hangi ölçütleri kullanıyorsunuz?
+3. React mi daha popüler, Vue mu?
+
+#### Egzersizler: JSX
+
+1. HTML elementi nedir?
+2. Kendi kendini kapatan bir HTML elementi nasıl yazılır?
+3. HTML özniteliği nedir? Birkaçını yazın
+4. JSX nedir?
+5. Babel nedir?
+6. Transpiler nedir?
+
+#### Egzersizler: JSX Elementleri
+
+1. JSX elementi nedir?
+2. Adınızı bir JSX elementine yazın ve name adlı bir değişkende saklayın
+3. Tam adınızı, ülkenizi, unvanınızı, cinsiyetinizi, e-postanızı ve telefon numaranızı görüntüleyen bir JSX elementi oluşturun. Ad için h1, diğer bilgiler için p kullanın ve user adlı bir değişkende saklayın
+4. Footer JSX elementi oluşturun
+
+#### Egzersizler: Satır İçi Stil
+
+1. Main JSX için bir stil nesnesi oluşturun
+2. Footer ve app JSX için bir stil nesnesi oluşturun
+3. JSX elementlerine daha fazla stil ekleyin
+
+#### Egzersizler: Dahili Stiller
+
+1. JSX elementlerinize farklı stiller uygulayın
+
+#### Egzersiz: JSX'e Veri Enjekte Etme
+
+1. JSX elementi oluşturmayı ve dinamik veri (string, sayı, boolean, dizi, nesne) enjekte etmeyi pratik yapın
+
+TEBRIKLER!
+
+[<< Gün 1](../01_Gun_JavaScript_Tazeleyici/01_javascript_tazeleyici.md) | [Gün 3 >>](../03_Gun_Kurulum/03_kurulum.md)
diff --git a/Turkish/03_Gun_Kurulum/03_kurulum.md b/Turkish/03_Gun_Kurulum/03_kurulum.md
new file mode 100644
index 0000000..057ad99
--- /dev/null
+++ b/Turkish/03_Gun_Kurulum/03_kurulum.md
@@ -0,0 +1,771 @@
+
+
+
+[<< Gün 2](../02_Gun_Reacta_Giris/02_reacta_giris.md) | [Gün 4 >>](../04_Gun_Bilesenler/04_bilesenler.md)
+
+
+
+- [Kurulum](#kurulum)
+ - [Node](#node)
+ - [Modül](#modül)
+ - [Paket](#paket)
+ - [Node Paket Yöneticisi (NPM)](#node-paket-yöneticisi-npm)
+ - [Visual Studio Code](#visual-studio-code)
+ - [Tarayıcı](#tarayıcı)
+ - [Visual Studio Eklentileri](#visual-studio-eklentileri)
+ - [React Uygulaması Oluşturma](#react-uygulaması-oluşturma)
+- [İlk React Uygulamanız](#i̇lk-react-uygulamanız)
+ - [React Şablonu](#react-şablonu)
+ - [JSX'te Stil Kullanımı](#jsxte-stil-kullanımı)
+ - [JSX Elemanlarına Veri Enjekte Etme](#jsx-elemanlarına-veri-enjekte-etme)
+ - [React'ta Medya Nesnelerini İçe Aktarma](#reactta-medya-nesnelerini-i̇çe-aktarma)
+- [Egzersizler](#egzersizler)
+ - [Egzersizler: Seviye 1](#egzersizler-seviye-1)
+ - [Egzersizler: Seviye 2](#egzersizler-seviye-2)
+ - [Egzersizler: Seviye 3](#egzersizler-seviye-3)
+
+# Kurulum
+
+Bir önceki bölümde JSX hakkında bilgi edindik ve CDN aracılığıyla React ile ReactDOM paketlerine eriştik. Ancak gerçek projelerde CDN yerine create-react-app paketini kullanarak bir React projesi başlangıç şablonu (boilerplate) oluşturacaksınız. İlk _create-react-app_, 22 Temmuz 2016'da yayımlandı. Bu tarihten önce geliştiriciler, webpack'i bir JavaScript modül paketleyicisi, babel ve diğer gerekli paketlerle elle yapılandırmak zorundaydı; bu işlem yarım saat ya da daha fazla sürebiliyordu. Artık create-react-app her şeyle ilgilenecek ve siz projeleri yapılandırmaya zaman harcamak yerine yalnızca ürünü geliştirmeye odaklanabileceksiniz. Farklı araçları kullanmaya başlamadan önce bu meydan okumada kullanacağımız araçlara kısa bir giriş yapalım. Her şeyi anlamak zorunda değilsiniz, ancak React ile çalışırken kullandığımız bazı araç ve teknolojileri kısaca tanıtmaya çalışacağım.
+
+## Node
+
+Node, JavaScript'in sunucuda çalışmasını sağlayan bir JavaScript çalışma zamanı ortamıdır. Node, 2009 yılında oluşturuldu ve JavaScript'in büyümesinde büyük bir rol oynadı. React uygulamaları varsayılan olarak localhost 3000 portunda başlar. create-react-app, React uygulaması için bir node sunucusu yapılandırmıştır. Bu nedenle node ve node modüllerine ihtiyaç duyarız. create-react-app'i yakında göreceğiz.
+
+Node kurulu değilse kurun. [node.js](https://nodejs.org/en/) adresinden yükleyin.
+
+
+
+İndirdikten sonra çift tıklayarak kurun.
+
+
+
+Node'un yerel makinemizde kurulu olup olmadığını, cihazımızın terminalini veya komut istemcisini açıp aşağıdaki komutu yazarak kontrol edebiliriz:
+
+```sh
+asabeneh $ node -v
+v12.18.0
+```
+
+## Modül
+
+Tek veya birden fazla fonksiyon, gerektiğinde dışa ve içe aktarılarak bir projeye dahil edilebilir.
+React'ta modüllere veya paketlere erişmek için link kullanmayız; bunun yerine modülü içe aktarırız. Bir modülü ya da modülleri nasıl içe ve dışa aktarabileceğimize bakalım:
+
+```js
+// math.js
+export const addTwo = (a, b) => a + b
+export const multiply = (a, b) => a * b
+export const subtract = (a, b) => a - b
+
+export default (function doSomeMath() {
+ return {
+ addTwo,
+ multiply,
+ subtract,
+ }
+})()
+```
+
+Şimdi _math.js_ modüllerini farklı bir dosyaya içe aktaralım:
+
+```js
+// index.js
+// doSomeMath'i math.js dosyasından uzantıyla veya uzantısız içe aktarmak için
+import doSomeMath from './math.js'
+
+// diğer modülleri içe aktarmak için
+// bu modüller varsayılan olarak dışa aktarılmadığından destructuring kullanmamız gerekiyor
+import { addTwo, multiply, subtract } from './math.js'
+
+import * as everything from './math.js' // geri kalan her şeyi içe aktarmak için
+console.log(addTwo(5, 5))
+console.log(doSomeMath.addTwo(5, 5))
+console.log(everything)
+```
+
+Bundan sonra _import React from 'react'_ veya _import ReactDOM from 'react-dom'_ gördüğünüzde şaşırmayacaksınız.
+
+## Paket
+
+Bir paket, tek bir modül ya da modüller topluluğudur. Örneğin React ve ReactDOM birer pakettir.
+
+## Node Paket Yöneticisi (NPM)
+
+NPM, 2010 yılında oluşturuldu. NPM'i ayrıca kurmanıza gerek yoktur; node kurduğunuzda NPM de otomatik olarak yüklenir. NPM, Node.js için varsayılan paket yöneticisidir. Kullanıcıların kayıt defterinde bulunan JavaScript modüllerini tüketmesine ve dağıtmasına olanak tanır. NPM ile paket oluşturabilir, kullanabilir ve dağıtabilirsiniz. NPM de JavaScript'in büyümesinde oldukça büyük bir rol oynadı. Şu anda NPM kayıt defterinde 350.000'den fazla paket bulunmaktadır. NPM kayıt defterinde create-react-app'e bakalım. İndirme sayısı paketin ne kadar popüler olduğunu gösterir.
+
+
+
+## Visual Studio Code
+
+Kod düzenleyici olarak Visual Studio Code kullanacağız. Henüz kurulu değilse [indirin](https://code.visualstudio.com) ve kurun.
+
+## Tarayıcı
+
+Google Chrome kullanacağız.
+
+## Visual Studio Eklentileri
+
+Visual Studio Code'dan şu eklentileri kurmanız gerekebilir:
+
+- Prettier
+- ESLint
+- Bracket Pair Colorizer
+- ES7 React/Redux/GraphQL/React-Native snippets
+
+## React Uygulaması Oluşturma
+
+Bir React projesi oluşturmak için aşağıdaki yollardan birini kullanabilirsiniz. Node'u kurduğunuzu varsayalım. Mac veya Linux'ta komut satırı arayüzünü (CLI), git bash'i ya da terminali açın. Ardından aşağıdaki komutu çalıştırın. Ben git bash kullanıyorum.
+
+```sh
+Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop
+$ npx create-react-app name-of-your-project
+```
+
+Her proje oluştururken npx yazmak istemiyorsanız create-react-app paketini bilgisayarınıza global olarak şu komutla kurabilirsiniz:
+
+```sh
+Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop
+$ npm install -g create-react-app
+```
+
+create-react-app'i kurduktan sonra React uygulamasını şu şekilde oluşturabilirsiniz:
+
+```sh
+Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop
+$ create-react-app name-of-project
+```
+
+# İlk React Uygulamanız
+
+```sh
+Asabeneh@DESKTOP-KGC1AKC MINGW64 ~
+\$ cd Desktop/
+```
+
+```sh
+Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop
+\$ npx create-react-app 30-days-of-react
+```
+
+```sh
+Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop
+\$ cd 30-days-of-react/
+```
+
+```sh
+Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react (master)
+\$ npm start
+```
+
+Artık React uygulamanız localhost 3000'de çalışıyor olmalı. App.js dosyasına gidin ve içeriği bir miktar yazı ekleyerek değiştirin; en son değişiklikleri tarayıcıda göreceksiniz.
+Sunucuyu durdurmak için CLI'da Ctrl + C tuşlarına basın.
+
+
+
+## React Şablonu
+
+create-react-app tarafından oluşturulan React şablonuna bakalım. Yeni bir proje her oluşturduğunuzda create-react-app ve projenin adını çalıştırırsınız.
+
+Aşağıdaki React şablonunda üç klasör bulunur: node_modules, public ve src. Bunların yanı sıra .gitignore, README.md, package.json ve yarn.lock dosyaları da mevcuttur. Bazılarınızda yarn.lock yerine package-lock.json olabilir.
+
+Bu klasörleri ve dosyaları bilmek faydalıdır.
+
+- node_modules - React uygulamasının tüm gerekli node paketlerini saklar.
+
+- Public
+
+ - index.html - uygulamanın tamamında sahip olduğumuz tek HTML dosyası
+
+ - favicon.ico - bir simge dosyası
+ - manifest.json - uygulamayı progressive web uygulaması yapmak için kullanılır
+ - diğer görseller - open graph görselleri (sosyal medyada bir bağlantı paylaşıldığında görünen görseller)
+ - robots.txt - web sitesinin web kazımasına izin verip vermediğine dair bilgi
+
+- src
+
+ - App.css, index.css - farklı CSS dosyaları
+ - index.js - tüm bileşenleri index.html ile bağlamaya yarayan dosya
+ - App.js - genellikle sunum bileşenlerinin çoğunu içe aktardığımız dosya
+ - serviceWorker.js: progressive web uygulama özelliklerini eklemek için kullanılır
+ - setupTests.js - test senaryoları yazmak için
+
+- package.json - Uygulamanın kullandığı paketlerin listesi
+- .gitignore - React şablonu git ile başlatılmış olarak gelir; .gitignore, bazı dosya ve klasörlerin GitHub'a gönderilmesini engeller
+- README.md - Belgeleme yazmak için kullanılan Markdown dosyası
+- yarn.lock veya package-lock.json - paket sürümünü sabitlemek için kullanılan bir araç
+
+
+
+Şimdi şu an ihtiyacımız olmayan tüm dosyaları kaldıralım ve yalnızca ihtiyaç duyduğumuz dosyaları bırakalım.
+
+Dosyaların büyük bölümünü kaldırdıktan sonra şablonun yapısı şöyle görünür:
+
+
+
+Şimdi index.js üzerinde kod yazmaya başlayalım. Her şeyden önce React ve ReactDOM'u içe aktarmamız gerekir. React, JSX yazmamıza; ReactDOM ise JSX'i DOM üzerinde render etmemize olanak tanır. ReactDOM'un bir render metodu vardır. Gün 2'de oluşturduğumuz tüm JSX elemanlarını kullanalım. ReactDOM render metodu iki parametre alır: bir JSX ya da bileşen ve kök eleman.
+
+```js
+//index.js
+// react ve react-dom paketlerini içe aktarma
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const jsxElement =
This is a JSX element
+const rootElement = document.getElementById('root')
+
+ReactDOM.render(jsxElement, rootElement)
+```
+
+```html
+
+
+
+
+
+
+
+
+
+ 30 Days Of React App
+
+
+
+
+
+```
+
+Uygulamanız çalışmıyorsa proje klasörünüze gidin ve aşağıdaki komutu çalıştırın:
+
+```sh
+Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react (master)
+\$ npm start
+```
+
+Herhangi bir hata yoksa React uygulamanız tarayıcıda başlatılacaktır.
+
+
+
+Daha fazla JSX elemanı yazalım ve bunları tarayıcıda render edelim. Bu ifade, h2 HTML elemanından oluşan bir JSX elemanıdır.
+
+```js
+const title =
Getting Started React
+```
+
+Önceki JSX'e daha fazla içerik ekleyelim ve adını header olarak değiştirelim.
+
+```js
+const header = (
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
+)
+```
+
+Bunu tarayıcıda render etmek için ReactDOM'a ihtiyacımız var.
+
+```js
+//index.js
+// react ve react-dom paketlerini içe aktarma
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const header = (
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
Asabeneh Yetayeh
+ Oct 2, 2020
+
+)
+const rootElement = document.getElementById('root')
+
+ReactDOM.render(header, rootElement)
+```
+
+
+
+Şimdi Gün 2'de oluşturduğumuz tüm JSX'i ekleyelim.
+
+```js
+//index.js
+// react ve react-dom paketlerini içe aktarma
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+// JSX element, header
+const header = (
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
Asabeneh Yetayeh
+ Oct 2, 2020
+
+)
+
+// JSX element, main
+const main = (
+
+
Prerequisite to get started react.js:
+
+
HTML
+
CSS
+
JavaScript
+
+
+)
+
+// JSX element, footer
+const footer = (
+
+)
+
+// JSX element, app, a container or a parent
+const app = (
+
+ {header}
+ {main}
+ {footer}
+
+)
+
+const rootElement = document.getElementById('root')
+// JSX elemanını ReactDOM paketi kullanarak render ediyoruz
+// ReactDOM'un render metodu iki argüman alır
+ReactDOM.render(app, rootElement)
+// ya da
+// ReactDOM.render([header, main, footer], rootElement)
+```
+
+
+
+## JSX'te Stil Kullanımı
+
+JSX elemanlarına stil uygulayalım. JSX'i satır içi, dahili veya harici CSS stilleriyle stillendirebiliriz. Şimdi her JSX elemanına satır içi stiller uygulayalım.
+
+```js
+// index.js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const headerStyles = {
+ backgroundColor: '#61DBFB',
+ fontFamily: 'Helvetica Neue',
+ padding: 25,
+ lineHeight: 1.5,
+}
+
+// JSX element, header
+const header = (
+
+
+)
+
+const rootElement = document.getElementById('root')
+// JSX elemanını ReactDOM paketi kullanarak render ediyoruz
+ReactDOM.render(app, rootElement)
+```
+
+
+
+## React'ta Medya Nesnelerini İçe Aktarma
+
+React'ta görseller, video ve ses dosyaları nasıl içe aktarılır? Önce görsellerin nasıl içe aktarıldığına bakalım.
+src klasörü içinde images adında bir klasör oluşturun ve içine bir görsel kaydedin. Örneğin asabeneh.jpg görselini kaydedip index.js dosyasına aktaralım. İçe aktardıktan sonra bunu bir JSX ifadesine, user değişkenine enjekte edeceğiz. Aşağıdaki koda bakın.
+
+```js
+// index.js
+import React from 'react'
+import ReactDOM from 'react-dom'
+import asabenehImage from './images/asabeneh.jpg'
+
+const user = (
+
+
+
+)
+
+const rootElement = document.getElementById('root')
+// JSX elemanını ReactDOM paketi kullanarak render ediyoruz
+ReactDOM.render(user, rootElement)
+```
+
+
+
+user'ı ana JSX elemanının içine enjekte edip sonucu görelim:
+
+```js
+// index.js
+import React from 'react'
+import ReactDOM from 'react-dom'
+// HTML belgesinden kök elemanı almak için
+import asabenehImage from './images/asabeneh.jpg'
+// JSX element, header
+const welcome = 'Welcome to 30 Days Of React'
+const title = 'Getting Started React'
+const subtitle = 'JavaScript Library'
+const author = {
+ firstName: 'Asabeneh',
+ lastName: 'Yetayeh',
+}
+const date = 'Oct 2, 2020'
+
+// JSX element, header
+const header = (
+
+
+)
+
+const rootElement = document.getElementById('root')
+// JSX elemanını ReactDOM paketi kullanarak render ediyoruz
+ReactDOM.render(app, rootElement)
+```
+
+
+
+Şablon kodunu [buradan](../03/../03_Day_Setting_Up/30-days-of-react_boilerplate) bulabilirsiniz.
+
+# Egzersizler
+
+## Egzersizler: Seviye 1
+
+1. Modül nedir?
+2. Paket nedir?
+3. Modül ile paket arasındaki fark nedir?
+4. NPM nedir?
+5. Webpack nedir?
+6. Yeni bir React projesi nasıl oluşturulur?
+7. Bir proje klasörünün içindeki dosya ve klasörler nelerdir (package.json, package-lock.json veya yarn.lock, .gitignore, node_modules ve public)?
+8. En sevdiğiniz kod düzenleyici nedir (Visual Studio Code olduğuna inanıyorum)?
+9. Verimliliğinizi artırmak için farklı Visual Studio Code eklentileri ekleyin (örneğin Prettier, ESLint vb.).
+10. Farklı bir dosyada özel bir modül oluşturmayı ve onu index.js dosyasına aktarmayı deneyin.
+
+## Egzersizler: Seviye 2
+
+1. Aşağıdaki görseli içe aktarın ve render edin.
+ 
+
+2. h1, p, input ve button HTML elemanlarını kullanarak JSX ile aşağıdaki tasarımı oluşturun.
+
+
+
+## Egzersizler: Seviye 3
+
+1. Aşağıdaki kullanıcı kartını tasarlayın.
+
+
+
+🎉 TEBRİKLER! 🎉
+
+[<< Gün 2](../02_Gun_Reacta_Giris/02_reacta_giris.md) | [Gün 4 >>](../04_Gun_Bilesenler/04_bilesenler.md)
diff --git a/Turkish/04_Gun_Bilesenler/04_bilesenler.md b/Turkish/04_Gun_Bilesenler/04_bilesenler.md
new file mode 100644
index 0000000..7021505
--- /dev/null
+++ b/Turkish/04_Gun_Bilesenler/04_bilesenler.md
@@ -0,0 +1,520 @@
+
+
+[<< Gün 3](../03_Gun_Kurulum/03_kurulum.md) | [Gün 5 >>](../05_Gun_Props/05_props.md)
+
+
+
+- [Bileşenler](#bileşenler)
+ - [React'ın Büyük Resmi](#reactın-büyük-resmi)
+ - [JavaScript fonksiyonu](#javascript-fonksiyonu)
+ - [JavaScript Class](#javascript-class)
+ - [React Bileşeni Oluşturma](#react-bileşeni-oluşturma)
+ - [Functional Component](#functional-component)
+ - [Bileşenleri Render Etme](#bileşenleri-render-etme)
+ - [JSX'e Veri Ekleme](#jsxe-veri-ekleme)
+ - [Functional Component'lere Daha Fazla Bakış](#functional-componentlere-daha-fazla-bakış)
+- [Egzersizler: Bileşenler](#egzersizler-bileşenler)
+ - [Egzersizler: Seviye 1](#egzersizler-seviye-1)
+ - [Egzersizler: Seviye 2](#egzersizler-seviye-2)
+ - [Egzersizler: Seviye 3](#egzersizler-seviye-3)
+
+# Bileşenler
+
+Bir React bileşeni, uygulamanın kullanıcı arayüzünün bir bölümünden sorumlu olan küçük ve yeniden kullanılabilir bir koddur. Bir React uygulaması, bileşenlerin bir araya getirilmesiyle oluşur. React, yeniden kullanılabilir bileşenler oluşturmamıza yardımcı olur. Aşağıdaki diyagram farklı bileşenleri göstermektedir. Tüm bileşenlerin farklı renklerde kenarlıkları vardır. React'ta bir uygulama oluşturmak için farklı bileşenleri bir araya getiririz. Bileşenler oluşturmak için JavaScript fonksiyonlarını veya class'larını kullanırız. Bir fonksiyon kullanırsak bileşen Functional Component olur; bir class kullanırsak class tabanlı bileşen olur.
+
+Bileşenler şu şekilde sınıflandırılabilir:
+
+- Functional Component / Presentational Component / Stateless Component / Dumb Component
+- Class Component / Container Component / Statefull Component / Smart Component
+
+Yukarıdaki bileşen sınıflandırması React'ın en son sürümü için geçerli değildir; ancak önceki tanımı ve önceki sürümlerin nasıl çalıştığını bilmek faydalıdır.
+
+O hâlde tüm JSX'leri bileşenlere dönüştürelim. React'taki bileşenler, JSX döndüren JavaScript fonksiyonları veya class'larıdır. Bileşen adı büyük harfle başlamalıdır; ad iki kelimeden oluşuyorsa CamelCase — iki hörgüçlü deve — yazım biçimi kullanılmalıdır.
+
+## React'ın Büyük Resmi
+
+Önceki bölümde bir web sitesinin veya uygulamanın butonlardan, formlardan, metinlerden, medya nesnelerinden, başlık, bölüm, makale ve altbilgiden oluştuğu konusunda hemfikir olduk. Eğer milyon dolarlık bir butonumuz varsa, her ihtiyaç duyduğumuzda sıfırdan oluşturmak yerine bu butonu her zaman kullanabiliriz. Aynı durum giriş alanları, formlar, üstbilgi veya altbilgi için de geçerlidir. İşte bileşenin gücü buradan gelir. Aşağıdaki diyagramda üstbilgi, ana içerik ve altbilgi birer bileşendir. Ana içeriğin içinde ayrıca bir kullanıcı kartı bileşeni ve bir metin bölümü bileşeni bulunmaktadır. Farklı renkler farklı bileşenleri temsil etmektedir. Kaç renk görüyorsunuz? Her renk tek bir bileşeni temsil eder. Bu diyagramda beş bileşen mevcuttur.
+
+
+
+React bileşenlerine geçmeden önce fonksiyonları ve class'ları kısaca hatırlayalım.
+
+## JavaScript fonksiyonu
+
+Bir JavaScript fonksiyonu ya klasik fonksiyon ya da ok fonksiyonu (arrow function) olabilir. Bu iki fonksiyon tam olarak aynı değildir; aralarında küçük farklılıklar bulunur.
+
+```js
+const getUserInfo = (firstName, lastName, country, title, skills) => {
+ return `${firstName} ${lastName}, a ${title} developer based in ${country}. He knows ${skills.join(
+ ' '
+ )} `
+}
+// Bu fonksiyonu çağırırken parametrelere ihtiyacımız var
+const skills = ['HTML', 'CSS', 'JS', 'React']
+console.log(
+ getUserInfo('Asabeneh', 'Yetayeh', 'Finland', 'FullStack Developer', skills)
+)
+```
+
+## JavaScript Class
+
+Bir class, bir nesnenin taslağıdır. Farklı nesneler oluşturmak için bir class'ı örnekleriz (instantiate). Bunun yanı sıra, üst sınıfın tüm metotlarını ve özelliklerini miras alarak alt sınıflar oluşturabiliriz.
+
+```js
+class Parent {
+ constructor(firstName, lastName, country, title) {
+ // this anahtar kelimesiyle parametreleri bu class nesnesine bağlıyoruz
+ this.firstName = firstName
+ this.lastName = lastName
+ this.country = country
+ this.title = title
+ }
+ getPersonInfo() {
+ return `${this.firstName} ${this.lastName}, a ${this.title} developer base in ${this.country} `
+ }
+ parentMethod() {
+ // kod buraya gelir
+ }
+}
+
+const p1 = new Parent('Asabeneh', 'Yetayeh', 'Finland', 'FullStack Developer')
+
+class Child extends Parent {
+ constructor(firstName, lastName, country, title, skills) {
+ super(firstName, lastName, country, title)
+ this.skills = skills
+ // alt sınıf parametrelerini this anahtar kelimesiyle bu alt sınıf nesnesine bağlıyoruz
+ }
+ getSkills() {
+ let len = this.skills.length
+ return len > 0 ? this.skills.join(' ') : 'No skills found'
+ }
+ childMethod() {
+ // kod buraya gelir
+ }
+}
+
+const skills = ['HTML', 'CSS', 'JS', 'React']
+
+const child = new Child(
+ 'Asabeneh',
+ 'Yetayeh',
+ 'Finland',
+ 'FullStack Developer',
+ skills
+)
+```
+
+Fonksiyonu ve class'ı kısaca ele aldık. React bileşeni JavaScript fonksiyonlarından veya class'larından oluşur; o hâlde şimdi bir React bileşeni yapalım.
+
+## React Bileşeni Oluşturma
+
+### Functional Component
+
+Bir JavaScript fonksiyonu kullanarak işlevsel (functional) bir React bileşeni oluşturabiliriz.
+
+```js
+// React bileşen sözdizimi
+// ok fonksiyonu, fonksiyon bildirimi veya fonksiyon ifadesi olabilir
+const jsx = Content
+const ComponentName = () => {
+ return jsx
+}
+```
+
+Aşağıdaki ifade bir JSX elementidir.
+
+```js
+// JSX elementi, header
+const header = (
+
+
+
+ )
+}
+
+// Yukarıdaki kod şu şekilde de yazılabilir
+// JSX açıkça döndürülüyor
+const Header = () => (
+
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
Asabeneh Yetayeh
+ Oct 3, 2020
+
+
+)
+```
+
+### Bileşenleri Render Etme
+
+Şimdi sahip olduğumuz tüm JSX elementlerini bileşenlere dönüştürelim. Bir JSX elementi çağırırken süslü parantez kullanırız; bileşen çağırırken ise şu şekilde yaparız: ``. Bileşen adını çağırırken bir özellik (attribute) geçirirsek buna props diyoruz (``). Props konusunu başka bir bölümde ele alacağız. [Code pen'de Canlı İzle](https://codepen.io/Asabeneh/full/wvaKKEM)
+
+Önce _Header_ bileşenini render edelim.
+
+```js
+// index.js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+// Header Component
+const Header = () => (
+
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
Asabeneh Yetayeh
+ Oct 3, 2020
+
+
+)
+
+const rootElement = document.getElementById('root')
+// JSX elementini ReactDOM paketiyle render ediyoruz
+ReactDOM.render(, rootElement)
+```
+
+Şimdi Header, Main ve Footer bileşenlerini sarmalayacak bir App bileşeni oluşturalım. Ardından App bileşeni DOM'a render edilecek.
+
+```js
+// index.js
+import React from 'react'
+import ReactDOM from 'react-dom'
+import asabenehImage from './images/asabeneh.jpg'
+
+// Header Component
+const Header = () => (
+
+
)
+ return techsFormatted
+}
+
+// Main Component
+const Main = () => (
+
+
+
Prerequisite to get started react.js:
+
+
+
+
+
+
+)
+
+// Footer Component
+const Footer = () => (
+
+)
+
+// App, yani üst veya kapsayıcı bileşen
+const App = () => (
+
+
+
+
+
+)
+
+const rootElement = document.getElementById('root')
+// App bileşenini ReactDOM paketiyle render ediyoruz
+ReactDOM.render(, rootElement)
+```
+
+
+
+### JSX'e Veri Ekleme
+
+Şimdiye kadar JSX elementlerinde statik veri kullandık. Şimdi farklı veri tiplerini dinamik veri olarak geçirelim. Dinamik veri; string, sayı, boolean, dizi veya nesne olabilir. Her veri tipini adım adım inceleyelim. JSX'e veri eklemek için `{}` parantezini kullanırız.
+
+Bu bölümde yalnızca string ekliyoruz.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+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 3, 2020'
+
+// JSX elementi, header
+const header = () => {
+ return (
+
+
+
{welcome}
+
{title}
+
{subtitle}
+
+ Instructor: {firstName} {lastName}
+
+ Date: {date}
+
+
+ )
+}
+const rootElement = document.getElementById('root')
+// App bileşenini ReactDOM paketiyle render ediyoruz
+ReactDOM.render(, rootElement)
+```
+
+Header bileşenine benzer şekilde Main ve Footer bileşenlerine de uygulayabiliriz.
+
+```js
+// HTML belgesinden kök elementi alıyoruz
+const rootElement = document.querySelector('.root')
+// JSX elementi, header
+const welcome = 'Welcome to 30 Days Of React Challenge'
+const title = 'Getting Started React'
+const subtitle = 'JavaScript Library'
+const author = {
+ firstName: 'Asabeneh',
+ lastName: 'Yetayeh',
+}
+const date = 'Oct 2, 2020'
+
+// JSX elementi, header
+const Header = () => (
+
+
+)
+
+// App bileşenini ReactDOM paketiyle render ediyoruz
+ReactDOM.render(, rootElement)
+```
+
+### Functional Component'lere Daha Fazla Bakış
+
+2. Gün'deki tüm JSX elementlerini Functional Component'lere dönüştürdük; artık bileşenlere oldukça aşinasınız. Daha fazla bileşen oluşturalım. Bir bileşenin en küçük boyutu nedir? Yalnızca tek bir HTML öğesi döndüren JSX, küçük bileşen olarak kabul edilir. Örneğin bir buton bileşeni, bir uyarı kutusu bileşeni ya da yalnızca bir giriş alanı bileşeni.
+
+```js
+const Button = () =>
+```
+
+_Button_ bileşeni tek bir HTML buton öğesinden oluşmaktadır.
+Bu butonu JavaScript stil nesnesi kullanarak biçimlendirelim. Bir JavaScript CSS nesnesi oluşturmak için tüm CSS özellikleri camelCase biçiminde yazılmalıdır. Birim belirtilmeden sayı geçirilirse bu değer px olarak kabul edilir. Aşağıdaki örneğe bakın.
+
+```js
+const buttonStyles = {
+ padding: '10px 20px',
+ background: 'rgb(0, 255, 0',
+ border: 'none',
+ borderRadius: 5,
+}
+const Button = () =>
+```
+
+Button bileşeni hiçbir parametre almadığı ve aksiyon metnini dinamik olarak değiştiremediğimiz için aptal bir bileşendir (dumb component). Değerin dinamik olarak değişebilmesi için butona props geçmemiz gerekir. Props konusunu bir sonraki bölümde inceleyeceğiz. Bugünkü dersi kapatmadan önce rastgele bir onaltılık (hexadecimal) renk sayısı görüntüleyen daha işlevsel bir bileşen daha yapalım.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+// Onaltılık renk üreteci
+const hexaColor = () => {
+ let str = '0123456789abcdef'
+ let color = ''
+ for (let i = 0; i < 6; i++) {
+ let index = Math.floor(Math.random() * str.length)
+ color += str[index]
+ }
+ return '#' + color
+}
+
+const HexaColor = () =>
{hexaColor()}
+
+const rootElement = document.getElementById('root')
+// App bileşenini ReactDOM paketiyle render ediyoruz
+ReactDOM.render(, rootElement)
+```
+
+# Egzersizler: Bileşenler
+
+## Egzersizler: Seviye 1
+
+1. Klasik fonksiyon ile ok fonksiyonu arasındaki fark nedir?
+2. React Bileşeni nedir?
+3. React Functional Component nasıl oluşturulur?
+4. Saf bir JavaScript fonksiyonu ile Functional Component arasındaki fark nedir?
+5. Bir React bileşeni en küçük boyutuyla ne kadardır?
+6. Bir buton veya giriş alanı bileşeni oluşturabilir miyiz?
+7. Yeniden kullanılabilir bir Button bileşeni oluşturun.
+8. Yeniden kullanılabilir bir InputField bileşeni oluşturun.
+9. Bir üst div elementi ve bir alt p elementi içeren yeniden kullanılabilir bir uyarı kutusu bileşeni oluşturun (uyarı kutusu, başarı kutusu).
+
+## Egzersizler: Seviye 2
+
+1. Functional Component oluşturun ve aşağıdaki görselleri görüntüleyin.
+ 
+
+2. Aşağıdaki tasarımı oluşturmak için Functional Component kullanın.
+
+
+
+## Egzersizler: Seviye 3
+
+1. Örnekte verilen onaltılık renk üretecini kullanarak aşağıdaki rastgele renkleri oluşturun.
+
+
+
+2. Aşağıdaki kullanıcı kartını tasarlamak için Functional Component kullanın.
+
+ 
+
+🎉 TEBRİKLER ! 🎉
+
+[<< Gün 3](../03_Gun_Kurulum/03_kurulum.md) | [Gün 5 >>](../05_Gun_Props/05_props.md)
diff --git a/Turkish/05_Gun_Props/05_props.md b/Turkish/05_Gun_Props/05_props.md
new file mode 100644
index 0000000..a58608e
--- /dev/null
+++ b/Turkish/05_Gun_Props/05_props.md
@@ -0,0 +1,1099 @@
+
+
+[<< Gün 4](../04_Gun_Bilesenler/04_bilesenler.md) | [Gün 6 >>](../../06_Day_Map_List_Keys/06_map_list_keys.md)
+
+
+
+- [Props](#props)
+ - [Fonksiyonel Component'te Props](#fonksiyonel-componentte-props)
+ - [Props Nedir?](#props-nedir)
+ - [Props Nesnesi](#props-nesnesi)
+ - [Farklı Veri Türü Props'ları](#farklı-veri-türü-propsları)
+ - [String Props Türü](#string-props-türü)
+ - [Number Props Türü](#number-props-türü)
+ - [Boolean Props Türü](#boolean-props-türü)
+ - [Array Props Türü](#array-props-türü)
+ - [Object Props Türü](#object-props-türü)
+ - [Function Props Türü](#function-props-türü)
+ - [Props'u Parçalama](#propsu-parçalama)
+ - [propTypes](#proptypes)
+ - [defaultProps](#defaultprops)
+- [Egzersizler: Component'ler ve Props](#egzersizler-componentler-ve-props)
+ - [Egzersizler: Seviye 1](#egzersizler-seviye-1)
+ - [Egzersizler: Seviye 2](#egzersizler-seviye-2)
+ - [Egzersizler: Seviye 3](#egzersizler-seviye-3)
+
+# Props
+
+## Fonksiyonel Component'te Props
+
+Bir önceki günde, React component JSX'ine farklı veri türlerinin nasıl enjekte edileceğini gördük. Şimdi bunu component içinde nasıl kullandığımızı ve farklı verileri props olarak nasıl geçirdiğimizi inceleyelim.
+
+## Props Nedir?
+
+Props, React'te "properties" (özellikler) sözcüğünün kısaltmasıdır ve verileri bir component'ten diğerine, çoğunlukla üst (parent) component'ten alt (child) component'e aktarmak için kullanılır. Props'u bir veri taşıyıcısı ya da veri iletim aracı olarak düşünebiliriz.
+
+JavaScript fonksiyonlarına aşina olduğunuzu umuyorum. Parametreli fonksiyonlar dinamik veri alabildiği gibi, props da bir component'e veri ya da parametre geçirmenin yoludur. Bir fonksiyon ile bir component arasındaki farkı şöyle görebiliriz:
+
+```js
+// fonksiyon sözdizimi
+
+const getUserInfo = (firstName, lastName, country) => {
+ return `${firstName} ${lastName}. Lives in ${country}.`
+}
+
+// fonksiyonları çağırma
+
+getUserInfo('Asabeneh', 'Yeteyeh', 'Finland')
+
+//component syntax
+
+// User bileşeni, bileşen adları büyük harfle başlamalıdır
+const User = (props) => {
+ return (
+
+
+ {props.firstName}
+ {props.lastName}
+
+ {props.country}
+
+ )
+}
+// bileşeni çağırma, bu bileşenin üç özelliği var ve bunları props olarak adlandırıyoruz: firstName, lastName, country
+
+```
+
+Bir önceki bölümde verileri şu şekilde enjekte etmiştik; bugün bu verileri props'a dönüştüreceğiz.
+
+```js
+const welcome = 'Welcome to 30 Days Of React'
+const title = 'Getting Started React'
+const subtitle = 'JavaScript Library'
+const author = {
+ firstName: 'Asabeneh',
+ lastName: 'Yetayeh',
+}
+const date = 'Oct 4, 2020'
+
+// Header Bileşeni
+const Header = () => (
+
+
+
{welcome}
+
{title}
+
{subtitle}
+
+ {author.firstName} {author.lastName}
+
+ {date}
+
+
+)
+```
+
+Veri enjekte etmek yerine verileri props olarak da geçirebiliriz. React props'ları, fonksiyonlardaki parametrelere benzer.
+
+## Props Nesnesi
+
+React props'ı, bir React component'i oluşturduğunuzda anında elde ettiğiniz bir nesnedir. Component'e özellik geçirmeden önce props nesnesinde ne elde ettiğimize bakalım.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+// Header Bileşeni
+const Header = (props) => {
+ console.log(props) // boş nesne, {}
+ return (
+
+
+ )
+}
+
+const rootElement = document.getElementById('root')
+
+ReactDOM.render(, rootElement)
+```
+
+Yukarıdaki console.log(props) ifadesinde boş bir nesne ({}) görürsünüz. Bu şu anlama gelir: component'i oluştururken herhangi bir özellik ya da nitelik geçirmezseniz props boş olacaktır; geçirirseniz, geçirdiğiniz verilerle doldurulacak ve bu niteliklerin doğru adı props olacaktır.
+
+Basit bir örnekle başlayalım. Aşağıdaki örnekte, Header component'ine props olarak welcome dizesi geçirilmiştir.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+// Header Bileşeni
+const Header = (props) => {
+ console.log(props) // {welcome:'Welcome to 30 Days Of React'}
+ return (
+
+
+ )
+}
+
+const rootElement = document.getElementById('root')
+
+ReactDOM.render(, rootElement)
+```
+
+Artık console.log(props) yaptığınızda şu nesneyi görmelisiniz; bu, Header component'ine geçirdiğimiz welcome özelliğinin props nesnesinin içinde bulunduğu anlamına gelir.
+
+```js
+{
+ welcome: 'Welcome to 30 Days Of React'
+}
+```
+
+Yukarıdaki koddan görüleceği üzere Header component'ine yalnızca tek bir props geçirdik: welcome props'u. Bir component'in bir ya da birden fazla props'u olabilir. Props farklı veri türlerinde olabilir: string, number, boolean, array, object veya function. Sonraki bölümlerde farklı props türlerini ele alacağız.
+
+### Farklı Veri Türü Props'ları
+
+### String Props Türü
+
+Component'e nitelik olarak geçirilen props'ın veri türü string'dir.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+// Header Bileşeni
+const Header = (props) => {
+ console.log(props)
+ return (
+
+
+)
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+Tarayıcı konsolunu kontrol ederseniz şu nesneyi görürsünüz:
+
+```js
+{
+firstName: "Asabeneh",
+lastName: "Yetayeh",
+date: "Oct 4, 2020"
+subtitle: "JavaScript Library"
+title: "Getting Started React"
+welcome: "Welcome to 30 Days Of React"
+}
+```
+
+Artık bir JavaScript ustası olduğunuza göre bu nesneyle ne yapacağınızı biliyorsunuz.
+
+Yukarıdaki örnekte görüldüğü gibi props değerleri statik olarak yazılmıştır. Ancak bir mantık uygulamak istediğimizde statik verilerle bunu yapmak güçleşir; bu nedenle değişkenleri props olarak kullanmak daha iyi olacaktır. Şu örneğe bakalım:
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+// Header Bileşeni
+const Header = (props) => (
+
+
+
{props.welcome}
+
{props.title}
+
{props.subtitle}
+
+ {props.firstName} {props.lastName}
+
+ {props.date}
+
+
+)
+
+// App, üst veya kapsayıcı bileşen
+// Fonksiyonel Bileşen
+const App = () => {
+ 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 4, 2020'
+
+ return (
+
+
+
+ )
+}
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+### Number Props Türü
+
+Bir component'e sayısal props kullanalım.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const Age = (props) =>
The person is {props.age} years old.
+const Weight = (props) => (
+
The weight of the object on earth is {props.weight} N.
+)
+
+// App, üst veya kapsayıcı bileşen
+// Fonksiyonel Bileşen
+const App = () => {
+ let currentYear = 2020
+ let birthYear = 1820
+ const age = currentYear - birthYear
+ const gravity = 9.81
+ const mass = 75
+
+ return (
+
+
+
+
+ )
+}
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+### Boolean Props Türü
+
+Bir React component'ine boolean veri türü geçirebiliriz.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const Status = (props) => {
+ // kişinin durumunu kontrol etmek için üçlü operatör
+ let status = props.status ? 'Old enough to drive' : 'Too young for driving'
+ return
{status}
+}
+
+// App, üst veya kapsayıcı bileşen
+// Fonksiyonel Bileşen
+const App = () => {
+ let currentYear = 2020
+ let birthYear = 2015
+ const age = currentYear - birthYear // 15 yıl
+
+ let status = age >= 18
+
+ return (
+
+
+
+ )
+}
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+### Array Props Türü
+
+Programlamada diziler ve nesneler, farklı problemleri çözmek ve verileri daha yapılandırılmış biçimde depolamak için en sık kullanılan veri yapılarıdır. Bu nedenle verilerle dizi biçiminde sıklıkla karşılaşırız. Bir component'e dizi geçirelim.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const Skills = (props) =>
{props.skills}
+
+const App = () => (
+
+
+
+)
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+Tarayıcıdaki sonuca bakarsanız skills öğelerinin biçimlendirilmesi gerektiğini görürsünüz. Bu nedenle render etmeden önce her bir beceri arasına bir eleman eklememiz gerekir. Diziyi değiştirmek ve li öğesi eklemek için map metodunu kullanabiliriz. React'te rahat hissetmek için map, filter ve reduce gibi fonksiyonel programlama yöntemlerine hakim olmanız gerekir; değilseniz 1. Gün JavaScript tazeleyicisine geri dönün. Şimdi diziyi değiştirmek için map'i uygulayalım:
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+// Skills Bileşeni
+const Skills = (props) => {
+ // skills dizisini değiştirme
+ const skillList = props.skills.map((skill) =>
{skill}
)
+ return
{skillList}
+}
+
+const App = () => (
+
+
+
+)
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+Liste ve map konusuna ilerleyen bölümlerde ayrıntılı değineceğiz. Şimdi nesneyi props olarak nasıl kullanacağımıza bakalım.
+
+### Object Props Türü
+
+Bir React component'ine nesne olarak props geçirebiliriz. Bir örnek görelim.
+Önceki Header props'larını nesneye çevirebiliriz. Daha iyi anlamak için birkaç özelliği değiştirelim.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+// Header Bileşeni
+const Header = (props) => {
+ return (
+
+
+
{props.data.welcome}
+
{props.data.title}
+
{props.data.subtitle}
+
+
+ )
+}
+
+// App, üst veya kapsayıcı bileşen
+// Fonksiyonel Bileşen
+const App = () => {
+ const data = {
+ welcome: 'Welcome to 30 Days Of React',
+ title: 'Getting Started React',
+ subtitle: 'JavaScript Library',
+ }
+
+ return (
+
+
+
+ 
+
+
+Yazar:
+Asabeneh Yetayeh
+