React’te Çok Satırlı JSX Kullanımı

React’te JSX, bileşenlerin kullanıcı arayüzlerini tanımlamak için kullandığı özel bir sözdizimidir. Basit bir öğeyi döndürmek kolaydır; tek bir satırda yazılan JSX, parantez olmadan işlenebilir. Ancak, karmaşık bir yapıyı tanımlarken çok satırlı JSX kullanımı devreye girer ve bu durumda parantez kullanımı bir zorunluluk haline gelir.

Bir örnek üzerinden ilerleyelim. Aşağıdaki HTML yapısını bir React bileşenine dönüştürmek istediğinizi düşünün:

<article>
  <header>
    <h1>Hayatta İlham</h1>
  </header>
  <p>Her gün öğrenmek ve büyümek için yeni fırsatlar var.</p>
  <footer>
    <a href="https://example.com" target="_blank">Daha Fazlası</a>
  </footer>
</article>

Bu HTML yapısını React’te şu şekilde yazabilirsiniz:

function Inspiration() {
  return (
    <article>
      <header>
        <h1>Hayatta İlham</h1>
      </header>
      <p>Her gün öğrenmek ve büyümek için yeni fırsatlar var.</p>
      <footer>
        <a href="https://example.com" target="_blank">
          Daha Fazlası
        </a>
      </footer>
    </article>
  );
}

Yukarıdaki bileşende, HTML yapısının her bir kısmı bir JSX öğesi olarak tanımlanmıştır. Çok satırlı bir JSX ifadesi kullandığımız için return ifadesinin tamamı parantez içine alınmıştır. Bu hem React’in ifadeyi doğru işlemesini sağlar hem de kodunuzu düzenli bir şekilde okunabilir kılar.

React’te Değişkenlerle Dinamik Özellik Kullanımı

React bileşenlerinde, HTML öğelerine dinamik özellikler eklemek için JavaScript ifadeleri kullanılabilir. JSX, JavaScript kodunu doğrudan HTML özelliklerine bağlamayı mümkün kılar. Bu özellik, bileşenlerinizi daha modüler ve esnek hale getirir.

Bir kitap kartı örneği üzerinden ilerleyelim. Bir kitabın özelliklerini bir nesne içinde tanımlayalım:

const book = {
  title: 'React ile Modern Web Geliştirme',
  author: 'Jane Doe',
  cover: 'https://example.com/react-book-cover.jpg',
  width: '150px'
};

Bu bilgilerle bir React bileşeni oluşturarak kitabın görselini ve yazar bilgisini gösterebiliriz:

function BookCard() {
  return (
    <div>
      <img 
        src={book.cover} 
        alt={`${book.title} kitabının kapağı`} 
        width={book.width} 
      />
      <h2>{book.title}</h2>
      <p>{book.author}</p>
    </div>
  );
}

Bu bileşen, book nesnesindeki değerleri kullanarak dinamik bir kitap kartı oluşturur. src, alt ve width özellikleri görseli tanımlarken, başlık ve yazar bilgileri JSX içindeki {} kullanımıyla doğrudan HTML içine aktarılır.

React’te Fonksiyon Bileşenlerinde Mantık Kullanımı

React’te bir fonksiyon bileşeni, sadece bir return ifadesinden oluşmaz. Bileşen içinde, JSX’in döndürülmeden önce ihtiyaç duyduğu basit hesaplamalar ya da mantıksal işlemler de yapılabilir. Bu işlemler, bileşenin çalışması için gerekli veriyi hazırlamayı sağlar.

Fonksiyon bileşeni içinde mantık kullanmak için, işlemleri return ifadesinden önce tanımlamak gerekir. Örnek olarak, bir rastgele renk oluşturan bir bileşen tasarlayalım:

function RandomColorBox() {
  // Rastgele bir renk oluşturma işlemi
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  
  // Hazırlanan rengi kullanarak bir div döndürme
  return (
    <div 
      style={{
        backgroundColor: randomColor,
        width: '200px',
        height: '200px',
        textAlign: 'center',
        lineHeight: '200px',
        color: '#fff'
      }}
    >
      {randomColor}
    </div>
  );
}

Bu örnekte, randomColor değişkeni JSX döndürülmeden önce tanımlanmıştır. Renk kodu rastgele oluşturulduktan sonra, bu değer hem arka plan rengi olarak kullanılmış hem de kullanıcıya görsel olarak gösterilmiştir.

Bir başka örnekle iyice pekiştirelim:

React’te Bir Bileşende Event Listener ve Event Handler Kullanımı

React bileşenlerinde, kullanıcı etkileşimlerine yanıt vermek için event handler (olay işleyici) fonksiyonları kullanılabilir. Bu fonksiyonlar, belirli bir kullanıcı etkileşimi gerçekleştiğinde devreye girer ve bileşenin istediğiniz şekilde davranmasını sağlar.

Örneğin, bir butona tıklama olayını ele alalım. Kullanıcı bir butona tıkladığında bir mesaj göstermek istiyorsunuz diyelim, bunu şöyle yapabilirsiniz:

function ClickableButton() {
  function handleClick() {
    alert('Düğmeye tıkladınız!');
  }

  return <button onClick={handleClick}>Beni Tıkla</button>;
}

Yukarıdaki örnekte, handleClick adlı bir fonksiyon tanımlanmıştır. Bu fonksiyon, buton tıklandığında çalışacak şekilde onClick özelliğine atanmıştır. Event handler fonksiyonları bileşen içinde tanımlanır ve konvansiyon olarak, olay türünü belirtmek için handle kelimesiyle başlar (örneğin, handleClick).

Event handler fonksiyonları JSX’e atanırken, fonksiyon adı parantezsiz olarak yazılır (handleClick). Eğer parantezle yazılırsa (handleClick()), fonksiyon doğrudan çağrılır ve olay gerçekleşmeden çalışır. Bu nedenle, aşağıdaki gibi bir kullanım hatalıdır:

function InvalidExample() {
  function handleClick() {
    alert('Bu hemen çalışır!');
  }

  return <button onClick={handleClick()}>Hatalı Tıklama</button>;
}

Yukarıdaki kod, buton daha tıklanmadan handleClick fonksiyonunu tetikleyecektir. Doğru kullanımda parantez kullanılmaz. Aşağıdaki örneği inceleyiniz: