¿Cómo comentar en React, JSX y TSX?

Si llegaste aquí buscando comentario react, comentarios en JSX o cómo comentar en TSX, la respuesta corta es la misma: dentro de JSX o TSX necesitas usar comentarios de JavaScript envueltos en llaves.

Cómo comentar en React JSX

No se pueden usar comentarios HTML dentro de JSX porque JSX es sintaxis de JavaScript que luego se transforma en llamadas de JavaScript.

function Example() {
  return (
    <div>
      <!-- Esto no funciona -->
      <p>Hola</p>
    </div>
  )
}

Para escribir un comentario en React dentro de JSX, usa un comentario de JavaScript dentro de llaves:

function Example() {
  return (
    <div>
      {/* Esto sí funciona */}
      <p>Hola</p>
    </div>
  )
}

Comentarios JSX de una línea

Usa la misma sintaxis incluso para un comentario de una sola línea:

return (
  <section>
    {/* Se renderiza solo cuando el usuario ha iniciado sesión */}
    <Dashboard />
  </section>
)

Comentarios multilínea en React

Los comentarios en React también pueden abarcar varias líneas:

return (
  <section>
    {/*
      Explica por qué existe esta rama,
      o describe temporalmente la UI de abajo.
    */}
    <Dashboard />
  </section>
)

Cómo comentar código React

Si quieres comentar código React o desactivar temporalmente un componente, envuelve el JSX dentro de un comentario:

return (
  <main>
    {/* <Sidebar /> */}
    <Content />
  </main>
)

Para un bloque más grande:

return (
  <main>
    {/*
    <Sidebar />
    <Filters />
    <Recommendations />
    */}
    <Content />
  </main>
)

Cómo comentar en TSX

TSX usa la misma sintaxis que JSX. Si escribes React con TypeScript, usa llaves más un comentario de bloque de JavaScript:

type Props = {
  title: string
}

export function Header({ title }: Props) {
  return (
    <header>
      {/* Comentario TSX */}
      <h1>{title}</h1>
    </header>
  )
}

Errores comunes

El error más común es intentar usar comentarios HTML dentro de JSX:

<!-- Incorrecto dentro de JSX -->

Otro error común es intentar usar // directamente dentro del marcado JSX:

return (
  <div>
    // Incorrecto dentro de JSX
    <p>Hola</p>
  </div>
)

// funciona en JavaScript normal fuera del JSX retornado, pero no directamente dentro del marcado:

// Esto sí funciona
const title = 'Hola'

return <h1>{title}</h1>

Respuesta rápida

Comentarios React dentro de JSX: {/* comentario */}
Comentarios JSX: {/* comentario */}
Comentarios TSX: {/* comentario */}
Comentar código React: {/* <Component /> */}