Expression Mode

Expression mode is the classic component body style: the body computes a single `return <jsx>;` expression. It is the simplest way to write a component and the default for one-liners.

Rules

• The body must end with `return <jsx>;`.
• Guard-clause early returns are allowed before the final return.
• `.map()` callbacks render collections; a `key` prop is recommended for reconciliation — the compiler extracts the key expression from the JSX child.
• Ternary and `&&` expressions work inside `{}`.
• Fragments are supported; adjacent top-level JSX is not.

										
											component TodoList(props: { todos: Todo[] }) {
  if (props.todos.length === 0) return <EmptyState />;
  <div class="todo-list">
    {props.todos.map((todo) => (
      <TodoItem key={todo.id} todo={todo} />
    ))}
  </div>
}
										
									

Relationship to statement mode

Statement mode is the statement-level equivalent — bare JSX, `if`, `for`, `switch`, `try`, and guard clauses without a wrapper return. Every body feature available in expression mode is available in statement mode and vice versa.

										
											component TodoList(props: { todos: Todo[] }) {
  if (props.todos.length === 0) return <EmptyState />;
  <div class="todo-list">
    {props.todos.map((todo) => (
      <TodoItem key={todo.id} todo={todo} />
    ))}
  </div>
}