React JS Class Based Component Kullanımı
Hepinize merhaba dostlarım 😊. Biraz uzun bir sürenin ardından tekrardan sizlerle beraberim (çok da uzun süre değil aslında ama makale biraz gecikti hissediyorum 😅).
Sürekli olarak React JS paylaşımımla bana gelen geri dönüşlere baktığımda birkaç kişiyi de ufaktan bu teknolojiye başlattığım sevincini burada sizlerle de paylaşmak istedim 😊. Nice artışlara diyelim o halde :)
Bu başlıktan da anlayacağınız üzere dostlarım bir önceki makalemin devamı niteliğince olan "React JS Class Based Component" konusuna yani Türkçe karşılığı "Class Tipinde/Bazında Component" olayına değineceğim. Tabii ufak kodlama da gerçekleştireceğiz burada. Şimdi kodlama kısmına geçmeden önce ufak bir anlatım yapmak istiyorum müsaadenizle 😊
Class Based Component Nedir ?
Eveeeet gelelim konumuza dostlarım. Bir önceki makalemde anlattığımdan biraz daha farklı olan Component yapısı olan Class Based Component bizim React JS üzerinde herhangi bir component oluşturduğumuzda içerisinde state yönetimi, lifecycle işlemleri ve bunun harici olarak belirli fonksiyonlar kullanarak işlem yapacağımız durumlarda kullanmamıza yarıyor. Şimdi aklınızdan şu soru geçiyordur dostlarım
Hocam tamam da şimdi birden fazla fonksiyon tanımlayıp funcitonal component ile de yapılmaz mı da ?
Dostlarım yapılır yapılmasına da çok uzatırsınız işlemleri. Her değer için useState() kullanıp her şey karman çorman olur. Ek olarak bunları lifecycle ile kullanacağınızı varsayalım. Her şey karışır valla sil baştan uğraşırsınız durursunuz 😅.
İşte bunu düşünen React JS geliştiricileri konuyu önceden analiz edip Class Based Component yapısını bize sunmuşlar dostlarım. Ne kadar teşekkür etsek azdır kendilerine 😊.
Konunun mantığını az da olsa anlamışsınızdır dostlarım ben inanıyorum sizlere 😊. O halde sözü daha fazla uzatmadan gelin kodlarımızı yazalım dostlarım 😉.
Bir önceki makalede kullandığımız proje klasörümüzü kullanabiliriz dostlarım. Öncelikle src klasörü içerisinde ben "LoveClassComponent.js" isimli bir component oluşturdum dostlarım. Ve bu componenti de yine bir önceki makalemde olduğu gibi App.js benzeri olarak ilk önce açılmasını istedim (Bir önceki makalemde mevcut dostlarım bu. Yukarıda linkini bırakmıştım).
Bu tanıtma işlemini de yaptıktan sonra artık gelelim artık kodlarımızı yazmaya 😊. Oluşturduğumuz LoveClassComponent (siz farklı isimde yapabilirsiniz dostlarım tamamen size kalmış) dosyasının içerisini açıp
import {Component} from "react";
class LoveClassComponent extends Component{
constructor(props) { // constructor yapımız
super(props);
}
render() { // DOM render edildiğinde çalışacak olan kodlarımız
return ( // geri döndüreceğimiz HTML kodları. Dikkat ederseniz burada da bir div container içerisinde yazacağız. Bu artık React JS nin emri :D
<div>
</div>
)
}
}
export default LoveClassComponent;
şeklinde kodlarımızı yazdık dostlarım. Karmaşık vs diye düşünebilirsiniz dostlarım hiç karmaşık değil. Sadece birkaç kez tekrar ettiğinizde eliniz pekişecektir 😊.
Bu kısma kadar tamam isek dostlarım birkaç tane lifecycle kodu yazalım birlikte
import {Component} from "react";
class LoveClassComponent extends Component{
constructor(props) {
super(props);
}
componentDidMount() {
// bu bir lifecycle methodu
}
componentDidUpdate(prevProps, prevState, snapshot) {
// bu bir lifecycle methodu
}
componentWillUnmount() {
// bu bir lifecycle methodu
}
render() {
return (
<div>
</div>
)
}
}
export default LoveClassComponent;şeklinde component yapımızın biraz daha ileri bir düzeyde olduğunu açık şekilde görüyoruz dostlarım. Daha böyle iş yapabilir, daha anlaşılır bir şekilde.
Gelelim şimdi state yapısı olayına. Ben demiştim ya functional component üzerinde sürekli olarak useState diye bir yapı kullanıp aklımız karışır diye. Burada şöyle bir kolaylığımız var. Onu da gelin kodlayalım sizlerle beraber (Lifecycle methodlarını kaldıracağım dostlarım onlara ilerleyen zamanlarda değineceğiz)
import {Component} from "react";
class LoveClassComponent extends Component{
constructor(props) {
super(props);
this.state = {
name : "MFoftware",
surname : "Blog",
age : 25
}
}
render() {
const {name,surname,age} = this.state; // buradan da HTML kodları içeriisnde kullanamak için tanımlama yaptım
return (
<div>
</div>
)
}
}
export default LoveClassComponent;şeklinde kodlarım birden fazla useState yazmadan hızlı bir şekilde ayarlama işlemini gerçekleştirdim.
Constructor olarak belirttiğim kısımdaki props ifadelerine şimdilik takılmayın dostlarım. Buna da ileriki zamanlarda değineceğiz 😊.
Şimdi yukarıdaki tanımladığımız state değişkenlerini bir HTML kodlarına dahil edip ekranımıza bastıralım
import {Component} from "react";
class LoveClassComponent extends Component{
constructor(props) {
super(props);
this.state = {
name : "MFoftware",
surname : "Blog",
age : 25
}
}
render() {
const {name,surname,age} = this.state; // buradan da HTML kodları içeriisnde kullanamak için tanımlama yaptım
return (
<div>
<p>Merhaba. Ben {name + " " + surname}. Yaşım: {age}. Mekanın Sahibiyim :)</p>
</div>
)
}
}
export default LoveClassComponent;
şeklinde kodlarımızı düzenledik dostlarım. Daha sonra proje klasörümüze terminal ekranından gelip
npm startkomutumuzu verdik. Sonuca baktığımızda
Merhaba. Ben MFoftware Blog. Yaşım: 25. Mekanın Sahibiyim :)şeklinde bir karşılama mesajı çıktı ve işlemlerimizin sorunsuz bir şekilde olduğunu apaçık görmüş olduk. İşte bütün mesele bu dostlarım 😊
Eveeeet dostlarım bir makalenin daha sonuna geldik. Bu makalede elimden geldiğince dilim döndüğünce "React JS Class Based Component 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 😊. Ayrıca projelerinizde veriler üzerinden işlemler yapacağınız durumda Class Based Component kullanmayı unutmayın dostlarım 😉
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer