O que não é permitido escrever no código JavaScript no contexto de JSX?

Não é permitido usar as seguintes construções:

• Operadores de atribuição (exceto dentro de atributos onde se atribui um valor).
• Operador ternário sem retorno explícito de valor (?:).
• Laços (for, while, do/while) sem envolver em funções que retornem elementos JSX.
• Instruções if/else sem envolver em funções que retornem elementos JSX, ou sem usar o operador ternário.
• Blocos de código ({}) sem retorno explícito de elementos JSX (por exemplo, apenas declaração de variáveis).
• Comentários aninhados // dentro de JSX ou /* dentro de JSX */, exceto comentários após operadores ou entre atributos/elementos.

Permite-se usar:

• Expressões que retornam valores (variáveis, funções, chamadas de métodos).
• Operadores lógicos && e ||.
• Operador ternário ? :.
• Objetos e arrays (se renderizados como lista ou elemento).
• Chamadas a métodos de arrays (map, filter, etc.) que retornam elementos JSX.
• Funções que retornam elementos JSX.

Exemplo

// Não permitido
const element = <p>
  let x = 10; // Atribuição
  x++; // Incremento
</p>;

// Não permitido
const element = <p>
  if (condition) { // Instrução if
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Permitido usando funções
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Permitido com operador ternário
const element = <p>{condition ? 'True' : 'False'}</p>;

// Permitido com &&
const element = <div>{condition && <p>Visible</p>}</div>;

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