JSX y componentes

Aprende qué es JSX, cómo se escribe correctamente y cómo crear componentes reutilizables con React.

JSX es la sintaxis que mezcla JavaScript y marcado para describir UI de forma legible.

No es HTML real: se transforma a llamadas de JavaScript.

const element = <h1>Hola</h1>;

Eso termina convertido en una representación que React entiende.

Reglas básicas de JSX

Un único nodo raíz

function App() {
  return (
    <section>
      <h1>Tienda</h1>
      <p>Bienvenido</p>
    </section>
  );
}

Si no quieres un nodo extra, usa fragmentos:

<>
  <h1>Tienda</h1>
  <p>Bienvenido</p>
</>

Expresiones con llaves

function Greeting() {
  const name = 'Ana';
  return <h1>Hola, {name}</h1>;
}

Dentro de {} puedes poner expresiones, no sentencias como if o for.

Algunos atributos cambian

<label htmlFor="email">Email</label>
<div className="card">Contenido</div>

React usa className y htmlFor porque class y for tienen otro significado en JavaScript.

Qué es un componente

Un componente es una función con nombre en mayúscula que devuelve JSX.

function UserCard() {
  return <article>Usuario</article>;
}

Luego lo usas como una etiqueta:

<UserCard />

Cuándo separar un componente

Sepáralo cuando:

  • representa una pieza reconocible de la UI
  • se repite
  • tiene responsabilidad propia
  • mejora la lectura

No lo separes solo por obsesión con “todo tiene que ser componente”.

Un buen primer criterio

Si puedes ponerle un nombre claro a un bloque de interfaz, probablemente merece ser componente.

Ejemplos:

  • Modal
  • Avatar
  • SearchBar
  • CartItem

En la siguiente lección vemos cómo estos componentes reciben datos mediante props.