Mala Anlatır Gibi React — 5: İncelikler

React (Resim, I.)

Doğru / Yanlış

const isLogin = true; // Giriş yapılı mı?

{GirilYapiliMi ? "Hoşgeldiniz" : "Giriş yapınız."}

Var mı? Yoksa

{isLogin && "Hoşgeldiniz"}

.map() fonksiyonu

const kisiler = []

kisiler.map((kisi)=> <p> {kisi.adi} </p>)

Eliniz de, kisiler adlı bir array var, içinde kişilerin adları, soyadları var bunları tek tek elle bastırmak yerine, map ile döndürmek react de tercih edilen bir yöntemdir.

Fragment

<>
  //boş döner
<>

props kullanımı

// component
export default function Card({title, description}){
  return <h1> {title} - {description} </h1>
}

<Card title="" description="" />

Burada, title ve description diye iki props geçtik fonksiyona. Sonra bunları ana fonksiyon içerisinde çağırırken ise <Card /> içine yazdık, böylelikle kod tekrarı olmadı ve tekrardan kod yazmak zorunda kalmadık.

Ama eğer kurs listeniz olsaydı ve bunları bir kurs kartı üzerinde tekrarlatmak isteseydiniz:

//Card.js (.jsx) component
export default function Card({title, description, price}){
  return <h1> {title} - {description} </h1>
}

//App.js (.jsx)
import Card from 'dosya-yolu'
function App(){
  const kurslar = [{name: 'Javascript Course', description: 'better then course', price: 3000}, {name: 'React Course', description: 'Better course', price: 4000}]
  return(
    <>
      kurslar.map((kurs)=> <Card title={kurs.name} 
      description={kurs.description} price={kurs.price} />)
    </>
  )
}

Burada, yaptığımız şey bir Card diye component yarattık ve props verdik. Sonra return dedik ve sonra ki döneceği değerleri verdik.

App’de ise kurslar adlı objelerimizi, tek tek dönen .map() fonksiyonu yazarak daha kullanabilir hale getirdik.