JSX içinde JavaScript kodu yazarken ne kullanılabilir?

JSX kapsamında JavaScript kodu yazarken şu öğeleri kullanabilirsiniz:

• Değişkenler ve sabitler: Dinamik değerleri göstermek için.
• İfadeler: Aritmetik, mantıksal, ternary operatörler.
• Fonksiyonlar: Elemanlar oluşturmak veya mantık yürütmek için fonksiyon çağrıları.
• Diziler: map kullanarak öğe listeleri oluşturmak için.
• Koşullu render: JSX dışında if/else kullanımı veya JSX içinde ternary/logical && operatörü.

// Değişkenler ve ifadelerin kullanımı örneği
const name = 'React';
const greeting = <h2>Merhaba, {name}!</h2>;

// Fonksiyon kullanımı örneği
function formatUser(user) {
  return user.firstName + ' ' + user.lastName;
}
const user = { firstName: 'John', lastName: 'Doe' };
const formattedUser = <p>Kullanıcı: {formatUser(user)}</p>;

// Dizi ve map kullanımı örneği
const numbers = [1, 2, 3];
const listItems = numbers.map((number) =>
  <li key={number}>{number * 2}</li>
);
const numberList = <ul>{listItems}</ul>;

// Koşullu render örneği
const isLoggedIn = true;
const statusText = isLoggedIn ? <p>Giriş yapıldı</p> : <p>Giriş yapılmadı</p>;
const element = <div>{statusText}</div>;