React UI Mechanics
React Bileşenlerinde State ve Props
React mekanik örneklerini anlatmayı düşündüğüm bu yazı serisinde amacım CSS ve Görselliğe takılmadan UI Mekaniği ile ilgili örnekler geliştirmek. Konunun ikinci dersi bileşenlerde State ve Props nasıl kullanabiliriz. Bu iki özellik ne işe yarar ?
Published in
3 min readNov 14, 2020
Not: React UI Mekanikleri ile ilgili tüm yazı serisine bu linkten erişebilirsiniz.
App bileşenimize State ve Props olan bir bileşen daha ekleyelim. Bu bileşen ekranda bir düğme(düğme) ve etiket(label) oluşsun. Bu bileşen söyle çalışsın. Düğme her bastığımızda bileşen içerisinde tuttuğumuz bir değeri arttırarak ekrana bassın. Ben bu örnekte yaş(age) değerini tutacağım.
1. Uygulamamıza FooView Bileşenini Ekliyoruz
- components isimli bir klasör oluşturun. Bileşenlerimizi bu klasör altına koyacağız.
- Bu klasör içerisinde FooView bileşenini oluşturalım. (Burda Class Component oluşturdum. Çok önemli değil. React Function Component ve Hook ilerleyen konularda anlatacağım için bu örneklerde Class Component ilerleyeceğiz.)
- constructor içerisinde dışardan bir props geliyor bunu super(props) parent bileşen yani Component aktarıp yolumuza devam ediyoruz. (Bu konuya sonra değineceğiz)
- FooView bileşeni aşağıdaki resimde görüldüğü gibi state içerisinde age değeri tutacak şekilde tanımlayın.
this.state={age:30} // yas 30 atadık- Sonrasında App.js içerisine gidip gereksiz kodları silerek FooView bileşenimizi App.js ekliyoruz.
- FooView ekranda şu anda 30 değerini basıldığını görüyor olmalısınız.
2. FooView içerisindeki State Düğmeye Basıldıkça Güncelleyelim
- FooView içerisine Yaşı Artır şeklinde bir düğme ekliyoruz. Bunun için render metodunun içerisine bir düğme ekledikten sonra burada herhangi bir işlem yapılırsa düğmeye tıklanırsa handleClick metodu çağrılacak şekilde bağlama yapıyoruz.
<button onClick={this.handleClick}>Yaşı Arttır</button>- handleClick metodunun içerisinde mevcut state içerisindeki age değerini alarak bunu 1 artırıyoruz ve tekrar state atıyoruz.
this.setState({age:this.state.age+1})- İşte bu state atama işlemini React mevcut bileşende bir değişiklik olarak algılıyor ve render kodunu tekrardan çağırıyor.
- Şimdi ekranda yaş değerinin yanında bir düğme ve bu düğmeye bastığınızda ekrandaki değerin arttığını görmeniz lazım.
3. Kodu Debug Edelim
Kodu debug ederek çalışmanız kodu daha hızlı anlamanızı sağlayacaktır.
- Developer Tool kısmından SourceTab açın. ve handleClick içerisindeki satıra debug point ekleyelim.
- Her düğmeye bastığımızda kodun buraya geldiğini ve değişkenlerin değerlerini görebilirsiniz.
- Ekranın sağ kısmındaki CallStack alanından kodda ilgili satır çağrılıncaya kadar hangi kodların çağrıldığını görebilirsiniz.
4. Kodu Biraz Daha Geliştirelim ve Mevcut Yılı Dışardan Bir Parametre Olarak Geçirelim ve İçerde Kişinin Doğum Yılını Hesaplayalım
- Bunun için öncelikle FooView bileşenimize dışarıdan bir değer geçirmemiz gerekiyor. Bunun için öncelikli olarak App.js dosyasında FooView tanımladığımız yerde aşağıdaki kodu yazıyoruz. Bu değişkenimize dışardan değer geçireceğimiz props tanımlama yöntemimiz.
<FooView year={2020}/>- FooView içerisinde render kodu içerisinde bize gelen yıldan — mevcut yaşını çıkararak doğum yılını bulup tüm değerleri ekrana basıyoruz.
const {year}=this.props içerisinden değeri okuyanilirsiniz.
- Özetle Bileşenin iç state ile dışardan kendisini etkileyen değişkenleri kullanarak bir geliştirme yapmış olduk.
5. Kodu Debug Edelim
Kodu tekrar Source Tab açıp bu sefer props aldığımız kısma debug point koyup değişkenin değerini görüntüleyelim.
Kod Örnekleri
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
