Componentes: una función que devuelve una pantalla

Abre cualquier aplicación real y cuenta las piezas pequeñas que se repiten: una insignia, un precio, una fila de una lista, una tarjeta de un catálogo. Cada una de esas piezas es un componente. Escribir uno no es tanto una habilidad nueva como una vieja con otra ropa.

En la ruta de lenguajes, una función era una caja con nombre: entran valores, sale un valor, y el nombre es la forma de llamarla. Un componente es exactamente esa caja con un cambio: lo que sale es una pieza de interfaz.

function totalPrice(price, count) {
  return price * count;
}

totalPrice(2.50, 4);

function Badge({ label }) {
  return <span className="badge">{label}</span>;
}

const view = <Badge label="New" />;La misma forma dos veces: entran números y sale un número, entran propiedades y salen elementos.

Ese es todo el truco. Un componente es una pieza de la interfaz con nombre. Le das un nombre, dices qué necesita y, a partir de ahí, el resto del programa puede pedir una insignia o una fila de precio sin saber cómo se dibuja ninguna de las dos.

Aquí hay un catálogo: tres productos, una sola forma de tarjeta. Escrita una vez, usada tres veces.

function ProductCard({ title, price, inStock }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{price}</p>
      {inStock ? <button>Add</button> : <p>Sold out</p>}
    </article>
  );
}

function Catalogue() {
  return (
    <section>
      <ProductCard title="Bread" price="2.50" inStock={true} />
      <ProductCard title="Tea" price="3.20" inStock={false} />
      <ProductCard title="Apples" price="1.80" inStock={true} />
    </section>
  );
}Una sola tarjeta, descrita una vez, usada tres veces con entradas distintas.

Las entradas se escriben como atributos y llegan juntas en un solo objeto llamado props. En este ejemplo la tarjeta recibe title, price y inStock, y no le importa de dónde vienen.

function Price({ amount }) {
  amount = amount + 1;
  return <p>{amount}</p>;
}

function Price({ amount }) {
  const [shown, setShown] = useState(amount);
  return <p>{shown}</p>;
}La segunda versión no es mejor porque sea más larga. Es mejor porque el número ahora pertenece al componente que lo cambia.

La alternativa honesta a los componentes es copiar y pegar, y para dos tarjetas está bien. La factura llega después. El diseñador pide una esquina redondeada en todas las tarjetas: ahora editas doce archivos. Una regla de precios cambia para incluir impuestos: arreglas nueve y te olvidas de tres, y el catálogo muestra dos precios distintos para el mismo producto. Un componente convierte cada uno de esos casos en una sola edición en un solo lugar, porque hay un único lugar que sabe cómo se ve una tarjeta.