Dlaczego profesjonaliści używają Reacta

Pamiętasz kopiowanie menu?

Na poziomie 1 miałeś nagłówek z menu na każdej stronie. A kiedy dodawałeś nową stronę, musiałeś menu skopiować – i przy każdej zmianie poprawiać je wszędzie. Przy trzech stronach irytujące, przy trzydziestu – koszmar. I właśnie od tego bólu zaczyna się nasza historia.

Komponenty: napisz raz, używaj wszędzie

Profesjonaliści pomyśleli: a gdyby menu było jednym kawałkiem kodu, który po prostu „wstawia się” na każdą stronę? Zmienisz go w jednym miejscu – zmieni się wszędzie. Taki kawałek nazywa się komponent.

I nie tylko menu. Spójrz na swoją stronę oczami klocków:

• karta zawodnika (masz ją 4× – różni się tylko imieniem i pozycją),
• zdjęcie w galerii (10× – różni się tylko obrazkiem),
• przycisk (wszędzie – różni się tylko tekstem).

Strona profesjonalisty to nie stos plików HTML. To pudełko LEGO: garść własnych klocków (komponentów) złożonych w całą aplikację.

Czym jest React

React to narzędzie (biblioteka) do JavaScriptu, które właśnie takie składanie obsługuje. Wymyślili go w Facebooku, jest darmowy i stoi na nim ogromna część internetu: Facebook, Instagram, Netflix, Airbnb… Komponent w Reactcie wygląda tak – spokojnie, na razie tylko patrzymy:

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

A używa się go jak własnego tagu HTML:

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

Poznajesz to? To funkcja (z poziomu 2), która zwraca HTML. Kartę piszesz raz i używasz z różnymi danymi – jak pieczątka z wymiennymi literkami.

Druga supermoc: React zajmuje się przerysowywaniem

Na poziomie 2 pisałeś: „znajdź element, zmień mu tekst, dodaj klasę…”. W dużych aplikacjach takiego ręcznego przestawiania jest tyle, że można się w tym zgubić. React odwraca to:

Ty opisujesz, jak strona ma wyglądać przy konkretnych danych. Kiedy dane się zmienią, React sam wymyśli, co przerysować.

Wynik zmienia się z 0 na 1? Nie szukasz żadnego elementu – zmieniasz tylko liczbę, a React przerysowuje to, co trzeba. Zobaczysz to w akcji w lekcji o stanie (state).

Co czeka cię na tym poziomie

1. Zainstalujesz narzędzia profesjonalistów: terminal i Node.js (następna lekcja).
2. Założysz pierwszą aplikację React za pomocą Vite.
3. Nauczysz się komponentów, props i state.
4. Przepiszesz stronę z poziomu 1 do Reacta.
5. Zbudujesz własny serwer w Node.js i podłączysz do niego księgę gości.

Co wyniesiesz z tej lekcji

• Kopiowanie tego samego kodu w wiele miejsc to pułapka – odkryłeś to już sam na poziomie 1.
• Komponent to funkcja, która zwraca kawałek strony. Piszesz raz, używasz wiele razy z różnymi danymi.
• React przerysowuje stronę za ciebie: ty zmieniasz dane, on zmienia ekran.

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