Komponentit: rakennussarja verkkoon

Näytän sinulle: ensimmäinen oma komponenttisi

Komponentti on funktio isolla alkukirjaimella joka palauttaa JSX:ää. On tapana laittaa jokainen omaan tiedostoonsa. Luo tiedosto 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;

Ja käytä sitä src/App.jsx:ssä:

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 ... – “lainaa komponentti toisesta tiedostosta.” Se pari export default:n kanssa.
• <Header /> – oma tagi! Iso alkukirjain kertoo Reactille: tämä ei ole HTML, vaan komponenttini.

Muista tason 1 tuska – valikko kopioitu jokaiselle sivulle? Se katosi juuri. Header on olemassa kerran, yhdessä tiedostossa.

Näytän sinulle: komponentti vaihdettavalla datalla (props)

Leima vaihdettavilla kirjaimilla – data välitetään komponentille propseina (properties). Tiedosto src/PlayerCard.jsx:

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

export default PlayerCard;

Käytetään App.jsx:ssä:

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

Propsit kirjoitetaan kuin HTML-attribuutit. Teksti lainausmerkeissä, numerot ja JavaScript {}:ssä. Komponentti purkaa ne ({ name, position, number }):ssa ja käyttää niitä.

Näytän sinulle: lista taulukosta

Kolme korttia käsin – ok. Mutta entä jos niitä on kaksikymmentä? Laita data taulukkoon ja käytä .map():ia:

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() käy taulukon läpi ja luo kortin jokaiselle kohdalle. Pelaajan lisääminen = rivin lisääminen taulukkoon. HTML:ää ei kopioida. (key on vain apuri Reactille erottamaan kortit – laita sinne jotain uniikkia.)

Nyt sinun vuorosi 💪

Rakenna komponenttisarja omaan projektiisi React-projektissasi:

1. Header-komponentti verkkosivusi nimellä ja valikolla.
2. Korttikomponentti propseilla jotka sopivat projektiisi: 🏫 TeacherCard (nimi, aine) · 🙋 HobbyCard (nimi, kuvaus) · 🌍 TripCard (paikka, kuvaus) · ⚽ PlayerCard (nimi, paikka, numero).
3. Laita data taulukkoon ja renderöi .map():lla – vähintään 4 kohdetta.
4. Kopioi korttityylisi vanhasta verkkosivustasi src/App.css:ään – CSS-taitosi siirtyvät muuttumattomina!

Mitä opit tästä oppitunnista

• Komponentti = tiedosto + funktio isolla alkukirjaimella + export default; käytetään import:illa ja <Tag />:lla.
• Props = komponentin vaihdettava data: <Card name="Jake" number={1} />.
• Listat piirretään array.map():lla – data ohjaa näyttöä.

© 2026 Ing. Martin Polak / AlgoRhino · Sisällön käyttöehdot