¿Qué no está permitido escribir en el código JavaScript en el contexto de JSX?

No se permite usar las siguientes construcciones:

• Operadores de asignación (excepto dentro de atributos donde se asigna un valor).
• Operador ternario sin retorno explícito de valor (?:).
• Bucles (for, while, do/while) sin envolver en funciones que devuelvan elementos JSX.
• Instrucciones if/else sin envolver en funciones que devuelvan elementos JSX, o sin usar el operador ternario.
• Bloques de código ({}) sin retorno explícito de elementos JSX (por ejemplo, solo declaración de variables).
• Comentarios anidados // dentro de JSX o /* dentro de JSX */, excepto comentarios después de operadores o entre atributos/elementos.

Se permite usar:

• Expresiones que devuelven valores (variables, funciones, llamadas a métodos).
• Operadores lógicos && y ||.
• Operador ternario ? :.
• Objetos y arreglos (si se renderizan como lista o elemento).
• Llamadas a métodos de arreglos (map, filter, etc.) que devuelven elementos JSX.
• Funciones que devuelven elementos JSX.

Ejemplo

// No permitido
const element = <p>
  let x = 10; // Asignación
  x++; // Incremento
</p>;

// No permitido
const element = <p>
  if (condition) { // Instrucción if
    return 'True';
  } else {
    return 'False';
  }
</p>;

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

// Permitido con operador ternario
const element = <p>{condition ? 'True' : 'False'}</p>;

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

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