Componentes: un kit de construcción para la web

Construye tus primeros componentes personalizados y monta una página con ellos como con LEGO.

Te lo muestro: tu primer componente personalizado

Un componente es una función con la primera letra en mayúscula que devuelve JSX. Es costumbre poner cada uno en su propio archivo. Crea el archivo src/Header.jsx:

function Header() {
  return (
    <header>
      <h1>FC Riverside</h1>
      <nav>
        <a href="#team">Team</a>
        <a href="#results">Results</a>
      </nav>
    </header>
  );
}

export default Header;

Y úsalo en src/App.jsx:

import Header from './Header.jsx';

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Welcome to our club's website!</p>
      </main>
    </div>
  );
}

export default App;

import ... from ... – “pido prestado un componente de otro archivo.” Va de la mano con export default.
<Header /> – ¡una etiqueta personalizada! La mayúscula le dice a React: esto no es HTML, es mi componente.

¿Recuerdas el dolor del Nivel 1 – el menú copiado en cada página? Acaba de desaparecer. La cabecera existe una vez, en un solo archivo.

Te lo muestro: un componente con datos intercambiables (props)

Un sello con letras intercambiables – los datos se pasan a un componente como props (properties). Archivo src/PlayerCard.jsx:

function PlayerCard({ name, position, number }) {
  return (
    <div className="card">
      <h3>{name} · #{number}</h3>
      <p>{position}</p>
    </div>
  );
}

export default PlayerCard;

Usado en App.jsx:

import PlayerCard from './PlayerCard.jsx';

<PlayerCard name="Jake" position="goalkeeper" number={1} />
<PlayerCard name="Alex" position="midfield" number={8} />
<PlayerCard name="Tom" position="forward" number={9} />

Las props se escriben como atributos HTML. El texto va entre comillas, los números y JavaScript van en {}. El componente las desempaqueta en ({ name, position, number }) y las usa.

Te lo muestro: una lista desde un array

Tres tarjetas a mano – bien. ¿Pero y si hay veinte? Mete los datos en un array y usa .map():

const players = [
  { name: "Jake", position: "goalkeeper", number: 1 },
  { name: "Matt", position: "defense", number: 4 },
  { name: "Alex", position: "midfield", number: 8 },
  { name: "Tom", position: "forward", number: 9 },
];

function App() {
  return (
    <div className="cards">
      {players.map((player) => (
        <PlayerCard
          key={player.number}
          name={player.name}
          position={player.position}
          number={player.number}
        />
      ))}
    </div>
  );
}

.map() recorre el array y crea una tarjeta por cada elemento. Añadir un jugador = añadir una fila al array. No se copia HTML. (key es solo una ayuda para que React distinga las tarjetas – pon algo único ahí.)

Ahora tú 💪

Construye un kit de componentes para tu propio proyecto en tu proyecto React:

Un componente Header con el nombre de tu web y el menú.
Un componente de tarjeta con props acordes a tu proyecto: 🏫 TeacherCard (name, subject) · 🙋 HobbyCard (name, description) · 🌍 TripCard (place, description) · ⚽ PlayerCard (name, position, number).
Mete los datos en un array y renderízalos con .map() – al menos 4 elementos.
Copia los estilos de tus tarjetas de tu web antigua en src/App.css – ¡tu conocimiento de CSS sigue valiendo igual!

✅

Compruébalo tú: La página está montada con tus propias etiquetas (<Header />, <PlayerCard />…), las tarjetas nacen de un array de datos, y añadir un elemento al array añade una tarjeta a la página. Así se construyen las aplicaciones de verdad.

Lo que te llevas de esta lección

Un componente = un archivo + una función con mayúscula + export default; se usa con import y <Tag />.
Props = datos intercambiables de un componente: <Card name="Jake" number={1} />.
Las listas se dibujan con array.map() – los datos mueven la pantalla.