Komponente: konstruktor za web

Pokazat ću ti: tvoja prva prilagođena komponenta

Komponenta je funkcija s velikim početnim slovom koja vraća JSX. Uobičajeno je svaku staviti u vlastitu datoteku. Napravi datoteku 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;

I koristi je u 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 ... – “posudi komponentu iz druge datoteke.” Ide uz export default.
• <Header /> – prilagođeni tag! Veliko slovo govori Reactu: ovo nije HTML, to je moja komponenta.

Sjeti se muke iz razine 1 – izbornik kopiran na svaku stranicu? Upravo je nestao. Zaglavlje postoji jednom, u jednoj datoteci.

Pokazat ću ti: komponenta sa zamjenjivim podacima (props)

Pečat sa zamjenjivim slovima – podaci se prosljeđuju komponenti kao props (properties). Datoteka src/PlayerCard.jsx:

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

export default PlayerCard;

Korištenje u 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 se pišu kao HTML atributi. Tekst ide u navodnike, brojevi i JavaScript u {}. Komponenta ih raspakira u ({ name, position, number }) i koristi.

Pokazat ću ti: popis iz niza

Tri kartice ručno – u redu. Ali što ako ih ima dvadeset? Stavi podatke u niz i koristi .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() prolazi kroz niz i stvara karticu za svaku stavku. Dodavanje igrača = dodavanje retka u niz. HTML se ne kopira. (key je samo pomoćnik Reactu da razlikuje kartice – stavi bilo što jedinstveno.)

Sad si ti na redu 💪

Izgradi komplet komponenti za svoj projekt u React projektu:

1. Komponenta Header s nazivom web stranice i izbornikom.
2. Komponenta kartice s propsima za tvoj projekt: 🏫 TeacherCard (name, subject) · 🙋 HobbyCard (name, description) · 🌍 TripCard (place, description) · ⚽ PlayerCard (name, position, number).
3. Stavi podatke u niz i prikaži ih s .map() – barem 4 stavke.
4. Kopiraj stilove kartica iz stare web stranice u src/App.css – tvoje CSS znanje prenosi se nepromijenjeno!

Što ćeš ponijeti iz ove lekcije

• Komponenta = datoteka + funkcija s velikim slovom + export default; koristi se preko import i <Tag />.
• Props = zamjenjivi podaci komponente: <Card name="Jake" number={1} />.
• Popisi se crtaju s array.map() – podaci pokreću ekran.

© 2026 Ing. Martin Polak / AlgoRhino · Uvjeti korištenja sadržaja