Komponente: gradbeni set za splet

Pokažem ti: tvoja prva lastna komponenta

Komponenta je funkcija z veliko začetnico, ki vrne JSX. Vsako običajno daš v svojo datoteko. Ustvari datoteko 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;

In jo uporabi v 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 ... – “izposodi komponento iz druge datoteke.” Parira se z export default.
• <Header /> – lastna oznaka! Velika začetnica pove Reactu: to ni HTML, to je moja komponenta.

Spomni se bolečine iz ravni 1 – meni kopiran na vsako stran? Pravkar je izginil. Glava obstaja enkrat, v eni datoteki.

Pokažem ti: komponenta z zamenljivimi podatki (props)

Gumba z zamenljivimi črkami – podatke komponenti posreduješ kot props (lastnosti). Datoteka src/PlayerCard.jsx:

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

export default PlayerCard;

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

Props pišeš kot HTML atribute. Besedilo v narekovajih, številke in JavaScript v {}. Komponenta jih razpakira v ({ name, position, number }) in uporabi.

Pokažem ti: seznam iz polja

Tri kartice ročno – v redu. Kaj če jih je dvajset? Podatke daj v polje in uporabi .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() gre skozi polje in za vsak element ustvari kartico. Dodajanje igralca = dodajanje vrstice v polje. HTML se ne kopira. (key je pomočnik za React, da loči kartice – daj tja kaj edinstvenega.)

Zdaj si na vrsti 💪

V React projektu zgradi komplet komponent za svoj projekt:

1. Komponenta Header z imenom spletne strani in menijem.
2. Komponenta kartice s props za tvoj projekt: 🏫 TeacherCard (ime, predmet) · 🙋 HobbyCard (ime, opis) · 🌍 TripCard (kraj, opis) · ⚽ PlayerCard (ime, pozicija, številka).
3. Podatke daj v polje in jih izriši z .map() – vsaj 4 postavke.
4. Stile kartic iz stare spletne strani prekopiraj v src/App.css – tvoje znanje CSS ostane enako!

Kaj si vzameš iz te lekcije

• Komponenta = datoteka + funkcija z veliko začetnico + export default; uporaba prek import in <Oznaka />.
• Props = zamenljivi podatki komponente: <Card name="Jake" number={1} />.
• Sezname rišeš z array.map() – podatki poganjajo zaslon.

© 2026 Ing. Martin Polak / AlgoRhino · Pogoji uporabe vsebine