Hera GraphQL API is complated

Mythology Of React Js

This repository is actually a reactjs tutorial repository. Each warehouse is named after a mythical god.

Give a Star! ⭐

If you like or are using this project to learn or start your solution, please give it a star. Thanks!

---

1. Hera
Hera is a birthday reminder application and Hera is a MERNG work.Uses MongoDb for database and GraphQL for backend api.Apollo-Server was used with this entry level study.

Guide ReactJs Release 1.2.0.0

Why Would You Use Ract ?

• Structure the "view" layer of your application
• Reusable components with their own state
• JSX — Dynamic markup
• Interactive UIs with Virtual DOM
• Performance and testing
• Very popular in the Industry

What Should You Know First ?

• You should have a good handle on JavaScript. I would not suggest jumping to React without learning JavaScript firs !

• Data types, variables, functions, loops, etc.
• Promises & asynchronous programming
• Array methods like ForEach() or Map()
• Fetch API & making http request

DOM vs Virtual DOM

DOM, Web sayfalarının bize görünmesini sağlayan html elemanlarının belirli bir düzenle bir arada bulunmasıdır. Virtual DOM ise React tarafından render edilen DOM'un bir kopyasının tutulmuş halidir. Klasik DOM şu şekilde davranır: Sayfada bir değişiklik olduğunda DOM bütün html'i tarar ve ilgili yerdeki değişimi gerçekleştirir. Ancak bu değişim talebi bir öneki taleple aynı olsa bile yeniden gerçekleştirir. Peki bunun sonu var mı ? Performansı nasıl etkiler?(tabi ki olumsuz) React ise DOM-VDOM arasında kıyaslama yapar ve sadece değişiklik olan alanda güncelleme yapar. Ve bu değişim talebi önceki durum ile aynı değilse güncellemeyi yapmaz.

Pure Functions && SideEffects ?

This defining topic is important. If we want to write clear and testable codes we should know this topic.
It is especially important in applications where we use redux.
What is Pure Function ? Function in below picture, it is a pure function bacause it has no external dependencies. It only works on the input parameters. It's not using any other third-party function which might be doing stuff and it's not also change any state.

• Pure functions are functions that return a new value based on their arguments.
• They do not contain requests with side effects such as database or io.
• They just compute a new value based on their arguments.
• When called more than once with the same arguments, it always returns the same value.
• Also, they do not change the values of the arguments. Instead, they return a new value.
  What is Impure Function ? Function in below picture, it is a impure function. We have the add function takes two parameters but it doesnt value.So it has a side effect. subtractWithRandom function is not pure function because it's not producing the same result for the same inputs. We always get a different result whenever we call that function.

• They can contain database or network connection requests.
• They can update the DOM when necessary.
• They can change the values of arguments that come to them.

Props

Props, en basit anlatımla bir componentten başka bir componente veri akışını sağlamak için kullandığımız anahtar kelimedir. Props'lar readonly'dir. Eğer bir functional component üzerinden erişiyorsak {props} class component üzerinden erişiyorsak {this.props} şeklinde olmalıdır.

• Props'lar sabit veriler oldukları için yalnızca sayfanın ilk yüklenişinde render edilirler.

State

State, bir componentle ilgili dataları taşıyan javascript objesidir.

• Sadece class component ile kullanılabilir. - Teknik olarak functional componentlerde de ‘hooks’ olarak kullanılabilir.
• State’de bir değişiklik yapmak istediğimizde render() metodu çalışır ve component render edilir.

* Bir component oluşturulduğunda state başlatılmalıdır ve state’ler sadece ve sadece ‘setState()‘ fonksiyonu ile güncellebilir.

StateFull and Stateless Components

Bir component statefull tanımlandığında React bu component'i diff algoritmasına dahile der. They are known also as: Container vs Presentational Components, smart vs Dumb Components StateFull component, veri değişimini kontrol eden-takip eden component'tir. Stateless component, prop'lar ile iletilen ya da render edilen veriyi gösterir.

• Notice the stateless component is written as a function component. (Bu yüzden mümkün oldukça basit ve stateless yazmaya çalışmalısın.)
• (?) Bir bileşeni yazmaya başladığımızda muhtemelen o bileşenin aslında ne olacağına, nasıl sonuçlanacağından emin olamayız (Statefull or stateless)
• Bir kullanıcının şu anki favroi şarkıları veya en yüksek puanları gibi bilgiler dinamik verilerdir. Bu durumda bir ara bileşenin veriyi tutumasını ve alt bileşenlere dağıtmasını hedefleyin. Bu durum olası bir hata durumunda her alt bileşeni kontrol etmek yerine sadece parent component'i kontrol etmeye olanak sağlar. Böylece Child bileşenin endişe etmesi gereken tek şey veriyi göstermek olur.
• Bazen child bileşenin zorunlu olmadığında durumu(state) yönetmesi çok daha uygun olur. Örneğin input child bileşen, sadece type kontrolü sağlıyor.
• Parent'in olabildiğince fazla bileşen tutmasını ve state'leri prop'lar aracılığıyla component'lere aktarmalısın.
• Since ReactJs 16.8 statefull is not automatically a class based component and functinonal component couldnt manage state. Functional component can manage state with usestate hook but the majority of your components should be presentational stateless components so functional components that dont manage state. so having a lot of dumb components is a good idea.

Class Based Components	Functional Components
extends to component	const XY = props=> {}
Access to state	useState() kullanarak state'e erişilebilir
Lifecycle Hooks (Class componentte state'e erişebilir ve onu değiştirebilir)	No Lifecycle Hooks
Access state and Props via "this" this.props.XY or this.state.XY	In functional components you get props as an arguament and therefore you can just use it like props.XY
Use if you need to manage state or access to lifecycle hooks and you dont want to use React Hooks	Use it in all other case

Component Lifecycles

• Only available in class base components
  The naming can be confusing but lifecycle .hooks have absolutely nothing to do with "React Hooks"
• When a component is created then first of all the constructor executes. Constructor içerisinde değişkenler initialize edilebilir. Ancak kesinlike sideEffect'e sebep olacak çağrılar yapılmamalıdır. SideEffect'e neden olan şeylerden birisi http istekleridir. Constructor'dan spnra getDerivedStateFrom method çalışır. bu method props değişkenini kontrol eder. Angular'daki ngOnchanges gibidir burada da sideEffect olusturacak seylerden kaçınmalısın. 3. aşamada render çalışır. Buradada http istek ya da timeout gibi sideEffect oluşturacak hareketler yapmamalısın.4. aşamada component didmount çalışır.
  ComponentDidMount: is a very important lifecycle hook which you will use a lot when you are working with class based components because you create side effect. That is typical hook you would use for making http request to get new data from the web. What you shpuldnt do in here is update state. So dont call set state in here unless it's in. Let's say the then block of a promise after you sent an http request but dont call setsyate in here scynhronously. Çünkü render eder ve bu da performansu etkiler.

Hooks

Hook Nedir? Hook, React özelliklerini “bağlamanıza” izin veren özel bir fonksiyondur. Örneğin useState, React state’ini fonksiyon bileşenlerine eklemenize izin veren bir Hook’tur.
## UseState: That hook is just a function and it's going to allow us to use a piece of state inside this functional component. Bir başlangıç değeri almak ister.

import React, { useState } from 'react';
function Example() {
// "count" adında yeni bir state değişkeni tanımlayın.
const [count, setCount] = useState(0);}


useState‘i çağırmak ne işe yarar? Bu, yeni bir “state değişkeni” tanımlar. Değişkenimizin adı count; fakat farklı bir şekilde de (örneğin banana) çağırabilirdik. Bu yöntemle fonksiyon çağrıları arasında verilerinizi koruyabilirsiniz.

• useState ise this.state‘in sınıfta sağladığı özellikleri kullanmanın yeni bir yoludur. Normalde değişkenler fonksiyon bitiminde “kaybolur”; fakat state değişkenleri React tarafından korunur.

UseEffect

Fonksiyonel bileşenlerde kullanırız. You can add it anywhere in your functional component body and useEffect as sa default takes a function. Callback funtion'ı parametre olarak alır. Şöyle ki: useEffect(()=>{})

• UseEffect doğru şekilde kullanılmalıdır çünkü devamlı ayağa kalkar. It combines componentDidMount and componentDidUpdate
• Peki bu devamlı değişimi nasıl kontrol edebiliriz ? etkileneceği değeri set edebiliriz eğer boş parametre ([]) geçersek render'da sadece bir kez çalışır.

Memo

Memo daha önce shouldComponentUpdate methodu ile yapabildiğimiz sürekli render işlemini engellemeyi daha kolay bir hale getirir. İstenmeyen re-render işlemlerinin önüne geçmek için kullanılır. shouldComponentdidUpdate eski sürümde kullanılır ve modern bir yaklaşım değildir. shouldcomponentUpdate çok güçlü bir özelliktir ancak yalnızca class based wbileşenlerde kullanılır. Yalnız unutma ki bunlar extra kontrollerdir ve performansı doğruan etkiler. Diyelim ki 50 tane propsun var 50si için if yazıp kontrol mu edeceksin bunun onune gecmek içinde pureComponent kalıtımını kullanabilirim

Context API (Ağaca veri yaymak)

Context, prop'ları her seviyede manuel olarak geçmek zorunda kalmadan b...

Eros v2 is complated

Eros

This work is practical views of reactJs Hooks. Using hooks: useEffect, useState, useContext.

• Restyled add-form with flex view
• Implemented contextapi for add form toggle event)

Eros is complated

Eros

This work is practical views of reactJs Hooks.

Guide ReactJs Release 1.2

Why Would You Use Ract ?

• Structure the "view" layer of your application
• Reusable components with their own state
• JSX — Dynamic markup
• Interactive UIs with Virtual DOM
• Performance and testing
• Very popular in the Industry

What Should You Know First ?

• You should have a good handle on JavaScript. I would not suggest jumping to React without learning JavaScript firs !

• Data types, variables, functions, loops, etc.
• Promises & asynchronous programming
• Array methods like ForEach() or Map()
• Fetch API & making http request

DOM vs Virtual DOM

DOM, Web sayfalarının bize görünmesini sağlayan html elemanlarının belirli bir düzenle bir arada bulunmasıdır. Virtual DOM ise React tarafından render edilen DOM'un bir kopyasının tutulmuş halidir. Klasik DOM şu şekilde davranır: Sayfada bir değişiklik olduğunda DOM bütün html'i tarar ve ilgili yerdeki değişimi gerçekleştirir. Ancak bu değişim talebi bir öneki taleple aynı olsa bile yeniden gerçekleştirir. Peki bunun sonu var mı ? Performansı nasıl etkiler?(tabi ki olumsuz) React ise DOM-VDOM arasında kıyaslama yapar ve sadece değişiklik olan alanda güncelleme yapar. Ve bu değişim talebi önceki durum ile aynı değilse güncellemeyi yapmaz.

Props

Props, en basit anlatımla bir componentten başka bir componente veri akışını sağlamak için kullandığımız anahtar kelimedir. Props'lar readonly'dir. Eğer bir functional component üzerinden erişiyorsak {props} class component üzerinden erişiyorsak {this.props} şeklinde olmalıdır.

• Props'lar sabit veriler oldukları için yalnızca sayfanın ilk yüklenişinde render edilirler.

State

State, bir componentle ilgili dataları taşıyan javascript objesidir.

• Sadece class component ile kullanılabilir. - Teknik olarak functional componentlerde de ‘hooks’ olarak kullanılabilir.
• State’de bir değişiklik yapmak istediğimizde render() metodu çalışır ve component render edilir.

* Bir component oluşturulduğunda state başlatılmalıdır ve state’ler sadece ve sadece ‘setState()‘ fonksiyonu ile güncellebilir.

StateFull and Stateless Components

Bir component statefull tanımlandığında React bu component'i diff algoritmasına dahile der. They are known also as: Container vs Presentational Components, smart vs Dumb Components StateFull component, veri değişimini kontrol eden-takip eden component'tir. Stateless component, prop'lar ile iletilen ya da render edilen veriyi gösterir.

• Notice the stateless component is written as a function component. (Bu yüzden mümkün oldukça basit ve stateless yazmaya çalışmalısın.)
• (?) Bir bileşeni yazmaya başladığımızda muhtemelen o bileşenin aslında ne olacağına, nasıl sonuçlanacağından emin olamayız (Statefull or stateless)
• Bir kullanıcının şu anki favroi şarkıları veya en yüksek puanları gibi bilgiler dinamik verilerdir. Bu durumda bir ara bileşenin veriyi tutumasını ve alt bileşenlere dağıtmasını hedefleyin. Bu durum olası bir hata durumunda her alt bileşeni kontrol etmek yerine sadece parent component'i kontrol etmeye olanak sağlar. Böylece Child bileşenin endişe etmesi gereken tek şey veriyi göstermek olur.
• Bazen child bileşenin zorunlu olmadığında durumu(state) yönetmesi çok daha uygun olur. Örneğin input child bileşen, sadece type kontrolü sağlıyor.
• Parent'in olabildiğince fazla bileşen tutmasını ve state'leri prop'lar aracılığıyla component'lere aktarmalısın.
• Since ReactJs 16.8 statefull is not automatically a class based component and functinonal component couldnt manage state. Functional component can manage state with usestate hook but the majority of your components should be presentational stateless components so functional components that dont manage state. so having a lot of dumb components is a good idea.

Class Based Components	Functional Components
extends to component	const XY = props=> {}
Access to state	useState() kullanarak state'e erişilebilir
Lifecycle Hooks (Class componentte state'e erişebilir ve onu değiştirebilir)	No Lifecycle Hooks
Access state and Props via "this" this.props.XY or this.state.XY	In functional components you get props as an arguament and therefore you can just use it like props.XY
Use if you need to manage state or access to lifecycle hooks and you dont want to use React Hooks	Use it in all other case

Component Lifecycles

• Only available in class base components
  The naming can be confusing but lifecycle .hooks have absolutely nothing to do with "React Hooks"
• When a component is created then first of all the constructor executes. Constructor içerisinde değişkenler initialize edilebilir. Ancak kesinlike sideEffect'e sebep olacak çağrılar yapılmamalıdır. SideEffect'e neden olan şeylerden birisi http istekleridir. Constructor'dan spnra getDerivedStateFrom method çalışır. bu method props değişkenini kontrol eder. Angular'daki ngOnchanges gibidir burada da sideEffect olusturacak seylerden kaçınmalısın. 3. aşamada render çalışır. Buradada http istek ya da timeout gibi sideEffect oluşturacak hareketler yapmamalısın.4. aşamada component didmount çalışır.
  ComponentDidMount: is a very important lifecycle hook which you will use a lot when you are working with class based components because you create side effect. That is typical hook you would use for making http request to get new data from the web. What you shpuldnt do in here is update state. So dont call set state in here unless it's in. Let's say the then block of a promise after you sent an http request but dont call setsyate in here scynhronously. Çünkü render eder ve bu da performansu etkiler.

Hooks

Hook Nedir? Hook, React özelliklerini “bağlamanıza” izin veren özel bir fonksiyondur. Örneğin useState, React state’ini fonksiyon bileşenlerine eklemenize izin veren bir Hook’tur.
## UseState: That hook is just a function and it's going to allow us to use a piece of state inside this functional component. Bir başlangıç değeri almak ister.

import React, { useState } from 'react';
function Example() {
// "count" adında yeni bir state değişkeni tanımlayın.
const [count, setCount] = useState(0);}


useState‘i çağırmak ne işe yarar? Bu, yeni bir “state değişkeni” tanımlar. Değişkenimizin adı count; fakat farklı bir şekilde de (örneğin banana) çağırabilirdik. Bu yöntemle fonksiyon çağrıları arasında verilerinizi koruyabilirsiniz.

• useState ise this.state‘in sınıfta sağladığı özellikleri kullanmanın yeni bir yoludur. Normalde değişkenler fonksiyon bitiminde “kaybolur”; fakat state değişkenleri React tarafından korunur.

UseEffect

Fonksiyonel bileşenlerde kullanırız. You can add it anywhere in your functional component body and useEffect as sa default takes a function. Callback funtion'ı parametre olarak alır. Şöyle ki: useEffect(()=>{})

• UseEffect doğru şekilde kullanılmalıdır çünkü devamlı ayağa kalkar. It combines componentDidMount and componentDidUpdate
• Peki bu devamlı değişimi nasıl kontrol edebiliriz ? etkileneceği değeri set edebiliriz eğer boş parametre ([]) geçersek render'da sadece bir kez çalışır.

Memo

Memo daha önce shouldComponentUpdate methodu ile yapabildiğimiz sürekli render işlemini engellemeyi daha kolay bir hale getirir. İstenmeyen re-render işlemlerinin önüne geçmek için kullanılır. shouldComponentdidUpdate eski sürümde kullanılır ve modern bir yaklaşım değildir. shouldcomponentUpdate çok güçlü bir özelliktir ancak yalnızca class based wbileşenlerde kullanılır. Yalnız unutma ki bunlar extra kontrollerdir ve performansı doğruan etkiler. Diyelim ki 50 tane propsun var 50si için if yazıp kontrol mu edeceksin bunun onune gecmek içinde pureComponent kalıtımını kullanabilirim

Context API (Ağaca veri yaymak)

Context, prop'ları her seviyede manuel olarak geçmek zorunda kalmadan bileşen ağacı üzerinden veri iletmenin bir yolunu sunar.

• Normal bir React uygulamasında veri proplar aracılığıyla yukarıdan aşağıya taşınır.
• Context; mevcut kullanıcıyı doğrulama, tema veya dil seçimi gibi Reactbileşen ağacında global olarak düşünülebilecek verileri paylaşmak için kullanılır. Context kullanarak ara öğelerden prop'ları geçirmekten kaçınırız.
• Herbir bileşenin içinden açıkça geçmeden bileşen ağacının derinliklerine bir value geçmemizi sağlar.
• Context bileşeninin tekrar kullanılırlığını olumsuz yönde etkiler. Dolayısıyla ölçülü kullanılmalıdır.
• React context nesnesine abone bir bileşen oluşturduğunda context'in mevcut değerini ağaçtaki en yakın Provider'dan okur.
• Her Context nesnesi, tüketici bileşenlerin context güncellemelerine abone olmasını sağlayan bir React Provider bileşeni ile birlikte gelir.
• Provider bileşeni, bu Provider’ın soyundan gelen tüketici bileşenlerine geçirilecek olan bir value prop’unu kabul eder.
• Birçok tüketici bir Provider’a bağlanabilir.
• Provider’lar ağaçtaki daha derin değerleri değiştirmek için iç içe geçirilebilirler.
• Bir Provider’ın soyundan gelen tüm tüketiciler, Provider’ın value prop’u her değiştiğinde yeniden oluşturulur.
• Provider’ın soyundan gelen tüketicilere (.contextType ve useContext de dahil olmak üzere) yayılması,shouldComponentUpdate metoduna tabi değildir, dolayısıyla herhangi bir bileşen güncellemeyi önlediğinde bile tüketici güncellenir.
  
• Context data update edilecekse, contextapi içerisinde update,click,change... eventler yazılır bu event...

Guide ReactJs Release 1.1

DOM vs Virtual DOM

DOM, Web sayfalarının bize görünmesini sağlayan html elemanlarının belirli bir düzenle bir arada bulunmasıdır. Virtual DOM ise React tarafından render edilen DOM'un bir kopyasının tutulmuş halidir. Klasik DOM şu şekilde davranır: Sayfada bir değişiklik olduğunda DOM bütün html'i tarar ve ilgili yerdeki değişimi gerçekleştirir. Ancak bu değişim talebi bir öneki taleple aynı olsa bile yeniden gerçekleştirir. Peki bunun sonu var mı ? Performansı nasıl etkiler?(tabi ki olumsuz) React ise DOM-VDOM arasında kıyaslama yapar ve sadece değişiklik olan alanda güncelleme yapar. Ve bu değişim talebi önceki durum ile aynı değilse güncellemeyi yapmaz.

Props

Props, en basit anlatımla bir componentten başka bir componente veri akışını sağlamak için kullandığımız anahtar kelimedir. Props'lar readonly'dir. Eğer bir functional component üzerinden erişiyorsak {props} class component üzerinden erişiyorsak {this.props} şeklinde olmalıdır.

• Props'lar sabit veriler oldukları için yalnızca sayfanın ilk yüklenişinde render edilirler.

State

State, bir componentle ilgili dataları taşıyan javascript objesidir.

• Sadece class component ile kullanılabilir. - Teknik olarak functional componentlerde de ‘hooks’ olarak kullanılabilir.
• State’de bir değişiklik yapmak istediğimizde render() metodu çalışır ve component render edilir.

* Bir component oluşturulduğunda state başlatılmalıdır ve state’ler sadece ve sadece ‘setState()‘ fonksiyonu ile güncellebilir.

StateFull and Stateless Components

Bir component statefull tanımlandığında React bu component'i diff algoritmasına dahile der. They are known also as: Container vs Presentational Components, smart vs Dumb Components StateFull component, veri değişimini kontrol eden-takip eden component'tir. Stateless component, prop'lar ile iletilen ya da render edilen veriyi gösterir.

• Notice the stateless component is written as a function component. (Bu yüzden mümkün oldukça basit ve stateless yazmaya çalışmalısın.)
• (?) Bir bileşeni yazmaya başladığımızda muhtemelen o bileşenin aslında ne olacağına, nasıl sonuçlanacağından emin olamayız (Statefull or stateless)
• Bir kullanıcının şu anki favroi şarkıları veya en yüksek puanları gibi bilgiler dinamik verilerdir. Bu durumda bir ara bileşenin veriyi tutumasını ve alt bileşenlere dağıtmasını hedefleyin. Bu durum olası bir hata durumunda her alt bileşeni kontrol etmek yerine sadece parent component'i kontrol etmeye olanak sağlar. Böylece Child bileşenin endişe etmesi gereken tek şey veriyi göstermek olur.
• Bazen child bileşenin zorunlu olmadığında durumu(state) yönetmesi çok daha uygun olur. Örneğin input child bileşen, sadece type kontrolü sağlıyor.
• Parent'in olabildiğince fazla bileşen tutmasını ve state'leri prop'lar aracılığıyla component'lere aktarmalısın.
• Since ReactJs 16.8 statefull is not automatically a class based component and functinonal component couldnt manage state. Functional component can manage state with usestate hook but the majority of your components should be presentational stateless components so functional components that dont manage state. so having a lot of dumb components is a good idea.

Class Based Components	Functional Components
extends to component	const XY = props=> {}
Access to state	useState() kullanarak state'e erişilebilir
Lifecycle Hooks (Class componentte state'e erişebilir ve onu değiştirebilir)	No Lifecycle Hooks
Access state and Props via "this" this.props.XY or this.state.XY	In functional components you get props as an arguament and therefore you can just use it like props.XY
Use if you need to manage state or access to lifecycle hooks and you dont want to use React Hooks	Use it in all other case

Component Lifecycles

• Only available in class base components
  The naming can be confusing but lifecycle .hooks have absolutely nothing to do with "React Hooks"
• When a component is created then first of all the constructor executes. Constructor içerisinde değişkenler initialize edilebilir. Ancak kesinlike sideEffect'e sebep olacak çağrılar yapılmamalıdır. SideEffect'e neden olan şeylerden birisi http istekleridir. Constructor'dan spnra getDerivedStateFrom method çalışır. bu method props değişkenini kontrol eder. Angular'daki ngOnchanges gibidir burada da sideEffect olusturacak seylerden kaçınmalısın. 3. aşamada render çalışır. Buradada http istek ya da timeout gibi sideEffect oluşturacak hareketler yapmamalısın.4. aşamada component didmount çalışır.
  ComponentDidMount: is a very important lifecycle hook which you will use a lot when you are working with class based components because you create side effect. That is typical hook you would use for making http request to get new data from the web. What you shpuldnt do in here is update state. So dont call set state in here unless it's in. Let's say the then block of a promise after you sent an http request but dont call setsyate in here scynhronously. Çünkü render eder ve bu da performansu etkiler.

Hooks

Hook Nedir? Hook, React özelliklerini “bağlamanıza” izin veren özel bir fonksiyondur. Örneğin useState, React state’ini fonksiyon bileşenlerine eklemenize izin veren bir Hook’tur.
## UseState: That hook is just a function and it's going to allow us to use a piece of state inside this functional component. Bir başlangıç değeri almak ister.

import React, { useState } from 'react';
function Example() {
// "count" adında yeni bir state değişkeni tanımlayın.
const [count, setCount] = useState(0);}


useState‘i çağırmak ne işe yarar? Bu, yeni bir “state değişkeni” tanımlar. Değişkenimizin adı count; fakat farklı bir şekilde de (örneğin banana) çağırabilirdik. Bu yöntemle fonksiyon çağrıları arasında verilerinizi koruyabilirsiniz.

• useState ise this.state‘in sınıfta sağladığı özellikleri kullanmanın yeni bir yoludur. Normalde değişkenler fonksiyon bitiminde “kaybolur”; fakat state değişkenleri React tarafından korunur.

UseEffect

Fonksiyonel bileşenlerde kullanırız. You can add it anywhere in your functional component body and useEffect as sa default takes a function. Callback funtion'ı parametre olarak alır. Şöyle ki: useEffect(()=>{})

• UseEffect doğru şekilde kullanılmalıdır çünkü devamlı ayağa kalkar. It combines componentDidMount and componentDidUpdate
• Peki bu devamlı değişimi nasıl kontrol edebiliriz ? etkileneceği değeri set edebiliriz eğer boş parametre ([]) geçersek render'da sadece bir kez çalışır.

Memo

Memo daha önce shouldComponentUpdate methodu ile yapabildiğimiz sürekli render işlemini engellemeyi daha kolay bir hale getirir. İstenmeyen re-render işlemlerinin önüne geçmek için kullanılır. shouldComponentdidUpdate eski sürümde kullanılır ve modern bir yaklaşım değildir. shouldcomponentUpdate çok güçlü bir özelliktir ancak yalnızca class based wbileşenlerde kullanılır. Yalnız unutma ki bunlar extra kontrollerdir ve performansı doğruan etkiler. Diyelim ki 50 tane propsun var 50si için if yazıp kontrol mu edeceksin bunun onune gecmek içinde pureComponent kalıtımını kullanabilirim

Context API (Ağaca veri yaymak)

Context, prop'ları her seviyede manuel olarak geçmek zorunda kalmadan bileşen ağacı üzerinden veri iletmenin bir yolunu sunar.

• Normal bir React uygulamasında veri proplar aracılığıyla yukarıdan aşağıya taşınır.
• Context; mevcut kullanıcıyı doğrulama, tema veya dil seçimi gibi Reactbileşen ağacında global olarak düşünülebilecek verileri paylaşmak için kullanılır. Context kullanarak ara öğelerden prop'ları geçirmekten kaçınırız.
• Herbir bileşenin içinden açıkça geçmeden bileşen ağacının derinliklerine bir value geçmemizi sağlar.
• Context bileşeninin tekrar kullanılırlığını olumsuz yönde etkiler. Dolayısıyla ölçülü kullanılmalıdır.
• React context nesnesine abone bir bileşen oluşturduğunda context'in mevcut değerini ağaçtaki en yakın Provider'dan okur.
• Her Context nesnesi, tüketici bileşenlerin context güncellemelerine abone olmasını sağlayan bir React Provider bileşeni ile birlikte gelir.
• Provider bileşeni, bu Provider’ın soyundan gelen tüketici bileşenlerine geçirilecek olan bir value prop’unu kabul eder.
• Birçok tüketici bir Provider’a bağlanabilir.
• Provider’lar ağaçtaki daha derin değerleri değiştirmek için iç içe geçirilebilirler.
• Bir Provider’ın soyundan gelen tüm tüketiciler, Provider’ın value prop’u her değiştiğinde yeniden oluşturulur.
• Provider’ın soyundan gelen tüketicilere (.contextType ve useContext de dahil olmak üzere) yayılması,shouldComponentUpdate metoduna tabi değildir, dolayısıyla herhangi bir bileşen güncellemeyi önlediğinde bile tüketici güncellenir.
  
• Context data update edilecekse, contextapi içerisinde update,click,change... eventler yazılır bu eventler üzerinden state değişimi yapılır ve consume edilirkende alt bileşenler yine bu event'lara erişerek context data'yı güncellerler.

• Understanding the Base Features & Syntax
• Working with Lists and Conditionals
• Styling React Components & Elements (Eğer v2 de çalışılıyorsa proje ject edildiğinde css dosyaları file.module.css şeklinde kaydedilirse webpack.config.js dosyasında değişim yapmadan çalışılmaya devam edilebilir.)
• Diving Deeper into Components & React Internals

Helpfull Websites

tr.reactjs.org
...

Guide ReactJs Release 1

DOM vs Virtual DOM

DOM, Web sayfalarının bize görünmesini sağlayan html elemanlarının belirli bir düzenle bir arada bulunmasıdır. Virtual DOM ise React tarafından render edilen DOM'un bir kopyasının tutulmuş halidir. Klasik DOM şu şekilde davranır: Sayfada bir değişiklik olduğunda DOM bütün html'i tarar ve ilgili yerdeki değişimi gerçekleştirir. Ancak bu değişim talebi bir öneki taleple aynı olsa bile yeniden gerçekleştirir. Peki bunun sonu var mı ? Performansı nasıl etkiler?(tabi ki olumsuz) React ise DOM-VDOM arasında kıyaslama yapar ve sadece değişiklik olan alanda güncelleme yapar. Ve bu değişim talebi önceki durum ile aynı değilse güncellemeyi yapmaz.

Props

Props, en basit anlatımla bir componentten başka bir componente veri akışını sağlamak için kullandığımız anahtar kelimedir. Props'lar readonly'dir. Eğer bir functional component üzerinden erişiyorsak {props} class component üzerinden erişiyorsak {this.props} şeklinde olmalıdır.

• Props'lar sabit veriler oldukları için yalnızca sayfanın ilk yüklenişinde render edilirler.

State

State, bir componentle ilgili dataları taşıyan javascript objesidir.

• Sadece class component ile kullanılabilir. - Teknik olarak functional componentlerde de ‘hooks’ olarak kullanılabilir.
• State’de bir değişiklik yapmak istediğimizde render() metodu çalışır ve component render edilir.

* Bir component oluşturulduğunda state başlatılmalıdır ve state’ler sadece ve sadece ‘setState()‘ fonksiyonu ile güncellebilir.

StateFull and Stateless Components

Bir component statefull tanımlandığında React bu component'i diff algoritmasına dahile der. They are known also as: Container vs Presentational Components, smart vs Dumb Components StateFull component, veri değişimini kontrol eden-takip eden component'tir. Stateless component, prop'lar ile iletilen ya da render edilen veriyi gösterir.

• Notice the stateless component is written as a function component. (Bu yüzden mümkün oldukça basit ve stateless yazmaya çalışmalısın.)
• (?) Bir bileşeni yazmaya başladığımızda muhtemelen o bileşenin aslında ne olacağına, nasıl sonuçlanacağından emin olamayız (Statefull or stateless)
• Bir kullanıcının şu anki favroi şarkıları veya en yüksek puanları gibi bilgiler dinamik verilerdir. Bu durumda bir ara bileşenin veriyi tutumasını ve alt bileşenlere dağıtmasını hedefleyin. Bu durum olası bir hata durumunda her alt bileşeni kontrol etmek yerine sadece parent component'i kontrol etmeye olanak sağlar. Böylece Child bileşenin endişe etmesi gereken tek şey veriyi göstermek olur.
• Bazen child bileşenin zorunlu olmadığında durumu(state) yönetmesi çok daha uygun olur. Örneğin input child bileşen, sadece type kontrolü sağlıyor.
• Parent'in olabildiğince fazla bileşen tutmasını ve state'leri prop'lar aracılığıyla component'lere aktarmalısın.
• Since ReactJs 16.8 statefull is not automatically a class based component and functinonal component couldnt manage state. Functional component can manage state with usestate hook but the majority of your components should be presentational stateless components so functional components that dont manage state. so having a lot of dumb components is a good idea.

Class Based Components	Functional Components
extends to component	const XY = props=> {}
Access to state	useState() kullanarak state'e erişilebilir
Lifecycle Hooks (Class componentte state'e erişebilir ve onu değiştirebilir)	No Lifecycle Hooks
Access state and Props via "this" this.props.XY or this.state.XY	In functional components you get props as an arguament and therefore you can just use it like props.XY
Use if you need to manage state or access to lifecycle hooks and you dont want to use React Hooks	Use it in all other case

Component Lifecycles

• Only available in class base components
  The naming can be confusing but lifecycle .hooks have absolutely nothing to do with "React Hooks"
• When a component is created then first of all the constructor executes. Constructor içerisinde değişkenler initialize edilebilir. Ancak kesinlike sideEffect'e sebep olacak çağrılar yapılmamalıdır. SideEffect'e neden olan şeylerden birisi http istekleridir. Constructor'dan spnra getDerivedStateFrom method çalışır. bu method props değişkenini kontrol eder. Angular'daki ngOnchanges gibidir burada da sideEffect olusturacak seylerden kaçınmalısın. 3. aşamada render çalışır. Buradada http istek ya da timeout gibi sideEffect oluşturacak hareketler yapmamalısın.4. aşamada component didmount çalışır.
  ComponentDidMount: is a very important lifecycle hook which you will use a lot when you are working with class based components because you create side effect. That is typical hook you would use for making http request to get new data from the web. What you shpuldnt do in here is update state. So dont call set state in here unless it's in. Let's say the then block of a promise after you sent an http request but dont call setsyate in here scynhronously. Çünkü render eder ve bu da performansu etkiler.

Hooks

Hook Nedir? Hook, React özelliklerini “bağlamanıza” izin veren özel bir fonksiyondur. Örneğin useState, React state’ini fonksiyon bileşenlerine eklemenize izin veren bir Hook’tur.
## UseState: That hook is just a function and it's going to allow us to use a piece of state inside this functional component. Bir başlangıç değeri almak ister.

import React, { useState } from 'react';
function Example() {
// "count" adında yeni bir state değişkeni tanımlayın.
const [count, setCount] = useState(0);}


useState‘i çağırmak ne işe yarar? Bu, yeni bir “state değişkeni” tanımlar. Değişkenimizin adı count; fakat farklı bir şekilde de (örneğin banana) çağırabilirdik. Bu yöntemle fonksiyon çağrıları arasında verilerinizi koruyabilirsiniz.

• useState ise this.state‘in sınıfta sağladığı özellikleri kullanmanın yeni bir yoludur. Normalde değişkenler fonksiyon bitiminde “kaybolur”; fakat state değişkenleri React tarafından korunur.

UseEffect

Fonksiyonel bileşenlerde kullanırız. You can add it anywhere in your functional component body and useEffect as sa default takes a function. Callback funtion'ı parametre olarak alır. Şöyle ki: useEffect(()=>{})

• UseEffect doğru şekilde kullanılmalıdır çünkü devamlı ayağa kalkar. It combines componentDidMount and componentDidUpdate
• Peki bu devamlı değişimi nasıl kontrol edebiliriz ? etkileneceği değeri set edebiliriz eğer boş parametre ([]) geçersek render'da sadece bir kez çalışır.

Memo

Memo daha önce shouldComponentUpdate methodu ile yapabildiğimiz sürekli render işlemini engellemeyi daha kolay bir hale getirir. İstenmeyen re-render işlemlerinin önüne geçmek için kullanılır. shouldComponentdidUpdate eski sürümde kullanılır ve modern bir yaklaşım değildir. shouldcomponentUpdate çok güçlü bir özelliktir ancak yalnızca class based wbileşenlerde kullanılır. Yalnız unutma ki bunlar extra kontrollerdir ve performansı doğruan etkiler. Diyelim ki 50 tane propsun var 50si için if yazıp kontrol mu edeceksin bunun onune gecmek içinde pureComponent kalıtımını kullanabilirim

Context API (Ağaca veri yaymak)

Context, prop'ları her seviyede manuel olarak geçmek zorunda kalmadan bileşen ağacı üzerinden veri iletmenin bir yolunu sunar.

• Normal bir React uygulamasında veri proplar aracılığıyla yukarıdan aşağıya taşınır.
• Context; mevcut kullanıcıyı doğrulama, tema veya dil seçimi gibi Reactbileşen ağacında global olarak düşünülebilecek verileri paylaşmak için kullanılır. Context kullanarak ara öğelerden prop'ları geçirmekten kaçınırız.
• Herbir bileşenin içinden açıkça geçmeden bileşen ağacının derinliklerine bir value geçmemizi sağlar.
• Context bileşeninin tekrar kullanılırlığını olumsuz yönde etkiler. Dolayısıyla ölçülü kullanılmalıdır.
• React context nesnesine abone bir bileşen oluşturduğunda context'in mevcut değerini ağaçtaki en yakın Provider'dan okur.
• Her Context nesnesi, tüketici bileşenlerin context güncellemelerine abone olmasını sağlayan bir React Provider bileşeni ile birlikte gelir.
• Provider bileşeni, bu Provider’ın soyundan gelen tüketici bileşenlerine geçirilecek olan bir value prop’unu kabul eder.
• Birçok tüketici bir Provider’a bağlanabilir.
• Provider’lar ağaçtaki daha derin değerleri değiştirmek için iç içe geçirilebilirler.
• Bir Provider’ın soyundan gelen tüm tüketiciler, Provider’ın value prop’u her değiştiğinde yeniden oluşturulur.
• Provider’ın soyundan gelen tüketicilere (.contextType ve useContext de dahil olmak üzere) yayılması,shouldComponentUpdate metoduna tabi değildir, dolayısıyla herhangi bir bileşen güncellemeyi önlediğinde bile tüketici güncellenir.
  
• Context data update edilecekse, contextapi içerisinde update,click,change... eventler yazılır bu eventler üzerinden state değişimi yapılır ve consume edilirkende alt bileşenler yine bu event'lara erişerek context data'yı güncellerler.

• Understanding the Base Features & Syntax
• Working with Lists and Conditionals
• Styling React Components & Elements (Eğer v2 de çalışılıyorsa proje ject edildiğinde css dosyaları file.module.css şeklinde kaydedilirse webpack.config.js dosyasında değişim yapmadan çalışılmaya devam edilebilir.)
• Diving Deeper into Components & React Internals

Helpfull Websites

tr.reactjs.org
styled-components
[The Net Ninja React Context & Hooks Tutorial](https://www.youtube.c...

Hestia is complated

Hestia

Hestia is a reactjs application that stores a list of books using localStorage. React Hooks are discussed in this study. Hooks used: useState, useContext, useReducer, useEffect. Context Api implementation is also demonstrated on functional and class-based components.

---

Myth V2 is complated

Myth

Myth is an application that introduces mythological creatures. The use of Redux pattern with Reactjs is demonstrated. Axios library was used with the help of json-server and data reading was done. React-Pagination is used.

Component styles have been rewritten.
Search operation is defined on the list.

Myth is complated

Myth

Myth is an application that introduces mythological creatures. The use of Redux pattern with Reactjs is demonstrated. Axios library was used with the help of json-server and data reading was done. React-Pagination is used.

---

Helpfull Websites

ReactJs-Redux Application
Reactjs-Paginatore