React JS Props Kullanımı
Hepinize merhaba dostlarım 😊. Birkaç gün aradan sonra tekrardan sizinle birlikteyim.m Ufak tefek koşturmalar sonucunda makaleler birazcık aksadı. Müsait bir an bulmuşken yine yeni bir makale yazayım istedim 😊.
Başlıktan da anlayacağınız üzere dostlarım bu makalemde "Props" konusuna değineceğim. Önceki makalelerimde birlikte oluşturduğumuz proje haricinde yeni bir proje üzerinden bu konuyu anlatacağım (Önceki proje yapımız üzerinden gitmeyeceğiz dostlarım yanlış anlamayın 😅).
Şimdi yapmanızı istediğim tek şey ben kodlama kısmına geçiyoruz diyene kadar arkanıza yaslanmanız, elinize çayınızı kahvenizi almanız ve beni dinlemenizdir dostlarım 😉. Artık konuya geçelim
Props Nedir ?
Dostlarım mfsoftwareblog olarak teorik anlatımdan uzak bir anlatım yapıp konuyu sizlerin daha iyi kavrayacağınız şekilde anlatacağım.
Şimdi props a genel olarak baktığımızda dostlarım bizim react js uygulamalarımızda oluşturduğumuz component yapıları var biliyorsunuzdur. Ana component üzerinden (App.js değil aklınızı karıştırmak gibi olmayayım) alt componentimize veri gönderme işlemi olarak bilinir.
Şimdi bir HomeComponent oluşturduk varsayalım. İçerisinde her section için ayrı bir component oluşturduk. Banner kısmına belirli bir değer göndermek istedik dostlarım. İşte buna biz props kullanımı diyoruz dostlarım. Belirli değerleri diğer alt componentler içerisinde kullanmak için bu özelliği kullanıyoruz
Tabii bu sadece react js üzerinde değil vue js ve angular js üzerinde de mevcuttur. Sadece react js üzerinde var diye bir algı oluşturmak istemiyorum 😊.
Aynı zamanda dostlarım bu props kullandığımızda alt componentlere veri gönderdiğimiz zaman bu veriler sadece read-only şekilde iletiliyor. Üzerinde herhangi bir değişiklik yapılmıyor ya da mutasyona uğramıyor. Veri gönderme - kullanma işlemlerinizde rahatlıkla kullanabilirsiniz 😊.
Bu kısma kadar tamam isek dostlarım gelelim bir diğer başlığa. Özellikle yeni yeni component ve props üzerinde çalışacak olan dostlarımın en temel sorusudur bu ben biliyorum. Ben de o yollardan geçtim çünkü 😉
Hangi Durumlarda Kullanılır ?
Size en basit şekilde ve akılda kalıcı örnek vereceğim dostlarım. Bir e-ticaret sistemi kodladınız varsayalım. Burada ürünler listeleniyor. Her bir item için 10 20 satır kodlaması var (tasarım kısmında yani). Bunları bir döngü ile yapabilirsiniz aslında bunda herhangi bir şey yok. Ama ilerleyen zamanlarda revize yapacağınızda dosyayı açtığınızda her yer karman çorman bir şekilde sizin karşınıza çıkacaktır.
İşte bunu önlemek için sizin o 10 20 satır kodu component oluşturup ayrı bir yerde tutmanız ve içerisine props aracılığıyla verileri göndermeniz daha sağlıklı yöntem olacaktır dostlarım 😊.
Artık konuya biraz daha aşina olduysanız dostlarım gelelim kodlama işlemine 😊. Proje ortamlarınızı kurduysanız src içerisinde HomeComponent ve Child Component olarak 2 ayrı dosya oluşturalım. Bunlar da Class Based tipinde componentler olsun (Functional Component üzerinde kullanılmıyor diye düşünmeyin orada da kullanılıyor. Onu da anlatacağım 😊).
Öncelikle HomeComponent içerisini aşağıdaki gibi düzenleyelim
import {Component} from "react";
import ChildComponent from "./ChildComponent";
class HomeComponent extends Component{
render() {
return (
<div>
<p>Burası Ana Component</p>
<ChildComponent/>
</div>
)
}
}
export default HomeComponent;şeklinde kodlarımızı yazdık. Bu kısma kadar tamam isek dostlarım ChildComponent kısmını yazalım
import {Component} from "react";
class ChildComponent extends Component{
render() {
return (
<div>
<p>Burası Child Component</p>
</div>
)
}
}
export default ChildComponent;bu kısmı da gösterdiğim gibi ayarladıktan sonra dostlarım App.js içerisine gelip
import './App.css';
import HomeComponent from "./HomeComponent";
function App() {
return (
<div>
<HomeComponent/> // burada componentimiz çağrıldı
</div>
);
}
export default App;şeklinde dosyamızın içeriğini düzelttik. Proje klasörümüze terminal üzerinden gelip
npm startkomutunu yazdığımızda karşımıza gelen çıktı
şeklinde kodlarımızın çıktısını rahatlıkla görüyoruz. Şimdi veri gönderme işlemlerini gerçekleştirelim. Öncelikle HomeComponent dosyamızı açalım ve içerisini değiştirelim
import {Component} from "react";
import ChildComponent from "./ChildComponent";
class HomeComponent extends Component{
constructor(props) {
super(props);
this.state = {
fullName : "MFSoftware Blog",
born : "25.01.2021"
}
}
render() {
const {fullName,born} = this.state; // STATE VERİLERİNİ ALDIK
return (
<div>
<p>Burası Ana Component</p>
<ChildComponent adsoyad={fullName} dogum={born}/> // süslü parantez içerisindekiler bizim değerlerimiz, adsoyad ve dogum ise bu değerleri tutan değişkenler olarak aklınızda kalsın dostlarım
</div>
)
}
}
export default HomeComponent;şeklinde dosyamızın içerisini düzenledik dostlarım. Şimdi ChildComponent dosyamızın içerisinde düzenlemeleri gerçekleştirelim
import {Component} from "react";
class ChildComponent extends Component{
constructor(props) {
super(props);
this.state = {
gelen_adsoyad : props.adsoyad, // props üzerinden gelen veriyi aldık
gelen_dogum : props.dogum // props üzerinden gelen veriyi aldık
}
}
render() {
const {gelen_adsoyad,gelen_dogum} = this.state; // state içerisindeki değerleri aldık
return (
<div>
<p>Burası Child Component</p>
<p>Ad Soyad: {gelen_adsoyad} | Doğum: {gelen_dogum}</p>
</div>
)
}
}
export default ChildComponent;kodlarımızı yazdık dostlarım. Proje klasörümüzü terminal üzerinden açıp
npm startyazdığımızda karşımıza gelecek olan çıktı
şeklinde karşımıza çıktı rahatlıkla gelmiş bulunmakta dostlarım 😊. Bütün olaylar bu kadar basit.
Şimdi bunları Functional Component üzerinde nasıl yapabiliriz gelin onu kodlayalım. HomeComponent üzerinde değişiklikleri gerçekleştirelim
import {useState} from "react";
import ChildComponent from "./ChildComponent";
const HomeComponent = ()=>{
// FUNCTİONAL COMPONENT ÜZERİNDE PROPS KULLANIMI
const [fullName,setFullName] = useState("MFSoftware Blog");
const [born,setBorn] = useState("25.01.2021");
return (
<div>
<div>
<p>Burası Ana Component</p>
<ChildComponent adsoyad={fullName} dogum={born}/>
</div>
</div>
)
}
export default HomeComponent;şeklinde düzenlememizi gerçekleştirdik. ChildComponent üzerinde de aşağıdaki gibi değişikliklerimizi gerçekleştirelim
import {useEffect, useState} from "react";
const ChildComponent = (props)=>{
// FUNCTİONAL COMPONENT ÜZERİNDE PROPS KULLANIMI
const [gelenAdsoyad,setGelenAdsoyad] = useState(); // state oluşturduk
const [gelenDogum,setGelenDogum] = useState(); // state oluşturduk
useEffect(() => {
setGelenAdsoyad(props.adsoyad); // props verisini aldık
setGelenDogum(props.dogum); // props verisini aldık
}, []);
return (
<div>
<p>Burası Child Component</p>
<p>Ad Soyad: {gelenAdsoyad} | Doğum: {gelenDogum}</p>
</div>
)
}
export default ChildComponent;şeklinde kodlarımızı düzenledik. Projemizi çalıştırdığımızda ise çıktımız yine aynı şekilde olacaktır 😊. Bütün olaylar bu kadar dostlarım 😊.
Eveeeet dostlarım bir makalenin daha sonuna geldik. Bu makalede elimden geldiğince dilim döndüğünce "React JS Props 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