İlginizi Çekebilir
  1. Ana Sayfa
  2. Open Source
  3. React – Props ve State’lerle Çalışma
k_zd_m_

React – Props ve State’lerle Çalışma

4
Ruijie Teknoloji Günü

Props : Bir component’e dışarıdan gelen verinin tutulduğu yapıdır. Props’lar sayesinde componentler arasında değer taşıması gerçekleştirilebilir.
Örneğin bir listeden seçilen Item’ın unique id’si alınarak, farklı bir componente o id ile detay bilgilerine ulaşılması işleminde id’ye ulaşılması props’lar sayesinde olur.
Burada önemli olan nokta, props’dan alınacak değişken adı ne ise tanımlanan değişken adının da aynı olmasıdır. Bir diğer nokta ise props’ların taşındığı component içersinde değiştirilemiyor olmasıdır.
Müşterilerin listelendiği CustomerList.js componenti aşağıdaki şekildedir. Bu componentlerde müşteri ismini, CustomerDetail.js component’inde ise müşteriye ait unique id’nin nasıl taşındığına bakacağız.
Burada customer adında bir liste oluşturduk ve return ifadesinin içerisinde de bu listedeki name değişken değerlerini listeledik.
Burada function component kullanmış olduk, bu sebeple sadece return değeri yer almaktadır.
Bir diğer nokta ise, listenin her bir item’ı için customers.map ifadesi kullanılmış oldu, bir diğer deyişle for döngüsü yazmış olduk. Burada önemli olan nokta ise, listenin her bir item’ı için unique bir key set edilmiş olmasıdır, aksi durumda key set edilmeden kullanılmadığı durumda console’dan baktığınızda unique bir id’nin set edilmesi için uyarı mesajı görürsünüz.
CustomerList.js

Burada customer adında bir liste oluşturduk ve return ifadesinin içerisinde de bu listedeki name değişken değerlerini listeledik.
Burada function component kullanmış olduk, bu sebeple sadece return değeri yer almaktadır.
Bir diğer nokta ise, listenin her bir item’ı için customers.map ifadesi kullanılmış oldu, bir diğer deyişle for döngüsü yazmış olduk. Burada önemli olan nokta ise, listenin her bir item’ı için unique bir key set edilmiş olmasıdır, aksi durumda key set edilmeden kullanılmadığı durumda console’dan baktığınızda unique bir id’nin set edilmesi için uyarı mesajı görürsünüz.

Bir sonraki adım olan CustomerDetail.js componentinde ise props ifadesini yer almaktadır. Bu ifade ile birlikte CustomerList componentinde beslenen değerlere ulaşılabilmektedir.
Gelen ifadenin id keyword’ü ile birlikte gelmesi önemli olan noktadır.

CustomerList componentinden CustomerDetail’ı referans olarak verip id değeri aşağıdaki gibi id ifadesiyle geçilir.

Uygulamayı çalıştırdığımızda id değerlerinin taşınmış olduğunu görürüz.

Eğer burada function component değil, class component kullanış olsaydık render ifadesinin ve props ve customers ifaderinin başında this keyword’ünü eklememiz gerekecekti.

States: State’ler props’lardan farklı olarak, aynı component içerisindeki taşınan değerlerdir. Bir diğer fark ise, state’ler kullanıldığı component içersinde değiştirilebilmesidir.
State’ler function componentlerde öncelikle kullanılmamaktaydı, fakat Hook’lar sayesinde kullanılmaya başlandı. (Bu konu daha sonra ele alınacaktır)
Class componentlerde state tanımı aşağıdaki şekilde yapılmaktadır. Burada her bir id öncesi state’de bulunan message yazacaktır.

State’ler bulunduğu component içersinde değiştirilebilir. Bu setState ile yapılır, hangi state değiştirilecekse bunun içerisinde belirtilir.

State değişikliğini görmek için çalıştırıp butona tıkladığımızda ilgili state değeri Message Change olarak güncellenecektir.

Kısaca özetlemek gerekirse, state’ler bulunduğu component içersinde kullanılan değerlerdir ve değiştirilebilir, fakat props’lar farklı componentlerden değer alır ve kullanılan component içersinde değişirilmeyen ifadelerdir.

Bir sonraki yazımda component lifecycle’dan bahsederek devam edeceğim.

Bu konuyla ilgili sorularınızı http://forum.mshowto.org linkini kullanarak ulaşacağınız forum sayfamızda sorabilirsiniz.

Referanslar

www.mshowto.org

TAGs:React – Props ve State’lerle çalışmal, react, react props ve state’ler

Ruijie Teknoloji Günü
Yorum Yap

Yazar Hakkında

Ben Nagihan 2014 yılında Ege Üniversitesi Bilgisayar Mühendisliği bölümünden mezun oldum ve aynı yıl içerisinde bir finans kuruluşunda Yazılım mühendisi olarak görev almaya başladım. Öncelikle .Net alanında kendimi geliştirdim sonrasında DevOps alanında kendimi geliştirmeye başladım.Paralelde İstanbul Üniversitesi Yönetim Bilişim Sistemleri bölümünde yüksek lisans yapmaktayım, aldığım dersler itibari ile de Data Mining ile ilgili çalışmalarım oluyor. Günlük hayatıma mümkün oldukça sporu dahil etmeye ve yeni yerler keşfedip öğrenmeye çalışıyorum.

Yorum Yap