Šta nije dozvoljeno da se piše u JavaScript kodu u okviru JSX?

Nije dozvoljeno koristiti sledeće konstrukcije:

• Operator za dodelu (=) (osim unutar atributa gde se dodeljuje vrednost).
• Ternarni operator bez eksplicitnog vraćanja vrednosti (?:).
• Petlje (for, while, do/while) bez obavijanja u funkcije koje vraćaju JSX elemente.
• Izjave if/else bez obavijanja u funkcije koje vraćaju JSX elemente ili bez korišćenja ternarnog operatora.
• Blokovi koda ({}) bez eksplicitnog vraćanja JSX elemenata (npr. samo deklaracije promenljivih).
• Ugnježdeni komentari // unutar JSX ili /* unutar JSX */, osim komentara nakon operatora ili između atributa/elemenata.

Dozvoljeno je koristiti:

• Izraze koji vraćaju vrednosti (promenljive, funkcije, pozivi metoda).
• Logičke operatore && i ||.
• Ternarni operator ? :.
• Objekte i nizove (ako se renderuju kao lista ili element).
• Pozive metoda nizova (map, filter, itd.) koji vraćaju JSX elemente.
• Funkcije koje vraćaju JSX elemente.

Primer

// Nije dozvoljeno
const element = <p>
  let x = 10; // Dodela
  x++; // Inkrement
</p>;

// Nije dozvoljeno
const element = <p>
  if (condition) { // if instrukcija
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Dozvoljeno sa funkcijama
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Dozvoljeno sa ternarnim operatorom
const element = <p>{condition ? 'True' : 'False'}</p>;

// Dozvoljeno sa &&
const element = <div>{condition && <p>Visible</p>}</div>;

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