Komponenty: zestaw klocków do webu

Pokażę ci: twój pierwszy własny komponent

Komponent to funkcja z dużą literą na początku, która zwraca JSX. Zwyczajowo każdy ląduje we własnym pliku. Utwórz plik 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 użyj go w 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 ... – „pożycz komponent z innego pliku.” Idzie w parze z export default.
• <Header /> – własny tag! Duża litera mówi Reactowi: to nie HTML, to mój komponent.

Pamiętasz ból z poziomu 1 – menu kopiowane na każdą stronę? Właśnie zniknął. Nagłówek istnieje raz, w jednym pliku.

Pokażę ci: komponent z wymiennymi danymi (props)

Pieczątka z wymiennymi literkami – dane przekazuje się do komponentu jako props (properties, właściwości). Plik src/PlayerCard.jsx:

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

export default PlayerCard;

Użycie w 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 piszesz jak atrybuty HTML. Tekst w cudzysłowach, liczby i JavaScript w {}. Komponent rozpakowuje je w ({ name, position, number }) i używa.

Pokażę ci: lista z tablicy

Trzy karty ręcznie – okej. A co, jeśli jest ich dwadzieścia? Wrzuć dane do tablicy i użyj .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() przechodzi po tablicy i tworzy kartę dla każdego elementu. Dodać zawodnika = dodać wiersz do tablicy. Żaden HTML się nie kopiuje. (key to tylko pomocnik dla Reacta, żeby karty odróżnić – daj tam coś unikalnego.)

Teraz ty 💪

Zbuduj zestaw komponentów do swojego projektu w aplikacji React:

1. Komponent Header z nazwą twojej strony i menu.
2. Komponent karty z propsami pasującymi do projektu: 🏫 TeacherCard (name, subject) · 🙋 HobbyCard (name, description) · 🌍 TripCard (place, description) · ⚽ PlayerCard (name, position, number).
3. Wrzuć dane do tablicy i wyrenderuj je przez .map() – co najmniej 4 elementy.
4. Skopiuj style kart ze starej strony do src/App.css – twoja wiedza o CSS przechodzi bez zmian!

Co wyniesiesz z tej lekcji

• Komponent = plik + funkcja z dużą literą + export default; używasz przez import i <Tag />.
• Props = wymienne dane komponentu: <Card name="Jake" number={1} />.
• Listy rysujesz przez array.map() – dane sterują ekranem.

© 2026 Ing. Martin Polak / AlgoRhino · Warunki korzystania z treści