Kavramlar
Component :
En ufak işi yerine getiren görünümdeki elemanların bir araya gelmesiyle oluşan bir yapıdır.
Virtual DOM :
React’in oluşturduğu sanal DOM dur. Sayfa içinde sadece değişiklik olan kısmının render olmasına yardımcı olur.
JSX :
Javascriptin içine HTML yazmak için bir syntax’dır.
props :
Componentler arası veri aktarılmasını sağlayan sabit değişmeyen verilerdir. Sadece bir kere render edilirler.
key :
Döngülerde benzersiz bir anahtar belirmek için kullanılır. Döngülerde zorunludur.
propTypes :
Gönderdiğiniz propsların tipini tanımlamanızı sağlayan yapılardır.
isRequired :
Propslarınızın tipini belirlerken istediğiniz tipte gelmesini zorunlu kılmak içindir.
onOfType :
Propsların tiplerini çeşitlendirmek için kullanılır. Ör: Bir propsa hem array olsun hem de string olsun diyebilmek için kullanılır.
shape :
Gelen propsun tipi objeyse altında bulunan alanların tanımını yapmaya yarar.
constructor :
Class oluşturulduğunda çalışan ilk fonksiyondur. Super(props) ile kullanılır. Constructor propsu alır super e paslar sizde state sayesinde kullanırsınız.
state :
Sayfa üzerinde değişen, durumu her an belli olmayan ve her an değişebilme potansiyeli olan verilerdir. En tepede bir state oluştuysa onu proplar aracılığı ile taşırsınız.
setState :
state de bir değişiklik olduğunu React’e bildirme fonksiyonudur.
stateful :
Bir state’e sahip olan componenttir.
stateless :
Bir state’e sahip olmayan sabit componentlerdir (Ör: footer).
React Lifecycle :
Reactin işleyiş biçimidir. 4 bölümden oluşur: Initialization, mounting, updation ve unmounting.
componentWillMount() :
Render işleminden hemen önce çalışan fonksiyondur; burada state işlemi yapılamaz.
componentDidMount() :
Render işleminden sonra çalışan fonksiyondur.(genelde servis çağrılarının yapıldığı alandır).
shouldComponentUpdate(nextProps, nextState) :
True ve False şeklinde booleen değer return edilmelidir. Render işleminin koşula bağlamak içindir.
ComponentWillUpdate(nextProps, nextState) :
Render işleminden hemen önce ancak shouldComponentUpdatein True dönmesine göre çalışan metottur.
ComponentDidUpdate(prevProps, prevState) :
Render işleminden sonra ancak shouldComponentUpdatein True dönmesine göre çalışan metottur.
Fetch() :
Herhangi bir servise bağlanıp data çekmemize yarar.
Axios() :
Bir fetching kütüphanesidir. Get,post,delete ve asenkron işlemler yapmamızı sağlar.(bir sürü yardımcı fetch kütüphanesi var ama aralarında en iyisi olduğu söyleniyor).
BrowserRouter :
UI’ınızı URL ile senkronize etmeniz içindir. Projenizin en dış componentinde kapsayıcı olarak bulunmalıdır.
Route :
Bir konumun link ile eşleştiğinde bazı componentleri arayüzde oluşturmaktadır.
Exact :
Route’a property olarak geçilerek uygulanır. Amacı sayfaları ayrıştırmaktır. Bunu yazmazsanız sayfalar üst üste görünür.
Strict :
Belli bir yapıya zorlamak demektir. Path=”..” kısmında ne çağırdıysan Url’den aynı o şekilde çağrılması gerekir.
Link :
Bir Router nesnesidir. “to” parametresine verdiğimiz Url’de istediğimiz Route’a yönlendirme yapmamızı sağlar.
NavLink :
Link yerine kullanabileceğimiz alternatif bir özelliktir. (tıkladığımızın rengini css ini değiştirmek için kullanıyoruz)
Redirect :
Bir koşul anında başka bir yere yönlendirmek. (Ör: Logout olduğunda ana sayfaya yönlendirmesi)