JSX kapsamında JavaScript kodunda ne yazılmasına izin verilmez?

Aşağıdaki yapılar kullanılamaz:

• Atama operatörleri (değeri atanan öznitelikler dışında).
• Açık bir değer dönüşü olmayan ternary operatör (?:).
• Döngüler (for, while, do/while) fonksiyonlar içinde olmadan, JSX öğeleri döndüren fonksiyonlar içinde olmadan.
• if/else ifadeleri JSX öğeleri döndüren fonksiyonlar içinde olmadan veya ternary operatör kullanılmadan.
• Kod blokları ({}) açık bir JSX öğesi dönüşü olmadan (örneğin, sadece değişken bildirimi).
• İç içe yorumlar // JSX içinde veya /* JSX içinde */, operatörler veya öznitelikler/öğeler arasındaki yorumlar hariç.

Kullanılabilir:

• Değer döndüren ifadeler (değişkenler, fonksiyonlar, metod çağrıları).
• Mantıksal operatörler && ve ||.
• Ternary operatör ? :.
• Nesneler ve diziler (liste veya öğe olarak render ediliyorsa).
• JSX öğeleri döndüren dizi metodları (map, filter vb.).
• JSX öğeleri döndüren fonksiyonlar.

Örnek

// Kullanılamaz
const element = <p>
  let x = 10; // Atama
  x++; // Artırma
</p>;

// Kullanılamaz
const element = <p>
  if (condition) { // if ifadesi
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Fonksiyon kullanımıyla izin verilir
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Ternary operatör ile izin verilir
const element = <p>{condition ? 'True' : 'False'}</p>;

// && ile izin verilir
const element = <div>{condition && <p>Visible</p>}</div>;

// map ile izin verilir
const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
const element = <ul>{listItems}</ul>;