Componenti: un kit da costruzione per il web

Costruisci i tuoi primi componenti personalizzati e assembla una pagina come con i LEGO.

Te lo mostro: il tuo primo componente personalizzato

Un componente è una funzione con la prima lettera maiuscola che restituisce JSX. È consuetudine metterne uno per file. Crea il file 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;

E usalo in 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 ... – “prendi in prestito un componente da un altro file.” Va di pari passo con export default.
<Header /> – un tag personalizzato! La maiuscola dice a React: questo non è HTML, è il mio componente.

Ricordi il dolore del Livello 1 – il menu copiato su ogni pagina? È sparito. L’intestazione esiste una volta sola, in un file.

Te lo mostro: un componente con dati intercambiabili (props)

Un timbro con lettere intercambiabili – i dati vengono passati a un componente come props (proprietà). File src/PlayerCard.jsx:

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

export default PlayerCard;

Usato in 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} />

Le props si scrivono come attributi HTML. Il testo va tra virgolette, numeri e JavaScript vanno in {}. Il componente le spacchetta in ({ name, position, number }) e le usa.

Te lo mostro: una lista da un array

Tre schede a mano – va bene. Ma se ce ne fossero venti? Metti i dati in un array e 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() scorre l’array e crea una scheda per ogni elemento. Aggiungere un giocatore = aggiungere una riga all’array. Nessun HTML da copiare. (key è solo un aiuto per React a distinguere le schede – metti qualcosa di unico.)

Ora tocca a te 💪

Costruisci un kit di componenti per il tuo progetto nel tuo progetto React:

Un componente Header con il nome del tuo sito web e il menu.
Un componente scheda con props adatte al tuo progetto: 🏫 TeacherCard (nome, materia) · 🙋 HobbyCard (nome, descrizione) · 🌍 TripCard (luogo, descrizione) · ⚽ PlayerCard (nome, posizione, numero).
Metti i dati in un array e renderizzali con .map() – almeno 4 elementi.
Copia gli stili delle tue schede dal vecchio sito web in src/App.css – la tua conoscenza del CSS resta valida!

✅

Controlla da solo: La pagina è assemblata dai tuoi tag (<Header />, <PlayerCard />…), le schede nascono da un array di dati, e aggiungere un elemento all’array aggiunge una scheda alla pagina. È esattamente così che si costruiscono le applicazioni vere.

Cosa porti via da questa lezione

Un componente = un file + una funzione con la maiuscola + export default; usato con import e <Tag />.
Props = dati intercambiabili di un componente: <Card name="Jake" number={1} />.
Le liste si disegnano con array.map() – i dati guidano lo schermo.