Components: a building kit for the web

Show me: your first custom component

A component is a function with a capital first letter that returns JSX. It’s customary to put each one in its own file. Create the 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;

And use it 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 ... – “borrow a component from another file.” It pairs with export default.
• <Header /> – a custom tag! The capital letter tells React: this isn’t HTML, it’s my component.

Remember the pain from Level 1 – the menu copied onto every page? It just disappeared. The header exists once, in one file.

Show me: a component with swappable data (props)

A stamp with swappable letters – data gets passed to a component as props (properties). File src/PlayerCard.jsx:

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

export default PlayerCard;

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

Props are written like HTML attributes. Text goes in quotes, numbers and JavaScript go in {}. The component unpacks them in ({ name, position, number }) and uses them.

Show me: a list from an array

Three cards by hand – fine. But what if there are twenty? Put the data in an array and use .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() goes through the array and creates a card for every item. Adding a player = adding a row to the array. No HTML gets copied. (key is just a helper for React to tell the cards apart – put anything unique there.)

Your turn 💪

Build a component kit for your own project in your React project:

1. A Header component with your website’s name and menu.
2. A card component with props matching your project: 🏫 TeacherCard (name, subject) · 🙋 HobbyCard (name, description) · 🌍 TripCard (place, description) · ⚽ PlayerCard (name, position, number).
3. Put the data in an array and render it with .map() – at least 4 items.
4. Copy your card styles from your old website into src/App.css – your CSS knowledge carries over unchanged!

What to take away from this lesson

• A component = a file + a function with a capital letter + export default; used via import and <Tag />.
• Props = a component’s swappable data: <Card name="Jake" number={1} />.
• Lists are drawn with array.map() – data drives the screen.

© 2026 Ing. Martin Polak / AlgoRhino · Content usage terms