Why the pros use React

Remember copying that menu?

In Level 1, you had a header with a menu on every page. And whenever you added a new page, you had to copy the menu – and fix it everywhere with every change. Annoying with three pages, a nightmare with thirty. And that pain is exactly where our story begins.

Components: write once, use everywhere

The pros thought: what if the menu were one piece of code that just gets “inserted” onto every page? Change it in one place – it changes everywhere. A piece like that is called a component.

And it’s not just the menu. Look at your website through the eyes of a building-block set:

• a player card (you have it 4× – and it only differs by name and position),
• a photo in the gallery (10× – only the image differs),
• a button (everywhere – only the text differs).

A pro’s website isn’t a pile of HTML files. It’s a box of LEGO: a handful of custom blocks (components) assembled into a whole application.

What React is

React is a tool (a library) for JavaScript that handles this kind of assembly. It was invented at Facebook, it’s free, and a huge part of the internet is built on it: Facebook, Instagram, Netflix, Airbnb… A component in React looks like this – don’t worry, we’re just looking for now:

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

And it’s used like a custom HTML tag:

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

Do you recognize this? It’s a function (from Level 2) that returns HTML. The card is written once and used with different data – like a rubber stamp with swappable letters.

Superpower number two: React handles the redrawing

In Level 2 you wrote: “find the element, change its text, add a class…” In big applications, there’s so much of this manual rearranging that you can get lost in it. React flips it around:

You describe what the page should look like for given data. When the data changes, React figures out on its own what to redraw.

The score changes from 0 to 1? You don’t look for any element – you just change the number, and React redraws whatever’s needed. You’ll see it in action in the lesson about state.

What’s coming up in this level

1. You’ll install pro tools: the terminal and Node.js (next lesson).
2. You’ll set up your first React app using Vite.
3. You’ll learn components, props, and state.
4. You’ll rebuild your Level 1 website in React.
5. You’ll build your own Node.js server and connect a guestbook to it.

What to take away from this lesson

• Copying the same code to multiple places is a trap – you already discovered that back in Level 1 on your own.
• A component is a function that returns a piece of a page. Write it once, use it many times with different data.
• React redraws the page for you: you change the data, it changes the screen.

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