REACT Kısa Bir Giriş

Components (Bileşenler)

React dediğimiz zaman aklımıza gelecek ilk sözcük Component(Bileşen) dir. Çünkü React componentlardan oluşur ve genelde JavaScript classlarınn formundadır. React-Component classını genişleterek component oluşturulur. Küçük componentları bir araya getireek daha büyük componentlar oluşturabiliriz.
En basit tanımıyla React componentlarına JavaScript fonksiyonları diyebiliriz.

Klasik Hello World React.Component Classımızı oluşturalım. 

Component için methodları tanımlayabiliriz. Bizim şu andaki durumda sadece render() methodumuz var.

render() : React'ın ne göstermesini istiyorsak onu burada tanımlarız. Burada <h1> tag i içinde Hello World yazdırdık. 

ReactDOM.render() çağırarak ekrana yazdırırız. 

• Component isimleri büyük harfle başlar. Küçük harfli isimler HTML elementleri için kullanılır. 
• Her bir element bir takım özellikler alır bunlara props denir. Componentın içerisinde istediğimiz gibi isimlendirebiliriz. 
• React uygulamaların JSX kullanılır. Ne JavaScript nede HTML diyebiliirz. JSX JavaScript Extention. HTML e benzer bir yapıda kolayca React elementleri oluşturmamıza olanak sağlar. 
• Herhangi bir JSX bölümünde {} arasında JavaScript yazabiliriz. 

Props ve State 

State = private(özel) ve componentın içerisinden değiştirilebilir. 

Props = external(harici) ve componentın kendisi tarafından kontrol edilmez. Verileri kontrol eden üst seviyedeki hiyerarşiden component a aktarılır. 

Bir bileşen(component) kendi state ini direk olarak değiştirebilir ama propslarını direk olarak değiştiremez. 

Props 

React in en önemli özelliklerinden biri tekrar kullanılması. Bir kere component yazıp bir çok yerde kullanabiliriz, farklı kullanım şekilleriyle farklı mesajları farklı içeriklerle göstererek. 

Bu özelliği kullanabilmek içinde propslara ihtiyacımız var. 

Propsu component a gönderirken tagler içerisinde component ı gönderirken attribute olarak göndeririz.

<HelloWorl name = " Your name" />

Burada name bir props ve Your name değer.

Bir classın içerisinde propslara erişmek için this.props.name referansı kullanılır. Component ta kullanılacak yerde {} içerisinde yazılır. Böylelikle JSX  burada bir props olduğunu anlar ve ona göre davranır buna escaping denir. 

Propsları kullanarak istediğimiz değeri dışardan propslar aracılığıyla göndererek componentımızı kullanabiliriz. Ama componentın değeri değiştirmesini istiyorsak o zaman State kullanmamız gerekir. 

State

Verilerin değişmesini istiyorsak, mesela kullanıcının işlemlerine göre gibi state üzerinden işlem yaparız. 

setState()

State i değiştirmek için this.setState() çağırılır. yeni State arguman olarak gönderilir. 

Bir buton oluşturalım Butona basınca state güncellensin. 

Lifecycle Methods

State değiştiğinde neler olduğuna bakalım. 

• Componentın state i değiştiğinde yada props değerleri değiştiğinde , React componentWillReceive methodunu çalıştırır.
• Eğer state yada gönderilen propslar değişmişsen Reactin bir karar vermesi gerekir. Component DOM da güncellensin mi güncellenmesin mi? Bu yüzdende shouldComponentUpdate methodunu çağırır.Burada bollean döner true yada false. Trueda günceller false da güncellemez.
• Eğer shouldComponentUpdate özellikle çağırılmamışsa , React varsayılan olan bir takım şeyler yapar. 
• Önce, başka bir lifecycle methodu olan componentWillUpdate çağrılır. Burada React yeni çıktıyı , en son çıktıyla karşılaştırır.
• Eğer işlenmiş çıktı aynıysa hiçbirşey yapmaz.
• Ama farklıysa o zaman bunu tarayıcıya taşır DOM u günceller. 
• Herdurumda , güncellenme olsada olmasada en son lifecyle methodu olan componentDidUpdate çağrılır.