-)
+);
// 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',
+ welcome: "Welcome to 30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
author: {
- firstName: 'Asabeneh',
- lastName: 'Yetayeh',
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
},
date: new Date(), // tarih, okunabilir bir formata dönüştürülmelidir
- }
- const date = new Date()
- const techs = ['HTML', 'CSS', 'JavaScript']
+ };
+ const date = new Date();
+ const techs = ["HTML", "CSS", "JavaScript"];
// spread operatörü kullanarak data nesnesindeki author'ı user değişkenine kopyalama
- const user = { ...data.author, image: asabenehImage }
+ const user = { ...data.author, image: asabenehImage };
const handleTime = () => {
- alert(showDate(new Date()))
- }
+ alert(showDate(new Date()));
+ };
const greetPeople = () => {
- alert('Welcome to 30 Days Of React Challenge, 2020')
- }
+ alert("Welcome to 30 Days Of React Challenge, 2020");
+ };
return (
-
+
{
/>
- )
-}
-const rootElement = document.getElementById('root')
-ReactDOM.render(
, rootElement)
+ );
+};
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
```
## propTypes
@@ -1096,4 +1096,4 @@ propTypes konusunu ilerleyen bölümlerde ayrıntılı olarak ele alacağız.
🎉 TEBRİKLER! 🎉
-[<< Gün 4](../04_Gun_Bilesenler/04_bilesenler.md) | [Gün 6 >>](../../06_Day_Map_List_Keys/06_map_list_keys.md)
+[<< Gün 4](../04_Gun_Bilesenler/04_bilesenler.md) | [Gün 6 >>](../06_Gun_Dizi_Haritalama/06_dizi_haritalama.md)
diff --git a/Turkish/06_Gun_Dizi_Haritalama/06_dizi_haritalama.md b/Turkish/06_Gun_Dizi_Haritalama/06_dizi_haritalama.md
new file mode 100644
index 0000000..535f7ce
--- /dev/null
+++ b/Turkish/06_Gun_Dizi_Haritalama/06_dizi_haritalama.md
@@ -0,0 +1,288 @@
+
+
30 Days Of React: Dizileri Haritalama (Mapping Arrays)
+
+
+
+
Yazar:
+Asabeneh Yetayeh Ekim, 2020
+
+
+
+
+[<< Gün 5](../05_Gun_Props/05_props.md) | [Gün 7 >>](../07_Gun_Class_Bilesenler/07_class_bilesenler.md)
+
+
+
+- [Dizileri Haritalama (Mapping Arrays)](#dizileri-haritalama-mapping-arrays)
+ - [Dizi haritalama ve render etme](#dizi-haritalama-ve-render-etme)
+ - [Sayı dizisini haritalama](#sayı-dizisini-haritalama)
+ - [Dizi içinde diziyi haritalama](#dizi-içinde-diziyi-haritalama)
+ - [Nesne dizisini haritalama](#nesne-dizisini-haritalama)
+ - [Dizi haritalamada key (anahtar)](#dizi-haritalamada-key-anahtar)
+- [Egzersizler](#egzersizler)
+ - [Egzersizler: Seviye 1](#egzersizler-seviye-1)
+ - [Egzersizler: Seviye 2](#egzersizler-seviye-2)
+ - [Egzersizler: Seviye 3](#egzersizler-seviye-3)
+
+# Dizileri Haritalama (Mapping Arrays)
+
+Dizi, birçok farklı problemi çözmek için en sık kullanılan veri yapısıdır. React'ta, bir dizideki her elemana belirli HTML element'leri ekleyerek bu diziyi JSX listesine dönüştürmek için map kullanırız.
+
+## Dizi haritalama ve render etme
+
+Çoğu zaman veriler bir dizi veya nesne dizisi şeklinde gelir. Bu dizi ya da nesne dizisini render etmek için çoğu zaman _map_ kullanarak veriyi değiştiririz. Önceki bölümde, techs listesini bir map metodu kullanarak render etmiştik. Bu bölümde daha fazla örnek göreceğiz.
+
+Aşağıdaki örneklerde, tarayıcıda sayı dizisi, string dizisi, ülkeler dizisi ve beceriler dizisini nasıl render edeceğimizi göreceksiniz.
+
+```js
+import React from "react";
+import ReactDOM from "react-dom";
+const App = () => {
+ return (
+
+
+
Numbers List
+ {[1, 2, 3, 4, 5]}
+
+
+ );
+};
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Tarayıcıyı kontrol ederseniz, sayıların tek bir satırda birbirine yapışık göründüğünü görürsünüz. Bunu önlemek için diziyi değiştiririz ve dizi elemanlarını JSX elementine çeviririz. Aşağıdaki örnekte, dizi bir JSX elemanları listesine dönüştürülmüştür.
+
+### Sayı dizisini haritalama
+
+```js
+import React from "react";
+import ReactDOM from "react-dom";
+
+const Numbers = ({ numbers }) => {
+ // diziyi li JSX dizisine dönüştürme
+ const list = numbers.map((number) =>
{number} );
+ return list;
+};
+
+// App component (Bileşeni)
+
+const App = () => {
+ const numbers = [1, 2, 3, 4, 5];
+
+ return (
+
+ );
+};
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+### Dizi içinde diziyi haritalama
+
+Dizi içinde dizi nasıl haritalanır görelim:
+
+```js
+import React from "react";
+import ReactDOM from "react-dom";
+
+const skills = [
+ ["HTML", 10],
+ ["CSS", 7],
+ ["JavaScript", 9],
+ ["React", 8],
+];
+
+// Skill Component (Bileşeni)
+const Skill = ({ skill: [tech, level] }) => (
+
+ {tech} {level}
+
+);
+
+// Skills Component (Bileşeni)
+const Skills = ({ skills }) => {
+ const skillsList = skills.map((skill) =>
);
+ console.log(skillsList);
+ return
;
+};
+
+const App = () => {
+ return (
+
+ );
+};
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+### Nesne dizisini haritalama
+
+Nesne dizisini render etme:
+
+```js
+import React from "react";
+import ReactDOM from "react-dom";
+
+const countries = [
+ { name: "Finland", city: "Helsinki" },
+ { name: "Sweden", city: "Stockholm" },
+ { name: "Denmark", city: "Copenhagen" },
+ { name: "Norway", city: "Oslo" },
+ { name: "Iceland", city: "Reykjavík" },
+];
+
+// Country component (Bileşeni)
+const Country = ({ country: { name, city } }) => {
+ return (
+
+
{name}
+ {city}
+
+ );
+};
+
+// Countries component (Bileşeni)
+const Countries = ({ countries }) => {
+ const countryList = countries.map((country) =>
);
+ return
{countryList}
;
+};
+// App component (Bileşeni)
+const App = () => (
+
+);
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+### Dizi haritalamada key (anahtar)
+
+Key'ler (Anahtarlar), React'ın hangi elemanların değiştiğini, eklendiğini veya kaldırıldığını tanımlamasına yardımcı olur. Dizi içindeki elemanlara, o elemanlara kararlı bir kimlik kazandırmak için key verilmelidir. Key benzersiz olmalıdır. Çoğu zaman veriler bir id ile birlikte gelir ve bu id'yi key olarak kullanabiliriz. React'a haritalama sırasında key geçirmezsek tarayıcıda bir uyarı üretilir. Verinin id'si yoksa, haritalama sırasında her eleman için benzersiz bir tanımlayıcı oluşturmanın bir yolunu bulmamız gerekir. Aşağıdaki örneğe bakın:
+
+```js
+import React from "react";
+import ReactDOM from "react-dom";
+
+const Numbers = ({ numbers }) => {
+ // diziyi li JSX dizisine dönüştürme
+ const list = numbers.map((num) =>
{num} );
+ return list;
+};
+
+const App = () => {
+ const numbers = [1, 2, 3, 4, 5];
+
+ return (
+
+ );
+};
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Şimdi ülkeler haritalama örneğine de key ekleyelim:
+
+```js
+import React from "react";
+import ReactDOM from "react-dom";
+
+const countries = [
+ { name: "Finland", city: "Helsinki" },
+ { name: "Sweden", city: "Stockholm" },
+ { name: "Denmark", city: "Copenhagen" },
+ { name: "Norway", city: "Oslo" },
+ { name: "Iceland", city: "Reykjavík" },
+];
+
+// Country component (Bileşeni)
+const Country = ({ country: { name, city } }) => {
+ return (
+
+
{name}
+ {city}
+
+ );
+};
+
+// Countries component (Bileşeni)
+const Countries = ({ countries }) => {
+ const countryList = countries.map((country) => (
+
+ ));
+ return
{countryList}
;
+};
+const App = () => (
+
+);
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+# Egzersizler
+
+## Egzersizler: Seviye 1
+
+1. Neden bir diziyi haritalamamız gerekir?
+2. Dizi haritalamada neden key'lere (anahtarlara) ihtiyaç duyarız?
+3. Kodunuzu destructuring (parçalama) etmenin önemi nedir?
+4. Destructuring (Parçalama) kodunuzu daha temiz ve okunması daha kolay hale getirir mi?
+
+## Egzersizler: Seviye 2
+
+1. Aşağıdaki tasarımda çift sayılar yeşil, tek sayılar sarı ve asal sayılar kırmızıdır. Bu renkleri React Component (Bileşen) kullanarak oluşturun.
+
+
+
+2. Aşağıdaki onaltılık (hexadecimal) renkleri React Component (Bileşen) kullanarak oluşturun.
+
+
+
+## Egzersizler: Seviye 3
+
+1. Verilen [veriyi](../06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/data/ten_most_highest_populations.js) kullanarak aşağıdaki çubuk grafiğini oluşturun.
+
+
+
+🎉 TEBRİKLER! 🎉
+
+[<< Gün 5](../05_Gun_Props/05_props.md) | [Gün 7 >>](../07_Gun_Class_Bilesenler/07_class_bilesenler.md)
diff --git a/Turkish/07_Gun_Class_Bilesenler/07_class_bilesenler.md b/Turkish/07_Gun_Class_Bilesenler/07_class_bilesenler.md
new file mode 100644
index 0000000..a6bd23d
--- /dev/null
+++ b/Turkish/07_Gun_Class_Bilesenler/07_class_bilesenler.md
@@ -0,0 +1,844 @@
+
+
30 Days Of React: Class Component (Sınıf Tabanlı Bileşenler)
+
+
+
+
Yazar:
+Asabeneh Yetayeh Ekim, 2020
+
+
+
+
+[<< Gün 6](../06_Gun_Dizi_Haritalama/06_dizi_haritalama.md) | [Gün 8 >>](../08_Gun_State/08_state.md)
+
+
+
+- [Class Component (Sınıf Tabanlı Bileşenler)](#class-component-sınıf-tabanlı-bileşenler)
+ - [Class Component'ta Props'a Erişim](#class-componentta-propsa-erişim)
+ - [Class Tabanlı Component'ta Metotlar](#class-tabanlı-componentta-metotlar)
+- [Egzersizler](#egzersizler)
+ - [Egzersizler: Seviye 1](#egzersizler-seviye-1)
+ - [Egzersizler: Seviye 2](#egzersizler-seviye-2)
+ - [Egzersizler: Seviye 3](#egzersizler-seviye-3)
+
+# Class Component (Sınıf Tabanlı Bileşenler)
+
+Önceki bölümlerde JSX, Functional Component (Fonksiyonel Bileşen) ve Props (Özellikler) konularını ele aldık. Bu bölümde Class Component (Sınıf Tabanlı Bileşenler) veya stateful component (durumlu bileşen) konusunu ele alacağız. Yalnızca class tabanlı component'lerin state (durum) ve yaşam döngüsü metotları vardı. Ancak React 16.8.0 sürümünden sonra fonksiyonel component'ler de React Hook'ları (Kancalar) kullanarak state ve yaşam döngüsüne sahip olabilmektedir. 30 Days Of React meydan okumasında, hem eski hem yeni sürümü anlamak amacıyla React'ı 16.8.0 öncesi ve sonrasını kapsayacak şekilde ele alacağız. Eski sürümde yazılmış çok sayıda kod var ve bu kodlar belirli bir noktada taşınmayı gerektirebilir. Bunun yanı sıra, React'ı gerçekten iyi anlamak için class tabanlı component'leri de anlamak gerekmektedir.
+
+Şimdiye kadar gördüğümüz tüm component'ler fonksiyonel component'tir. Şimdi class tabanlı component de oluşturalım. Class tabanlı component, JavaScript class'ı kullanılarak yapılır ve React Component'tan kalıtım alır. Daha önce oluşturduğumuz tüm fonksiyonel component'leri dönüştürerek class tabanlı component'in nasıl yapıldığını öğrenelim. Tümünü dönüştürmek zorunlu değildir; ancak fonksiyonel component'lerin class component'e nasıl dönüştürüldüğünü öğrenmek amacıyla bunu yapıyoruz.
+
+```js
+// Saf JavaScript class'ı ve child (çocuk) class
+// React paketinden import ettiğimizi hayal edin
+class Component {
+ constructor(props) {}
+}
+
+// Class tabanlı component'leri bu şekilde üst class'tan kalıtarak yaparız
+class Child extends Component {
+ constructor(props) {
+ super(props);
+ }
+}
+```
+
+Fonksiyonel React Component (Bileşeni):
+
+```js
+// index.js
+
+import React from "react";
+import ReactDOM from "react-dom";
+// Header Component (Bileşeni)
+// Fonksiyonel component
+const Header = () => (
+
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
Asabeneh Yetayeh
+
Oct 6, 2020
+
+);
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Class tabanlı React Component (Bileşeni), React.Component'in bir child'ıdır (çocuğudur); yerleşik bir render metoduna sahiptir ve constructor içerebilir.
+
+```js
+//index.js
+
+import React from "react";
+import ReactDOM from "react-dom";
+
+// class tabanlı component
+class Header extends React.Component {
+ render() {
+ return (
+
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
Asabeneh Yetayeh
+
Oct 7, 2020
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Yukarıdaki component'i constructor ile görelim:
+
+```js
+//index.js
+
+import React from "react";
+import ReactDOM from "react-dom";
+
+// class tabanlı component
+class Header extends React.Component {
+ constructor(props) {
+ super(props);
+ // constructor içindeki kod diğer tüm kodlardan önce çalışır
+ }
+ render() {
+ return (
+
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
Asabeneh Yetayeh
+
Oct 7, 2020
+
+ );
+ }
+}
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Tüm fonksiyonel component'leri class tabanlı component'e dönüştürelim:
+
+```js
+// TechList Component (Bileşeni)
+// fonksiyonel component
+const TechList = () => {
+ const techs = ["HTML", "CSS", "JavaScript"];
+ const techsFormatted = techs.map((tech) =>
{tech} );
+ return techsFormatted;
+};
+
+// TechList Component (Bileşeni)
+// class tabanlı component
+class TechList extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ const techs = ["HTML", "CSS", "JavaScript"];
+ const techsFormatted = techs.map((tech) =>
{tech} );
+ return techsFormatted;
+ }
+}
+
+// Main Component (Bileşeni)
+// Fonksiyonel Component
+const Main = () => (
+
+
+
Prerequisite to get started react.js:
+
+
+);
+
+// Main Component (Bileşeni)
+// Class Component
+class Main extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+
+
Prerequisite to get started react.js:
+
+
+ );
+ }
+}
+
+// Footer Component (Bileşeni)
+// Fonksiyonel component
+const Footer = () => (
+
+);
+
+// Footer Component (Bileşeni)
+// Class component
+class Footer extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+ );
+ }
+}
+
+// Ana uygulama veya üst (parent) veya kapsayıcı (container) component
+// Fonksiyonel Component
+const App = () => (
+
+
+
+);
+
+// Ana uygulama veya üst (parent) veya kapsayıcı (container) component
+// Class Component
+class App extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+```
+
+Tüm class tabanlı component'leri tek dosyada birleştirelim:
+
+```js
+//index.js
+
+import React from "react";
+import ReactDOM from "react-dom";
+
+// class tabanlı component
+class Header extends React.Component {
+ constructor(props) {
+ super(props);
+ // constructor içindeki kod diğer tüm kodlardan önce çalışır
+ }
+ render() {
+ return (
+
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
Asabeneh Yetayeh
+
Oct 7, 2020
+
+ );
+ }
+}
+
+// TechList Component (Bileşeni)
+// class tabanlı component
+class TechList extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ const techs = ["HTML", "CSS", "JavaScript"];
+ const techsFormatted = techs.map((tech) =>
{tech} );
+ return techsFormatted;
+ }
+}
+
+// Main Component (Bileşeni)
+// Class Component
+class Main extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+
+
Prerequisite to get started react.js:
+
+
+ );
+ }
+}
+
+// Footer Component (Bileşeni)
+// Class component
+class Footer extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+ );
+ }
+}
+
+// Ana uygulama veya üst (parent) veya kapsayıcı (container) component
+// Class Component
+class App extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+## Class Component'ta Props'a Erişim
+
+Props (Özellikler)'in, bir component'ten diğerine veri göndermenin yolu olduğunu ya da başka bir deyişle props'un bir veri taşıyıcısı olduğunu belirtmiştik. Bu nedenle, class tabanlı component'te de props'u işlememiz gerekir. Bir class tabanlı component'in props'una _this_ anahtar kelimesini kullanarak erişebiliriz. Aşağıdaki örneğe bakın:
+
+```js
+// index.js
+
+import React from "react";
+import ReactDOM from "react-dom";
+
+// class tabanlı component
+class Header extends React.Component {
+ constructor(props) {
+ super(props);
+ // constructor içindeki kod diğer tüm kodlardan önce çalışır
+ }
+ render() {
+ return (
+
+ );
+ }
+}
+const App = () => {
+ const data = {
+ welcome: "Welcome to 30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
+ author: {
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
+ },
+ date: "Oct 7, 2020",
+ };
+
+ return (
+
+
+
+ );
+};
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Yukarıdaki örnekte görüldüğü gibi, props'tan veriyi almak için her seferinde _props.data_ yazmamız gerekiyor. Destructuring (Parçalama) kullanarak bu tekrarı önleyebiliriz:
+
+```js
+// index.js
+
+import React from "react";
+import ReactDOM from "react-dom";
+
+// class tabanlı component
+class Header extends React.Component {
+ constructor(props) {
+ super(props);
+ // constructor içindeki kod diğer tüm kodlardan önce çalışır
+ }
+ render() {
+ console.log(this.props.data);
+ const {
+ welcome,
+ title,
+ subtitle,
+ author: { firstName, lastName },
+ date,
+ } = this.props.data;
+
+ return (
+
+ );
+ }
+}
+const App = () => {
+ const data = {
+ welcome: "Welcome to 30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
+ author: {
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
+ },
+ date: "Oct 6, 2020",
+ };
+
+ return (
+
+
+
+ );
+};
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Yukarıdaki kodun bir öncekinden daha temiz olduğunu görebilirsiniz. Şimdi sahip olduğumuz tüm component'leri temizleyip birleştirelim:
+
+```js
+// index.js
+
+import React from "react";
+import ReactDOM from "react-dom";
+
+// class tabanlı component
+class Header extends React.Component {
+ constructor(props) {
+ super(props);
+ // constructor içindeki kod diğer tüm kodlardan önce çalışır
+ }
+ render() {
+ console.log(this.props.data);
+ const {
+ welcome,
+ title,
+ subtitle,
+ author: { firstName, lastName },
+ date,
+ } = this.props.data;
+
+ return (
+
+ );
+ }
+}
+
+// TechList Component (Bileşeni)
+// class tabanlı component
+class TechList extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ const { techs } = this.props;
+ const techsFormatted = techs.map((tech) =>
{tech} );
+ return techsFormatted;
+ }
+}
+
+// Main Component (Bileşeni)
+// Class Component
+class Main extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+
+
Prerequisite to get started react.js:
+
+
+ );
+ }
+}
+
+// Footer Component (Bileşeni)
+// Class component
+class Footer extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+ );
+ }
+}
+
+class App extends React.Component {
+ render() {
+ const data = {
+ welcome: "Welcome to 30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
+ author: {
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
+ },
+ date: "Oct 7, 2020",
+ };
+ const techs = ["HTML", "CSS", "JavaScript"];
+
+ return (
+
+
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+## Class Tabanlı Component'ta Metotlar
+
+Class tabanlı component'te metotlara erişiriz. Çoğu zaman farklı metotları üst (parent) component'te yazarız ve bunları alt (child) component'lere geçiririz. Uygulamayı görelim.
+
+Bu component'e bir metot ekleyelim:
+
+```js
+//index.js
+
+import React from "react";
+import ReactDOM from "react-dom";
+
+// class tabanlı component
+class Header extends React.Component {
+ greetPeople = () => {
+ alert("Welcome to 30 Days Of React Challenge, 2020");
+ };
+ render() {
+ return (
+
+
+
Welcome to 30 Days Of React
+
Getting Started React
+
JavaScript Library
+
Asabeneh Yetayeh
+
Oct 7, 2020
+
Greet
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Metodu çağırmak veya tetiklemek event oluştuğunda gerçekleşir. Bu nedenle bir metodu event listener'a geçirirken metodu çağırmayın (parantez koymayın).
+
+Şimdi sahip olduğumuz koda gerekli tüm metotları ekleyelim:
+
+```js
+// index.js
+
+import React from "react";
+import ReactDOM from "react-dom";
+import asabenehImage from "./images/asabeneh.jpg";
+
+// User Card Component (Bileşeni)
+const UserCard = ({ user: { firstName, lastName, image } }) => (
+
+
+
+ {firstName}
+ {lastName}
+
+
+);
+
+// Düğme component'i
+const Button = ({ text, onClick, style }) => (
+
+ {text}
+
+);
+
+// CSS stilleri JavaScript nesnesi olarak
+const buttonStyles = {
+ backgroundColor: "#61dbfb",
+ padding: 10,
+ border: "none",
+ borderRadius: 5,
+ margin: 3,
+ cursor: "pointer",
+ fontSize: 18,
+ color: "white",
+};
+
+// class tabanlı component
+class Header extends React.Component {
+ constructor(props) {
+ super(props);
+ // constructor içindeki kod diğer tüm kodlardan önce çalışır
+ }
+ render() {
+ console.log(this.props.data);
+ const {
+ welcome,
+ title,
+ subtitle,
+ author: { firstName, lastName },
+ date,
+ } = this.props.data;
+
+ return (
+
+ );
+ }
+}
+
+// TechList Component (Bileşeni)
+// class tabanlı component
+class TechList extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ const { techs } = this.props;
+ const techsFormatted = techs.map((tech) =>
{tech} );
+ return techsFormatted;
+ }
+}
+
+// Main Component (Bileşeni)
+// Class Component
+class Main extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+
+
Prerequisite to get started react.js:
+
+
+
+
+
+ );
+ }
+}
+
+// Footer Component (Bileşeni)
+// Class component
+class Footer extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+ );
+ }
+}
+
+class App extends React.Component {
+ showDate = (time) => {
+ const months = [
+ "January",
+ "February",
+ "March",
+ "April",
+ "May",
+ "June",
+ "July",
+ "August",
+ "September",
+ "October",
+ "November",
+ "December",
+ ];
+
+ const month = months[time.getMonth()].slice(0, 3);
+ const year = time.getFullYear();
+ const date = time.getDate();
+ return ` ${month} ${date}, ${year}`;
+ };
+ handleTime = () => {
+ alert(this.showDate(new Date()));
+ };
+ greetPeople = () => {
+ alert("Welcome to 30 Days Of React Challenge, 2020");
+ };
+ render() {
+ const data = {
+ welcome: "Welcome to 30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
+ author: {
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
+ },
+ date: "Oct 7, 2020",
+ };
+ const techs = ["HTML", "CSS", "JavaScript"];
+
+ // spread operatörü kullanarak data nesnesindeki author'ı user değişkenine kopyalama
+ const user = { ...data.author, image: asabenehImage };
+
+ return (
+
+
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Çoğu zaman kapsayıcı (container) veya üst (parent) component class component olarak yazılabilir; diğerleri ise fonksiyonel veya sunum (presentational) component olarak yazılabilir. Veri genellikle üst component'ten alt (child) component'e akar ve bu tek yönlüdür. Ancak React'ın en son sürümü, uygulamamızdaki her component'i yalnızca fonksiyonel component'lerle yazmamıza olanak tanımaktadır. Bu, önceki sürümlerde mümkün değildi.
+
+Bir sonraki bölümde, React'ın kalbi olan State (Durum)'u ele alacağız. State (Durum), React component'inin her state değişikliğinde yeniden render edilmesine (tekrar oluşturulmasına) olanak tanır.
+
+# Egzersizler
+
+## Egzersizler: Seviye 1
+
+1. Saf bir JavaScript fonksiyonunu nasıl yazarsınız?
+2. Inheritance (Kalıtım) nedir ve bir üst class'tan (parent class) nasıl child class oluşturursunuz?
+3. Class tabanlı React Component (Bileşeni) nedir?
+4. Fonksiyonel React Component (Bileşeni) ile class tabanlı React Component (Bileşeni) arasındaki fark nedir?
+5. Fonksiyonel component'ler yerine class tabanlı component'leri ne zaman kullanmamız gerekir?
+6. Class tabanlı component'in kullanım alanları nelerdir?
+7. Daha sık hangi tür component kullanırsınız? Fonksiyonel mi, class tabanlı mı?
+8. React yaşam döngüsü (life cycle) nedir? (henüz ele alınmadı)
+9. React'ta State (Durum) nedir? (henüz ele alınmadı)
+
+## Egzersizler: Seviye 2
+
+Önceki gün egzersizlerini class tabanlı component'lere çevirerek class tabanlı component hakkında daha fazla bilgi edinin.
+
+## Egzersizler: Seviye 3
+
+Yakında...
+
+🎉 TEBRİKLER! 🎉
+
+[<< Gün 6](../06_Gun_Dizi_Haritalama/06_dizi_haritalama.md) | [Gün 8 >>](../08_Gun_State/08_state.md)
diff --git a/Turkish/08_Gun_State/08_state.md b/Turkish/08_Gun_State/08_state.md
new file mode 100644
index 0000000..ead5f1c
--- /dev/null
+++ b/Turkish/08_Gun_State/08_state.md
@@ -0,0 +1,518 @@
+
+
30 Days Of React: State (Durum)
+
+
+
+
Yazar:
+Asabeneh Yetayeh Ekim, 2020
+
+
+
+
+[<< Gün 7](../07_Gun_Class_Bilesenler/07_class_bilesenler.md) | [Gün 9 >>](../09_Gun_Kosullu_Render/09_kosullu_render.md)
+
+
+
+- [State (Durum)](#state-durum)
+ - [State (Durum) Nedir?](#state-durum-nedir)
+ - [State nasıl ayarlanır?](#state-nasıl-ayarlanır)
+ - [Bir JavaScript metodu ile state'i sıfırlama](#bir-javascript-metodu-ile-statei-sıfırlama)
+ - [Egzersizler](#egzersizler)
+ - [Egzersizler: Seviye 1](#egzersizler-seviye-1)
+ - [Egzersizler: Seviye 2](#egzersizler-seviye-2)
+ - [Egzersizler: Seviye 3](#egzersizler-seviye-3)
+
+# State (Durum)
+
+## State (Durum) Nedir?
+
+State nedir? State'in İngilizce anlamı, \_belirli bir anda birisinin veya bir şeyin içinde bulunduğu özel koşul_dur.
+
+State'in bir şeylerin durumu olduğunu görelim:
+
+- Mutlu musunuz yoksa üzgün mü?
+- Işık açık mı yoksa kapalı mı?
+- Mevcut musunuz yoksa yok musunuz?
+- Dolu mu yoksa boş mu?
+
+Örneğin, 30 Days Of React meydan okumasını oluşturmaktan keyif aldığım için mutluyum. Sizin de mutlu olduğunuza inanıyorum.
+
+State (Durum), React'ta state verisi değiştiğinde component'in yeniden render edilmesini sağlayan bir nesnedir.
+
+## State nasıl ayarlanır?
+
+Class tabanlı bir component'in constructor'ı içinde veya dışında bir başlangıç state'i belirleriz. State'i doğrudan değiştirmeyiz ya da mutate etmeyiz; bunun yerine yeni bir state'e sıfırlamak için _setState()_ metodunu kullanırız. Aşağıdaki örnekte görüldüğü gibi, state nesnesinde başlangıç değeri 0 olan count bulunmaktadır. State nesnesine _this.state_ ve özellik adını kullanarak erişebiliriz. Aşağıdaki örneğe bakın:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+
+class App extends React.Component {
+ // state'i tanımlama
+ state = {
+ count: 0,
+ };
+ render() {
+ // state değerine erişme
+ const count = this.state.count;
+ return (
+
+
{count}
+
+ );
+ }
+}
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Yukarıdaki kodu çalıştırırsanız tarayıcıda sıfır görürsünüz. JavaScript metodu kullanarak state değerini değiştirerek count değerini artırabilir veya azaltabiliriz.
+
+## Bir JavaScript metodu ile state'i sıfırlama
+
+Şimdi bir düğmeye tıklayarak count değerini artıran veya azaltan bazı metotlar ekleyelim. Artırmak için bir düğme ve azaltmak için bir düğme ekleyelim. State'i ayarlamak için React'ın _this.setState_ metodunu kullanırız. Aşağıdaki örneğe bakın:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+class App extends React.Component {
+ // state'i tanımlama
+ state = {
+ count: 0,
+ };
+ render() {
+ // state değerine erişme
+ const count = this.state.count;
+ return (
+
+
{count}
+ this.setState({ count: this.state.count + 1 })}>
+ Add One
+
+
+ );
+ }
+}
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Yukarıdaki örneği anlarsanız, eksi bir metodu eklemek kolay olacaktır. Click event'e eksi bir metot ekleyelim:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+class App extends React.Component {
+ // state'i tanımlama
+ state = {
+ count: 0,
+ };
+ render() {
+ // state değerine erişme
+ const count = this.state.count;
+ return (
+
+
{count}
+
+
+ this.setState({ count: this.state.count + 1 })}
+ >
+ Add One
+ {" "}
+ this.setState({ count: this.state.count - 1 })}
+ >
+ Minus One
+
+
+
+ );
+ }
+}
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Her iki düğme de iyi çalışıyor; ancak kodu iyi yapılandırmamız gerekiyor. Component'te ayrı metotlar oluşturalım:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+class App extends React.Component {
+ // state'i tanımlama
+ state = {
+ count: 0,
+ };
+ // state'e bir ekleyen metot
+ addOne = () => {
+ this.setState({ count: this.state.count + 1 });
+ };
+
+ // state'ten bir çıkaran metot
+ minusOne = () => {
+ this.setState({ count: this.state.count - 1 });
+ };
+ render() {
+ // state değerine erişme
+ const count = this.state.count;
+ return (
+
+
{count}
+
+
+
+ +1
+ {" "}
+
+ -1
+
+
+
+ );
+ }
+}
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+State hakkında daha fazla örnek yapalım. Aşağıdaki örnekte ya köpek ya da kedi gösteren küçük bir uygulama geliştireceğiz. Başlangıç state'ini kedi olarak ayarlayabiliriz; tıklandığında köpek gösterecek ve bu şekilde devam edecek. Hayvanı dönüşümlü olarak değiştiren bir metoda ihtiyacımız var. Canlı örneği görmek için [buraya](https://codepen.io/Asabeneh/full/LYVxKpq) tıklayın:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+class App extends React.Component {
+ // state'i tanımlama
+ state = {
+ image: "https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg",
+ };
+ changeAnimal = () => {
+ let dogURL =
+ "https://static.onecms.io/wp-content/uploads/sites/12/2015/04/dogs-pembroke-welsh-corgi-400x400.jpg";
+ let catURL =
+ "https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg";
+ let image = this.state.image === catURL ? dogURL : catURL;
+ this.setState({ image });
+ };
+
+ render() {
+ // state değerine erişme
+ const count = this.state.count;
+ return (
+
+
30 Days Of React
+
+
+
+
+
+ Change
+
+
+ );
+ }
+}
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Şimdi şimdiye kadar sahip olduğumuz tüm kodları bir araya koyalım ve gerekli olduğunda state'i de uygulayalım:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+import asabenehImage from "./images/asabeneh.jpg";
+
+// Ay, gün ve yılı gösteren fonksiyon
+
+const showDate = (time) => {
+ const months = [
+ "January",
+ "February",
+ "March",
+ "April",
+ "May",
+ "June",
+ "July",
+ "August",
+ "September",
+ "October",
+ "November",
+ "December",
+ ];
+
+ const month = months[time.getMonth()].slice(0, 3);
+ const year = time.getFullYear();
+ const date = time.getDate();
+ return ` ${month} ${date}, ${year}`;
+};
+
+// User Card Component (Bileşeni)
+const UserCard = ({ user: { firstName, lastName, image } }) => (
+
+
+
+ {firstName}
+ {lastName}
+
+
+);
+
+// Düğme component'i
+const Button = ({ text, onClick, style }) => (
+
+ {text}
+
+);
+
+// CSS stilleri JavaScript nesnesi olarak
+const buttonStyles = {
+ backgroundColor: "#61dbfb",
+ padding: 10,
+ border: "none",
+ borderRadius: 5,
+ margin: 3,
+ cursor: "pointer",
+ fontSize: 18,
+ color: "white",
+};
+
+// class tabanlı component
+class Header extends React.Component {
+ constructor(props) {
+ super(props);
+ // constructor içindeki kod diğer tüm kodlardan önce çalışır
+ }
+ render() {
+ console.log(this.props.data);
+ const {
+ welcome,
+ title,
+ subtitle,
+ author: { firstName, lastName },
+ date,
+ } = this.props.data;
+
+ return (
+
+ );
+ }
+}
+
+const Count = ({ count, addOne, minusOne }) => (
+
+);
+
+// TechList Component (Bileşeni)
+// class tabanlı component
+class TechList extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ const { techs } = this.props;
+ const techsFormatted = techs.map((tech) =>
{tech} );
+ return techsFormatted;
+ }
+}
+
+// Main Component (Bileşeni)
+// Class Component
+class Main extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ const {
+ techs,
+ user,
+ greetPeople,
+ handleTime,
+ changeBackground,
+ count,
+ addOne,
+ minusOne,
+ } = this.props;
+ return (
+
+
+
Prerequisite to get started react.js:
+
+
+
+
+
+
+
+ );
+ }
+}
+
+// Footer Component (Bileşeni)
+// Class component
+class Footer extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+ );
+ }
+}
+
+class App extends React.Component {
+ state = {
+ count: 0,
+ styles: {
+ backgroundColor: "",
+ color: "",
+ },
+ };
+ showDate = (time) => {
+ const months = [
+ "January",
+ "February",
+ "March",
+ "April",
+ "May",
+ "June",
+ "July",
+ "August",
+ "September",
+ "October",
+ "November",
+ "December",
+ ];
+
+ const month = months[time.getMonth()].slice(0, 3);
+ const year = time.getFullYear();
+ const date = time.getDate();
+ return ` ${month} ${date}, ${year}`;
+ };
+ addOne = () => {
+ this.setState({ count: this.state.count + 1 });
+ };
+
+ // state'ten bir çıkaran metot
+ minusOne = () => {
+ this.setState({ count: this.state.count - 1 });
+ };
+ handleTime = () => {
+ alert(this.showDate(new Date()));
+ };
+ greetPeople = () => {
+ alert("Welcome to 30 Days Of React Challenge, 2020");
+ };
+ changeBackground = () => {};
+ render() {
+ const data = {
+ welcome: "Welcome to 30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
+ author: {
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
+ },
+ date: "Oct 7, 2020",
+ };
+ const techs = ["HTML", "CSS", "JavaScript"];
+ const date = new Date();
+ // spread operatörü kullanarak data nesnesindeki author'ı user değişkenine kopyalama
+ const user = { ...data.author, image: asabenehImage };
+
+ return (
+
+ {this.state.backgroundColor}
+
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Artık State (Durum) konusunu çok iyi anladığınıza inanıyorum. Bundan sonra diğer bölümlerde de state kullanacağız; çünkü state ve props, React uygulamasının çekirdeğidir.
+
+## Egzersizler
+
+### Egzersizler: Seviye 1
+
+1. Bugün state'iniz nasıldı? Mutlu musunuz? Umarım öyledir. Buraya kadar geldiyseniz mutlu olmalısınız.
+2. React'ta State (Durum) nedir?
+3. React'ta Props (Özellikler) ve State (Durum) arasındaki fark nedir?
+4. Bir React component'inde state'e nasıl erişirsiniz?
+5. Bir React component'inde state'i nasıl ayarlarsınız?
+
+### Egzersizler: Seviye 2
+
+1. React state'i kullanarak sayfanın arka plan rengini değiştirin. Bu tekniği portföyünüz için karanlık mod uygulamak amacıyla kullanabilirsiniz.
+
+
+
+2. Uzun süredir devam eden kapanmanın ardından seyahat etmeyi düşünüyor olabilirsiniz ve nereye gideceğinizi bilmiyorsunuzdur. Tatil hedefinizi seçen rastgele bir ülke seçici geliştirmek isteyebilirsiniz.
+
+
+
+### Egzersizler: Seviye 3
+
+Yakında
+
+🎉 TEBRİKLER! 🎉
+
+[<< Gün 7](../07_Gun_Class_Bilesenler/07_class_bilesenler.md) | [Gün 9 >>](../09_Gun_Kosullu_Render/09_kosullu_render.md)
diff --git a/Turkish/09_Gun_Kosullu_Render/09_kosullu_render.md b/Turkish/09_Gun_Kosullu_Render/09_kosullu_render.md
new file mode 100644
index 0000000..20c779d
--- /dev/null
+++ b/Turkish/09_Gun_Kosullu_Render/09_kosullu_render.md
@@ -0,0 +1,783 @@
+
+
30 Days Of React: Koşullu Render (Conditional Rendering)
+
+
+
+
Yazar:
+Asabeneh Yetayeh Ekim, 2020
+
+
+
+
+[<< Gün 8](../08_Gun_State/08_state.md) | [Gün 10 >>](../10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md)
+
+
+
+# Koşullu Render (Conditional Rendering)
+
+Terimden anlaşılacağı gibi, koşullu render (conditional rendering), farklı koşullarda farklı JSX veya component (bileşen) render etmenin bir yoludur. Koşullu render'i sıradan if ve else ifadesini, üçlü (ternary) operatörü ve &&'yi kullanarak uygulayabiliriz. Farklı koşullu render'ları uygulayalım.
+
+## If ve Else İfadesi ile Koşullu Render
+
+Aşağıdaki kodda başlangıç state'i (durumu) false olan loggedIn değişkeni bulunmaktadır. State false ise kullanıcıya giriş yapmasını söyleriz; aksi takdirde kullanıcıyı karşılarız:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+
+// class tabanlı component
+class Header extends React.Component {
+ render() {
+ const {
+ welcome,
+ title,
+ subtitle,
+ author: { firstName, lastName },
+ date,
+ } = this.props.data;
+
+ return (
+
+ );
+ }
+}
+
+class App extends React.Component {
+ state = {
+ loggedIn: false,
+ };
+
+ render() {
+ const data = {
+ welcome: "30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
+ author: {
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
+ },
+ date: "Oct 9, 2020",
+ };
+
+ // if ve else ifadesi kullanarak koşullu render
+
+ let status;
+
+ if (this.state.loggedIn) {
+ status =
Welcome to 30 Days Of React ;
+ } else {
+ status =
Please Login ;
+ }
+
+ return (
+
+
+ {status}
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Kullanıcının oturum durumunu değiştirmesine izin veren bir metot ekleyelim. Giriş ve çıkış yapmak için event işleyen bir düğmeye ihtiyacımız var:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+
+// Düğme component'i
+const Button = ({ text, onClick, style }) => (
+
+ {text}
+
+);
+
+// CSS stilleri JavaScript nesnesi olarak
+const buttonStyles = {
+ backgroundColor: "#61dbfb",
+ padding: 10,
+ border: "none",
+ borderRadius: 5,
+ margin: "3px auto",
+ cursor: "pointer",
+ fontSize: 22,
+ color: "white",
+};
+
+// class tabanlı component
+class Header extends React.Component {
+ render() {
+ console.log(this.props.data);
+ const {
+ welcome,
+ title,
+ subtitle,
+ author: { firstName, lastName },
+ date,
+ } = this.props.data;
+
+ return (
+
+ );
+ }
+}
+
+class App extends React.Component {
+ state = {
+ loggedIn: false,
+ };
+ handleLogin = () => {
+ this.setState({
+ loggedIn: !this.state.loggedIn,
+ });
+ };
+
+ render() {
+ const data = {
+ welcome: "30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
+ author: {
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
+ },
+ date: "Oct 9, 2020",
+ };
+
+ let status;
+ let text;
+
+ if (this.state.loggedIn) {
+ status =
Welcome to 30 Days Of React ;
+ text = "Logout";
+ } else {
+ status =
Please Login ;
+ text = "Login";
+ }
+
+ return (
+
+
+ {status}
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Koşulumuz ikiden fazlaysa ne olur? Saf JavaScript'te olduğu gibi if else if ifadesini kullanabiliriz. Genel olarak, koşullu render, saf JavaScript koşullu ifadesinden farklı değildir.
+
+## Üçlü (Ternary) Operatör ile Koşullu Render
+
+Üçlü (ternary) operatör, if else ifadesine bir alternatiftir. Ancak üçlü operatörün if else ifadesinden daha fazla kullanım alanı vardır. Örneğin üçlü operatörü, bir component'teki stil, className ve diğer yerlerde sıradan if else ifadesinden çok daha fazla kullanabilirsiniz:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+
+// Düğme component'i
+const Button = ({ text, onClick, style }) => (
+
+ {text}
+
+);
+
+// CSS stilleri JavaScript nesnesi olarak
+const buttonStyles = {
+ backgroundColor: "#61dbfb",
+ padding: 10,
+ border: "none",
+ borderRadius: 5,
+ margin: "3px auto",
+ cursor: "pointer",
+ fontSize: 22,
+ color: "white",
+};
+
+// class tabanlı component
+class Header extends React.Component {
+ render() {
+ const {
+ welcome,
+ title,
+ subtitle,
+ author: { firstName, lastName },
+ date,
+ } = this.props.data;
+
+ return (
+
+ );
+ }
+}
+
+class App extends React.Component {
+ state = {
+ loggedIn: false,
+ };
+ handleLogin = () => {
+ this.setState({
+ loggedIn: !this.state.loggedIn,
+ });
+ };
+
+ render() {
+ const data = {
+ welcome: "30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
+ author: {
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
+ },
+ date: "Oct 9, 2020",
+ };
+
+ let status = this.state.loggedIn ? (
+
Welcome to 30 Days Of React
+ ) : (
+
Please Login
+ );
+
+ return (
+
+
+ {status}
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+JSX'e ek olarak, bir component'i de koşullu olarak render edebiliriz. Yukarıdaki koşullu JSX'i bir component'e çevirelim:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+
+// Düğme component'i
+const Button = ({ text, onClick, style }) => (
+
+ {text}
+
+);
+
+// CSS stilleri JavaScript nesnesi olarak
+const buttonStyles = {
+ backgroundColor: "#61dbfb",
+ padding: 10,
+ border: "none",
+ borderRadius: 5,
+ margin: "3px auto",
+ cursor: "pointer",
+ fontSize: 22,
+ color: "white",
+};
+
+// class tabanlı component
+class Header extends React.Component {
+ render() {
+ const {
+ welcome,
+ title,
+ subtitle,
+ author: { firstName, lastName },
+ date,
+ } = this.props.data;
+
+ return (
+
+ );
+ }
+}
+
+const Login = () => (
+
+
Please Login
+
+);
+const Welcome = (props) => (
+
+
Welcome to 30 Days Of React
+
+);
+
+class App extends React.Component {
+ state = {
+ loggedIn: false,
+ };
+ handleLogin = () => {
+ this.setState({
+ loggedIn: !this.state.loggedIn,
+ });
+ };
+
+ render() {
+ const data = {
+ welcome: "30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
+ author: {
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
+ },
+ date: "Oct 9, 2020",
+ };
+
+ const status = this.state.loggedIn ?
:
;
+
+ return (
+
+
+ {status}
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+## && Operatörü ile Koşullu Render
+
+&& operatörü, sol operand (ifade) true (doğru) ise sağ JSX operandını render eder:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+
+// Düğme component'i
+const Button = ({ text, onClick, style }) => (
+
+ {text}
+
+);
+
+// CSS stilleri JavaScript nesnesi olarak
+const buttonStyles = {
+ backgroundColor: "#61dbfb",
+ padding: 10,
+ border: "none",
+ borderRadius: 5,
+ margin: "3px auto",
+ cursor: "pointer",
+ fontSize: 22,
+ color: "white",
+};
+
+// class tabanlı component
+class Header extends React.Component {
+ render() {
+ console.log(this.props.data);
+ const {
+ welcome,
+ title,
+ subtitle,
+ author: { firstName, lastName },
+ date,
+ } = this.props.data;
+
+ return (
+
+ );
+ }
+}
+const Login = () => (
+
+
Please Login
+
+);
+const Welcome = (props) => (
+
+
Welcome to 30 Days Of React
+
+);
+
+class App extends React.Component {
+ state = {
+ loggedIn: false,
+ techs: ["HTML", "CSS", "JS"],
+ };
+ handleLogin = () => {
+ this.setState({
+ loggedIn: !this.state.loggedIn,
+ });
+ };
+
+ render() {
+ const data = {
+ welcome: "30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
+ author: {
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
+ },
+ date: "Oct 9, 2020",
+ };
+
+ // state'i parçalayabiliriz
+
+ const { loggedIn, techs } = this.state;
+
+ const status = loggedIn ?
:
;
+
+ return (
+
+
+ {status}
+
+ {techs.length === 3 && (
+
You have all the prerequisite courses to get started React
+ )}
+ {!loggedIn && (
+
+ Please login to access more information about 30 Days Of React
+ challenge
+
+ )}
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Önceki bölümde karşılama ve saati alert kutusu olarak göstermiştik. Şimdi karşılamayı ve saati alert kutusu yerine tarayıcı DOM'unda render edelim:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+
+// class tabanlı component
+class Header extends React.Component {
+ render() {
+ console.log(this.props.data);
+ const {
+ welcome,
+ title,
+ subtitle,
+ author: { firstName, lastName },
+ date,
+ } = this.props.data;
+
+ return (
+
+ );
+ }
+}
+
+const Message = ({ message }) => (
+
+
{message}
+
+);
+const Login = () => (
+
+
Please Login
+
+);
+const Welcome = (props) => (
+
+
Welcome to 30 Days Of React
+
+);
+
+// Düğme component'i
+const Button = ({ text, onClick, style }) => (
+
+ {text}
+
+);
+
+// TechList Component (Bileşeni)
+// class tabanlı component
+class TechList extends React.Component {
+ render() {
+ const { techs } = this.props;
+ const techsFormatted = techs.map((tech) =>
{tech} );
+ return techsFormatted;
+ }
+}
+
+// Main Component (Bileşeni)
+// Class Component
+class Main extends React.Component {
+ render() {
+ const { techs, greetPeople, handleTime, loggedIn, handleLogin, message } =
+ this.props;
+ console.log(message);
+
+ const status = loggedIn ?
:
;
+ return (
+
+
+
Prerequisite to get started react.js:
+
+ {techs.length === 3 && (
+
You have all the prerequisite courses to get started React
+ )}
+
+
{" "}
+
+ {!loggedIn && (
+
+ Please login to access more information about 30 Days Of React
+ challenge
+
+ )}
+
+
+
+
+
+ );
+ }
+}
+
+// CSS stilleri JavaScript nesnesi olarak
+const buttonStyles = {
+ backgroundColor: "#61dbfb",
+ padding: 10,
+ border: "none",
+ borderRadius: 5,
+ margin: "3px auto",
+ cursor: "pointer",
+ fontSize: 22,
+ color: "white",
+};
+
+// Footer Component (Bileşeni)
+// Class component
+class Footer extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+ );
+ }
+}
+
+class App extends React.Component {
+ state = {
+ loggedIn: false,
+ techs: ["HTML", "CSS", "JS"],
+ message: "Click show time or Greet people to change me",
+ };
+ handleLogin = () => {
+ this.setState({
+ loggedIn: !this.state.loggedIn,
+ });
+ };
+ showDate = (time) => {
+ const months = [
+ "January",
+ "February",
+ "March",
+ "April",
+ "May",
+ "June",
+ "July",
+ "August",
+ "September",
+ "October",
+ "November",
+ "December",
+ ];
+
+ const month = months[time.getMonth()].slice(0, 3);
+ const year = time.getFullYear();
+ const date = time.getDate();
+ return `${month} ${date}, ${year}`;
+ };
+ handleTime = () => {
+ let message = this.showDate(new Date());
+ this.setState({ message });
+ };
+ greetPeople = () => {
+ let message = "Welcome to 30 Days Of React Challenge, 2020";
+ this.setState({ message });
+ };
+
+ render() {
+ const data = {
+ welcome: "30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
+ author: {
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
+ },
+ date: "Oct 9, 2020",
+ };
+
+ return (
+
+
+
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+## Tanıklık
+
+Artık Yazar ve 30DaysOfReact hakkındaki düşüncelerinizi paylaşmanın zamanı geldi. Tanıklığınızı bu [bağlantıda](https://www.asabeneh.com/testimonials) bırakabilirsiniz.
+
+## Egzersizler
+
+### Egzersizler: Seviye 1
+
+1. Koşullu render (conditional rendering) nedir?
+2. Koşullu render'ı nasıl uygularsınız?
+3. Koşullu render için hangi yöntemi kullanmayı tercih edersiniz?
+
+### Egzersizler: Seviye 2
+
+1. Yılın mevsimine göre (Sonbahar, Kış, İlkbahar, Yaz) arka plan rengini değiştiren tek sayfalık bir uygulama yapın.
+2. Günün saatine göre (Sabah, Öğle, Akşam, Gece) arka plan rengini değiştiren tek sayfalık bir uygulama yapın.
+
+### Egzersizler: Seviye 3
+
+1. Veri çekmek belirli bir süre alır. Veri yüklenene kadar kullanıcı beklemek zorundadır. Veri henüz çekilmemişken bir yükleme (loading) fonksiyonelliği uygulayın. Gecikmeyi setTimeout kullanarak simüle edebilirsiniz.
+
+🎉 TEBRİKLER! 🎉
+
+[<< Gün 8](../08_Gun_State/08_state.md) | [Gün 10 >>](../10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md)
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
new file mode 100644
index 0000000..bbb01b4
--- /dev/null
+++ b/Turkish/10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md
@@ -0,0 +1,620 @@
+
+
30 Days Of React: React Proje Klasör Yapısı (Project Folder Structure)
+
+
+
+
Yazar:
+Asabeneh Yetayeh Ekim, 2020
+
+
+
+
+[<< Gün 9](../09_Gun_Kosullu_Render/09_kosullu_render.md) | [Gün 11 >>](../../11_Day_Events/11_events.md)
+
+
+
+- [React Proje Klasör Yapısı ve Dosya İsimlendirme](#react-proje-klasör-yapısı-ve-dosya-i̇simlendirme)
+ - [Dosya İsimlendirme](#dosya-i̇simlendirme)
+ - [Klasör](#klasör)
+ - [Components (Bileşenler) Klasörü](#components-bileşenler-klasörü)
+ - [Fragment (Parça)](#fragment-parça)
+- [Egzersizler](#egzersizler)
+ - [Egzersizler: Seviye 1](#egzersizler-seviye-1)
+ - [Egzersizler: Seviye 2](#egzersizler-seviye-2)
+ - [Egzersizler: Seviye 3](#egzersizler-seviye-3)
+
+# React Proje Klasör Yapısı ve Dosya İsimlendirme
+
+React projesinde tek bir klasör yapısı ya da dosya isimlendirmesi kullanmanın zorunlu bir yolu yoktur. Çoğu zaman bu tür seçimler bir ekip tarafından yapılabilir. Bazen bir şirketin hangi kod kurallarının, klasör yapısının ve dosya isimlendirmesinin kullanılacağına dair geliştirilmiş yönergeleri olabilir. React projesini yapılandırmanın doğru ya da yanlış yolu yoktur; ancak bazı yapılar ölçeklenebilirlik, sürdürülebilirlik, dosyalar üzerinde çalışma kolaylığı ve anlaşılması kolay yapı açısından diğerlerinden daha iyidir. Klasör yapısı hakkında daha fazla bilgi edinmek isterseniz aşağıdaki makaleleri inceleyebilirsiniz:
+
+- [React Folder Structure by https://www.devaradise.com ](https://www.devaradise.com/react-project-folder-structure)
+- [React Folder Structure by www.robinwieruch.de ](https://www.robinwieruch.de/react-folder-structure)
+- [React Folder Structure by Faraz Ahmad](https://dev.to/farazamiruddin/an-opinionated-guide-to-react-folder-structure-file-naming-1l7i)
+- [React Folder Structure by https://maxrozen.com/](https://maxrozen.com/guidelines-improve-react-app-folder-structure/)
+
+Farklı kuralların bir karışımını kullanıyorum. Dilerseniz bunu takip edebilirsiniz; ancak lütfen sizin için anlamlı olan bir yapıya sadık kalın.
+
+## Dosya İsimlendirme
+
+Tüm React projelerimde, tüm component'ler için CamelCase (deve harfi) dosya adı kullanacağım. Açıklayıcı ve uzun isimler kullanmayı tercih ederim.
+
+## Klasör
+
+Tüm görselleri, ikonları ve fontları assets klasöründe, tüm CSS stil dosyalarını ise styles klasöründe toplamayı kolay buluyorum. Tüm component'ler components klasöründe olacak.
+
+Şimdiye kadar index.js dosyası üzerinde çalışıyorduk. index.js'de çok sayıda component bulunuyor. Bugün her component'i ayrı bir dosyaya taşıyacağız ve tüm dosyaları App.js'e import edeceğiz. Bu süreçte klasör yapımı göreceksiniz. Şu anda src dizinindeyiz. Tüm klasör yapısı src dizininin içinde olacak. index.js dosyasından başlayalım. index.js dosyasına ek olarak, bir App.js dosyası oluşturalım ve şimdilik sahip olduğumuz component'lerin çoğunu App.js'e taşıyalım. index.js, component'i index.html ile bağlayan ana kapınızdır.
+
+```js
+// src/index.js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+
+const App = () =>
Welcome to 30 Days Of React ;
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Yukarıdaki kod parçasında App component'i bulunmaktadır. App component'ini kendi dosyasına, App.js'e taşıyalım:
+
+```js
+// src/App.js
+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.
+
+Named export yapmak için _let_ veya _const_'tan önce sadece _export_ anahtar kelimesini ekleriz:
+
+```js
+// src/App.js
+import React from 'react
+
+// ok fonksiyonunda named export
+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
+// normal fonksiyonda named export, function declaration
+export function App () {
+return
Welcome to 30 Days Of React
+}
+```
+
+Şimdi App component'ini App.js dosyasından index.js dosyasına import edelim:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+import { App } from "./App";
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Named export'u gördük; şimdi default export ile uygulayalım. Bunu iki şekilde yapabiliriz; ancak component'leri dışa aktarırken ikinci yöntem önerilir; çünkü bazen bir component'i başka bir higher order component (yüksek dereceli bileşen) ile sarmalayabiliriz:
+
+```js
+// src/App.js
+import React from 'react
+// ok fonksiyonunda default export
+export default const App = () =>
Welcome to 30 Days Of React
+
+```
+
+```js
+// src/App.js
+import React from 'react
+// default export, normal fonksiyon
+export default function App () {
+ 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
+```
+
+Bir component default olarak dışa aktarılmışsa import ederken süslü paranteze gerek yoktur:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+Şimdiye kadar oluşturduğumuz component'leri hatırlarsanız, hepsini bir arada tutuyorduk. Bu şekilde çalışmak kolay değildir. Şimdi tüm component'leri ayrı bir dosyaya taşıyacağız:
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+import asabenehImage from "./images";
+import { countriesData } from "./data/countries";
+
+// Header component (Bileşeni)
+class Header extends React.Component {
+ render() {
+ console.log(this.props.data);
+ const {
+ welcome,
+ title,
+ subtitle,
+ author: { firstName, lastName },
+ date,
+ } = this.props.data;
+
+ return (
+
+ );
+ }
+}
+
+const Country = ({
+ country: { name, capital, flag, languages, population, currency },
+}) => {
+ const formatedCapital =
+ capital.length > 0 ? (
+ <>
+
Capital:
+ {capital}
+
+ ) : (
+ ""
+ );
+ const formatLanguage = languages.length > 1 ? `Languages` : `Language`;
+ return (
+
+
+
+
+
{name.toUpperCase()}
+
+
{formatedCapital}
+
+ {formatLanguage}:
+ {languages.join(", ")}
+
+
+ Population:
+ {population.toLocaleString()}
+
+
+ Currency:
+ {currency}
+
+
+
+ );
+};
+
+// User Card Component (Bileşeni)
+const UserCard = () => (
+
+
+
Asabeneh Yetayeh
+
+);
+
+// Onaltılık (hexadecimal) 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 Message = ({ message }) => (
+
+
{message}
+
+);
+const Login = () => (
+
+
Please Login
+
+);
+const Welcome = (props) => (
+
+
Welcome to 30 Days Of React
+
+);
+
+// Düğme component'i
+const Button = ({ text, onClick, style }) => (
+
+ {text}
+
+);
+
+// TechList Component (Bileşeni)
+// class tabanlı component
+class TechList extends React.Component {
+ render() {
+ const { techs } = this.props;
+ const techsFormatted = techs.map((tech) =>
{tech} );
+ return techsFormatted;
+ }
+}
+
+// Main Component (Bileşeni)
+// Class Component
+class Main extends React.Component {
+ render() {
+ const { techs, greetPeople, handleTime, loggedIn, handleLogin, message } =
+ this.props;
+ console.log(message);
+
+ const status = loggedIn ?
:
;
+ return (
+
+
+
Prerequisite to get started react.js:
+
+ {techs.length === 3 && (
+
You have all the prerequisite courses to get started React
+ )}
+
+
{" "}
+
+ {!loggedIn && (
+
+ Please login to access more information about 30 Days Of React
+ challenge
+
+ )}
+
+
+
+
+
+ );
+ }
+}
+
+// CSS stilleri JavaScript nesnesi olarak
+const buttonStyles = {
+ backgroundColor: "#61dbfb",
+ padding: 10,
+ border: "none",
+ borderRadius: 5,
+ margin: 3,
+ cursor: "pointer",
+ fontSize: 22,
+ color: "white",
+ margin: "0 auto",
+};
+
+// Footer Component (Bileşeni)
+// Class component
+class Footer extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+ );
+ }
+}
+
+class App extends React.Component {
+ state = {
+ loggedIn: false,
+ techs: ["HTML", "CSS", "JS"],
+ message: "Click show time or Greet people to change me",
+ };
+ handleLogin = () => {
+ this.setState({
+ loggedIn: !this.state.loggedIn,
+ });
+ };
+ showDate = (time) => {
+ const months = [
+ "January",
+ "February",
+ "March",
+ "April",
+ "May",
+ "June",
+ "July",
+ "August",
+ "September",
+ "October",
+ "November",
+ "December",
+ ];
+
+ const month = months[time.getMonth()].slice(0, 3);
+ const year = time.getFullYear();
+ const date = time.getDate();
+ return `${month} ${date}, ${year}`;
+ };
+ handleTime = () => {
+ let message = this.showDate(new Date());
+ this.setState({ message });
+ };
+ greetPeople = () => {
+ let message = "Welcome to 30 Days Of React Challenge, 2020";
+ this.setState({ message });
+ };
+
+ render() {
+ const data = {
+ welcome: "30 Days Of React",
+ title: "Getting Started React",
+ subtitle: "JavaScript Library",
+ author: {
+ firstName: "Asabeneh",
+ lastName: "Yetayeh",
+ },
+ date: "Oct 9, 2020",
+ };
+ const techs = ["HTML", "CSS", "JavaScript"];
+
+ return (
+
+ {this.state.backgroundColor}
+
+
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
, rootElement);
+```
+
+## Components (Bileşenler) Klasörü
+
+src dizininin içinde tüm component'leri ayrı bir klasörde toplayacağız:
+
+```sh
+src
+ App.js
+ index.js
+ components
+ -auth
+ -Signup.js
+ -Signin.js
+ -Forgotpassword.js
+ -Resetpassord.js
+ header
+ -Header.js
+ footer
+ -Footer.js
+ assets
+ -images
+ -icnons
+ - fonts
+ styles
+ -button.js
+ -button.scss
+ utils
+ -random-id.js
+ -display-time.js
+ -generate-color.js
+ shared
+ -Button.js
+ -InputField.js
+ -TextAreaField.js
+```
+
+src içinde components dizini oluşturalım; components içinde header dizini oluşturalım. header dizini içinde Header.js dosyası oluşturalım:
+
+```js
+// src/components/header/Header.js
+import React from "react";
+
+const Header = (props) => {
+ return (
+
+ );
+};
+
+export default Header;
+```
+
+Header'a benzer şekilde, tüm component'leri ilgili dosyalarına taşıyalım. index.html'deki tüm CSS dosyaları styles klasörüne taşınacak; her parça kendi dosyasına ayrıldıktan sonra styles klasörünü kontrol etmeye çalışın.
+
+## Fragment (Parça)
+
+Fragment'lar (Parçalar), JSX'te gereksiz üst element kullanmaktan kaçınmanın bir yoludur. Bir fragment uygulayalım. Fragment'ı react modülünden import ediyoruz. Aşağıda görüldüğü gibi React ve fragment'ı virgül ayırımı kullanarak birlikte import ettik:
+
+```js
+import React, { Fragment } from "react";
+
+const Skills = () => {
+ return (
+
+ HTML
+ CSS
+ JavaScript
+
+ );
+};
+const RequiredSkills = () => {
+ return (
+
+ );
+};
+```
+
+Fragment modülünü React'tan şu şekilde çıkarmak da mümkündür:
+
+```js
+import React from "react";
+
+const Skills = () => {
+ return (
+
+ HTML
+ CSS
+ JavaScript
+
+ );
+};
+
+const RequiredSkills = () => {
+ return (
+
+ );
+};
+```
+
+React'ın son sürümünde bu işaretler kullanılarak çıkarmadan veya import etmeden de yazılabilir (<> ):
+
+```js
+import React from "react";
+
+// Önerilen yöntem
+const Skills = () => {
+ return (
+ <>
+
HTML
+
CSS
+
JavaScript
+
+ );
+};
+
+const RequiredSkills = () => {
+ return (
+
+ );
+};
+```
+
+Class tabanlı component yaparken React.Component kullanıyorduk; bunun yerine sadece Component'i import ederek kodu daha temiz yazabiliriz. Bir örnek görelim:
+
+```js
+import React from "react";
+
+// Component'i import etmeden
+// Önerilmez
+class App extends React.Component {
+ render() {
+ return
30 Days of React ;
+ }
+}
+```
+
+```js
+import React, { Component } from "react";
+
+// Bu önerilen yöntemdir
+class App extends Component {
+ render() {
+ return
30 Days of React ;
+ }
+}
+```
+
+Harika iş çıkardınız. Beyniniz ve kaslarınız için bazı egzersizler yapma zamanı.
+
+# Egzersizler
+
+## Egzersizler: Seviye 1
+
+1. React Klasör Yapısı ve Dosya İsimlendirmesinin önemi nedir?
+2. Dosya nasıl dışa aktarılır (export edilir)?
+3. Dosya nasıl içe aktarılır (import edilir)?
+4. Bir component veya modül oluşturun ve named ya da default export ile dışa aktarın.
+5. Bir component veya modül oluşturun ve import edin.
+6. Sahip olduğunuz tüm component'leri farklı bir klasör yapısına taşıyın.
+
+## Egzersizler: Seviye 2
+
+1. Şimdiye kadar oluşturduğumuz component'leri kullanarak basit bir portföy yapın. 8. gün meydan okumasında yazdığımız fonksiyonu kullanarak karanlık mod (dark mode) uygulayın.
+
+## Egzersizler: Seviye 3
+
+Yakında
+
+🎉 TEBRİKLER! 🎉
+
+[<< Gün 9](../09_Gun_Kosullu_Render/09_kosullu_render.md) | [Gün 11 >>](../../11_Day_Events/11_events.md)
diff --git a/Turkish/readMe.md b/Turkish/readMe.md
index 35e00d6..9999ea9 100644
--- a/Turkish/readMe.md
+++ b/Turkish/readMe.md
@@ -15,15 +15,21 @@
Yazar: Asabeneh Yetayeh October, 2020
+
Ekim, 2020
-[Gün 2 >>](./02_Gun_Reacta_Giris/02_reacta_giris.md)
-
-| # Gün | Konular |
-| ----- | :------------------------------------------------------------------------------------------------: |
-| 02 | [React'a Giriş](./02_Gun_Reacta_Giris/02_reacta_giris.md) |
-| 03 | [Kurulum](./03_Gun_Kurulum/03_kurulum.md) |
-| 04 | [Bileşenler](./04_Gun_Bilesenler/04_bilesenler.md) |
-| 05 | [Props](./05_Gun_Props/05_props.md) |
+[Gün 1 >>](./01_Gun_JavaScript_Tazeleyici/01_javascript_tazeleyici.md)
+
+| # Gün | Konular |
+| ----- | :---------------------------------------------------------------------------------: |
+| 01 | [JavaScript Tazeleyici](./01_Gun_JavaScript_Tazeleyici/01_javascript_tazeleyici.md) |
+| 02 | [React'a Giriş](./02_Gun_Reacta_Giris/02_reacta_giris.md) |
+| 03 | [Kurulum](./03_Gun_Kurulum/03_kurulum.md) |
+| 04 | [Bileşenler](./04_Gun_Bilesenler/04_bilesenler.md) |
+| 05 | [Props](./05_Gun_Props/05_props.md) |
+| 06 | [Dizi Haritalama](./06_Gun_Dizi_Haritalama/06_dizi_haritalama.md) |
+| 07 | [Class Bileşenler](./07_Gun_Class_Bilesenler/07_class_bilesenler.md) |
+| 08 | [State (Durum)](./08_Gun_State/08_state.md) |
+| 09 | [Koşullu Render](./09_Gun_Kosullu_Render/09_kosullu_render.md) |
+| 10 | [Proje Klasör Yapısı](./10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md) |
+
+
+
+ 
+
+
+Yazar:
+Asabeneh Yetayeh