Sıfırdan İleriye ReactJs serisinin yeni bir konusuna hoş geldiniz. Bugün öğreneceğimiz kavram props kavramıdır. Baştan söylemek gerekirse props biraz kafa yakıyor ama eğer Componentleri iyice öğrendi iseniz biraz daha avantajlı olacaksınız. Şimdi props ne olduğunu bakalım.
Props Nedir?
Props bir nevi bir component'en bir diğer component'e veri aktarımı diyebiliriz. Mesela bir componentinizde veri olsun diğer componentinze o veriyi aktarıp yapmak istediğiniz işlemi yapmamıza yardımcı oluyor. Oldukça kısa ve basit bir işlem genelde ilk kez öğrenirken kafamızın yanmasının sebebi o veriyi oradan nasıl alıyor nasıl işliyoruz kısmında oluyor. Ne kadar sözlü anlatsam da sözler kifayetsiz olacak o yüzden bunu ReactJs kullanarak yapalım ki kafamıza otursun props mantığı.
Öncelikle app.jsx yanına bir tane daha users componenti oluşturalım ve bu componenti içine iki adet mail-şifre değeri yazalım bunu yazdıktan sonra app.jsx dosyasına import etmeyi unutmayın.
JavaScript:
import React from 'react'
function Users() {
return (
<div>
Users Bilgileri
<div>Mail : [email protected]</div>
<div>Şifre : Dark12345</div>
<hr />
<div>Mail : [email protected]</div>
<div>Şifre : Dark12345</div>
</div>
)
}
export default Users
JavaScript:
import './App.css'
import Users from './Users'
function App() {
return (
<div>
<Users />
</div>
)
}
export default App
Kodlar sonrası çıktımız şu şekilde olacak.
Bunu geçen component konusunda öğrenmiştik. Şimdi bunun bir üstüne çıkacağız mail ve şifre değerlerini ben ana dosyadan yazmak istiyorum bunu nasıl yaparız tabi ki props kullanarak bunu yapalım şimdi
JavaScript:
import './App.css'
import Users from './Users'
function App() {
return (
<div>
<Users mail="[email protected]" sifre="123Dark456" />
</div>
)
}
export default App
Burada yani ana dosyada öncelikle props değerlerini belirttik bunu keyfinize göre düzenleyebilirsiniz. mail ve şifre propslarını tanımladım ama bu tanımladığım props değerlerini diğer yani Users dosyasına aktarmam lazım bunun için ise function + dosyadı (props) yazarak bu props değerlerini yakalayacağız. Önce bu propsları yakalayıp konsola yazdıralım bakalım ana sayfadan gönderdiğimiz değerleri yakalamış mıyız.
JavaScript:
import React from 'react'
function Users(props) {
console.log(props)
return (
<div>
Users Bilgileri
<div>Mail : [email protected]</div>
<div>Şifre : Dark12345</div>
<hr />
<div>Mail : [email protected]</div>
<div>Şifre : Dark12345</div>
</div>
)
}
export default Users
Her ne kadar çıktımız users dosyasında yazdığımız kodlar olsa bile konsola baktığımızda ana sayfada belirttiğim değerleri users dosyasına aktarabilmişiz. Şimdi bu yakaladığımız değerleri ekrana çıktı olarak yazdıralım.
JavaScript:
import React from 'react'
function Users(props) {
console.log(props)
return (
<div>
Users Bilgileri
<div>Mail : {props.mail}</div>
<div>Şifre : {props.sifre}</div>
<hr />
</div>
)
}
export default Users
Çıktıda gördüğümüz değer ile konsoldaki değer aynı yani doğru propsu yazdırmışız. Peki burada ne yaptık app.jsx dosyasında props değerlerini oluşturmuştuk daha sonra bu propsları users dosyasında yakaladık. Geçen konuda html içinde Javascript kullanabileceğini bunun için ise tırnaklı parantezler ile yapabileceğimizi söylemiştim. Buradan yoldan çıkarak props içindeki mail ve şifre yani benim app.jsx atadığım değerleri yazdır dedim çok zor bir şey yapmadık.
Ana sayfada birkaç tane daha Users elemanı yapalım.
JavaScript:
import './App.css'
import Users from './Users'
function App() {
return (
<div>
<Users mail="[email protected]" sifre="123Dark456" />
<Users mail="[email protected]" sifre="dark1907" />
<Users mail="[email protected]" sifre="React" />
</div>
)
}
export default App
Gördüğünüz gibi ana sayfada ne kadar istersem o kadar değer tanımlayabiliyorum. Bu tanımlanan değerleri diğer sayfada yakalayıp konsol + ekrana yazdırıyoruz.
Buraya kadar tamam isek benim çokça kullandığım props yöntemine geçelim. Bu yöntemle de çalışabilirsiniz ama biraz daha bu işi kolaylaştırabiliriz bunu da Javascript özelliği olan Destructuring yapabiliriz. Yani props içindeki değerleri ayrı değişkenlere atayıp kullanacağız. Aşağıdaki örnek kafanızda oturacaktır.
JavaScript:
import React from 'react'
function Users(props) {
const { mail, sifre } = props
console.log(props)
return (
<div>
Users Bilgileri
<div>Mail : {mail}</div>
<div>Şifre : {sifre}</div>
<hr />
</div>
)
}
export default Users
Görüldüğü gibi ilk yöntem ile bu yöntem arasında sonuç bakımından hiçbir fark yok. Burada yaptığımız işlem aslında props içindeki elemanları sırayla yazdığım değişkenlere ata. Bu atanan değişkenleri de direkt olarak yazdık. Tek fark props.değişkenadı yerine biz bunu yukarıda bölüştürüp direkt oluşturduğumuz değişkene atıyoruz. Hangisini kullanmak isterseniz kullanabilirsiniz burada seçim sizin ama benim tavsiyem ikinci yöntemden yana olur kodunuzu okuyan biri bu adam Javascripte destructuring yapmış demek Javascript bilgisi de iyi gibi bir güzel imaj çizersiniz.
Bu konuda props nedir nasıl kullanılır bunu öğrendik bunu çok sık kullanacağız gerek ileriki konularda olsun gerek sizler kendi projelerinizi yaparken olsun bu yüzden üstüne düşün bu konunun. Buraya kadar okuduysanız okuduğunuz için teşekkür ederim bir başka konuda görüşmek üzere.
