React JS State Kullanımı
Hepinize merhaba dostlarım 😊. Birkaç gün aradan sonra tekrardan sizlerle beraberim. Başlıktan da anlayacağınız üzere bugün bir önceki yazım olan "useState Kullanımı" başlıklı yazımını devamı niteliğinde bir konuya değineceğim. Şimdi içinizden diyorsunuzdur
Hocam bu da useState kullanımı gibi sürekli tanımlama vs yapacağımız bir şey falan mı ? İsimleri birbirlerine yakın
Aynen öyle dostlarım. Yalnız bu makalede anlatacağımı functional component üzerinde yapmayacağız. Daha böyle derin işlemler yapacağınız class based component üzerinde uygulayacağız.
O halde sözü daha fazla uzatmadan hemen önceki makalelerimde sizlerle beraber oluşturduğumuz proje ortamında yeni bir component açalım. Ben bunun ismini "StateComponent.js" olarak oluşturacağım. Sizler de kendiniz istediğiniz bir şekilde isimlendirebilirsiniz. Daha sonra App.js gibi ilk çalışacak şekilde ayarlayabilirsiniz 😊
Bu kısma kadar tamam isek dostlarım hemen kodlarımızı aşağıdaki gibi yazabiliriz.
import {Component} from "react";
class StateComponent extends Component{
render() {
return (
<div>
</div>
)
}
}
export default StateComponent;şeklinde kodlarımızı yazdık dostlarım. Bu kısma kadar tamam isek bir önceki makalemdeki counter projesinin kodlarını yazalım. Önce ben yazıp sizlere olayları anlatacağım
import {Component} from "react";
class StateComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0 // useState mantığında tanımlama yaptık
}
}
artir = () => {
let count = this.state.count; // state değerini çektik
this.setState({count: count + 1}); // 1 artırdık
}
azalt = () => {
let count = this.state.count; // state değerini çektik
if (count > 0) {
this.setState({count: count - 1}); // negatif değerlere düşmemesi için kontrol edip azaltma yaptık
}
}
render() {
const {count} = this.state; // oluşturduğumuz değişkeni çektik
return (
<div>
<div>
Sayaç: {count}
<br/>
<button onClick={this.artir}> Artır</button>
<button onClick={this.azalt}> Azalt</button>
</div>
</div>
)
}
}
export default StateComponent;şeklinde kodlarımızı yazdık dostlarım. Fark ettiyseniz constructor içerisindeki state objesi içerisinde count isminde değişken oluşturduk. Fark ettiyseniz başlangıç değerini de 0 yaptık.
Hemen şunu diyeceksiniz dostlarım ben anlıyorum sizi ben de zamanında o şekilde tepki verdim
Hocam daha pratik oldu gibi. 2 dakika içinde hemen oluşturduk. Hatta birden fazla oluşturmak için birden fazla useState tanımlama durumumuz yok heralde 😊
İşte benim de bu React JS makaleleri yazmaya başladığımdan bu yana anlatmak istediğim olay buydu dostlarım. Birden fazla verilerle uğraşacağınız durumlarda daha hızlı ve daha pratik kodlama gerçekleştireceksiniz 😊.
Şimdi örnek veriyorum Counter için bir isim verecek olursak hemen bunu nasıl yaparız onu da gelin kodlayalım
import {Component} from "react";
class StateComponent extends Component {
constructor(props) {
super(props);
this.state = {
name : 'MFSoftware', // ismi hemen tanımladık
count: 365 // useState mantığında tanımlama yaptık
}
}
artir = () => {
let count = this.state.count; // state değerini çektik
this.setState({count: count + 1}); // 1 artırdık
}
azalt = () => {
let count = this.state.count; // state değerini çektik
if (count > 0) {
this.setState({count: count - 1}); // negatif değerlere düşmemesi için kontrol edip azaltma yaptık
}
}
render() {
const {count,name} = this.state; // oluşturduğumuz değişkeni çektik
return (
<div>
<div>
<p>
{name} Sayacı
</p>
<hr/>
Sayaç: {count}
<br/>
<button onClick={this.artir}> Artır</button>
<button onClick={this.azalt}> Azalt</button>
</div>
</div>
)
}
}
export default StateComponent;
şeklinde kodlarımızı düzenledik dostlarım. Sadece state kısmında tanımlamamızı yapıp render içerisinde bu kodu hızlı bir biçimde çektik 😊.
Ek olarak güncelleme kısmına bakacak olursanız her değişken için setCount gibi bir tanımlama yapmadık. Bize class based component tarafından sunulan state özelliğini kullandığımız için ve bize sunulan this.setState özelliğinden faydalanarak güncellememizi yapıyoruz. Tabii içerisine obje şeklinde tanımlama yaparak 😅. Aksi halde hata verir uğraş uğraş dur olur dostlarım aman dikkat 😊
Eveeeet dostlarım bir makalenin daha sonuna geldik. Bu makalede elimden geldiğince dilim döndüğünce "React JS State Kullanımı" konusundan elimden geldiğince dilim döndüğünce anlatmaya çalıştım. Umarım faydalı olmuşumdur. Konu başlarda biraz karmaşık veya zor gelebilir dostlarım anlıyorum. Bu süreçte sizlerden istediğim tek şey her zaman dediğim gibi "İstikrarlı ve Azimli olacaksınız, Bolca pratik yapacaksınız". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır dostlarım 😊.
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer