React.js | Composition nedir?

Kodumuzu güzelleştirir, işimizi kolaylaştırır

React Composition aslında kodumuzu güzelleştiren, işimizi kolaylaştıran, esneklik katan bir yapıdır.

Mesaj penceresi örneği

Varsayalım Dialog adında bir component yaptınız. Bu componentin bir başlığı, bir mesajı ve bir butonu olacak.

Bu Dialog componentini çok beğendiniz fakat mesaja sadece yazı yazmak istemiyorsunuz belki resim göstereceksiniz, veya hem resim hem yazı, veya bambaşka bir şey.

Bunların hepsi için ayrı bir component mi oluşturacaksınız? Tabi ki hayır!

Öncelikle componentimizi şu şekilde tanımlıyoruz.

export default function Dialog(props){
  return (
    <div>
      <h2>{props.title}</h2>
      <div>{props.main}</div>
      <button>Close</button>
    </div>
  )
}

Sadece yazı göstermek

Eğer kullanıcıya sadece yazı göstermek istersek şu şekilde kullanabiliriz.

<Dialog title="Welcome" main="Welcome to our website"/>

Hem yazı hem resim göstermek

Veya hem resim hem yazı göstermek istersek Composition ile rahatlıkla gösterebiliriz.

<Dialog title="Welcome" main={
    <>
        <img src="/image.png"/>
        <p>Welcome to our website</p>
    </>
}/>