Wielka przebudowa: twoja strona w Reactcie

Przepiszesz stronę z poziomu 1 do Reacta. Ta sama strona, trzeci raz – tym razem jak profesjonalista.

Twoja misja

Weźmiesz stronę z poziomów 1–2 i zbudujesz ją od nowa w Reactcie. Brzmi jak krok wstecz? Nie – to najlepszy trening: treść i wygląd już masz ogarnięte, więc możesz skupić się czysto na nowej technice. A na końcu zobaczysz czarno na białym, czemu profesjonalistom to się opłaca.

Plan przebudowy

Podziel stronę na komponenty. Weź kartkę i ołówek (serio!) i naszkicuj stronę jako pudełka: Header, Gallery, Quiz, Footer… Każde pudełko = jeden plik w src/.
Przenieś HTML do komponentów. Kopiuj kawałek po kawałku ze starych plików .html do JSX. Pilnuj znanych różnic: class → className, każdy komponent zwraca jeden element-opakowanie. Skopiuj obrazki do folderu public/ w projekcie Vite – wtedy ścieżki typu /images/team.jpg działają bez zmian.
Przenieś CSS. Skopiuj zawartość style.css do src/App.css. Powinno działać prawie bez zmian – CSS to nadal CSS.
Wyciągnij dane do tablic. Karty, wyniki, zdjęcia w galerii – wszystko, co się powtarza, zamień na tablicę obiektów + .map(), tak jak nauczyłeś się w lekcji o komponentach.

Przepisz zaklęcia z poziomu 2 na state. Oto tabela przeliczeniowa:

Poziom 2 (zwykły JavaScript)	React
`getElementById` + `textContent`	state + `{value}` w JSX
`addEventListener("click", ...)`	`onClick={...}`
`classList.toggle` + CSS `.hidden`	boolean state + `{condition && (...)}`
licznik ze zmienną	`useState` z liczbą

Pokażę ci: ciemny tryb po reactowemu

Przepiszmy razem jedno zaklęcie, żebyś zobaczył przeliczenie w akcji:

import { useState } from 'react';
import Header from './Header.jsx';
import Gallery from './Gallery.jsx';

function App() {
  const [dark, setDark] = useState(
    localStorage.getItem("mode") === "dark"
  );

  function toggleMode() {
    const newMode = !dark;
    setDark(newMode);
    localStorage.setItem("mode", newMode ? "dark" : "light");
  }

  return (
    <div className={dark ? "dark" : ""}>
      <Header onToggle={toggleMode} dark={dark} />
      <Gallery />
    </div>
  );
}

export default App;

A w Header.jsx przycisk dostaje funkcję jako prop:

function Header({ onToggle, dark }) {
  return (
    <header>
      <h1>My website</h1>
      <button onClick={onToggle}>{dark ? "☀️" : "🌙"}</button>
    </header>
  );
}

Ostatnia nowość: prop też może być funkcją. App posiada state i pożycza dziecku przycisk do przełączania. Nazywa się to „state żyje na górze” i to najczęstszy wzorzec w Reactcie.

Lista kontrolna przebudowy

Strona podzielona na co najmniej 4 komponenty w osobnych plikach
Powtarzające się elementy (karty, zdjęcia…) rodzą się z tablicy przez .map()
Co najmniej dwa interaktywne miejsca działają na useState
Ciemny tryb działa i jest zapamiętany (localStorage)
Brak błędów w konsoli
Nigdzie w kodzie nie ma getElementById 😉

💡

Utknąć to część gry. Ta lekcja to maraton, nie sprint – śmiało rozłóż ją na kilka dni. Kiedy utkniesz: konsola (F12), komunikat błędu z Vite i porównanie z przykładami z poprzednich lekcji. Dokładnie tak debuguje profesjonalista.

✅

Sprawdź się: Twoja strona działa na localhost i wygląda (prawie) tak samo jak wcześniej – ale w środku składa się z komponentów, danych i state. Spróbuj teraz dodać jedną kartę do tablicy danych i zobacz, jak mało pracy to bierze. To jest cały powód istnienia Reacta.

Co wyniesiesz z tej lekcji

Przebudowa: podziel na komponenty → przenieś HTML i CSS → dane do tablic → zaklęcia w state.
Prop też może być funkcją – rodzic pożycza dzieciom przyciski do sterowania swoim state.
Ten sam efekt, czystsza struktura: mniej kopiowania, łatwiejsze zmiany. To postęp, który naprawdę widać.